<template>
  <el-dialog
      title="选择企业流程框架"
      :visible.sync="dialogVisible"
      width="40%"
    >
     <div class="leftTree" ref="leftTree">
        <!-- <div class="drag-handle"></div> -->
        <el-row>
          <el-input
            placeholder="请输入内容"
            class="search_component remove-margin-b"
            size="mini"
            v-model="keyWords"
            @keyup.13.native="filterTree"
          >
            <i
              class="el-icon-search el-input__icon"
              slot="suffix"
              @click="filterTree">
            </i>
          </el-input>
        </el-row>
        <!-- <el-scrollbar class="left_tree_wrapper margin-t20"> -->
        <div class="left_tree_wrapper margin-t10">
          <el-tree
            ref="tree"
            class="filter-tree"
            :props="props"
            :load="loadNode"
            node-key="id"
            lazy
            @node-click='nodeClick'
            v-show="!controlTree"
            :default-expanded-keys="grandParentId"
            :expand-on-click-node="false"
          >
          </el-tree>
          <el-tree
            class="filter-tree"
            ref="treeFilter"
            node-key="id"
            :props="props"
            @node-click='nodeClick'
            :data="treelist"
            v-show="controlTree"
          >
          </el-tree>
        </div>
        <!-- </el-scrollbar> -->
      </div>
     <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handlerConfirm">确 定</el-button>
      </span>
  </el-dialog>
</template>

<script>
import {
  getProcessIframeTree,
  searchProcessIframeTree
} from '../../../api/processTree'
import {
  getProcesslist,
  processSaveAttr,
  queryProcessDesignListInfo
} from '../../../api/processDesignCenter'
export default {
  name: 'proTree',
  data() {
    return {
      keyWords: '',
      controlTree: false,
      props: {
        label: "name",
        isLeaf: function (data, node) {
          if (data.isparent === true) {
            return false;
          } else {
            return true;
          }
        },
      },
      grandParentId: [],
      treelist: [],
      modelid: '',
      nodeData: {},
      treeData: {},
      processObj: {},
      setIntervalSave: null,
      processTabMenu: [],
      dialogVisible: false
    };
  },
  props: {
      value: {
        type: Boolean,
        default: false
      }
  },
   watch: {
    value(val) {
        this.keyWords = ''
        this.controlTree = false
        this.dialogVisible = val
      },
      dialogVisible(val) {
        this.$emit("input", val);
      }
  },
  computed: {
    userid() {
      return JSON.parse(localStorage.getItem("portalCurrentUserInfo") || "{}")
        .empuid;
    },
    username() {
      return JSON.parse(localStorage.getItem("portalCurrentUserInfo") || "{}")
        .cnname;
    },
  },
  mounted() {},

  methods:{
     loadNode(node, resolve) {
      let _this = this;
      let id = node.data ? node.data.id : "0";
      getProcessIframeTree(id).then((res) => {
        if (!res) return false;
        if (id === "0") {
          this.grandParentId.push(res[0].id);
        }
        resolve(res);
      });
    },
    filterTree() {
      if (!this.keyWords) {
        this.controlTree = false;
        return false;
      }
      searchProcessIframeTree({
        name: this.keyWords,
      }).then((res) => {
        if (!res) return false;
        this.controlTree = true;
        this.treelist = res;
      });
    },
    nodeClick(data, node) {
      console.log(node, data)
      this.nodeData = node;
      this.treeData = data;
      // let self = this;
      // // self.modelid = data.id
      // self.getList();
    },
    getList() {
      this.$emit('confirm', this.treeData)
      // let self = this;
      // self.versionList = [];
      // (self.imgsShow = false),
      //   queryProcessDesignListInfo(self.treeData.id, {
      //     fullFilters: [
      //       {
      //         filters: [
      //           {
      //             key: "code",
      //             opt: "LIKE",
      //             type: "S",
      //             value: self.keyWords,
      //             logic: "or",
      //           },
      //           {
      //             key: "name",
      //             opt: "LIKE",
      //             type: "S",
      //             value: self.keyWords,
      //             logic: "or",
      //           },
      //         ],
      //         logic: "and",
      //       },
      //     ],
      //     logic: "and",
      //     pageNum: 1,
      //     pageSize: 10,
      //     sort: "desc"
      //   }).then((res) => {
      //     this.processObj = {};
      //     if (!res.data) return false;
      //     let item = res.data.list[0]
      //     this.treeData = item;
      //     this.modelid = item.modelid
      //     if (item.state === "2") {
      //       processSaveAttr({
      //         // id: item.bpmid,
      //         bpo: item.bpo,
      //         bponame: item.bponame,
      //         code: item.code,
      //         listid: item.id,
      //         modelid: item.id,
      //         signer: this.userid,
      //         signername: this.username,
      //         version: item.version,
      //         name: item.name,
      //         modelInstitution: {},
      //       }).then((rt) => {
      //         if (!rt.data) return false;
      //         this.processObj = res.data.list[0];
      //         this.processObj.state = '5';
      //         this.processObj.bpmid = rt.data.split(",")[0]
      //         this.$emit('confirm', this.processObj)
      //       });
      //     } else {
      //       this.processObj = res.data.list[0];
      //       this.$emit('confirm', this.processObj)
      //     }
      //   });
    },
    handlerConfirm () {
      this.dialogVisible = false
      this.getList()
    }
  }

};
</script>
<style lang='scss' scoped>
  .margin-t10 {
    margin-top: 10px
  }
  /deep/.leftTree {
    .el-row {
      padding: 2px 6px;
    }
    .el-input__icon {
      cursor: pointer;
      line-height: 34px;
    }
    .left_tree_wrapper {
      height: 300px;
      overflow: auto;
      overflow: auto;
      .el-tree-node__children {
        overflow: visible;
      }
      /deep/
      .el-tree-node.is-current
      > .el-tree-node__content
      .custom-tree-node
      .green {
        color: #2d42af;
      }
    }
    .opertionBtn {
      margin-left: 15px;
    }
  }
 /*滚动条样式*/
        .left_tree_wrapper::-webkit-scrollbar {
             width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/

        height: 4px;
        }
        .left_tree_wrapper::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            background: rgba(0,0,0,0.2);
        }
        .left_tree_wrapper::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
            border-radius: 0;
            background: rgba(0,0,0,0.1);
        }

  /deep/.el-tree {
      .el-tree-node {
        .el-tree-node__content {
          line-height: 26px;
          &:hover {
            .opertionBtn{
              display: block;
            }
          }
        }
      }
    }
</style>
