<!--
 * @Author: Jason Liu
 * @Date: 2022-10-12 13:15:18
 * @Desc: 
-->
<template>
  <a-drawer
    width="60%"
    :visible="show"
    :loading="loading"
    @close="show = false"
    :keyboard="false"
    :closable="false"
    :destroy-on-close="true"
    class="permissionAssignmentCard"
  >
    <template slot="title"> [{{ asName }}]{{ $t('功能授权') }}</template>
    <a-row>
      <a-col :span="18"></a-col>
      <a-col :span="6">
        <a-input-search
          :placeholder="`${$t('搜索功能名称')}...`"
          v-model="searchName"
          @search="onSearch"
          allowClear
        />
      </a-col>
    </a-row>
    <div class="app_list">
      <vxe-table
        show-overflow
        ref="appList"
        row-id="id"
        border
        resizable
        :loading="loading"
        :row-config="{ isHover: true }"
        :data="viewAppList"
        :tree-config="{
          expandAll: true,
          transform: true,
          trigger: 'cell',
        }"
        :checkbox-config="{
          labelField: 'name',
          checkRowKeys: checkRowKeys,
        }"
        @checkbox-change="selectChangeEvent"
        @checkbox-all="selectChangeEvent"
        :key="tabKey"
        height="auto"
      >
        <vxe-column
          type="seq"
          :title="$t('序号')"
          width="80"
          align="center"
          v-if="false"
        />
        <vxe-column
          field="name"
          type="checkbox"
          :title="$t('全部')"
          tree-node
        >
        </vxe-column>
        <vxe-column
          type="expand"
          :title="$t('按钮')"
          width="60"
          align="center"
          v-if="viewSetButton"
        >
          <template #content="{ row }">
            <template
              v-if="
                buttonList.filter((b) => {
                  return b.parentId == row.id;
                }).length > 0
              "
            >
              <win-title>{{ $t('功能按钮') }}：</win-title>
              <a-row>
                <a-col
                  :span="4"
                  v-for="buttom in buttonList.filter((b) => {
                    return b.parentId == row.id;
                  })"
                  :key="buttom.menuMapId"
                >
                  <a-checkbox v-model="buttom.checked">
                    {{ buttom.menuName }}
                  </a-checkbox>
                </a-col>
              </a-row>
            </template>
            <template v-else>{{ $t('未设置按钮') }}</template>
          </template>
        </vxe-column>
        <template #empty>
          <a-empty :image-style="{ marginTop: '80px', height: '80px' }">
            <span slot="description">{{ $t('暂无数据') }}</span>
          </a-empty>
        </template>
      </vxe-table>
    </div>
    <div class="a_foot_nuttop">
      <a-button @click="show = false">{{ $t('关闭') }}</a-button>

      <a-button
        type="primary"
        @click="submit"
        :loading="loading"
        >{{ $t('授权') }}</a-button
      >
    </div>
  </a-drawer>
</template>
<script type="text/javascript" src="./service.js"></script>
<style lang="less">
  .permissionAssignmentCard {
    .app_list {
      margin-top: 8px;
      height: calc(100vh - 170px);
    }
  }
</style>
