<template>
    <el-dialog
        title="程序下发"
        v-drag-dialog
        :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"
            :rules="formRules"
            ref="form">
            <el-row :gutter="30">
                <el-col :span="12">
                    <el-form-item
                        label="设备编号"
                        required
                        prop="equipCode">
                        <el-select
                            size="mini"
                            style="width: 100%"
                            v-model="formData.equipCode"
                            placeholder="请选择设备编号"
                            @change="onSelectChange">
                            <el-option
                                v-for="(item, index) in deviceList"
                                :key="index"
                                :label="item.equipCode"
                                :value="item.equipCode">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item
                        label="设备名称"
                        required
                        prop="equipName">
                        <el-input
                            size="mini"
                            placeholder="请选择设备编号自动带出"
                            v-model="formData.equipName"
                            disabled>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30">
                <el-col :span="24">
                    <el-form-item
                        label="程序文件"
                        prop="filePath"
                        required>
                        <el-upload
                            class="upload-demo"
                            :action="uploadApi"
                            :headers="uploadHeaders"
                            :file-list="fileList"
                            :on-success="uploadSuccess"
                            :on-remove="uploadRemove"
                            :limit="1">
                            <el-button
                                size="small"
                                type="primary">
                                点击上传
                            </el-button>
                            <div slot="tip" class="el-upload__tip">只能上传一个程序文件</div>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="30">
                <el-col :span="24">
                    <el-form-item
                        label="备注">
                        <el-input
                            type="textarea"
                            placeholder="请输入备注"
                            rows="6"
                            v-model="formData.remark">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer text-center">
            <el-button 
                size="small" 
                type="primary" 
                icon="el-icon-check"
                :loading="loadingToggle"
                @click="doConfirmClick('form')">
                确认
            </el-button>
            <el-button 
                size="small" 
                icon="el-icon-close"
                @click="doCancelClick('form')">
                取消
            </el-button>
        </span>
    </el-dialog>
</template>

<script>
    import dragDialog from '@/directive/dragDialog'

    export default {
        directives: {
            dragDialog
        },
        props: {
            equipType: {},
            workshopCode: {}
        },
        watch: {
            dialogToggle (newVal, oldVal) {
                this.uploadHeaders.Authorization = window.sessionStorage.getItem('Admin-Token')
                // 获取设备列表
                this.getSeviceList()
            }
        },
        data () {
            return {
                // 数据提交状态开关标识
                loadingToggle: false,
                // 弹出框开关标识
                dialogToggle: false,
                // 表单数据
                formData: {
                    equipCode: '',
                    equipName: '',
                    filePath: '',
                    remark: ''
                },
                // 设备列表数据
                deviceList: [],
                // 表单正则
                formRules: {
                    // 设备编号
                    equipCode: [{
                        validator: (rule, value, callback) => {
                            if (_.trim(value) === '') {
                                callback(new Error('请选择设备编号'))
                            }
                            callback();
                        },
                        trigger: ['change', 'blur']
                    }],
                    // 设备名称
                    equipName: [{
                        validator: (rule, value, callback) => {
                            if (_.trim(value) === '') {
                                callback(new Error('请选择设备编号自动带出'))
                            }
                            callback();
                        },
                        trigger: ['change', 'blur']
                    }],
                    // 程序文件
                    filePath: [{
                        validator: (rule, value, callback) => {
                            if (_.trim(value) === '') {
                                callback(new Error('请至少选择一个程序文件'))
                            }
                            callback();
                        },
                        trigger: ['change', 'blur']
                    }]
                },
                // 附件上传api
                uploadApi: `${process.env.API_HOST}/api/equipment/file/upload`,
                // 请求头信息
                uploadHeaders: { Authorization: '' },
                // 文件列表
                fileList: []
            }
        },
        methods: {
            // 获取设备列表
            getSeviceList () {
                let queryParams = { equipType: this.equipType, workshopCode: this.workshopCode }
                this.$fetch('equipment-controller/findByType-get', queryParams).then((response) => {
                    this.deviceList = _.cloneDeep(response)
                })
            },
            // 触发设备编号多选值事件
            onSelectChange (selectValue) {
                for (let item of this.deviceList) {
                    if (item.equipCode === selectValue) {
                        this.formData.equipName = item.equipName
                        break
                    }
                }
            },
            // 点击确认按钮
            doConfirmClick (formName) {
                this.$refs[formName].validate((vaild) => {
                    if (vaild) {
                        this.loadingToggle = true
                        let queryParams = { ...this.formData }
                        this.$fetch('equipment-controller/transfer-post', queryParams).then((response) => {
                            this.$message.success('程序下发成功！')
                            this.loadingToggle = false
                            this.$refs[formName].resetFields()
                            this.dialogToggle = false
                            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] = ''
                }
            },
            // 文件上传成功
            uploadSuccess (res, file) {
                this.fileList.push({
                    name: res.data.name,
                    url: res.data.path
                })
                this.formData.filePath = res.data.path
            },
            // 文件移除
            uploadRemove (file, fileList) {
                this.fileList = []
                this.formData.filePath = ''
            }
        }
    }
</script>

<style>

</style>