<template>
    <div class="tool-type-radioArr" style="width: 100%;">
        <div class="radioArr-tool-type-div">
            <p class="radioArr-editorTextStyle">
                选项
                <span class="radioArr-editorMaxFontStyle">最多200项，每项最多50字</span>

                <!--<span class="editorMaxFontStyle"  v-if="editor.maxFont">最多200项，每项最多{{editor.maxFont}}字</span>-->
            </p>
            <ul class="">
                <template v-if="isLevel==true">
                    <label>数据通过后台接口获取</label>
                </template>
                <template v-else>
                    <Button type="primary" size="small" icon="ios-add" @click="addli">
                        <span >增加</span>
                    </Button>
                    <Button type="primary" size="small" v-if="isChild==true" icon="ios-add" @click="backul">
                        <span >返回</span>
                    </Button>
                        <li class="" v-for="(item,index) in getArrList"  v-if="isChild==false">
                                <Input v-model="item.label" maxlength="50" clearable @on-change="setRadioValue(item)"  class="radioArr-editorInput"/>
                                <span class="iconfont icon-reca-icon_roundreduce" @click="delArr(index)"></span>
                                <span class="iconfont icon-reca-icon_roundadd " @click="addArr(index)"></span>
                               <!--<ul style="margin-left: 20px;">
                                <li class="" v-for="(el,i) in item.children" >
                                    <Input v-model="item.label" clearable @on-change="setRadioValue(item)"  class="radioArr-editorInput"/>
                                    <span class="iconfont icon-reca-icon_roundreduce" @click="delChildArr(index,i)"></span>
                                </li>
                               </ul>-->
                        </li>
                    <li class="" v-for="(item,index) in getChildList"  v-if="isChild==true">
                                <Input v-model="item.label" clearable  maxlength="50" @on-change="setRadioValue(item)"  class="radioArr-editorInput"/>
                                <span class="iconfont icon-reca-icon_roundreduce" @click="delChildArr(index)"></span>
                    </li>
                </template>
            </ul>
        </div>
    </div>
</template>

<script>
    import * as components from './style';
    import {PropertyMixin} from '../../service/main-tool-editor-type-mixin';
    export default {
        components: {
            ...components
        },
        mixins: [PropertyMixin],
        position: 'mainToolEditorTypeDoubleSelect',
        name: 'main-tool-editor-type-doubleSelect',
        data () {
            return {
                isChild:false,
                parentIndex:0,
                val: false,
                isLevel:false,
                arrList:[]
            };
        },
        mounted () {
            debugger;
            console.log(this.editor.isLevel);
            this.initCurrtField();
        },
        computed: {

            getArrList(){
                let currentInstance= this.$store.state.viewport.instances.get(this.$store.state.viewport.currentEditInstanceKey);
                this.isLevel=currentInstance.data.isLevel;
                if(this.isLevel){
                    // 为事件新增一项
                    if (!currentInstance.data.radioArr) {
                        currentInstance.data.radioArr = [];
                    }
                 }else{
                    // 为事件新增一项
                    if (!currentInstance.data.radioArr) {
                        currentInstance.data.radioArr = [{
                            label: "选项1",
                            value: "选项1"
                        },{
                            label: "选项2",
                            value: "选项2"
                        },{
                            label: "选项3",
                            value: "选项3"
                        }];
                    }
                 }

                return currentInstance.data.radioArr;
            },
            getChildList(){
                debugger;
                let currentInstance= this.$store.state.viewport.instances.get(this.$store.state.viewport.currentEditInstanceKey);
                return currentInstance.data.radioArr[this.parentIndex].children;
            },
            applicationState () {

                return this.$store.state.application;
            },
            viewportState () {
                return this.$store.state.viewport;
            }
        },
        methods: {
            backul(){
                this.isChild=false;
            },
            setRadioValue(item){
                debugger;
                console.log(item);
                if(item){
                    item.value=item.label;
                }
            },
            delChildArr(index){
                this.$store.commit('viewport/delChildArr',{index:this.parentIndex,childIndex:index});
            },
            delArr(index){
                this.$store.commit('viewport/delRadioEventArr',{index:index});
            },
            addArr(index){

                this.$store.commit('viewport/addDoubleEventArr',{index:index});
                this.parentIndex=index;
                this.isChild=true;
            },
            addli(index){
                if(!this.isChild){
                    this.$store.commit('viewport/addRadioEventArr',{index:index});
                }else{
                    this.$store.commit('viewport/addDoubleEventArr',{index:this.parentIndex});
                }

            },
            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 scoped lang="less">
    .tool-type-radioArr {
        margin: 10px 8px 0;
        .radioArr-tool-type-div  {
            margin: 5px 8px 0;
            .radioArr-editorTextStyle {
                font-weight: 700;
                font-size: 14px;
                color: #191f25;
                margin-bottom: 4px;
                .radioArr-editorMaxFontStyle {
                    color: rgba(25,31,37,.4);
                    font-size: 12px;
                }
                .radioArr-editorMaxFontStyleFalse{
                    color: red;
                    font-size: 12px;
                }
            }
            .radioArr-editorInput {
                margin: 5px 0;
            }
            .radioArr-editorInputFalse {
                margin: 5px 0;
                border:1px solid red;
            }
            .radioArr-editorContentStyle {
                font-size: 12px;
                margin: 8px 0;
            }
        }
        .ivu-input-wrapper {
            width: 80%;
            border-radius: 4px;
        }
        .ivu-input {
            border-radius: 4px;
        }
    }

</style>
