<template>
    <div>
        <el-card>
            <el-form
                    :model="searchForm"
                    label-width="100px"
                    @submit.prevent="fnResetPaginationTransfer"
            >
                <el-row>
                    <el-col :span="5">
                        <el-form-item label="车牌号" prop="PLATE_NUMBER">
                            <el-input v-model="searchForm.PLATE_NUMBER" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="车架号" prop="VIN">
                            <el-input v-model="searchForm.VIN" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="自编号" prop="NUM">
                            <el-input v-model="searchForm.NUM" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="归属部门" prop="DEPARTMENT_NAME">
                            <el-input v-model="searchForm.DEPARTMENT_NAME" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="3">
                        <el-form-item label-width="10px">
                            <el-button type="primary" native-type="submit">搜索</el-button>
                            <el-button native-type="reset" @click="fnResetPaginationTransfer">
                                重置
                            </el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="1">
                        <el-form-item label-width="10px" class="end">
                            <el-button @click="fnExport">导出</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
        <layout-card>
            <layout-table
                    :data="list"
                    @get-data="fnGetDataTransfer"
                    v-model:pagination="pagination"
                    ref="tableRef"
                    row-key="HIDDEN_ID"
            >
                <el-table-column reserve-selection type="selection" width="55" />
                <el-table-column label="序号" width="60">
                    <template #default="{ $index }">
                        {{ serialNumber(pagination, $index) }}
                    </template>
                </el-table-column>
                <el-table-column prop="NUM" label="自编号" width="150"/>
                <el-table-column prop="PLATE_NUMBER" label="车牌号" width="150"/>
                <el-table-column prop="CONTACTS" label="联系人" width="150"/>
                <el-table-column prop="CONTACT_PHONE" label="联系电话" width="150"/>
                <el-table-column prop="TRAILER_TYPE" label="挂车类型" width="150"/>
                <el-table-column prop="INITIAL_REGISTRATION_DATE" label="初登日期" width="150"/>
                <el-table-column prop="DUE_DATE" label="到期日期" width="150"/>
                <el-table-column prop="DEPARTMENT_NAME" label="归属部门" width="150"/>
                <el-table-column label="操作" width="150">
                    <template #default="{ row }">
                        <el-button
                                type="primary"
                                text
                                link
                                @click="router.push({path: '/enterprise_management/basics_info_management/freight_trailer/view',query: { FREIGHTTRAILER_ID: row.FREIGHTTRAILER_ID },})">
                            查看
                        </el-button>
                        <el-button
                                type="primary"
                                text
                                link
                                @click="router.push({path: '/enterprise_management/basics_info_management/freight_trailer/edit',query: { FREIGHTTRAILER_ID: row.FREIGHTTRAILER_ID },})">
                            编辑
                        </el-button>
                        <el-button
                                type="primary"
                                text
                                link
                                @click="fnDelete(row.FREIGHTTRAILER_ID)"
                        >
                            删除
                        </el-button>
                    </template>
                </el-table-column>
                <template #button>
                    <el-button
                            v-if="buttonJurisdiction.add"
                            type="primary"
                            @click="router.push({ path: '/enterprise_management/basics_info_management/freight_trailer/add' })">
                        新增
                    </el-button>
                </template>
            </layout-table>
        </layout-card>
        <export-excel
                v-model:visible="data.exportExcelDialog.visible"
                :search-form="searchForm"
                :ids="data.exportExcelDialog.ids"
        />
    </div>
</template>

<script setup>
    import { useRouter } from "vue-router";
    import { serialNumber } from "@/assets/js/utils";
    import useButtonJurisdiction from "@/assets/js/useButtonJurisdiction.js";
    import useListData from "@/assets/js/useListData.js";
    import { getFreightTrailerList ,setFreightTrailerDelete} from "@/request/enterprise_management.js";
    import ExportExcel from "./components/export_excel.vue";
    import { reactive } from "vue";
    import { debounce } from "throttle-debounce";
    import { ElMessageBox ,ElMessage} from "element-plus";
    const router = useRouter();
    const data = reactive({
        exportExcelDialog: {
            visible: false,
            ids: [],
        },
    });
    const { list, pagination, searchForm, fnGetData, fnResetPagination, tableRef } =
        useListData(getFreightTrailerList);
    const fnGetDataTransfer = () => {
        fnGetData({
            PLATE_NUMBER: searchForm.value.PLATE_NUMBER,
            VIN: searchForm.value.VIN,
            NUM: searchForm.value.NUM,
            DEPARTMENT_NAME: searchForm.value.DEPARTMENT_NAME,
        });
    };
    const fnResetPaginationTransfer = () => {
        fnResetPagination({
            PLATE_NUMBER: searchForm.value.PLATE_NUMBER,
            VIN: searchForm.value.VIN,
            NUM: searchForm.value.NUM,
            DEPARTMENT_NAME: searchForm.value.DEPARTMENT_NAME,
        });
    };
    const fnDelete = debounce(
        1000,
        async (FREIGHTTRAILER_ID) => {
            await ElMessageBox.confirm("确定要删除吗？", { type: "warning" });
            await setFreightTrailerDelete({ FREIGHTTRAILER_ID });
            ElMessage.success("删除成功");
            fnResetPaginationTransfer();
        },
        { atBegin: true }
    );
    const buttonJurisdiction = await useButtonJurisdiction("hidden");
    const fnExport = () => {
        const selectionData = tableRef.value.getSelectionRows();
        data.exportExcelDialog.ids = selectionData.map((item) => item.FREIGHTTRAILER_ID);
        data.exportExcelDialog.visible = true;
    };
</script>

<style scoped></style>
