<template>
    <Wraper :hidden="hidden" :onOk="submit" :refresh="refresh" :noFooter="isView">
        <a-form-model layout="vertical" :model="form" :rules="rules" ref="form">
            <a-form-model-item :label="$t('table.exemptionType')" prop="exemptionType">
                <a-select
                    class="tw-w-full"
                    v-model="form.exemptionType"
                    :disabled="isView"
                    :placeholder="$t('select.placeholder')"
                >
                    <a-select-option value="PLACE">{{ $t('select.option.place') }}</a-select-option>
                    <a-select-option value="UNIT">{{ $t('select.option.unit') }}</a-select-option>
                </a-select>
            </a-form-model-item>

            <a-form-model-item :label="$t('table.region')" prop="regionId">
                <UrlSelect
                    url="/ranger/inspection/api/v1/region/list"
                    v-model="form.regionId"
                    labelFiled="regionName"
                    valueFiled="regionId"
                    :disabled="isView"
                    :placeholder="$t('select.placeholder')"
                />
            </a-form-model-item>
            <a-form-model-item :label="$t('table.place')" prop="placeId">
                <UrlSelect
                    v-model="form.placeId"
                    :url="
                        form.regionId ? `/ranger/inspection/api/v1/place/regions/${form.regionId}/list` : ''
                    "
                    labelFiled="placeName"
                    valueFiled="placeId"
                    :disabled="isView"
                    :placeholder="$t('select.placeholder')"
                />
            </a-form-model-item>
            <a-form-model-item :label="$t('table.time')" prop="startTime">
                <RangeTime
                    :startTime.sync="form.startTime"
                    :endTime.sync="form.endTime"
                    showTime
                    :disabled="isView"
                    :placeholder="$t('select.placeholder')"
                />
            </a-form-model-item>

            <a-form-model-item :label="$t('table.reason')" prop="exemptionReason">
                <a-textarea
                    :rows="4"
                    v-model="form.exemptionReason"
                    :disabled="isView"
                    :placeholder="$t('input.placeholder')"
                />
            </a-form-model-item>
        </a-form-model>
    </Wraper>
</template>

<script>
import Wraper from '@/components/table/wraper.vue';
import UrlSelect from '@/components/MySelect/url_select.vue';
import RangeTime from '@/components/MySelect/range_time_select.vue';
import { addExemptionApi, updateExemptionApi, getExemptionApi } from '@/api';

export default {
    components: { Wraper, UrlSelect, RangeTime },
    props: { hidden: Function, row: Object, type: String, refresh: Function },
    data: () => ({
        form: {},
        rules: {
            exemptionType: [{ required: true, message: this.$t('select.placeholder') }],
            regionId: [{ required: true, message: this.$t('select.placeholder') }],
            placeId: [{ required: true, message: this.$t('select.placeholder') }],
            exemptionReason: [{ required: true, message: this.$t('input.placeholder') }],
            startTime: [{ required: true, message: this.$t('select.placeholder') }],
        },
    }),

    computed: {
        isView() {
            return this.type === 'view';
        },
        isEdit() {
            return this.type === 'edit';
        },
        isAdd() {
            return this.type === null;
        },
    },

    async mounted() {
        if (!this.isAdd) {
            this.form = await getExemptionApi(this.row.exemptionId);
        }
    },

    methods: {
        async submit() {
            await this.$refs.form.validate();
            if (this.isAdd) return addExemptionApi(this.form);
            if (this.isEdit) return updateExemptionApi(this.form);
        },
    },
};
</script>
