<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"
            :model="formData"
            ref="form"
            :rules="formRules">
            <el-row :gutter="30">
                <el-col :span="12">
                    <el-form-item
                        label="车间"
                        prop="workshopCode"
                        required>
                        <el-select
                            v-model="formData.workshopCode"
                            size="small"
                            style="width: 100%"
                            placeholder="请选择车间"
                            @change="onWorkshopSelectChange">
                            <el-option
                                v-for="(item, index) in workShopSelectData"
                                :key="index"
                                :value="item.itemCode"
                                :label="item.itemName">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item
                        label="设备分类"
                        prop="equipType"
                        required>
                        <el-select
                            v-model="formData.equipType"
                            size="small"
                            style="width: 100%"
                            placeholder="请选择设备分类">
                            <el-option
                                v-for="(item, index) in deviceSortSelectData"
                                :key="index"
                                :value="item.itemCode"
                                :label="item.itemName">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30">
                <el-col :span="12">
                    <el-form-item
                        label="设备编码"
                        prop="equipCode"
                        required>
                        <el-input
                            maxlength="100"
                            v-model="formData.equipCode"
                            size="small"
                            style="width: 100%"
                            placeholder="请输入设备编码">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item
                        label="设备名称"
                        prop="alias">
                        <el-input
                            maxlength="100"
                            v-model="formData.alias"
                            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="equipFactory">
                        <el-input
                            maxlength="100"
                            v-model="formData.equipFactory"
                            size="small"
                            style="width: 100%"
                            placeholder="请输入设备厂商">
                        </el-input>
                    </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 {
        watch: {
            dialogToggle (newVal, oldVal) {
                // 获取设备分类数据
                this.getSeviceSortSelectData()
                // 获取车间下拉数据
                this.getWorkshopSelectData()
            }
        },
        data () {
            return {
                // 数据提交开关标识
                loadingToggle: false,
                // 对话框开关标识
                dialogToggle: false,
                // 表单数据
                formData: {
                    workshopName: '',
                    workshopCode: '',
                    equipType: '',
                    equipCode: '',
                    alias: '',
                    equipFactory: ''
                },
                // 表单正则
                formRules: {
                    // 车间
                    workshopCode: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请选择车间'))
                                }
                                callback()
                            },
                            trigger: ['change', 'blur']
                        }
                    ],
                    // 设备分类
                    equipType: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请选择设备分类'))
                                }
                                callback()
                            },
                            trigger: ['change', 'blur']
                        }
                    ],
                    // 设备编码
                    equipCode: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请输入设备编码'))
                                }
                                callback()
                            },
                            trigger: ['change', 'blur']
                        }
                    ]
                },
                // 设备分类下拉数据
                deviceSortSelectData: [],
                // 车间下拉数据
                workShopSelectData: []
            }
        },
        methods: {
            // 获取设备分类数据
            getSeviceSortSelectData () {
                let queryParams = { dicCode: 'DEVICE_SORT', hash: 'dicCode' }
                this.$fetch('dict-item-controller/dicCode-get', queryParams).then(response => {
                    this.deviceSortSelectData = _.cloneDeep(response)
                })
            },
            // 获取车间下拉数据
            getWorkshopSelectData () {
                let queryParams = { dicCode: 'WORKSHOP_LIST', hash: 'dicCode' }
                this.$fetch('dict-item-controller/dicCode-get', queryParams).then(response => {
                    this.workShopSelectData = _.cloneDeep(response)
                })
            },
            // 触发车间下拉框值改变事件
            onWorkshopSelectChange (selectValue) {
                for (let item of this.workShopSelectData) {
                    if (item.itemCode === selectValue) {
                        this.formData.workshopName = item.itemName
                        break
                    }
                }
            },
            // 点击确认按钮
            doConfirmClick (formName) {
                this.$refs[formName].validate(vaild => {
                    if (vaild) {
                        this.loadingToggle = true
                        let queryParams = { ...this.formData }
                        this.$fetch('basic-info-controller/equipCreate-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>
