<template>
    <el-dialog title='根据识别关键内容批量对象数据字典' :visible.sync='dialogVisible' width='900px'>
        <div class='box'>
            <div class='cond'>
                <span class='label'>设备参数</span>
                <el-cascader :options='options1' v-model='selectedOptions' @change='handleChange' clearable></el-cascader>
            </div>
            <div class='content'>
                <el-tabs style v-model='activeName'>
                    <el-tab-pane label='1、确定与数据字典中信息点的对应' name='0'>
                        <tab1></tab1>
                    </el-tab-pane>
                    <el-tab-pane label='2、确定值的处理方式' name='1'>
                        <tab2></tab2>
                    </el-tab-pane>
                    <el-tab-pane label='3、缺认并维护涉及到的原始点位对应的设备标识' name='2'>
                        <tab3></tab3>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>

        <span slot='footer' class='dialog-footer'>
            <el-button type='primary' @click="pre" v-if="activeName > 0">上一步</el-button>
            <el-button type='primary' @click="next" v-if="activeName < 2">下一步</el-button>
            <el-button type='primary' @click='dialogVisible = false' v-if="activeName == 2">保 存</el-button>
        </span>
    </el-dialog>
</template>

<script>
//components
import Tab1 from './Tab1'
import Tab2 from './Tab2'
import Tab3 from './Tab3'
import noHandle from '@/components/config_point/step3_edit/no_handle'
import autoHandle from '@/components/config_point/step3_edit/auto_handle'
import enumHandle from '@/components/config_point/step3_edit/enum_handle'
import formulaHandle from '@/components/config_point/step3_edit/formula_handle'
import splitHandle from '@/components/config_point/step3_edit/split_handle'
export default {
    name: '',
    data() {
        return {
            dialogVisible: false,
            selectedOptions: [],
            activeName: '0',
            tabNameArr: ["0", "1", '2'],
            options1: [
                {
                    value: '100',
                    label: '3#',
                    children: [
                        {
                            value: '101',
                            label: '水阀'
                        }
                    ]
                },
                {
                    value: '200',
                    label: '2#',
                    children: [
                        {
                            value: '201',
                            label: '温度'
                        },
                        {
                            value: '201',
                            label: '开关状态'
                        }
                    ]
                },
                {
                    value: '300',
                    label: '水阀',
                    children: [
                        {
                            value: '301',
                            label: '温度'
                        }
                    ]
                }
            ],
            
            
        }
    },
    components: {
        Tab1,
        Tab2,
        Tab3,
    },
    methods: {
        
        show() {
            this.dialogVisible = true
        },
        handleChange() {},
        next() {
            this.activeName = this.tabNameArr[this.activeName * 1 + 1]
        },
        pre() {
            this.activeName = this.tabNameArr[this.activeName * 1 - 1]
        }
    }
}
</script>

<style scoped lang='less'>
@labelColor: #606266;
.box {
    height: 500px;
    overflow: auto;
    .cond {
        text-align: right;
        .label {
            color: @labelColor;
        }
    }
    .content {
        .form {
            width: 520px;
            margin: 0 auto;
        }
        .form-step2 {
            height: 400px;
        }
    }
}
</style>
