<template>
    <div style="width: 100%;">
        <Container>
            <Button @click="addArr()" type="success">添加</Button>
        </Container>
        <ul class="main-ul">
            <li v-for="(item,index) in getArrList" class="main-li">
                <div class="main-li-div">
                    <label class="main-li-label">label</label>
                </div>
                <div class="main-li-div">
                    <Input class="main-li-item" clearable @on-change="changeDynamic()" v-model="item.label" placeholder="请输入键" />
                </div>
                <div class="main-li-div">
                    <label class="main-li-label">value</label>
                </div>
                <div class="main-li-div">
                    <Input class="main-li-item" clearable @on-change="changeDynamic()" v-model="item.value" placeholder="请输入值" />
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import * as components from './style';
import {PropertyMixin} from '../../service/main-tool-editor-type-mixin';
import Service from "../../service/tool-service";
export default {
    components: {
        ...components
    },
    mixins: [PropertyMixin],
    position: 'mainToolEditorTypeTableDynamic',
    name: 'main-tool-editor-type-tableDynamic',
    data () {
        return {
            val: false,
            propList:[],
            typeList:[{
                    value: 'out',
                    label: '外部 out'
                },
                {
                    value: 'into',
                    label: '内部 into'
                },
                {
                    value: 'isShow',
                    label: '是否显示 isShow'
                }],
            isShow:false,
            out:true,
            into: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;
        },*/
        getPropList(){

        },
        getArrList(){
            debugger;
            let currentInstance= this.$store.state.viewport.instances.get(this.$store.state.viewport.currentEditInstanceKey);
            // 为事件新增一项
            if (!currentInstance.data.property.data) {
                currentInstance.data.property.data={};
                if (!currentInstance.data.property.data.paramsList) {
                    currentInstance.data.property.data.paramsList = [];
                }
            }
            return currentInstance.data.property.data.paramsList;
        },
        applicationState () {
            return this.$store.state.application;
        },
        viewportState () {
            return this.$store.state.viewport;
        }
    },
    methods: {
        changeDynamic(){
           debugger;
            this.$store.commit('viewport/updateTableDynamicArr',{});
        },
        typeChange(val){
            debugger;
            this.into=false;
            this.isShow=false;
            switch (val){
                case "out":{

                }break;
                case "into":{
                  this.into=true;
                }break;
                case "isShow":{
                    this.isShow=true;
                }break;

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

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

            this.$store.commit('viewport/addLinkEventChildArr',{index:index});
            /*  this.arrList.push({
                   trigger: "input1",
                  action: "input2"
               })*/
        },
        initPropList(){
            if(localStorage.propInfo&&localStorage.propInfo!="undefined") {
                let res = JSON.parse(localStorage.propInfo);
                let propArr = [];
                let targetArr = [];
                for (let propObj in res.prop) {
                    propArr = [...propArr, ...res.prop[propObj]];
                }
                let mockData = [];
                for (let propObj in res.prop) {
                    propArr = [...propArr, ...res.prop[propObj]];
                }
                this.propList = propArr;
                //});
            }
        },
        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);
        }
    },
    created() {
        this.initPropList();
    }
};
</script>

<style>

</style>
