<template>
    <div class="tool-type-validateInput" style="width: 100%;" >
        <ul class="tool-type-ul">
            <li v-for="(item,index) in getArrList">
                <template v-if="index==0">
                    <div class="editorTextStyle">
                        <Label>验证</Label>
                    </div>
                    <div class="switch-style">
                        <i-switch  class="" v-model="item.required" @on-change="updatePlaceholder(item.required)" ></i-switch>
                    </div>
                    <div class="editorTextStyle">
                        <Label>提示信息</Label>
                    </div>
                    <div class="">
                        <Input class="editorInput" placeholder="不能为空" clearable v-model="item.message"  />
                    </div>
                </template>
                <template v-else>
                    <div class="editorTextStyle">
                        <Label>最多可输入文本长度(个)</Label>
                    </div>
                    <div class="">
                        <InputNumber style="width: 100%;" class="editorInput" placeholder="请输入最大文本长度" @on-change="updateMaxLength(item.maxLength)"   v-model="item.maxLength" />
                    </div>
                </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: 'mainToolEditorTypeValidateInput',
        name: 'main-tool-editor-type-validateInput',
        data() {
            return {
                validateCustomeAllType: configPageIde.validateCustomeAllType,
                validateType: configPageIde.validateType,
                propList: [],
                triggerType: configPageIde.validateClick,
                custom: false,
                val: false,
                arrList: []
            };
        },
        mounted() {
            this.addArr();
            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: {
            updateMaxLength(val){
                debugger;
                let currentInstance = this.$store.state.viewport.instances.get(this.$store.state.viewport.currentEditInstanceKey);
                if(currentInstance.gaeaKey=="gaea-input"||currentInstance.gaeaKey=="gaea-textarea"){
                  //  currentInstance.data.extend.maxLength=val;
                    this.$store.commit('viewport/setInstanceProps', {
                        vm: currentInstance.vm,
                        key: "extend",
                        value: {
                            maxLength: val
                        }
                    });
                }else{
                }
            },
            updatePlaceholder(val){
                debugger;
                let currentInstance = this.$store.state.viewport.instances.get(this.$store.state.viewport.currentEditInstanceKey);
                if(val){
                    currentInstance.data.extend.placeholder=currentInstance.data.extend.placeholder+"(必填)";
                }else{
                    currentInstance.data.extend.placeholder= currentInstance.data.extend.placeholder.substring(0,currentInstance.data.extend.placeholder.length-4)
                }

            },
            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.data.validateArr.length>0){
                  return "";
                  //note 如果有值，将不会再进行操作，否则将会新增一个
              }
              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>
    .tool-type-validateInput {
        margin: 10px 8px 0;
        .tool-type-ul  {
            margin: 5px 8px 0;
            .editorTextStyle {
                font-weight: 700;
                font-size: 14px;
                color: #191f25;
                margin-bottom: 4px;
            }
            .editorInput {
                margin: 5px 0;
                border-radius: 4px;
            }
            .switch-style {
                margin-bottom: 18px;
            }
        }
        .ivu-input {
            border-radius: 4px;
        }
    }
</style>
