<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>
                <li class="" v-for="(item,index) in getArrList" >
                        <Input v-model="item.label" 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()"></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: 'mainToolEditorTypeRadioSelect',
        name: 'main-tool-editor-type-radioSelect',
        data () {
            return {
                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 = [{
                            label: "常规",
                            value: "常规"
                        },{
                            label: "紧急",
                            value: "紧急"
                        },{
                            label: "特急",
                            value: "特急"
                        }];
                    }
                 }else{
                    // 为事件新增一项
                    if (!currentInstance.data.radioArr) {
                        currentInstance.data.radioArr = [{
                            label: "选项1",
                            value: "选项1"
                        },{
                            label: "选项2",
                            value: "选项2"
                        },{
                            label: "选项3",
                            value: "选项3"
                        }];
                    }
                 }

                return currentInstance.data.radioArr;
            },
            applicationState () {

                return this.$store.state.application;
            },
            viewportState () {
                return this.$store.state.viewport;
            }
        },
        methods: {
            setRadioValue(item){
                debugger;
                console.log(item);
                if(item){
                    item.value=item.label;
                }
            },
            delArr(index){
                this.$store.commit('viewport/delRadioEventArr',{index:index});
            },
            addArr(){
                this.$store.commit('viewport/addRadioEventArr',{});
            },
            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>
