<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">
                    <Select class="main-li-item"  v-model="item.prop" clearable>
                        <Option v-for="item in optionsData" :value="item.value" :key="item.value">{{ item.key }}
                        </Option>
                    </Select>
                </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.isShow"></i-switch>
                </div>
                <div class="main-li-btn">
                    <Button type="success"  @click="addExactChildArr(index)">添加exact数组</Button>
                </div>
                <ul class="main-ul">
                    <li class="main-li" v-for="(item1,index1) in item.exact">
                        <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.type"/>
                        </div>
                        <div class="main-li-btn-child">
                            <Button type="error" @click="delExactChildArr(index,index1)">删除子集数组</Button>
                        </div>
                    </li>
                </ul>
                <div class="main-li-btn">
                    <Button type="success" @click="addOptionsChildArr(index)">添加options数组</Button>
                </div>
                <ul class="main-ul">
                    <li class="main-li" v-for="(item2,index2) in item.options" :key="index2">
                        <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="item2.name"/>
                        </div>
                        <div class="main-li-div">
                            <Label class="main-li-label">值</Label>
                        </div>
                        <div class="main-li-div">
                            <Select class="main-li-item"  v-model="item2.value" clearable>
                                <Option v-for="item in radioData" :value="item.value" :key="item.value">{{ item.key }}
                            </Option>
                        </Select>
                        </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="item2.isSelected"></i-switch>
                        </div>
                        <div class="main-li-btn-child">
                            <Button @click="delOptionsChildArr(index,index2)" type="error">删除子集数组</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: 'mainToolEditorTypeLinkItems',
        name: 'main-tool-editor-type-linkItems',
        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() {

                let currentInstance = this.$store.state.viewport.instances.get(this.$store.state.viewport.currentEditInstanceKey);
                // 为事件新增一项
                if (!currentInstance.data.items) {
                    currentInstance.data.items = [];
                }
                return currentInstance.data.items;
            },
            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/delLinkItemsEventArr', {index: index});
                /*  this.arrList.push({
                       trigger: "input1",
                      action: "input2"
                   })*/
            },
            delExactChildArr(parentIndex, index) {

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

                this.$store.commit('viewport/delLinkOptionsEventChildArr', {parentIndex: parentIndex, index: index});
            },
            addArr() {
                this.$store.commit('viewport/addLinkItemsEventArr', {});
                /*  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"
                   })*/
            },
            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>
