<template>
    <el-dialog
        title="新增检测项"
        :visible.sync="dialogToggle"
        :show-close="false"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        width="600px">
        <el-form
            label-width="100px"
            label-position="top"
            ref="form"
            :model="formData"
            :rules="formRules">
            <el-row :gutter="30">
                <el-col :span="12">
                    <el-form-item
                        label="序号"
                        prop="orderNum"
                        required>
                        <el-input-number
                            :min="0"
                            :max="999999999"
                            style="width: 100%"
                            v-model="formData.orderNum"
                            controls-position="right"
                            size="small"
                            placeholder="请输入序号">
                        </el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item
                        label="检测项目"
                        prop="name"
                        required>
                        <el-input
                            maxlength="50"
                            v-model="formData.name"
                            size="small"
                            style="width: 100%"
                            placeholder="请输入检测项目">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30">
                <el-col :span="12">
                    <el-form-item
                        label="控制范围(下限)"
                        prop="rangeLower"
                        required>
                        <el-input-number
                            :min="0"
                            :max="999999999"
                            style="width: 100%"
                            v-model="formData.rangeLower"
                            controls-position="right"
                            size="small"
                            placeholder="请输入控制范围(下限)">
                        </el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item
                        label="控制范围(上限)"
                        prop="rangeUpper"
                        required>
                        <el-input-number
                            :min="0"
                            :max="999999999"
                            style="width: 100%"
                            v-model="formData.rangeUpper"
                            controls-position="right"
                            size="small"
                            placeholder="请输入控制范围(上限)">
                        </el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30">
                <el-col :span="12">
                    <el-form-item
                        label="频次"
                        prop="frequency"
                        required>
                        <el-input
                            maxlength="50"
                            v-model="formData.frequency"
                            size="small"
                            style="width: 100%"
                            placeholder="请输入频次">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item
                        label="是否为必检项"
                        prop="isNecessary"
                        required>
                        <el-select
                            v-model="formData.isNecessary"
                            placeholder="请选择是否为必检项"
                            size="small"
                            style="width: 100%">
                            <el-option label="是" value="true"></el-option>
                            <el-option label="否" value="false"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button :loading="loadingToggle" size="small" type="primary" icon="el-icon-check" @click="doConfirmClick('form')">确认</el-button>
            <el-button size="small" icon="el-icon-close" @click="doCancelClick('form')">取消</el-button>
        </span>
    </el-dialog>
</template>

<script>
    export default {
        props: {
            checkModelId: {}
        },
        data () {
            return {
                // 数据提交状态开关标识
                loadingToggle: false,
                // 对话框开关标识
                dialogToggle: false,
                // 表单数据
                formData: {
                    orderNum: '',
                    name: '',
                    rangeUpper: '',
                    rangeLower: '',
                    frequency: '',
                    isNecessary: ''
                },
                // 表单正则
                formRules: {
                    // 序号
                    orderNum: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请输入序号'))
                                }
                                callback()
                            },
                            trigger: ['change', 'blur']
                        }
                    ],
                    // 检测项目
                    name: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请输入检测项目'))
                                }
                                callback()
                            },
                            trigger: ['change', 'blur']
                        }
                    ],
                    // 控制范围(上限)
                    rangeUpper: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请输入控制范围(上限)'))
                                }
                                callback()
                            },
                            trigger: ['change', 'blur']
                        }
                    ],
                    // 控制范围(下限)
                    rangeLower: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请输入控制范围(下限)'))
                                }
                                callback()
                            },
                            trigger: ['change', 'blur']
                        }
                    ],
                    // 频次
                    frequency: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请输入频次'))
                                }
                                callback()
                            },
                            trigger: ['change', 'blur']
                        }
                    ],
                    // 是否为必检项
                    isNecessary: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请选择必检项'))
                                }
                                callback()
                            },
                            trigger: ['change', 'blur']
                        }
                    ]
                }
            }
        },
        methods: {
            // 点击确认按钮
            doConfirmClick (formName) {
                this.$refs[formName].validate(vaild => {
                    if (vaild) {
                        this.loadingToggle = true
                        let queryParams = { ...this.formData }
                        queryParams.checkModelId = this.checkModelId
                        queryParams.rangeAll = `${this.formData.rangeLower}-${this.formData.rangeUpper}`
                        this.$fetch('daily-check-controller/saveCheckItemModel-post', queryParams).then(response => {
                            this.loadingToggle = false
                            this.$message.success('新增检测项成功！')
                            this.dialogToggle = false
                            this.$refs[formName].resetFields()
                            this.$emit('doConfirmClick')
                            for (let key in this.formData) {
                                this.formData[key] = ''
                            }
                        }).catch(() => {
                            this.loadingToggle = false
                        })
                    }
                })
            },
            // 点击取消按钮
            doCancelClick (formName) {
                this.$refs[formName].resetFields()
                this.dialogToggle = false
                for (let key in this.formData) {
                    this.formData[key] = ''
                }
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>