<template>
  <ht-sidebar-dialog
    title="角色菜单授权"
    :visible="dialogVisible"
    v-if="dialogVisible"
    :before-close="handleClose"
    width="30%"
    append-to-body
    custom-class="role-menu-authorize"
  >
  <div class="tip-message">温馨提示：首页菜单必须授权，否则应用端将无法访问</div>
    <ht-menu-manager
    class="menu-manager"
      v-if="loadEnd"
      ref="htMenuManager"
      show-checkbox
      hide-menu
      :default-checked-keys="defaultCheckedKeys"
      :defaultIsOpenKeys="defaultIsOpenKey"
      width="100%"
      :isShowBtn="true"
    />
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose()">{{
        $t('eip.common.cancel')
      }}</el-button>
      <ht-submit-button
        url="${portal}/sys/sysRoleAuth/v1/save"
        :model="saveData"
        scope-name="editRoleMenuForm"
        @before-save-data="beforeSaveData"
        @after-save-data="afterSaveData"
        >{{ $t('eip.common.save') }}</ht-submit-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: [],
      defaultIsOpenKey: [],
      saveData: {},
      roleAlias: null,
      data: [],
      pageResult: {
        page: 1,
        pageSize: 100,
        total: 0
      }
    }
  },
  methods: {
    showDialog(roleAlias) {
      this.loadEnd = false
      this.defaultCheckedKeys = []
      this.defaultIsOpenKey = []
      this.dialogVisible = false
      this.$nextTick(() => {
        this.dialogVisible = true
      })
      this.roleAlias = roleAlias
      this.loadData(roleAlias)
    },
    handleClose() {
      this.dialogVisible = false
    },
    loadData(roleAlias) {
      // this.defaultCheckedKeys = [];
      req
        .get(
          '${portal}' +
            `/sys/sysMenu/v1/getAllMenuRoleAlias?roleAlias=${roleAlias}`
        )
        .then(response => {
          // isParent = 0 checked !=0
          response.data.forEach(element => {
            if (element.isParent == 0 && element.checked != 0) {
              this.defaultCheckedKeys.push(element.alias)
            }
            if (element.isOpen && element.isOpen !== '0') {
              this.defaultIsOpenKey.push({
                alias: element.alias,
                isOpen: element.isOpen,
                disabled: true,
                expanded: false
              })
            }
          })
          this.loadEnd = true
        })
    },
    beforeSaveData() {
      // saveData = {roleAlias:"",arrMenuAlias:[],arrMethodAlias:[],dataPermission:{}}
      var elTree = this.$refs.htMenuManager.$refs.htMenuTree.$refs.htMenuTree
        .$refs.elTree

      let checkData = elTree
        .getCheckedNodes()
        .concat(elTree.getHalfCheckedNodes())
        .map(item => {
          return Object.assign({
            [item.alias]: item.isOpen ? 1 : 0 //0不选中子级及下级   1选中子级及下级
          })
        })
      this.saveData = {
        roleAlias: this.roleAlias,
        arrMenuAlias: [...checkData], //json格式 [{"bpm_platform":"0"}]
        arrMethodAlias: [],
        dataPermission: {}
      }
    },
    afterSaveData() {
      this.handleClose()
    }
  }
}
</script>

<style lang="scss" scoped>
.tip-message{
  height: 40px;
  line-height: 40px;
  background: rgba(255, 174, 68, 0.1);
  border-radius: 2px;
  font-size: 14px;
  color: #FFAE44;
  padding-left: 16px;
  text-align: left;
  margin-top: 12px; 
}
>>> .el-dialog__body {
  padding: 0px;
}
::v-deep{
  .role-menu-authorize{
    .tree-header {
      border: 1px solid #e6e6e6;
      border-bottom: none;
    }
    .menu-manager{
      height: calc(100% - 60px);
      padding-bottom: 0;
    }
  }
}
</style>