<template>
    <Wraper :hidden="hidden" :onOk="submit" :refresh="refresh">
        <a-form-model layout="vertical" :model="form" :rules="rules" ref="form">
            <a-form-model-item label="地区" prop="regionId">
                <RequestSelect
                    :request="getAreaListDataApi"
                    v-model="form.regionId"
                    labelFiled="regionName"
                    valueFiled="regionId"
                />
            </a-form-model-item>

            <a-form-model-item label="线路" prop="routeId">
                <UrlSelect
                    :url="xianLuUrl"
                    labelFiled="routeName"
                    valueFiled="routeId"
                    v-model="form.routeId"
                />
            </a-form-model-item>

            <a-form-model-item label="班组" prop="shiftType">
                <RequestSelect
                    :request="getBanZuListApi"
                    v-model="form.shiftType"
                    labelFiled="paramName"
                    valueFiled="paramValue"
                />
            </a-form-model-item>

            <a-form-model-item label="任务时间" prop="jobTime">
                <a-date-picker
                    showTime
                    class="tw-w-full"
                    valueFormat="YYYY-MM-DD HH:mm:ss"
                    v-model="form.jobTime"
                />
            </a-form-model-item>

            <a-form-model-item label="巡检人" prop="inspectionIdList">
                <SearchSelect
                    url="/api/v1/users/searching"
                    searchField="userName"
                    labelFiled="userName"
                    valueFiled="userId"
                    v-model="form.inspectionIdList"
                    mode="multiple"
                />
            </a-form-model-item>
        </a-form-model>
    </Wraper>
</template>

<script>
import Wraper from '@/components/table/wraper.vue';
import RequestSelect from '@/components/MySelect/RequestSelect.vue';
import SearchSelect from '@/components/MySelect/search_select.vue';
import UrlSelect from '@/components/MySelect/url_select.vue';
import { getAreaListDataApi, getBanZuListApi, addXunJianTaskApi } from '@/api';

export default {
    props: {
        hidden: Function,
        refresh: Function,
    },
    components: { Wraper, RequestSelect, SearchSelect, UrlSelect },
    data() {
        return {
            getAreaListDataApi,
            getBanZuListApi,
            form: {},
            rules: {
                inspectionIdList: [{ required: true }],
                jobTime: [{ required: true }],
                shiftType: [{ required: true }],
                routeId: [{ required: true }],
                regionId: [{ required: true }],
            },
        };
    },
    computed: {
        xianLuUrl() {
            return this.form.regionId
                ? `/ranger/inspection/api/v1/routes/regions/${this.form.regionId}/list`
                : '';
        },
    },
    methods: {
        async submit() {
            await this.$refs.form.validate();
            return addXunJianTaskApi(this.form);
        },
    },
};
</script>
