<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.itemName"
                                :label="item.itemName">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item
                        label="区域"
                        prop="areaId"
                        required>
                        <el-select
                            v-model="formData.areaId"
                            size="small"
                            style="width: 100%"
                            placeholder="请选择区域"
                            @change="onAreaSelectChange">
                            <el-option
                                v-for="(item, index) in areaSelectData"
                                :key="index"
                                :value="item.id"
                                :label="item.name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30">
                <el-col :span="12">
                    <el-form-item
                        label="车道"
                        prop="laneId"
                        required>
                        <el-select
                            :disabled="formData.areaId === ''"
                            v-model="formData.laneId"
                            size="small"
                            style="width: 100%"
                            placeholder="请选择区域再选择车道">
                            <el-option
                                v-for="(item, index) in laneSelectData"
                                :key="index"
                                :value="item.id"
                                :label="item.name">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item
                        label="工位编号"
                        prop="code"
                        required>
                        <el-input
                            size="small"
                            maxlength="32"
                            v-model="formData.code"
                            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="sequence"
                        required>
                        <el-input-number
                            :max="100"
                            v-model="formData.sequence"
                            style="width: 100%"
                            size="small"
                            placeholder="请输入工位序号">
                        </el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item
                        label="是否为关键工位"
                        prop="keyStation"
                        required>
                        <el-select
                            v-model="formData.keyStation"
                            size="small"
                            style="width: 100%"
                            placeholder="请选择是否为关键工位">
                            <el-option value="true" label="是"></el-option>
                            <el-option value="false" label="否"></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 {
        watch: {
            dialogToggle (newVal, oldVal) {
                // 获取车间下拉数据
                this.getWorkshopSelectData()
                // 获取区域下拉数据
                this.getAreaSelectData()
            }
        },
        data () {
            return {
                // 数据提交开关标识
                loadingToggle: false,
                // 对话框开关标识
                dialogToggle: false,
                // 表单数据
                formData: {
                    workshopCode: '',
                    areaId: '',
                    laneId: '',
                    code: '',
                    sequence: '',
                    keyStation: ''
                },
                // 表单正则
                formRules: {
                    // 车间
                    workshopCode: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请选择车间'))
                                }
                                callback()
                            },
                            trigger: ['change', 'blur']
                        }
                    ],
                    // 区域
                    areaId: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请选择区域'))
                                }
                                callback()
                            },
                            trigger: ['change', 'blur']
                        }
                    ],
                    // 车道
                    laneId: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请选择车道'))
                                }
                                callback()
                            },
                            trigger: ['change', 'blur']
                        }
                    ],
                    // 工位编号
                    code: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请输入工位编号'))
                                }
                                callback()
                            },
                            trigger: ['change', 'blur']
                        }
                    ],
                    // 工位序号
                    sequence: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请输入工位序号'))
                                }
                                callback()
                            },
                            trigger: ['change', 'blur']
                        }
                    ],
                    // 是否为关键工位
                    keyStation: [
                        {
                            validator: (rule, value, callback) => {
                                if (_.trim(value) === '') {
                                    callback(new Error('请选择是否为关键工位'))
                                }
                                callback()
                            },
                            trigger: ['change', 'blur']
                        }
                    ]
                },
                // 车间下拉数据
                workShopSelectData: [],
                // 区域下拉数据
                areaSelectData: [],
                // 车道下拉数据
                laneSelectData: []
            }
        },
        methods: {
            // 点击确认按钮
            doConfirmClick (formName) {
                this.$refs[formName].validate(vaild => {
                    if (vaild) {
                        this.loadingToggle = true
                        let queryParams = { ...this.formData }
                        this.$fetch('basic-info-controller/stationCreate-post', queryParams).then(response => {
                            this.$message.success('新增成功！')
                            this.loadingToggle = false
                            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.dialogToggle = false
                this.$refs[formName].resetFields()
                for (let key in this.formData) {
                    this.formData[key] = ''
                }
            },
            // 获取车间下拉数据
            getWorkshopSelectData () {
                let queryParams = { dicCode: 'WORKSHOP_LIST', hash: 'dicCode' }
                this.$fetch('dict-item-controller/dicCode-get', queryParams).then(response => {
                    this.workShopSelectData = _.cloneDeep(response)
                })
            },
            // 获取区域下拉数据
            getAreaSelectData () {
                this.$fetch('basic-info-controller/area-get', {}).then(response => {
                    this.areaSelectData = _.cloneDeep(response)
                })
            },
            // 触发车间下拉选择事件
            onWorkshopSelectChange (selectValue) {
                for (let item of this.workShopSelectData) {
                    if (item.itemCode === selectValue) {
                        this.formData.workshopName = item.itemName
                        break
                    }
                }
            },
            // 触发区域下拉选择事件
            onAreaSelectChange (selectValue) {
                // 根据区域id获取车道下拉数据
                this.getLaneSelectDataByAreaId()
            },
            // 根据区域id获取车道下拉数据
            getLaneSelectDataByAreaId () {
                let queryParams = { areaId: this.formData.areaId, hash: 'areaId' }
                this.$fetch('basic-info-controller/areaId-get', queryParams).then(response => {
                    this.laneSelectData = _.cloneDeep(response)
                })
            }
        }
    }
</script>

<style>

</style>
