<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-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,
    }
  },
  watch: {
    checkedKeys(val) {
      console.log('onCheck', val)
    },
  },
  methods: {
    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.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
                  }
              })
            }
          })
         
        }
        console.log(res)
      })
    },
  },
  computed: {},
}
</script>
