<style>
.checked-account {
  width: 100%;
}

.checked-account .ant-checkbox-wrapper {
  width: 20%;
  min-width: 300px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
<template>
  <div>
    <a-modal
      title="账户选择"
      v-model="showEdit"
      @ok="handleOk"
      @cancel="close"
      width="80%"
      :confirm-loading="confirmLoading"
    >
      <!-- <a-checkbox :indeterminate="indeterminate" @change="onCheckAllChange" :checked="checkAll">全选</a-checkbox>
            <br />
            <a-checkbox-group :options="showList" v-model="dataValue" class="checked-account" @change="onChange" /> -->

      <a-input-search
        style="margin-bottom: 8px; width: 180px"
        allow-clear
        v-model="searchVal"
        @search="onSearch"
      />
      <a-tree
        v-model="checkedKeys"
        checkable
        :expanded-keys="expandedKeys"
        :auto-expand-parent="autoExpandParent"
        :selected-keys="selectedKeys"
        :tree-data="treeData"
        @expand="onExpand"
        @select="onSelect"
      />
    </a-modal>
  </div>
</template>

<script>
import { deleteAction, getAction } from "@/api/manage";
// import lifting from './components/lifting'

export default {
  name: "modules",
  components: {},

  data: function () {
    return {
      checkedKeys: [],
      showEdit: false,
      dataList: [],
      showList: null,
      dataValue: [],
      indeterminate: false,
      checkAll: false,
      expandedKeys: [],
      autoExpandParent: true,
      selectedKeys: [],
      treeData: [],
      confirmLoading: false,
      bytedanceUrl: null,
      bytedanceItem: null,

      defaultData:[],
      backupsExpandedKeys: [],
      searchVal: "",
      searchValue: "",
    };
  },
  watch: {
    checkedKeys(val) {
      console.log("onCheck", val);
    },
  },
  methods: {
    onSearch1(e) {
      this.bytedanceItem.authName = undefined;
      this.treeData = [];
      if (e != "") {
        this.bytedanceItem.authName = e;
      }
      this.confirmLoading = false;
      this.showEdit = true;
      this.dataList = [];
      this.showList = null;
      this.dataValue = [];
      this.checkedKeys = [];
      this.indeterminate = false;
      this.checkAll = false;
      getAction(this.bytedanceUrl, this.bytedanceItem).then((res) => {
        if (res.success) {
          let arrList = [];
          this.treeData = res.result.map((item) => {
            return {
              title: item.projectName,
              key: item.projectId + "-",
              children: item.userAllocationList.map((i) => {
                return {
                  title:
                    i.authName +
                    "\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0" +
                    (i.userName ? i.userName : "管理员"),
                  key: i.accountId,
                };
              }),
            };
          });
        }
        console.log(res);
      });
    },

    onExpand(expandedKeys) {
      console.log("onExpand", expandedKeys);
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    onCheck(checkedKeys) {
      this.checkedKeys = checkedKeys;
    },
    onSelect(selectedKeys, info) {
      this.selectedKeys = selectedKeys;
    },
    handleOk(e) {
      this.confirmLoading = true;
      let defaultData = this.checkedKeys.filter(
        (item) => item.toString().indexOf("-") === -1
      );
      this.showEdit = false;
      this.$emit("synchro", defaultData);
    },
    close() {
      this.showEdit = false;
      this.dataList = [];
      this.showList = null;
      this.dataValue = [];
      this.indeterminate = false;
      this.checkAll = false;
    },
    onCheckAllChange(e) {
      Object.assign(this, {
        dataValue: e.target.checked
          ? this.showList.map((item) => {
              return item.value;
            })
          : [],
        indeterminate: false,
        checkAll: e.target.checked,
      });
    },
    onChange(checkedList) {
      this.indeterminate =
        !!this.dataValue.length && this.dataValue.length < this.showList.length;
      this.checkAll = this.dataValue.length === this.showList.length;
    },
    getData(url, item) {
      (this.bytedanceUrl = url),
        (this.bytedanceItem = item),
        (this.confirmLoading = false);
      this.showEdit = true;
      this.dataList = [];
      this.showList = null;
      this.dataValue = [];
      this.checkedKeys = [];
      this.indeterminate = false;
      this.checkAll = false;
      console.log(url, item);
      getAction(url, item).then((res) => {
        if (res.success) {
          let arrList = [];
          this.treeData = res.result.map((item) => {
            return {
              title: item.projectName,
              key: item.projectId + "-",
              children: item.userAllocationList.map((i) => {
                return {
                  title:
                    i.authName +
                    "\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0" +
                    (i.userName ? i.userName : "管理员"),
                  key: i.accountId,
                };
              }),
            };
          });
          this.defaultData = JSON.parse(JSON.stringify(this.treeData))
        }
        console.log(res);
      });
    },
    // 点击搜索进行模糊筛选
    onSearch() {
      const _this = this;
      _this.searchValue = _this.searchVal;
      if (_this.searchValue === "") {
        // _this.expandedKeys = [];
        this.treeData = JSON.parse(JSON.stringify(this.defaultData))
      } else {
        _this.expandedKeys = [];
        _this.backupsExpandedKeys = [];
        let candidateKeysList = _this.getkeyList(_this.searchValue, _this.treeData, []);
        console.log(candidateKeysList)
        this.treeData = JSON.parse(JSON.stringify(candidateKeysList))
        // candidateKeysList.map((item) => {
        //   let key = _this.getParentKey(item, this.treeData);
        //   if (key && !_this.backupsExpandedKeys.some((item) => item === key)) {
        //     _this.backupsExpandedKeys.push(key);
        //   }
        // });
        // console.log(this.backupsExpandedKeys)
        // let length = this.backupsExpandedKeys.length;
        // for (let i = 0; i < length; i++) {
        //   _this.getAllParentKey(_this.backupsExpandedKeys[i], _this.treeData);
        // }
        // _this.expandedKeys = _this.backupsExpandedKeys.slice();
        // _this.autoExpandParent = true;
      }
    },
    // 获取节点中含有value的所有key集合
    getkeyList(value, tree, keyList) {
      for (let i = 0; i < tree.length; i++) {
        let node = tree[i];
        if (node.title.indexOf(value) > -1) {
          keyList.push(node);
        }
        if (node.children) {
          this.getkeyList(value, node.children, keyList);
        }
      }
      return keyList;
    },

    // 该递归主要用于获取key的父亲节点的key值
    getParentKey(key, tree) {
      let parentKey;
      for (let i = 0; i < tree.length; i++) {
        const node = tree[i];
        if (node.children) {
          if (node.children.some((item) => item.key === key)) {
            parentKey = node.key;
          } else if (this.getParentKey(key, node.children)) {
            parentKey = this.getParentKey(key, node.children);
          }
        }
      }
      return parentKey;
    },
    // 获取该节点的所有祖先节点
    getAllParentKey(key, tree) {
      let parentKey;
      if (key) {
        parentKey = this.getParentKey(key, tree);
        if (parentKey) {
          if (!this.backupsExpandedKeys.some((item) => item === parentKey)) {
            this.backupsExpandedKeys.push(parentKey);
          }
          this.getAllParentKey(parentKey, tree);
        }
      }
    },
  },
  computed: {},
};
</script>
