<template>
    <div style="width: 100%;">
        <Container>
            <Button @click="addArr()" type="success">添加步骤名称</Button>
        </Container>
        <ul class="main-ul">
            <li class="main-li" v-for="(item,index) in getArrList">
                <div class="main-li-div">
                    <Label class="main-li-label">标题:</Label>
                </div>
                <div class="main-li-div">
                    <Select v-model="item.title" class="main-li-item">
                        <Option v-for="item in optionsData" :value="item.value||''" :key="item.value">{{ item.key }}</Option>
                    </Select>
                </div>
                <div class="main-li-btn">
                    <Button @click="delArr(index)" type="error">删除</Button>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import * as components from './style';
import {PropertyMixin} from '../../service/main-tool-editor-type-mixin';
export default {
    components: {
        ...components
    },
    mixins: [PropertyMixin],
    position: 'mainToolEditorTypeSteps',
    name: 'main-tool-editor-type-steps',
    data () {
        return {
            propArr:[],
            val: false,
            arrList:[]
        };
    },
    mounted () {
        let _this=this;
            _this.propArr=configPageIde.stepSelect;
            _this.initCurrtField();
    },
    computed: {
        optionsData () {
            let _data = this.propArr || [];
            return _data;
        },/*getChildList(){

            let currentInstance= this.$store.state.viewport.instances.get(this.$store.state.viewport.currentEditInstanceKey);
            // 为事件新增一项
            if (!currentInstance.data.linkageChangeValue) {
                currentInstance.data.linkageChangeValue = [];
            }
            if (!currentInstance.data.linkageChangeValue.values) {
                currentInstance.data.linkageChangeValue.values = [];
            }
            return currentInstance.data.linkageChangeValue.values;
        },*/
        getArrList(){

            let currentInstance= this.$store.state.viewport.instances.get(this.$store.state.viewport.currentEditInstanceKey);
            // 为事件新增一项
            if (!currentInstance.data.steps) {
                currentInstance.data.steps = [];
            }
            return currentInstance.data.steps;
        },
        applicationState () {

            return this.$store.state.application;
        },
        viewportState () {
            return this.$store.state.viewport;
        }
    },
    methods: {
        delArr(index){
            this.$store.commit('viewport/delStepsEventArr',{index:index});
            /*  this.arrList.push({
                   trigger: "input1",
                  action: "input2"
               })*/
        },

        addArr(){
            this.$store.commit('viewport/addStepsEventArr',{});
            /*  this.arrList.push({
                   trigger: "input1",
                  action: "input2"
               })*/
        },

        handleChange () {

        }
    },
    watch: {
        val (n, o) {
            if (n === o) {
                return;
            }
            this.setInstanceProps(n);
        },
        input1 (n, o) {
            if (n === o) {
                return;
            }
            this.setInstanceProps(n);
        },
        input2 (n, o) {
            if (n === o) {
                return;
            }
            this.setInstanceProps(n);
        }
    }
};
</script>

<style>

</style>
