<template>
    <div>
        <el-card>
            <el-form
                    :model="searchForm"
                    label-width="100px"
                    @submit.prevent="fnResetPaginationTransfer"
            >
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="车牌号" prop="PLATE_NUMBER">
                            <el-input v-model="searchForm.PLATE_NUMBER" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="车主业户" prop="CAR_OWNERS">
                            <el-input v-model="searchForm.CAR_OWNERS" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="登记人" prop="REGISTRANT">
                            <el-input v-model="searchForm.REGISTRANT" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="到期日期" prop="DUE_DATE">
                            <el-date-picker
                                    v-model="searchForm.DUE_DATE"
                                    value-format="YYYY-MM-DD"
                                    format="YYYY-MM-DD"
                                    type="date"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="运营车型" prop="VEHICLE_MODEL">
                            <el-select v-model="searchForm.VEHICLE_MODEL">
                                <el-option
                                        v-for="item in OPERATING_VEHICLE_TYPE_LIST"
                                        :key="item.ID"
                                        :label="item.NAME"
                                        :value="item.ID"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="到期状态" prop="DUE_DATE_TYPE">
                            <el-select v-model="searchForm.DUE_DATE_TYPE">
                                <el-option
                                        v-for="item in DUE_STATUS_LIST"
                                        :key="item.ID"
                                        :label="item.NAME"
                                        :value="item.ID"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="提醒状态" prop="REMINDER_STATUS">
                            <el-select v-model="searchForm.REMINDER_STATUS">
                                <el-option
                                        v-for="item in REMINDER_STATUS_LIST"
                                        :key="item.ID"
                                        :label="item.NAME"
                                        :value="item.ID"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <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="2">
                        <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="INSPECTANNUALLY_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="VEHICLE_MODEL" label="运营车型" width="150"/>
                <el-table-column prop="PLATE_NUMBER" label="车牌号" width="150"/>
                <el-table-column prop="CAR_OWNERS" label="车主业户" width="150"/>
                <el-table-column prop="TELEPHONE" label="联系电话" width="150"/>
                <el-table-column prop="PROCESSING_DATE" label="办理日期" width="150"/>
                <el-table-column prop="ANNUAL_INSPECTION_CYCLE_NAME" label="年检周期" width="150"/>
                <el-table-column prop="DUE_DATE" label="到期日期" width="150"/>
                <el-table-column prop="REGISTRANT" label="登记人" width="150"/>
                <!--<el-table-column prop="CONTACTS" label="经营企业" width="150"/>-->
                <el-table-column prop="REMINDER_STATUS" label="提醒状态" width="150">
                    <template #default="{ row }">
                        <span v-if="row.REMINDER_STATUS==='1'">开启</span>
                        <span v-else-if="row.REMINDER_STATUS==='0'">关闭</span>
                    </template>
                </el-table-column>
                <el-table-column prop="DUE_DATE_TYPE" label="到期状态" width="150">
                    <template #default="{ row }">
                        <span v-if="row.DUE_DATE_TYPE===1">未到期</span>
                        <span v-else-if="row.DUE_DATE_TYPE===0">已到期</span>
                        <span v-else-if="row.DUE_DATE_TYPE===2">即将到期</span>
                    </template>
                </el-table-column>
                <el-table-column prop="ARCHIVES_TYPE" label="档案状态" width="150"/>
                <el-table-column prop="CREATTIME" label="创建时间" width="150"/>
                <el-table-column label="操作" width="250">
                    <template #default="{ row }">
                        <el-button
                                type="primary"
                                text
                                link
                                @click="router.push({path: '/mechanical_files/inspect_annually/view',query: { INSPECTANNUALLY_ID: row.INSPECTANNUALLY_ID },})">
                            查看
                        </el-button>
                        <el-button
                                type="primary"
                                text
                                link
                                @click="router.push({path: '/mechanical_files/inspect_annually/edit',query: { INSPECTANNUALLY_ID: row.INSPECTANNUALLY_ID },})">
                            编辑
                        </el-button>
                        <el-button
                                type="primary"
                                text
                                link
                                @click="fnDelete(row.INSPECTANNUALLY_ID)">
                            删除
                        </el-button>
                        <el-button
                                v-if="row.REMINDER_STATUS==='0'"
                                type="primary"
                                text
                                link
                                @click="fnStatusChange(row.INSPECTANNUALLY_ID,'1')">
                            开启
                        </el-button>
                        <el-button
                                v-if="row.REMINDER_STATUS==='1'"
                                type="primary"
                                text
                                link
                                @click="fnStatusChange(row.INSPECTANNUALLY_ID,'0')">
                            关闭
                        </el-button>
                    </template>
                </el-table-column>
                <template #button>
                    <el-button
                            v-if="buttonJurisdiction.add"
                            type="primary"
                            @click="router.push({ path: '/mechanical_files/inspect_annually/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 { getInspectAnnuallyList ,setInspectAnnuallyDelete,setInspectAnnuallyEdit2} from "@/request/mechanical_files.js";
    import ExportExcel from "./components/export_excel.vue";
    import { reactive } from "vue";
    import { debounce } from "throttle-debounce";
    import { ElMessageBox ,ElMessage} from "element-plus";
    import {OPERATING_VEHICLE_TYPE_LIST,DUE_STATUS_LIST,REMINDER_STATUS_LIST} from "@/assets/js/constant.js"
    const router = useRouter();
    const data = reactive({
        exportExcelDialog: {
            visible: false,
            ids: [],
        },
    });
    const { list, pagination, searchForm, fnGetData, fnResetPagination, tableRef } =
        useListData(getInspectAnnuallyList);
    const fnGetDataTransfer = () => {
        fnGetData({
            PLATE_NUMBER: searchForm.value.PLATE_NUMBER,
            CAR_OWNERS: searchForm.value.CAR_OWNERS,
            REGISTRANT: searchForm.value.REGISTRANT,
            DUE_DATE: searchForm.value.DUE_DATE,
            VEHICLE_MODEL: searchForm.value.VEHICLE_MODEL,
            DUE_DATE_TYPE: searchForm.value.DUE_DATE_TYPE,
            REMINDER_STATUS:searchForm.value.REMINDER_STATUS
        });
    };
    const fnResetPaginationTransfer = () => {
        fnResetPagination({
            PLATE_NUMBER: searchForm.value.PLATE_NUMBER,
            CAR_OWNERS: searchForm.value.CAR_OWNERS,
            REGISTRANT: searchForm.value.REGISTRANT,
            DUE_DATE: searchForm.value.DUE_DATE,
            VEHICLE_MODEL: searchForm.value.VEHICLE_MODEL,
            DUE_DATE_TYPE: searchForm.value.DUE_DATE_TYPE,
            REMINDER_STATUS:searchForm.value.REMINDER_STATUS
        });
    };
    const fnDelete = debounce(
        1000,
        async (INSPECTANNUALLY_ID) => {
            await ElMessageBox.confirm("确定要删除吗？", { type: "warning" });
            await setInspectAnnuallyDelete({ INSPECTANNUALLY_ID });
            ElMessage.success("删除成功");
            fnResetPaginationTransfer();
        },
        { atBegin: true }
    );
    const fnStatusChange = debounce(
        1000,
        async (INSPECTANNUALLY_ID,REMINDER_STATUS) => {
            const msg = REMINDER_STATUS==='0'?'关闭':'开启'
            await ElMessageBox.confirm("确定要"+msg+"提醒吗？", { type: "warning" });
            await setInspectAnnuallyEdit2({ INSPECTANNUALLY_ID ,REMINDER_STATUS});
            ElMessage.success(msg+"成功");
            fnResetPaginationTransfer();
        },
        { atBegin: true }
    );
    const buttonJurisdiction = await useButtonJurisdiction("hidden");
    const fnExport = () => {
        const selectionData = tableRef.value.getSelectionRows();
        data.exportExcelDialog.ids = selectionData.map((item) => item.INSPECTANNUALLY_ID);
        data.exportExcelDialog.visible = true;
    };
</script>

<style scoped></style>
