<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>
                </div>
                <div class="main-li-div">
                    <Select class="main-li-item" v-model="item.type" clearable
                                               @on-change="typeChange(item.type)">
                        <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
                    </Select>
                </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.changeKey" clearable>
                        <Option v-for="item in propList" :value="item.busiName" :key="item.busiName">{{ item.busiDesc }}
                        </Option>
                    </Select>
                </div>
                <div v-if="isShow" class="main-li-div">
                    <Label class="main-li-label">匹配的值</Label>
                </div>
                <div v-if="isShow" class="main-li-div">
                    <Input class="main-li-item" clearable v-model="item.showValue"/>
                </div>
                <div class="main-li-btn">
                    <Button @click="delArr(index)" type="error">删除当前数组</Button>
                </div>
                <div class="main-li-btn">
                    <Button @click="addChildArr(index)" type="success">添加子集数组</Button>
                </div>
                <ul class="main-ul">
                    <li v-for="(item1,index1) in item.values" class="main-li">
                        <div class="main-li-div">
                            <Label class="main-li-label">原始属性值</Label>
                        </div>
                        <div class="main-li-div">
                            <Select class="main-li-item" v-model="item1.changeParam" clearable
                                                          @on-change="typeChange(item.type)">
                                <Option v-for="item in propList" :value="item.busiName" :key="item.busiName">{{
                                    item.busiDesc }}
                                </Option>
                            </Select>
                        </div>
                        <div v-if="into" class="main-li-div">
                            <Label class="main-li-label">依赖的值</Label>
                        </div>
                        <div v-if="into" class="main-li-div">
                            <Input class="main-li-item" clearable v-model="item1.dependValue"/>
                        </div>
                        <div v-if="isShow" class="main-li-div">
                            <Label class="main-li-label">改变的值</Label>
                        </div>
                        <div v-if="isShow" class="main-li-div">
                            <i-switch class="main-li-item-switch"  v-model="item1.changeValue"></i-switch>
                        </div>
                        <div v-if="into" class="main-li-div">
                            <Label class="main-li-label">是否只读</Label>
                        </div>
                        <div v-if="into" class="main-li-div">
                            <i-switch class="main-li-item-switch" v-model="item1.changeAttrs.readonly"></i-switch>
                        </div>
                        <div v-if="into" class="main-li-div">
                            <Label class="main-li-label">是否清除</Label>
                        </div>
                        <div v-if="into" class="main-li-div">
                            <i-switch class="main-li-item-switch" v-model="item1.changeAttrs.clearable"></i-switch>
                        </div>
                        <div class="main-li-btn-child">
                            <Button @click="delChildArr(index,index1)" 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';
    import Service from "../../service/tool-service";

    export default {
        components: {
            ...components
        },
        mixins: [PropertyMixin],
        position: 'mainToolEditorTypeLinkageChangeValue',
        name: 'main-tool-editor-type-linkageChangeValue',
        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.extend.linkageChangeValue) {
                    currentInstance.data.extend.linkageChangeValue = [];
                }
                return currentInstance.data.extend.linkageChangeValue;
            },
            applicationState() {
                return this.$store.state.application;
            },
            viewportState() {
                return this.$store.state.viewport;
            }
        },
        methods: {
            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/addLinkEventArr', {});
                /*  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 = [];
                    if (localStorage.selectProp && localStorage.selectProp != "undefined") {
                        let pageObj = eval('(' + localStorage.selectProp + ')');//JSON.parse(localStorage.getItem("page"));
                        //  title:"",
                        propArr = [...propArr, ...pageObj];
                    }
                    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 lang="less" scoped>
</style>

