<!--
 * @Author: @liulin
 * @Date: 2022-05-30 14:52:44
 * @LastEditors: @liulin
-->
<template>
  <ht-sidebar-dialog
    title="人员菜单授权"
    :visible="dialogVisible"
    v-if="dialogVisible"
    :before-close="handleClose"
    width="30%"
    append-to-body
  >
    <ht-menu-manager
      isFilterStatus
      v-if="loadEnd"
      ref="htMenuManager"
      show-checkbox
      hide-menu
      :default-checked-keys="defaultCheckedKeys"
      width="100%"
    />
    <div
      slot="footer"
      class="dialog-footer"
    >
      <ht-submit-button
        url="${cqxy}/biz/projectManagement/projectPersonnelMenu/v1/save"
        :model="saveData"
        scope-name="editRoleMenuForm"
        @before-save-data="beforeSaveData"
        @after-save-data="afterSaveData"
      >{{$t('eip.common.save')}}</ht-submit-button>
      <el-button @click="handleClose()">{{$t('eip.common.cancel')}}</el-button>
    </div>
  </ht-sidebar-dialog>
</template>

<script>
import req from '@/request.js'

const htMenuManager = () => import('@/components/system/HtMenuManager.vue')

export default {
  name: 'RoleMenuAuth',
  components: {
    htMenuManager
  },
  props: {},
  data() {
    return {
      loadEnd: false,
      dialogVisible: false,
      roleMenusMethod: null,
      defaultCheckedKeys: [],
      saveData: {},
      row: null,
      data: [],
      pageResult: {
        page: 1,
        pageSize: 100,
        total: 0
      }
    }
  },
  methods: {
    showDialog(row) {
      this.loadEnd = false
      this.defaultCheckedKeys = []
      this.dialogVisible = false
      this.$nextTick(() => {
        this.dialogVisible = true
      })
      this.row = row
      this.loadData(row)
    },
    handleClose() {
      this.dialogVisible = false
    },
    loadData(row) {
      // this.defaultCheckedKeys = [];
      req
        .get(
          '${cqxy}' +
            `/biz/projectManagement/projectPersonnelMenu/v1/getAllMenuByProject?projectId=${row.projectId}&userId=${row.personnelId}`
        )
        .then(response => {
          // isParent = 0 checked !=0
          response.data.forEach(element => {
            if (element.isParent == 0 && element.checked != 0) {
              this.defaultCheckedKeys.push(element.alias)
            }
          })
          this.loadEnd = true
        })
    },
    beforeSaveData() {
      // saveData = {row:"",arrMenuAlias:[],arrMethodAlias:[],dataPermission:{}}
      var elTree = this.$refs.htMenuManager.$refs.htMenuTree.$refs.htMenuTree
        .$refs.elTree
      this.saveData = {
        projectId: this.row.projectId,
        userId: this.row.personnelId,
        arrMenuAlias: [
          ...elTree.getHalfCheckedKeys(),
          ...elTree.getCheckedKeys()
        ],
        arrMethodAlias: [],
        dataPermission: {}
      }
    },
    afterSaveData() {
      this.handleClose()
    }
  }
}
</script>

<style lang="scss" scoped>
>>> .el-dialog__body {
  padding: 0px;
}
</style>