<template>
    <div>
        <div v-show="!$route.path.includes('vehicleModelDetail')">
            <search-layout :needBox="true">
                <template slot="searchItem1">
                    <span class="label">车辆模型标识</span>
                    <el-input v-model="searchParams.modelLabel" size="small" clearable placeholder="请输入" maxlength="60"
                        @keyup.enter.native="doSearch(false)">
                    </el-input>
                </template>
                <template slot="searchItem2">
                    <span class="label">车辆类型</span>
                    <el-input v-model="searchParams.vehicleType" size="small" clearable placeholder="请输入" maxlength="60"
                        @keyup.enter.native="doSearch(false)">
                    </el-input>
                </template>

                <template slot="searchBtn1">
                    <el-button type="primary" @click="doSearch(false)">查询</el-button>
                </template>
                <template slot="searchBtn2">
                    <el-button type="primary" @click="doReset">重置</el-button>
                </template>
            </search-layout>

            <div class="btnsPanel">
                <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addOne">新增</el-button>
            </div>

            <tableList ref="table" style="margin: 0 30px" :columns="columns" :getDataWay="getDataWay"
                :pagination="pagination" index>
                <el-table-column label="操作" slot="cgInfos" align="center">
                    <template v-slot="scope">
                        <i @click="editRow(scope.row)" class="el-icon-edit-outline elIcon" title="编辑"></i>
                        <i @click="delRow(scope.row.id)" class="el-icon-delete elIcon" title="删除"></i>
                    </template>
                </el-table-column>
            </tableList>
        </div>

        <router-view v-show="$route.path.includes('vehicleModelDetail')"></router-view>
    </div>
</template>

<script>
import searchLayout from "@/components/grid/searchLayout";
import tableList from "@/components/grid/TableList";

export default {
    name: "vehicleModelManagement", // 车辆设置列表
    components: { searchLayout, tableList },
    data() {
        return {
            searchParams: {
                //搜索参数
                modelLabel: "", // 车辆模型标识
                vehicleType: "", // 车辆类型
            },
            columns: [
                {
                    label: "车辆模型标识",
                    prop: "modelLabel",
                },
                {
                    label: "车辆类型",
                    prop: "vehicleType",
                },
                {
                    label: "车辆型号",
                    prop: "vehicleModel",
                },
                {
                    label: "车辆颜色",
                    prop: "vehicleColour",
                },
                {
                    label: "创建时间",
                    prop: "createTime",
                },
                {
                    label: "操作",
                    prop: "cgInfos",
                    template: true,
                },
            ],
            pagination: {
                //分页使用
                currentPage: 1,
                pageSize: 10,
                position: "right",
                pageSizes: [10, 30, 50, 100, 200],
                layout: "sizes, total, prev, pager, next, jumper",
            },
            getDataWay: {
                //加载表格数据
                dataType: "url",
                type: "post",
                // firstRequest: false,
                data: this.$api.systemManagement.getVehicleTempPageList,
                param: {},
            },
        };
    },

    watch: {
        $route(to, from) {
            if (to.name === "vehicleModelManagement") {
                this.$nextTick(() => {
                    this.doSearch(true);
                });
            }
        },
    },

    methods: {
        // isBack为解决从详情回退时列表在当前页刷新
        doSearch(isBack = false) {
            let pageMap = {
                ...this.searchParams,
                resetPageNum: !isBack ? false : (this.pagination.currentPage || 1),
            };

            if (!isBack) this.pagination.currentPage = 1;

            this.refreshList(pageMap);
        },
        //刷新table
        refreshList(param) {
            param
                ? this.$refs["table"].loadData(param)
                : this.$refs["table"].loadData();
        },
        doReset() {
            this.searchParams = {
                modelLabel: "",
                vehicleType: "",
            };
            this.doSearch();
        },
        addOne() {
            this.$store.commit("getTabname", "vehicleModelDetailTabName", "");
            localStorage.setItem("vehicleModelDetailTabName", "");

            this.$router.push({ path: "/vehicleModelDetail" });
        },
        editRow(row) {
            this.$store.commit("getTabname", "vehicleModelDetailTabName", row.modelLabel);
            localStorage.setItem("vehicleModelDetailTabName", row.modelLabel);

            this.$router.push({
                path: "/vehicleModelDetail",
                query: { id: row.id },
            });
        },
        delRow(id) {
            this.$confirm("确认是否删除？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                this.$axios({
                    method: "post",
                    url: this.$api.systemManagement.delVehicleTempById,
                    data: { id },
                }).then((res) => {
                    if (res.code == 200) {
                        this.$message.success("删除成功");
                    } else {
                        this.$message.error(res.message || "删除失败");
                    }
                    this.doSearch();
                });
            });
        },
    },

    mounted() { },
};
</script>

<style lang='less' scoped>
.btnsPanel {
    margin: 45px 40px 15px;
    text-align: right;
}
</style>