<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> -->
        </el-form>
        <div class='formula-box'>
            <p>原始点位</p>
            <p class='xia-1'>👇</p>
            <div>
                截取:
                <el-switch v-model='subStrVal' active-color='#13ce66' inactive-color='#C0CCDA'></el-switch>
                <p class='sub-p'>
                    <el-input-number v-model='from' :min='1' :max='10' label='描述文字' :disabled='!subStrVal'></el-input-number>位 - 第
                    <el-input-number
                        v-model='to'
                        :min='1'
                        :max='10'
                        label='描述文字'
                        :disabled='!subStrVal'
                        @change='subToChange'
                    ></el-input-number>位(从1开始)
                </p>
            </div>
            <p class='xia-2'>👇</p>
             <p>
                仅提取其中的数值:
                <el-switch v-model='extract' active-color='#13ce66' inactive-color='#C0CCDA'></el-switch>
            </p>
            <p class='xia-3'>👇</p>
            <p>
                数值计算:
                <el-switch v-model='valCountVal' active-color='#13ce66' inactive-color='#C0CCDA'></el-switch>
            </p>
            <p>
                <el-select class='mark' v-model='mark' placeholder='请选择' :disabled='!valCountVal'>
                    <el-option v-for='item in markArr' :key='item.value' :label='item.label' :value='item.value'></el-option>
                </el-select>
                <el-input class='mark-value' v-model='markValue' :disabled='!valCountVal'></el-input>
            </p>
        </div>
    </div>
</template>

<script>
export default {
    name: 'step3_formula-handle',
    data() {
        return {
            form: {
                EquipmentMark: '',
            },
            extract: true,
            rules: {
                // EquipmentMark: [{ required: true, message: '请输入对象标识', trigger: 'blur' }]
            },
            subStrVal: false,
            from: 1,
            to: 1,
            valCountVal: false,
            mark: 'plus',
            markValue: '',
            markArr: [
                {
                    label: '＋',
                    value: 'plus'
                },
                {
                    label: '-',
                    value: 'minus'
                },
                {
                    label: '*',
                    value: 'time'
                },
                {
                    label: '/',
                    value: 'divide'
                }
            ]
        }
    },
    props: {
        devFlag: {
            default: true,
            type: Boolean
        },
        formulaHandleShow: {}
    },
    methods: {
        getForm(cb) {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    if (this.subStrVal) {
                        this.form.from = this.from
                        this.form.to = this.to
                    }
                    if (this.valCountVal) {
                        if (!this.markValue) {
                            // this.$message({
                            //     message: '请填写数值计算',
                            //     type: 'warning'
                            // })
                            cb(false)
                            return
                        } else {
                            this.form.mark = this.mark
                            this.form.markValue = this.markValue
                        }
                    }
                    this.form.extract = this.extract
                    cb(this.form)
                } else {
                    cb(false)
                }
            })
        },
        subToChange(val) {}
    },
    watch: {
        from(val) {
            if (val > this.to) {
                this.to = val
            }
        },
        formulaHandleShow: {
            deep: true,
            immediate: true,
            handler(val) {
                if (val) {
                    this.form = JSON.parse(JSON.stringify(val))
                    if (this.form.cut) {
                        this.subStrVal = true
                        this.from = this.form.cut.from
                        this.to = this.form.cut.to
                    } else {
                        this.subStrVal = false
                        this.from =1
                        this.to = 1
                    }
                    if(this.form.count) {
                        this.valCountVal = true
                        this.mark = this.form.count.calculationtype
                        this.markValue = this.form.count.value
                    } else {
                        this.valCountVal = false
                        this.mark = 'plus'
                        this.markValue = ''
                    }
                    if(this.form.extractArr && this.form.extractArr.length) {
                        this.extract = true
                    } else {
                        this.extract = false
                    }
                }
            }
        }
    }
}
</script>

<style lang='scss' scoped>
.edit-box {
    .formula-box {
        padding-left: 40px;
        .sub-p {
            margin-top: 10px;
        }
        .xia-2 {
            padding-left: 50px;
        }
        .xia-3 {
            padding-left: 100px;
        }
        .mark {
            width: 100px;
        }
        .mark-value {
            margin-left: 30px;
            width: 200px;
        }
    }
}
</style>
