<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="项目名称" prop="placeName">
                <a-input v-model="form.placeName" :disabled="isView" />
            </a-form-model-item>

            <a-form-model-item label="所属地区" prop="regionId">
                <UrlSelect
                    v-model="form.regionId"
                    url="/ranger/inspection/api/v1/region/list"
                    labelFiled="regionName"
                    valueFiled="regionId"
                    :disabled="isView"
                />
            </a-form-model-item>
            <a-form-model-item label="所属地点" 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"
                />
            </a-form-model-item>
            <a-form-model-item label="所属单元" 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"
                />
            </a-form-model-item>
            <a-form-model-item label="数据类型" prop="dataType">
                <a-select v-model="form.dataType" :disabled="isView">
                    <a-select-option key="TEXT" value="TEXT">文本类型</a-select-option>
                    <a-select-option key="OPTION" value="OPTION">选项类型</a-select-option>
                    <a-select-option key="NUMERIC" value="NUMERIC">数值类型</a-select-option>
                </a-select>
            </a-form-model-item>
            <div v-if="form.dataType === 'TEXT'">
                <a-form-model-item label="默认值" prop="defaultText">
                    <a-textarea
                        placeholder="Basic usage"
                        :rows="4"
                        v-model="form.defaultText"
                        :disabled="isView"
                    />
                </a-form-model-item>
            </div>
            <div v-if="form.dataType === 'OPTION'">
                <a-form-model-item label="选项类型" prop="optionType">
                    <a-select v-model="form.optionType" :disabled="isView">
                        <a-select-option key="TEXT" value="TEXT">开/关</a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="正常值" prop="normalValue">
                    <a-select v-model="form.normalValue" :disabled="isView">
                        <a-select-option key="1" value="1">开</a-select-option>
                        <a-select-option key="0" value="0">关</a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="异常值" prop="abnormalValue">
                    <a-select v-model="form.abnormalValue" :disabled="isView">
                        <a-select-option key="1" value="1">开</a-select-option>
                        <a-select-option key="0" value="0">关</a-select-option>
                    </a-select>
                </a-form-model-item>
            </div>
            <div v-if="form.dataType === 'NUMERIC'">
                <a-form-model-item label="默认值" prop="defaultValue">
                    <a-input v-model="form.defaultValue" placeholder="请输入" />
                </a-form-model-item>
                <a-form-model-item label="上限值" prop="upperLimitValue">
                    <a-input v-model="form.upperLimitValue" placeholder="请输入" />
                </a-form-model-item>
                <a-form-model-item label="下限值" prop="lowerLimitValue">
                    <a-input v-model="form.lowerLimitValue" placeholder="请输入" />
                </a-form-model-item>
            </div>
            <a-form-model-item label="备注" prop="remark">
                <a-textarea placeholder="Basic usage" :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('Please input the password'));
            } else {
                if (this.form.abnormalValue) {
                    if (value === this.form.abnormalValue) {
                        callback(new Error('Please input the password'));
                    } else {
                        callback();
                    }
                } else {
                    callback();
                }
            }
        };
        let abnormalValueValidator = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('Please input the password'));
            } else {
                if (this.form.abnormalValue) {
                    if (value === this.form.abnormalValue) {
                        callback(new Error('Please input the password'));
                    } else {
                        callback();
                    }
                } else {
                    callback();
                }
            }
        };
        let defaultValueValidator = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('Please input the password'));
            } else {
                if (this.form.upperLimitValue && this.form.lowerLimitValue) {
                    if (this.form.upperLimitValue > value && value > this.form.lowerLimitValue) {
                        callback();
                    } else {
                        callback(new Error('数值错误'));
                    }
                } else if (this.form.upperLimitValue) {
                    if (this.form.upperLimitValue > value) {
                        callback();
                    } else {
                        callback(new Error('数值错误1'));
                    }
                } else if (this.form.lowerLimitValue) {
                    if (this.form.lowerLimitValue < value) {
                        callback();
                    } else {
                        callback(new Error('数值错误2'));
                    }
                } else {
                    callback();
                }
            }
        };
        let upperLimitValueValidator = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('Please input the password'));
            } else {
                if (this.form.defaultValue && this.form.lowerLimitValue) {
                    if (this.form.defaultValue < value && value > this.form.lowerLimitValue) {
                        callback();
                    } else {
                        callback(new Error('数值错误'));
                    }
                } else if (this.form.defaultValue) {
                    if (this.form.defaultValue < value) {
                        callback();
                    } else {
                        callback(new Error('数值错误1'));
                    }
                } else if (this.form.lowerLimitValue) {
                    if (this.form.lowerLimitValue < value) {
                        callback();
                    } else {
                        callback(new Error('数值错误2'));
                    }
                } else {
                    callback();
                }
            }
        };
        let lowerLimitValueValidator = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('Please input the password'));
            } else {
                if (this.form.defaultValue && this.form.upperLimitValue) {
                    if (this.form.defaultValue > value && value < this.form.upperLimitValue) {
                        callback();
                    } else {
                        callback(new Error('数值错误'));
                    }
                } else if (this.form.defaultValue) {
                    if (this.form.defaultValue > value) {
                        callback();
                    } else {
                        callback(new Error('数值错误1'));
                    }
                } else if (this.form.upperLimitValue) {
                    if (this.form.upperLimitValue > value) {
                        callback();
                    } else {
                        callback(new Error('数值错误2'));
                    }
                } else {
                    callback();
                }
            }
        };
        return {
            form: {},
            rules: {
                placeName: [{ required: true }],
                placeId: [{ required: true }],
                regionId: [{ required: true }],
                unitId: [{ required: true }],
                dataType: [{ required: true }],
                defaultText: [{ required: true }],
                optionType: [{ required: true }],
                normalValue: [
                    { required: true },
                    {
                        validator: normalValueValidator,
                    },
                ],
                abnormalValue: [{ required: true }, { validator: abnormalValueValidator }],
                defaultValue: [{ required: true }, { validator: defaultValueValidator }],
                upperLimitValue: [{ required: true }, { validator: upperLimitValueValidator }],
                lowerLimitValue: [{ required: true }, { 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>
