<template>
    <Table
        url="/ranger/inspection/api/v1/jobs"
        :buttons="buttons"
        rowKey="jobId"
        :addBtn="addBtn"
        :selected.sync="selected"
    >
        <template #search="{query}">
            <my-form-item label="开始时间">
                <a-date-picker
                    class="tw-w-full"
                    show-time
                    v-model="query.startTime"
                    valueFormat="YYYY-MM-DD HH:mm:ss"
                />
            </my-form-item>
            <my-form-item label="结束时间">
                <a-date-picker
                    class="tw-w-full"
                    show-time
                    v-model="query.endTime"
                    valueFormat="YYYY-MM-DD HH:mm:ss"
                />
            </my-form-item>
            <my-form-item label="地区">
                <RequestSelect
                    :request="getAreaListDataApi"
                    v-model="query.regionId"
                    labelFiled="regionName"
                    valueFiled="regionId"
                />
            </my-form-item>
            <my-form-item label="专业">
                <UrlSelect
                    :url="
                        query.regionId
                            ? `/ranger/inspection/api/v1/specialities/valid/regions/${query.regionId}/list`
                            : ''
                    "
                    v-model="query.specialityId"
                    labelFiled="specialityName"
                    valueFiled="specialityId"
                />
            </my-form-item>
            <my-form-item label="线路">
                <UrlSelect
                    :url="
                        query.regionId
                            ? `/ranger/inspection/api/v1/routes/regions/${query.regionId}/list`
                            : ''
                    "
                    labelFiled="routeName"
                    valueFiled="routeId"
                    v-model="query.routeId"
                />
            </my-form-item>
            <my-form-item label="班组">
                <RequestSelect
                    :request="getBanZuListApi"
                    v-model="query.shiftType"
                    labelFiled="paramName"
                    valueFiled="paramValue"
                />
            </my-form-item>
            <my-form-item label="巡检状态">
                <RequestSelect
                    :request="getBusinessListApi"
                    v-model="query.inspectionState"
                    labelFiled="paramName"
                    valueFiled="paramValue"
                />
            </my-form-item>
            <my-form-item label="任务类型">
                <RequestSelect
                    :request="getTaskTypeApi"
                    v-model="query.jobType"
                    labelFiled="paramName"
                    valueFiled="paramValue"
                />
            </my-form-item>
            <my-form-item label="巡检人">
                <SearchSelect
                    url="/api/v1/users/searching"
                    searchField="userName"
                    v-model="query.lastInspectionStaffId"
                    labelFiled="userName"
                    valueFiled="userId"
                />
            </my-form-item>
        </template>

        <template #operation>
            <a-button @click="download">导出</a-button>
        </template>

        <template #drawer="drawer">
            <Form 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="班组" data-index="shiftTypeName" />
        <a-table-column title="任务时间" data-index="jobTime" />
        <a-table-column title="巡检状态" data-index="inspectionStateName" />
        <a-table-column title="任务类型" data-index="jobTypeName" />
        <a-table-column title="巡检开始时间" data-index="inspectionStartTime" />
        <a-table-column title="巡检结束时间" data-index="inspectionEndTime" />
        <a-table-column title="巡检人" data-index="lastInspectionStaffName" />
    </Table>
</template>

<script>
import Table from '@/components/table/table.vue';
import Form from './form.vue';
import UrlSelect from '@/components/MySelect/url_select.vue';
import { getXunJianDownloadUrlApi } from '@/api';
import { downloadFileByUrl } from '@/utils';
import RequestSelect from '@/components/MySelect/RequestSelect.vue';
import SearchSelect from '@/components/MySelect/search_select.vue';
import { getAreaListDataApi, getBusinessListApi, getBanZuListApi, getTaskTypeApi } from '@/api';

export default {
    components: { Table, Form, RequestSelect, UrlSelect, SearchSelect },
    data() {
        return {
            getAreaListDataApi,
            getBusinessListApi,
            getBanZuListApi,
            getTaskTypeApi,
            addBtn: {
                title: '新建临时任务',
            },
            buttons: [
                {
                    label: '详情',
                },
                { label: '进度' },
                { type: 'confirm' },
            ],
            selected: [],
        };
    },
    methods: {
        async download() {
            if (!this.selected.length) return this.$message.error('请选择需要导出的数据');
            const url = await getXunJianDownloadUrlApi(this.selected[0]);
            downloadFileByUrl(`${this.$fileUrl}${url}`);
        },
    },
};
</script>
