<template>
  <div class="complexBox">
    <Input
      v-model="approves"
      placeholder="请输入"
      icon="ios-funnel-outline"
      @on-click="onIconclick"
      disabled
    />
    <Modal
      v-model="openControl"
      :title="title"
      :mask="true"
      :mask-closable="false"
      :width="835"
      @on-ok="ok"
      @on-cancel="cancel"
    >
      <div class="modalCotent">
        <mutipleSelectPop
          ref="dialogtest"
          :loading="loading"
          :resultData="resultMessage"
          :isUse="isUse"
          :isMutiple="isMutiple"
          :isCallInterface="isCallInterface"
          @getResult="getResult"
          @on-delectli="deleteLi"
          @delecFun="delecFun"
          @on-select="Onselect"
          @on-select-cancel="onSelectCancel"
          @on-select-all="onSelectAll"
          @on-select-all-cancel="onSelectAllCancel"
          @on-selection-change="onSelectChange"
          @on-row-dblclick="rowdbClick"
          @on-row-click="rowClick"
          @on-change="inputchange"
          @on-keydown="inputkeydown"
          @on-search="inputsearch"
          @on-select-change="getSelectedNodes"
          @on-check-change="getCheckedNodes"
        ></mutipleSelectPop>
      </div>
    </Modal>
  </div>
</template>
<script>
import mutipleSelectPop from "@/components/MutipleSelectPop";
export default {
  name: "complexBox",
  components: { mutipleSelectPop },
  props: {
    title: {
      type: String,
      default: ""
    },
    defaultValue: {
      type: String,
      default: ""
    },
    resultData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    isUse: {
      type: Boolean,
      default: true
    },
    isMutiple: {
      type: Boolean,
      default: true
    },
    disabled:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      loading: false,
      openControl: false,
      isCallInterface: false,
      approves: "",
      resultObj: {
        total: 0,
        list: []
      },
      result: {
        //结果备份
        total: 0,
        list: []
      }
    };
  },
  computed: {
    resultMessage() {
      // let data = Object.assign(this.resultObj, this.resultData);
      return this.resultObj;
    }
  },
  methods: {
    onIconclick() {
      if(this.disabled){
        return
      }
      this.openControl = true;
      this.isCallInterface = true;
      this.resultObj = this.deepCopy(this.result);
      this.resultObj.total = this.resultObj.list.length;
    },
    getResult(data) {
      //组件的结果
      this.resultObj = this.deepCopy(data);
    },
    ok() {
      if (this.resultObj.list.length > 0) {
              this.result.list=[];

          //增加
          //新增
          this.resultObj.list.map(item => {
            if (this.result.list.length > 0) {
              //修改
              let flagIndex = this.result.list.findIndex(inner => {
                return (
                  item.approve_value === inner.approve_value|| item.ID === Number(inner.approve_value)
                );
              });
              if (flagIndex === -1) {
                //没有相同的
                this.result.list.push({
                  approve_type: item.approve_type,
                  approve_value: item.approve_value?item.approve_value:item.ID,
                  approve_value_name: item.string,
                  string: item.string
                });
              }
            } else {
              //新增
              this.result.list.push({
                approve_type: item.approve_type,
                approve_value: item.approve_value?item.approve_value:item.ID,
                approve_value_name: item.string,
                string: item.string
              });
            }
          });
        
      } else {
        //清空
        this.result.list = [];
      }
      this.result.total = this.result.list.length;
      this.formatString(this.result);
      this.$emit("getTotalResult", this.result);
      this.openControl = false;
      this.isCallInterface = false;
    },
    cancel() {
      this.resultObj = this.deepCopy(this.result);
      // this.$emit("getTotalResult", this.arr);
      this.openControl = false;
      this.isCallInterface = false;
    },
    formatString(data) {
      //input内容显示处理
      this.approves = "";
      if (data.list && data.list.length > 0) {
        data.list.forEach(item => {
          this.approves += item.string + ",";
        });
        if (this.approves.length > 0) {
          this.approves = this.approves.substring(0, this.approves.length - 1);
        } else {
          this.approves = "";
        }
      }
    },
    getSelectedNodes(obj, vm) {
      this.$emit("on-select-tree", obj, vm, this);
    },
    getCheckedNodes(obj, vm) {
      this.$emit("on-change-tree", obj, vm, this);
    },
    tabClick(index, vm) {
      this.index = index;
      this.$emit("on-click-tab", index, vm, this);
    },
    pageChange(index, vm) {
      this.$emit("on-change-page", index, vm);
    },
    pageChangeSize(index, vm) {
      this.$emit("on-change-pageSize", index, vm, this);
    },
    rowdbClick(index, row, vm) {
      this.$emit("on-row-dblclick", index, row, vm, this);
    },
    rowClick(index, row, vm) {
      this.$emit("on-row-click", index, row, vm, this);
    },
    Onselect(selection, row, vm) {
      this.$emit("on-select", selection, row);
    },
    onSelectCancel(selection, row) {
      this.$emit("on-select-cancel", selection, row);
    },
    onSelectAll(selection) {
      this.$emit("on-select-all", selection);
    },
    onSelectAllCancel(selection) {
      this.$emit("on-select-all-cancel", selection);
    },
    onSelectChange(selection) {
      this.$emit("on-select-change", selection);
    },
    inputchange(event, vm) {
      this.$emit("on-change", event, vm);
    },
    inputkeydown(event, vm) {
      this.$emit("on-keydown", event, vm);
    },
    inputsearch(event) {
      this.$emit("on-search", event);
    },
    operationTwo() {
      let selectNode = this.$refs.Tree.getCheckedNodes();
      this.$emit("on-transfer-two", selectNode, this);
    },
    operation() {
      this.$emit("on-transfer");
    },
    deleteLi(index, tem) {
      this.$emit("on-delectli", index, tem);
    },
    delecFun() {
      this.$emit("on-deleBtn");
    },
    deepCopy(obj) {
      var result = Array.isArray(obj) ? [] : {};
      for (var key in obj) {
        if (obj.hasOwnProperty(key)) {
          if (typeof obj[key] === "object" && obj[key] !== null) {
            result[key] = this.deepCopy(obj[key]); //递归复制
          } else {
            result[key] = obj[key];
          }
        }
      }
      return result;
    }
  },
  created() {
    if (this.resultData && Object.keys(this.resultData).length > 0) {
      this.resultObj = this.deepCopy(this.resultData);
      this.result = this.deepCopy(this.resultData);
      this.formatString(this.resultObj);
    }
  }
};
</script>
<style lang="scss">
.complexBox {
}
</style>