<template>
    <Table
        url="/ranger/inspection/api/v1/routes"
        rowKey="routeId"
        :selected.sync="selected"
        addBtn
        :buttons="buttons"
        ref="table"
        :scroll="{ x: true }"
    >
        <template #search="{ query }">
            <MoreItem label="状态">
                <a-select v-model="query.routeState" style="width: 100%">
                    <a-select-option key="VALID" value="VALID">有效</a-select-option>
                    <a-select-option key="INVALID" value="INVALID">无效</a-select-option>
                </a-select>
            </MoreItem>
            <MoreItem label="地区">
                <UrlSelect
                    v-model="query.regionId"
                    url="/ranger/inspection/api/v1/region/list"
                    labelFiled="regionName"
                    valueFiled="regionId"
                    placeholder="选择地区"
                />
            </MoreItem>
            <MoreItem label="专业">
                <UrlSelect
                    v-model="query.specialityId"
                    :url="
                        query.regionId
                            ? `/ranger/inspection/api/v1/specialities/valid/regions/${query.regionId}/list`
                            : ''
                    "
                    labelFiled="specialityName"
                    valueFiled="specialityId"
                    placeholder="选择专业"
                />
            </MoreItem>
            <MoreItem label="线路名称">
                <a-input v-model="query.inputValue" placeholder="请输入" />
            </MoreItem>
        </template>

        <template #operation>
            <a-button type="primary" @click="onImportFlie">导入</a-button>
            <a-button @click="download" :disabled="!(selected.keys && selected.keys.length !== 0)">
                导出
            </a-button>
            <a-button
                @click="() => onChangeState('VALID')"
                :disabled="!(selected.keys && selected.keys.length !== 0)"
            >
                生效
            </a-button>
            <a-button
                @click="() => onChangeState('INVALID')"
                :disabled="!(selected.keys && selected.keys.length !== 0)"
            >
                失效
            </a-button>
        </template>

        <template #drawer="drawer">
            <Assemble v-if="['assemble'].includes(drawer.type)" v-bind="drawer" />
            <Personnel v-else-if="['personnel'].includes(drawer.type)" v-bind="drawer" />
            <Schedule v-else-if="['schedule'].includes(drawer.type)" v-bind="drawer" />
            <AddAndEdit v-else-if="drawer.type !== 'exempt'" v-bind="drawer" />
            <!-- <Exempt v-else v-bind="drawer" /> -->
        </template>

        <a-table-column title="线路名称" data-index="routeName" />
        <a-table-column title="专业" data-index="specialityName" />
        <a-table-column title="地区" data-index="regionName" />
        <a-table-column title="状态">
            <template #default="row">
                <span v-if="row.routeState === 'VALID'">有效</span>
                <span v-if="row.routeState === 'INVALID'">无效</span>
            </template>
        </a-table-column>
        <a-table-column title="修改人" data-index="editorName" />
        <a-table-column title="修改时间" data-index="editTime" />
        <template #other>
            <ImportFlie ref="importFlie" :afterSubmit="rest" />
        </template>
    </Table>
</template>

<script>
import Table from '@/components/table/table.vue';
import UrlSelect from '@/components/MySelect/url_select.vue';
import MoreItem from '@/components/table/more_item.vue';
import { exportRouteData, updateRouteStateApi } from '@/api';
import { downloadFile } from '@/utils';
import AddAndEdit from './add_edit.vue';
import Schedule from './Schedule/index.vue';
import Personnel from './Personnel/index.vue';
import Assemble from './Assemble/index.vue';
import ImportFlie from './importFlie.vue';

export default {
    components: { Table, UrlSelect, MoreItem, AddAndEdit, ImportFlie, Schedule, Personnel, Assemble },
    data() {
        return {
            buttons: [
                { label: '编辑', click: this.edit },
                { label: '详情', click: this.view },
                { label: '编排', click: this.assemble },
                { label: '调度', click: this.schedule },
                { label: '人员', click: this.personnel },
                {
                    type: 'confirm',
                    url: (row) => `/ranger/inspection/api/v1/routes/${row.routeId}`,
                    after: this.refresh,
                },
            ],
            selected: {},
        };
    },
    methods: {
        refresh() {
            this.$refs.table.getData();
        },
        edit(row) {
            this.$refs.table.show({ row, title: '编辑', type: 'edit' });
        },
        view(row) {
            this.$refs.table.show({ row, title: '查看', type: 'view' });
        },
        schedule(row) {
            this.$refs.table.show({ row, title: '调度', type: 'schedule' });
        },
        personnel(row) {
            this.$refs.table.show({ row, title: '调度', type: 'personnel' });
        },
        assemble(row) {
            this.$refs.table.show({ row, title: '编排', type: 'assemble', dWidth: 1200 });
        },
        async download() {
            if (!this.selected?.keys?.length) return this.$message.error('请选择需要导出的数据');
            const resp = await exportRouteData({ routeIdList: this.selected.keys.join(',') });
            downloadFile(resp, 'xlsx');
        },
        async onChangeState(state) {
            const data = {
                routeIdList: this.selected.keys,
                routeState: state,
            };
            await updateRouteStateApi(data);
            this.$message.info('操作成功!');
            this.rest();
        },

        rest() {
            this.$refs.table.reset();
        },

        onImportFlie() {
            this.$refs.importFlie?.showModal();
        },
    },
};
</script>
