<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">
                <template v-if="index==0">
                    <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.required" ></i-switch>
                    </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.message"  />
                    </div>
                </template>
                <template v-else>
                    <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.message"  />
                    </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.type"  @on-change="typeChange(item.type)" clearable>
                            <Option v-for="item1 in validateType" :value="item1.value" :key="item1.value" class="main-li-item-option">{{ item1.key }}
                            </Option>
                        </Select>
                    </div>
                    <div v-if="custom" class="main-li-div">
                        <Label class="main-li-label">满足全部关联条件</Label>
                    </div>
                    <div v-if="custom" class="main-li-div">
                        <Select class="main-li-item" v-model="item.customType" clearable>
                            <Option v-for="item1 in validateCustomeAllType" :value="item1.value" :key="item1.value">{{
                                item1.key }}
                            </Option>
                        </Select>
                    </div>
                    <div v-if="custom"  class="main-li-div">
                        <Label class="main-li-label">自定义校验类型</Label>
                    </div>
                    <div v-if="custom"  class="main-li-div">
                        <Select class="main-li-item" v-model="item.validateType" clearable>
                            <Option v-for="item1 in validateType" :value="item1.value" :key="item1.value"  class="main-li-item-option">{{ item1.key }}
                            </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.trigger" clearable>
                            <Option v-for="item1 in triggerType" :value="item1.value" :key="item1.value">{{ item1.key }}
                            </Option>
                        </Select>
                    </div>
                 <!--   <div class="main-li-div">
                        <Label class="main-li-label">不能超过的年或天数</Label>
                    </div>
                    <div class="main-li-div">
                        <InputNumber class="main-li-item-inputNumber" clearable v-model="item.range" />
                    </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.unit"  />
                    </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.requireKeyValues" class="main-li">
                            <div class="main-li-div" >
                                <Label class="main-li-label">关联属性</Label>
                            </div>
                            <div class="main-li-div">
                                <Select v-model="item1.key" class="main-li-item">
                                    <Option v-for="item in propList" :value="item.busiName" :key="item.busiName">{{
                                        item.busiDesc }}
                                    </Option>
                                </Select><!-- <Input v-model="item1.changeParam" />--></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="item1.values" placeholder="添加内容，如果是数组，以逗号分开"/>
                            </div>
                            <div class="main-li-btn-child">
                                <Button @click="delChildArr(index,index1)" type="error">删除联动校验</Button>
                            </div>
                        </li>
                    </ul>
                </template>

            </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: 'mainToolEditorTypeValidateArr',
        name: 'main-tool-editor-type-validateArr',
        data() {
            return {
                validateCustomeAllType: configPageIde.validateCustomeAllType,
                validateType: configPageIde.validateType,
                propList: [],
                triggerType: configPageIde.validateClick,
                custom: false,
                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() {
                debugger;
                let currentInstance = this.$store.state.viewport.instances.get(this.$store.state.viewport.currentEditInstanceKey);
                // 为事件新增一项
                if (!currentInstance.data.validateArr) {
                    currentInstance.data.validateArr = [];
                }
                return currentInstance.data.validateArr;
            },
            applicationState() {
                return this.$store.state.application;
            },
            viewportState() {
                return this.$store.state.viewport;
            }
        },
        methods: {
            typeChange(val) {
                debugger;
                this.custom = false;
                switch (val) {
                    case "custom": {
                        this.custom = true;
                    }
                        break;
                }
            },
            delArr(index) {
                this.$store.commit('viewport/delValidateEventArr', {index: index});
            },
            addArr() {
              debugger;
              let currentInstance = this.$store.state.viewport.instances.get(this.$store.state.viewport.currentEditInstanceKey);
              if(currentInstance.gaeaKey=="gaea-input"){
                if(currentInstance.data.extend.disabled==true){
                  this.$Notice.warning({
                    title: '',
                    desc: '当前文本框禁用,不能添加校验'
                  });
                     return "";
                }
              }
              this.$store.commit('viewport/addValidateEventArr', {});
            },
            addChildArr(index) {

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

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

            },
            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;
                    //});
                }
            },
        },
        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>
