<template>
  <div class="authorization-container">
    <div class="left-container">
      <div class="title">
        <div>角色列表</div>
      </div>
      <div class="table-content">
        <t-table :data="table.data" highlight-current-row @current-change="handleCurrentChange">
          <t-table-column prop="name" label="角色名称"></t-table-column>
          <t-table-column prop="number" label="角色编码"></t-table-column>
        </t-table>
        <t-pager :total="table.pager.total" :current.sync="table.pager.currentPage"
                 :page-size.sync="table.pager.size"
                 class="px-24 pt-16 float-right"
                 show-elevator
                 @on-size-change="onSizeChange"
                 @on-change="onPagerChange">
        </t-pager>
      </div>
    </div>
    <div class="transfer-container">
      <t-transfer
        ref="transfer"
        :data="dataTable"
        :target-keys="targetKeys"
        :selected-keys="targetKeysTable"
        :operations="['← 绑定','解绑 →']"
        :titles="['已关联菜单','可关联菜单']"
        @change="changeTransfer"
      >
        <div slot="listBodyLeft" slot-scope="tableLeft">
          <t-tree ref="leftTree" :multiple="true"
                  :with-ancestors="true"
                  :with-descendants="true"
                  :node-data="tableLeft.data" @select="changeLeftTree"
          ></t-tree>
        </div>
        <div slot="listBodyRight" slot-scope="tableRight">
          <t-tree ref="rightTree" :multiple="true"
                  :with-ancestors="true"
                  :with-descendants="true"
                  :node-data="tableRight.data" @select="changeRightTree"
          ></t-tree>
        </div>
      </t-transfer>
    </div>
  </div>
</template>
<script>
import './menu-authorization.scss'
export default {
  data() {
    return {
      table: {
        data: [
          {
            name: '超级管理员',
            number: 'superadmin'
          },
          {
            name: '超级管理员',
            number: 'superadmin'
          },
          {
            name: '超级管理员',
            number: 'superadmin'
          }
        ],
        pager: {
          currentPage: 1,
          size: 10,
          total: 0
        }
      },
      dataTable: [
        {
          key: '1',
          label: '地图监控',
          title: '地图监控',
          id: '1'
        },
        {
          key: '2',
          label: '智能报警',
          title: '智能报警',
          value: 'node_2',
          id: '2'
        },
        {
          key: '3',
          label: '统计报表',
          title: '统计报表',
          value: 'node_5',
          id: '3'
        },
        {
          key: '4',
          label: '轨迹分析',
          title: '轨迹分析',
          value: 'node_3',
          id: '4',
          pid: '3'
        },
        {
          key: '5',
          label: '作业考勤',
          title: '作业考勤',
          value: 'node_4',
          id: '5',
          pid: '3'
        },
        {
          key: '6',
          label: '系统管理',
          title: '系统管理',
          id: '6'
        },
        {
          key: '7',
          label: '终端管理',
          title: '终端管理',
          id: '7',
          pid: '6'
        },
        {
          key: '8',
          label: '地图标记',
          title: '地图标记',
          pid: '3',
          id: '8'
        }
      ],
      targetKeysTable: [],
      targetKeys: [],
      copyData: [],
      removeData: []
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentRow = val
    },
    changeTransfer(targetKeys, direction, moveKeys) {
      console.log('change', targetKeys, direction, moveKeys)
      if (this.copyData.length > 0) {
        // this.dataTable = this.dataTable.concat(this.copyData)
        // this.targetKeysTable.push(this.copyData.id)
        this.copyData.forEach(element => {
          this.dataTable.splice(element.index, 0, element)
        })

        this.copyData = []
      }
      if (this.removeData.length > 0) {
        console.log(this.removeData)
        this.removeData.forEach(element => {
          this.dataTable.splice(element.index, 1)
        })
        this.removeData = []
      }
      console.log(this.targetKeysTable)
    },
    changeLeftTree(ids) {
      console.log(ids)
      var transferId = []
      ids.forEach(id => {
        console.log(this.isContained(ids, this.$refs.leftTree.getNodeStateById(id).children))
        if (this.$refs.leftTree.getNodeStateById(id).children && this.isContained(ids, this.$refs.leftTree.getNodeStateById(id).children)) {
          // 修改子节点的pid
          var includeFlag = true
          this.$refs.leftTree.getNodeStateById(id).children.forEach(elementChild => {
            // 不含在选中的ids
            if (ids.indexOf(elementChild) === -1) {
              includeFlag = false
              this.dataTable.forEach(elementChildTable => {
                if (elementChildTable.id === elementChild) {
                  if (elementChildTable.pid.indexOf('copy') === -1) {
                    elementChildTable.pid = 'copy' + elementChildTable.pid
                  }
                }
              })
            } else {
              this.dataTable.forEach(elementChildTable => {
                if (elementChildTable.id === elementChild) {
                  if (elementChildTable.pid.indexOf('copy') !== -1) {
                    elementChildTable.pid = elementChildTable.pid.slice(4)
                  }
                }
              })
            }
          })
          if (id.indexOf('copy') === -1) {
            var flag = false
            this.copyData.forEach(element => {
              if (element.id === 'copy' + id) {
                flag = true
              }
            })
            if (!flag) {
              var dataIndex = 0
              this.dataTable.forEach((e, index) => {
                if (e.id === id) {
                  dataIndex = index
                }
              })
              this.copyData.push({
                key: 'copy' + id,
                label: this.$refs.leftTree.getNodeStateById(id).label,
                title: this.$refs.leftTree.getNodeStateById(id).title,
                id: 'copy' + id,
                index: dataIndex
              })
            }
            if (includeFlag) {
              var includeIndex = 0
              this.dataTable.forEach((e, index) => {
                if (e.id === id) {
                  includeIndex = index
                }
              })
              this.removeData.push({
                key: id,
                label: this.$refs.leftTree.getNodeStateById(id).label,
                title: this.$refs.leftTree.getNodeStateById(id).title,
                id: id,
                index: includeIndex
              })
            }
          } else {
            if (includeFlag) {
              var includeIndex = 0
              this.dataTable.forEach((e, index) => {
                if (e.id === id) {
                  includeIndex = index
                }
              })
              this.removeData.push({
                key: id,
                label: this.$refs.leftTree.getNodeStateById(id).label,
                title: this.$refs.leftTree.getNodeStateById(id).title,
                id: id,
                index: includeIndex
              })
            }
          }
        }
        if (id.indexOf('copy') === -1) {
          transferId.push(id)
        } else {
          console.log(this.$refs.leftTree.getNodeStateById(id).children)
          if (!this.$refs.leftTree.getNodeStateById(id).children) {
            console.log(123213, id)
          }
        }
      })
      console.log(transferId)
      this.targetKeysTable = transferId
    },
    changeRightTree(ids) {
      console.log(ids)
      var transferId = []
      ids.forEach(id => {
        console.log(this.$refs.rightTree.getNodeStateById(id))
        if (this.$refs.rightTree.getNodeStateById(id).children && this.isContained(ids, this.$refs.rightTree.getNodeStateById(id).children)) {
          // 修改子节点的pid
          var includeFlag = true
          this.$refs.rightTree.getNodeStateById(id).children.forEach(elementChild => {
            // 不含在选中的ids
            if (ids.indexOf(elementChild) === -1) {
              includeFlag = false
              // this.dataTable.forEach(elementChildTable => {
              //   if (elementChildTable.id === elementChild) {
              //     if (elementChildTable.pid.indexOf('copy') === -1) {
              //       elementChildTable.pid = 'copy' + elementChildTable.pid
              //     }
              //   }
              // })
            } else {
              // this.dataTable.forEach(elementChildTable => {
              //   if (elementChildTable.id === elementChild) {
              //     if (elementChildTable.pid.indexOf('copy') !== -1) {
              //       elementChildTable.pid = elementChildTable.pid.slice(4)
              //     }
              //   }
              // })
              this.dataTable.forEach(elementChildTable => {
                if (elementChildTable.id === elementChild) {
                  if (elementChildTable.pid.indexOf('copy') === -1) {
                    elementChildTable.pid = 'copy' + elementChildTable.pid
                  }
                }
              })
            }
          })

          if (includeFlag) {
            transferId.push(id)
            var includeIndex = 0
            this.dataTable.forEach((e, index) => {
              if (e.id === id) {
                includeIndex = index
              }
            })
            this.removeData.push({
              key: id,
              label: this.$refs.rightTree.getNodeStateById(id).label,
              title: this.$refs.rightTree.getNodeStateById(id).title,
              id: id,
              index: includeIndex
            })
          } else {
            var dataIndex = 0
            this.dataTable.forEach((e, index) => {
              if (e.id === id) {
                dataIndex = index
              }
            })
            this.copyData.push({
              key: 'copy' + id,
              label: this.$refs.rightTree.getNodeStateById(id).label,
              title: this.$refs.rightTree.getNodeStateById(id).title,
              id: 'copy' + id,
              index: dataIndex
            })
          }
        } else {
          transferId.push(id)
        }
        if (id.indexOf('copy') === -1) {
          // transferId.push(id)
        } else {
          console.log(this.$refs.rightTree.getNodeStateById(id).children)
          if (!this.$refs.rightTree.getNodeStateById(id).children) {
            console.log(123213, id)
          }
        }
      })
      console.log(transferId)
      this.targetKeysTable = transferId
    },
    onPagerChange(page) {

    },
    onSizeChange(number) {

    },
    isContained (a, b) {
      if (!(a instanceof Array) || !(b instanceof Array)) return false
      // if (a.length < b.length) return false
      var aStr = a.toString()
      for (var i = 0, len = b.length; i < len; i++) {
        if (aStr.indexOf(b[i]) !== -1) return true
      }
      return false
    }
  }
}
</script>
