<template>
    <div class='edit-box'>
        <el-form ref='form' :rules='rules' :model='form' label-width='140px'>
            <!-- <el-form-item v-if='devFlag' label='对象标识' prop='EquipmentMark'>
                <el-input v-model='form.EquipmentMark'></el-input>
            </el-form-item> -->

            <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: true, message: "不能为空", trigger: "blur"
    }'
                        >
                            <el-input v-model='item.from'></el-input>
                        </el-form-item>
                    </p>
                    <p>
                        <el-form-item label='转换为标准值' :prop='"pointArr." + index + ".to"' :rules='{
      required: true, message: "不能为空", trigger: "blur"
    }'>
                            <el-input v-model='item.to'></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'>+添加新转换规则</el-button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'step3_auto-handle',
    data() {
        return {
            form: {
                EquipmentMark: '',
                pointArr: [{ from: '', to: '' }]
            },
            rules: {
                // EquipmentMark: [{ required: true, message: '请输入对象标识', trigger: 'blur' }]
            }
        }
    },
    props: {
        devFlag: {
            default: true,
            type: Boolean
        },
        enumHandleShow:{}
    },
    methods: {
        getForm(cb) {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    cb(this.form)
                } else {
                    cb(false)
                }
            })
        },
        addRules() {
            this.form.pointArr.push(this.newRules())
        },
        newRules() {
            return { from: '', to: '' }
        },
        deleteRow(index) {
            this.form.pointArr.splice(index, 1)
        }
    },
    watch:{
        enumHandleShow: {
            deep: true,
            immediate: true,
            handler(val) {
                if(val) {
                    this.form = JSON.parse(JSON.stringify(val))
                }
                
            }
        }
    }
}
</script>

<style scoped lang='scss'>
.edit-box {
    padding: 20px 0;
    .tip {
        color: #ccc;
    }
    .point-box {
        margin-top: 45px;
        position: relative;
        width: 500px;
        .left,
        .right {
            font-size: 20px;
            background: #fff;
        }
        .left {
            position: absolute;
            top: -35px;
            left: 23px;
            margin: 0;
            padding: 0;
        }
        .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>