<template>
  <div>
    <el-dialog v-if="dialogVisible" :visible.sync="dialogVisible" :close-on-click-modal="false" title="编辑账号权限" width="60%">
      <div style="float: left;width: 50%">
        <el-table :data="permissionData" @select="handleSelectionChange" @select-all="handSelectAll">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="name" label="模板名称" />
          <el-table-column prop="code" label="标识" />
        </el-table>
      </div>
      <div style="float: left;width: 40%;margin-left: 5%;border: 1px solid #ccc;padding: 15px;border-radius: 10px;height: 380px;overflow: auto">
        <premission-tree ref="userTree" :api-ids="apiIds" :is-show-check-box="true" :is-user-set="true" @handChecked="handChecked" />
      </div>
      <div style="clear: both" />
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmPermission">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getPremissionList, getpremissionById, getUserPremissionList, putUserPremission } from '@/api/system/permissionTemplate'
import premissionTree from '../permission_template/premissionTree'
export default {
  name: 'UserPermission',
  components: { premissionTree },
  props: {
    permissionObj: {
      type: Object,
      require: false,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      dialogVisible: false,
      permissionData: [],
      apiIds: [],
      childrenData: [],
      userPermissions: []
    }
  },
  watch: {
    dialogVisible() {
      if (this.dialogVisible) {
        this.apiIds = []
        this.childrenData = []
        this.userPermissions = []
        this.getPermissionData()
      } else {
        this.apiIds = []
        this.childrenData = []
        this.userPermissions = []
      }
    }
  },
  // mounted() {
  //   this.$nextTick(() => {
  //     console.log(324234)
  //   })
  //   if (this.dialogVisible) {
  //     this.getPermissionData()
  //   }
  // },
  methods: {
    getPermissionData() {
      getPremissionList().then(res => {
        this.permissionData = res.content
        this.getUserPermission()
      })
    },
    getUserPermission() {
      getUserPremissionList(this.permissionObj.id).then(res => {
        this.userPermissions = res
        this.$refs.userTree.$refs['preTree'].setCheckedKeys(res)
      })
    },
    handChecked(data) {
      this.childrenData = data
    },
    handleSelectionChange(selection, row) {
      this.handSelectAll(selection)
    },
    handSelectAll(selection) {
      if (selection.length === 0) {
        this.apiIds = this.childrenData.concat(this.userPermissions)
        this.$refs.userTree.$refs['preTree'].setCheckedKeys(this.apiIds)
        return
      }
      this.apiIds = []
      for (let i = 0; i < selection.length; i++) {
        const item = selection[i]
        getpremissionById(item.id).then(res => {
          this.apiIds.push(...res)
          this.apiIds.push(...this.childrenData)
          this.apiIds.push(...this.userPermissions)
          this.apiIds = this.unique(this.apiIds)
          this.$refs.userTree.$refs['preTree'].setCheckedKeys(this.apiIds)
        })
      }
    },
    unique(arr) {
      return Array.from(new Set(arr))
    },
    confirmPermission() {
      const arr = this.$refs.userTree.getCheckedNodes()
      const sarr = arr.filter(item => {
        return typeof item.id === 'number'
      })
      const obj = {
        userId: this.permissionObj.id,
        permissionIds: []
      }
      sarr.forEach(item => {
        obj.permissionIds.push(item.id)
      })
      putUserPremission(obj).then(res => {
        this.$message.success('保存成功')
        this.dialogVisible = false
      })
    }
  }
}
</script>

<style scoped>

</style>