<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.placeholder')" prop="itemName">
                <a-input v-model="form.itemName" :disabled="isView" :placeholder="$t('input.placeholder')" />
            </a-form-model-item>

            <a-form-model-item :label="$t('table.region')" prop="regionId">
                <UrlSelect
                    v-model="form.regionId"
                    url="/ranger/inspection/api/v1/region/list"
                    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.unit')" prop="unitId">
                <UrlSelect
                    v-model="form.unitId"
                    :url="form.placeId ? `/ranger/inspection/api/v1/units/places/${form.placeId}/list` : ''"
                    labelFiled="unitName"
                    valueFiled="unitId"
                    :disabled="isView"
                    :placeholder="$t('select.placeholder')"
                />
            </a-form-model-item>
            <a-form-model-item :label="$t('table.dataType')" prop="dataType">
                <a-select v-model="form.dataType" :disabled="isView" :placeholder="$t('select.placeholder')">
                    <a-select-option key="TEXT" value="TEXT">{{ $t('other.TEXT') }}</a-select-option>
                    <a-select-option key="OPTION" value="OPTION">{{ $t('other.OPTION') }}</a-select-option>
                    <a-select-option key="NUMERIC" value="NUMERIC">{{ $t('other.NUMERIC') }}</a-select-option>
                </a-select>
            </a-form-model-item>
            <div v-if="form.dataType === 'TEXT'">
                <a-form-model-item :label="$t('other.defaultValue')" prop="defaultText">
                    <a-textarea
                        :placeholder="$t('input.placeholder')"
                        :rows="4"
                        v-model="form.defaultText"
                        :disabled="isView"
                    />
                </a-form-model-item>
            </div>
            <div v-if="form.dataType === 'OPTION'">
                <a-form-model-item :label="$t('other.OPTION')" prop="optionType">
                    <a-select
                        v-model="form.optionType"
                        :disabled="isView"
                        :placeholder="$t('select.placeholder')"
                    >
                        <a-select-option key="TEXT" value="TEXT">{{
                            `${$t('other.on')}/${$t('other.off')}`
                        }}</a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item :label="$t('other.normal')" prop="normalValue">
                    <a-select
                        v-model="form.normalValue"
                        :disabled="isView"
                        :placeholder="$t('select.placeholder')"
                    >
                        <a-select-option key="1" value="1">{{ $t('other.on') }}</a-select-option>
                        <a-select-option key="0" value="0">{{ $t('other.off') }}</a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item
                    :label="$t('other.outliers')"
                    prop="abnormalValue"
                    :placeholder="$t('select.placeholder')"
                >
                    <a-select v-model="form.abnormalValue" :disabled="isView">
                        <a-select-option key="1" value="1">{{ $t('other.on') }}</a-select-option>
                        <a-select-option key="0" value="0">{{ $t('other.off') }}</a-select-option>
                    </a-select>
                </a-form-model-item>
            </div>
            <div v-if="form.dataType === 'NUMERIC'">
                <a-form-model-item :label="$t('other.defaultValue')" prop="defaultValue">
                    <a-input v-model="form.defaultValue" :placeholder="$t('input.placeholder')" />
                </a-form-model-item>
                <a-form-model-item :label="$t('other.upperLimit')" prop="upperLimitValue">
                    <a-input v-model="form.upperLimitValue" :placeholder="$t('input.placeholder')" />
                </a-form-model-item>
                <a-form-model-item :label="$t('other.lowerLimit')" prop="lowerLimitValue">
                    <a-input v-model="form.lowerLimitValue" :placeholder="$t('input.placeholder')" />
                </a-form-model-item>
            </div>
            <a-form-model-item :label="$t('table.remark')" prop="remark">
                <a-textarea
                    :placeholder="$t('input.placeholder')"
                    :rows="4"
                    v-model="form.remark"
                    :disabled="isView"
                />
            </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 { addItemsApi, editItemsApi, getItemsInfoApi } from '@/api';

export default {
    components: { Wraper, UrlSelect },
    props: { hidden: Function, row: Object, type: String, refresh: Function },
    data() {
        let normalValueValidator = (rule, value, callback) => {
            if (value === '') {
                callback(new Error(this.$t('input.placeholder')));
            } else {
                if (this.form.abnormalValue) {
                    if (value === this.form.abnormalValue) {
                        callback(new Error(this.$t('input.error')));
                    } else {
                        callback();
                    }
                } else {
                    callback();
                }
            }
        };
        let abnormalValueValidator = (rule, value, callback) => {
            if (value === '') {
                callback(new Error(this.$t('input.placeholder')));
            } else {
                if (this.form.abnormalValue) {
                    if (value === this.form.abnormalValue) {
                        callback(new Error(this.$t('input.error')));
                    } else {
                        callback();
                    }
                } else {
                    callback();
                }
            }
        };
        let defaultValueValidator = (rule, value, callback) => {
            if (value === '') {
                callback(new Error(this.$t('input.placeholder')));
            } else {
                if (this.form.upperLimitValue && this.form.lowerLimitValue) {
                    if (this.form.upperLimitValue > value && value > this.form.lowerLimitValue) {
                        callback();
                    } else {
                        callback(new Error(this.$t('input.error')));
                    }
                } else if (this.form.upperLimitValue) {
                    if (this.form.upperLimitValue > value) {
                        callback();
                    } else {
                        callback(new Error(this.$t('input.error')));
                    }
                } else if (this.form.lowerLimitValue) {
                    if (this.form.lowerLimitValue < value) {
                        callback();
                    } else {
                        callback(new Error(this.$t('input.error')));
                    }
                } else {
                    callback();
                }
            }
        };
        let upperLimitValueValidator = (rule, value, callback) => {
            if (value === '') {
                callback(new Error(this.$t('input.placeholder')));
            } else {
                if (this.form.defaultValue && this.form.lowerLimitValue) {
                    if (this.form.defaultValue < value && value > this.form.lowerLimitValue) {
                        callback();
                    } else {
                        callback(new Error(this.$t('input.error')));
                    }
                } else if (this.form.defaultValue) {
                    if (this.form.defaultValue < value) {
                        callback();
                    } else {
                        callback(new Error(this.$t('input.error')));
                    }
                } else if (this.form.lowerLimitValue) {
                    if (this.form.lowerLimitValue < value) {
                        callback();
                    } else {
                        callback(new Error(this.$t('input.error')));
                    }
                } else {
                    callback();
                }
            }
        };
        let lowerLimitValueValidator = (rule, value, callback) => {
            if (value === '') {
                callback(new Error(this.$t('input.placeholder')));
            } else {
                if (this.form.defaultValue && this.form.upperLimitValue) {
                    if (this.form.defaultValue > value && value < this.form.upperLimitValue) {
                        callback();
                    } else {
                        callback(new Error(this.$t('input.error')));
                    }
                } else if (this.form.defaultValue) {
                    if (this.form.defaultValue > value) {
                        callback();
                    } else {
                        callback(new Error(this.$t('input.error')));
                    }
                } else if (this.form.upperLimitValue) {
                    if (this.form.upperLimitValue > value) {
                        callback();
                    } else {
                        callback(new Error(this.$t('input.error')));
                    }
                } else {
                    callback();
                }
            }
        };
        return {
            form: {},
            rules: {
                itemName: [{ required: true, message: this.$t('input.placeholder') }],
                placeId: [{ required: true, message: this.$t('input.placeholder') }],
                regionId: [{ required: true, message: this.$t('input.placeholder') }],
                unitId: [{ required: true, message: this.$t('input.placeholder') }],
                dataType: [{ required: true, message: this.$t('input.placeholder') }],
                defaultText: [{ required: true, message: this.$t('input.placeholder') }],
                optionType: [{ required: true, message: this.$t('input.placeholder') }],
                normalValue: [
                    { required: true, message: this.$t('input.placeholder') },
                    {
                        validator: normalValueValidator,
                    },
                ],
                abnormalValue: [
                    { required: true, message: this.$t('input.placeholder') },
                    { validator: abnormalValueValidator },
                ],
                defaultValue: [
                    { required: true, message: this.$t('input.placeholder') },
                    { validator: defaultValueValidator },
                ],
                upperLimitValue: [
                    { required: true, message: this.$t('input.placeholder') },
                    { validator: upperLimitValueValidator },
                ],
                lowerLimitValue: [
                    { required: true, message: this.$t('input.placeholder') },
                    { validator: lowerLimitValueValidator },
                ],
            },
        };
    },

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

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

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