<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-btn">
                    <Button type="error" @click="delArr(index)" shape="circle">删除</Button>
                </div>
                <div class="main-li-div">
                    <Label class="main-li-label">标签</Label>
                </div>
                <div class="main-li-div">
                    <Input class="main-li-item" clearable v-model="item.label"/>
                </div>
                <div class="main-li-div">
                    <Label class="main-li-label">值</Label>
                </div>
                <div class="main-li-div">
                    <Input class="main-li-item" clearable v-model="item.value"/>
                </div>
                <div class="main-li-div">
                    <Label class="main-li-label">是否显示</Label>
                </div>
                <div class="main-li-div">
                    <i-switch class="main-li-item-switch" v-model="item.show"></i-switch>
                </div>
                <div class="main-li-btn">
                    <Button type="success"  @click="addCheckChildArr(index)">添加子集数组</Button>
                </div>
                <ul class="main-ul">
                    <li class="main-li" v-for="(item1,index1) in item.radioList">
                        <div class="main-li-div">
                            <Label class="main-li-label">名称</Label>
                        </div>
                        <div class="main-li-div">
                            <Input class="main-li-item" clearable v-model="item1.name"/>
                        </div>
                        <div class="main-li-div">
                            <Label class="main-li-label">是否选中</Label>
                        </div>
                        <div class="main-li-div">
                            <i-switch class="main-li-item-switch" v-model="item1.isSelected"></i-switch>
                        </div>
                        <div class="main-li-div">
                            <Label class="main-li-label">值</Label>
                        </div>
                        <div class="main-li-div">
                            <Input class="main-li-item" clearable v-model="item1.value"/>
                        </div>
                        <div class="main-li-btn-child">
                            <Button type="error" @click="delCheckChildArr(index,index1)">删除子集数组</Button>
                        </div>
                    </li>
                </ul>
            </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: 'mainToolEditorTypeCheckmultiple',
        name: 'main-tool-editor-type-checkmultiple',
        data() {
            return {
                radioArr: [],
                propArr: [],
                val: false,
                arrList: []
            };
        },
        mounted() {
            this.initCurrtField();
        },
        computed: {
            /*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() {
                debugger;
                let currentInstance = this.$store.state.viewport.instances.get(this.$store.state.viewport.currentEditInstanceKey);
                // 为事件新增一项
                if (!currentInstance.data.mockData) {
                    currentInstance.data.mockData = [];
                }
                return currentInstance.data.mockData;
            },
            applicationState() {

                return this.$store.state.application;
            },
            viewportState() {
                return this.$store.state.viewport;
            },
            optionsData() {
                let _data = this.propArr || [];
                return _data;
            },
            radioData() {
                let _data = this.radioArr || [];
                return _data;
            }
        },
        methods: {
            delArr(index) {
                this.$store.commit('viewport/delCheckEventArr', {index: index});
                /*  this.arrList.push({
                       trigger: "input1",
                      action: "input2"
                   })*/
            },
            delCheckChildArr(parentIndex, index) {

                this.$store.commit('viewport/delCheckChildArr', {parentIndex: parentIndex, index: index});
            },
            delOptionsChildArr(parentIndex, index) {

                this.$store.commit('viewport/delLinkOptionsEventChildArr', {parentIndex: parentIndex, index: index});
            },
            addArr() {
                debugger;
                this.$store.commit('viewport/addCheckEventArr', {});
                /*  this.arrList.push({
                       trigger: "input1",
                      action: "input2"
                   })*/
            },
            addOptionsChildArr(index) {

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

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

                this.$store.commit('viewport/addCheckChildArr', {index: index});
                /*  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);
            }
        },
        mounted() {

            let _this = this;
            /* this.$http.get('/static/data/page-ide/202-1.json').then((response) => {
                 _this.propArr=response.propArr;
                 _this.initCurrtField();
             });*/
           /* this.$http.get('/static/data/page-ide/radioType.json').then((response) => {
                _this.radioArr = response.propArr;
                _this.initCurrtField();
            });*/
        },
    };
</script>

<style>
</style>
