<template>
    <div class='edit-box'>
        <el-form v-if='form.devArr.length' class='form' ref='form' :model='form' label-width='140px'>
            <div class='dev-know' v-for='(item,index) in form.devArr' :key='index'>
                <el-form-item
                    v-if='devFlag'
                    label='设备标识'
                    :prop='"devArr." + index + ".EquipmentMark"'
                    :rules='{
          required: true, message: "设备标识不能为空", trigger: "blur"
        }'
                >
                    <el-input v-model='item.EquipmentMark'></el-input>
                </el-form-item>
                <p class='strsub'>
                    截取 第
                    <el-input-number v-model='item.SplitStart' :min='1' :max='10' label='描述文字'></el-input-number>位 - 第
                    <el-input-number v-model='item.SplitEnd' :min='1' :max='10' label='描述文字'></el-input-number>位(从1开始)
                </p>
                <i v-if='index > 0' class='el-icon-minus del-sub-icon' @click='delDev(index)'></i>
            </div>
            <div class='add-btn-box'>
                <el-button type='primary' @click='addDevs'>+添加设备标识</el-button>
            </div>
            <p class='tranf-box'>
                需要将截取值转换为标准值
                <el-switch v-model='tranfVal' style='margin-left:12px' active-color='#13ce66' inactive-color='#ff4949'></el-switch>
            </p>
            <ul class='point-box'>
                <span class='left'>如果</span>
                <span class='right'>那么</span>
                <li v-for='(item,index) in form.pointArr' :key='index'>
                    <p>
                        <el-form-item
                            label='原始点位值'
                            :prop='"pointArr." + index + ".from"'
                            :rules='{
          required: tranfVal?true: false, message: "不能为空", trigger: "blur"
        }'
                        >
                            <el-input v-model='item.from' :disabled='!tranfVal'></el-input>
                        </el-form-item>
                    </p>
                    <p>
                        <el-form-item
                            label='转换为标准值'
                            :prop='"pointArr." + index + ".to"'
                            :rules='{
          required: tranfVal?true: false, message: "不能为空", trigger: "blur"
        }'
                        >
                            <el-input v-model='item.to' :disabled='!tranfVal'></el-input>
                        </el-form-item>
                        <i v-if='index > 0' class='el-icon-delete delete' @click='deleteRow(index)'></i>
                    </p>
                </li>
            </ul>
        </el-form>
        <div class='add-btn-box'>
            <el-button type='primary' @click='addRules' :disabled='!tranfVal'>+添加新转换规则</el-button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'step3_auto-handle',
    data() {
        return {
            form: {
                devArr: [
                    {
                        EquipmentMark: '',
                        SplitStart: 1,
                        SplitEnd: 1
                    }
                ],
                pointArr: []
            },
            tranfVal: false
        }
    },
    props: {
        devFlag: {
            default: true,
            type: Boolean
        },
        splitHandleShow: {}
    },
    methods: {
        getForm(cb) {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    this.form.tranfVal = this.tranfVal
                    cb(this.form)
                } else {
                    cb(false)
                }
            })
        },
        addDevs() {
            this.form.devArr.push(this.newDevs())
        },
        newDevs() {
            return {
                EquipmentMark: '',
                SplitStart: 1,
                SplitEnd: 1
            }
        },
        delDev(index) {
            this.form.devArr.splice(index, 1)
        },
        addRules() {
            this.form.pointArr.push(this.newRules())
        },
        newRules() {
            return {
                from: '',
                to: ''
            }
        },
        deleteRow(index) {
            if (!this.tranfVal) {
                return false
            }
            this.form.pointArr.splice(index, 1)
        },
        init() {
            this.form.pointArr = [
                {
                    from: '',
                    to: ''
                }
            ]
        }
    },
    watch: {
        splitHandleShow: {
            immediate: true,
            deep: true,
            handler(val) {
                if (val) {
                    this.form = val
                    // console.log(this.form)
                } else {
                    this.init()
                }
            }
        }
    }
}
</script>

<style scoped lang='scss'>
.edit-box {
    .form {
        .dev-know {
            margin-top: 5px;
            background: #e6e6e6;
            padding: 5px 50px 5px 0;
            width: 470px;
            position: relative;
            .del-sub-icon {
                position: absolute;
                right: 15px;
                top: 50px;
                cursor: pointer;
            }
            .strsub {
                padding-left: 20px;
            }
        }
    }
    .tranf-box {
        height: 50px;
        line-height: 80px;
    }
    .point-box {
        margin-top: 45px;
        position: relative;
        width: 500px;
        .left,
        .right {
            font-size: 20px;
            background: #fff;
        }
        .left {
            position: absolute;
            top: -35px;
            left: 23px;
        }
        .right {
            position: absolute;
            top: -35px;
            left: 260px;
            margin: 0;
            padding: 0;
        }
        li {
            display: flex;
            justify-content: space-between;
            margin-top: 5px;
            position: relative;
            p {
                .name {
                    padding-left: 40px;
                }
                .value {
                    margin-left: 10px;
                    display: inline-block;
                    width: 80px;
                }
            }
            .delete {
                top: 5px;
                right: -20px;
                cursor: pointer;
                position: absolute;
                z-index: 99999;
            }
        }
    }
    .add-btn-box {
        margin-top: 20px;
        text-align: center;
    }
}
</style>
