<template>
    <Table
        url="/ranger/inspection/api/v1/jobs"
        :buttons="buttons"
        rowKey="jobId"
        :addBtn="addBtn"
        :selected.sync="selected"
        ref="table"
        :drawerWidth="800"
        :scroll="scroll"
    >
        <template #search="{ query }">
            <MoreItem :label="$t('select.startTime')">
                <a-date-picker
                    class="tw-w-full"
                    show-time
                    v-model="query.startTime"
                    valueFormat="YYYY-MM-DD HH:mm:ss"
                />
            </MoreItem>

            <MoreItem :label="$t('select.endTime')">
                <a-date-picker
                    class="tw-w-full"
                    show-time
                    v-model="query.endTime"
                    valueFormat="YYYY-MM-DD HH:mm:ss"
                />
            </MoreItem>
            <MoreItem :label="$t('select.region')">
                <UrlSelect
                    url="/ranger/inspection/api/v1/region/list"
                    v-model="query.regionId"
                    labelFiled="regionName"
                    valueFiled="regionId"
                />
            </MoreItem>
        </template>

        <template #moreSearch="{ query }">
            <MoreItem :label="$t('select.speciality')">
                <UrlSelect
                    :url="
                        query.regionId
                            ? `/ranger/inspection/api/v1/specialities/valid/regions/${query.regionId}/list`
                            : ''
                    "
                    v-model="query.specialityId"
                    labelFiled="specialityName"
                    valueFiled="specialityId"
                />
            </MoreItem>
            <MoreItem :label="$t('select.routes')">
                <UrlSelect
                    :url="
                        query.regionId
                            ? `/ranger/inspection/api/v1/routes/regions/${query.regionId}/list`
                            : ''
                    "
                    labelFiled="routeName"
                    valueFiled="routeId"
                    v-model="query.routeId"
                />
            </MoreItem>
            <MoreItem :label="$t('select.shiftTypeName')">
                <RequestSelect
                    :request="getBanZuListApi"
                    v-model="query.shiftType"
                    labelFiled="paramName"
                    valueFiled="paramValue"
                />
            </MoreItem>
            <MoreItem :label="$t('select.examine')">
                <RequestSelect
                    :request="getBusinessListApi"
                    v-model="query.inspectionState"
                    labelFiled="paramName"
                    valueFiled="paramValue"
                />
            </MoreItem>
            <MoreItem :label="$t('select.taskType')">
                <RequestSelect
                    :request="getTaskTypeApi"
                    v-model="query.jobType"
                    labelFiled="paramName"
                    valueFiled="paramValue"
                />
            </MoreItem>
            <MoreItem :label="$t('select.examiner')">
                <SearchSelect
                    url="/api/v1/users/searching"
                    searchField="userName"
                    v-model="query.lastInspectionStaffId"
                    labelFiled="userName"
                    valueFiled="userId"
                />
            </MoreItem>
        </template>

        <template #operation>
            <a-button @click="download">{{ $t('export') }}</a-button>
        </template>

        <template #drawer="{ hidden, refresh, type, row }">
            <Form :hidden="hidden" :refresh="refresh" v-if="type === null" />
            <Progress v-if="type === 'progress'" :hidden="hidden" :row="row" />
            <Detail v-if="type === 'detail'" :hidden="hidden" :row="row" />
        </template>

        <a-table-column :title="$t('select.routeName')" data-index="routeName" />
        <a-table-column :title="$t('select.speciality')" data-index="specialityName" />
        <a-table-column :title="$t('select.region')" data-index="regionName" />
        <a-table-column :title="$t('select.shiftTypeName')" data-index="shiftTypeName" width="180px" />
        <a-table-column :title="$t('table.jobTime')" data-index="jobTime" />
        <a-table-column :title="$t('select.examine')" data-index="inspectionStateName" />
        <a-table-column :title="$t('select.taskType')" data-index="jobTypeName" />
        <a-table-column :title="$t('table.inspectionStartTime')" data-index="inspectionStartTime" />
        <a-table-column :title="$t('table.inspectionEndTime')" data-index="inspectionEndTime" />
        <a-table-column :title="$t('select.examiner')" 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 { getStaticDataByTwoParamsApi } from '@/api';
import Progress from './progress.vue';
import Detail from './detail.vue';
import MoreItem from '@/components/table/more_item.vue';

export default {
    components: {
        Table,
        Form,
        RequestSelect,
        UrlSelect,
        SearchSelect,
        Progress,
        Detail,
        MoreItem,
    },
    data() {
        return {
            getBusinessListApi: () => getStaticDataByTwoParamsApi('rpis_route_schedule', 'inspection_state'),
            getBanZuListApi: () => getStaticDataByTwoParamsApi('rpis_route_schedule', 'shift_type'),
            getTaskTypeApi: () => getStaticDataByTwoParamsApi('rpis_route_schedule', 'job_type'),
            addBtn: {
                title: this.$t('table.newTemporaryTask'),
            },
            buttons: {
                options: { fixed: 'right', width: 200 },
                data: [
                    {
                        label: this.$t('table.view'),
                        click: this.viewDetail,
                    },
                    { label: this.$t('table.progress'), click: this.viewProgress },
                    {
                        type: 'confirm',
                        url: (row) => `/ranger/inspection/api/v1/jobs/${row.jobId}`,
                        after: this.refresh,
                    },
                ],
            },
            selected: {},
            scroll: { x: 1500 },
        };
    },
    methods: {
        async download() {
            if (!this.selected?.keys?.length) return this.$message.error(this.$t('table.pleaseSelect'));
            const url = await getXunJianDownloadUrlApi(this.selected.keys);
            downloadFileByUrl(`${this.$fileUrl}${url}`);
        },
        refresh() {
            this.$refs['table'].getData();
        },
        viewProgress(row) {
            this.$refs.table.show({ title: this.$t('table.taskProgress'), type: 'progress', row });
        },
        viewDetail(row) {
            this.$refs.table.show({ title: this.$t('table.taskDetail'), type: 'detail', row });
        },
    },
};
</script>
