<template>
  <div :class="$style.wrapper">
    <div :class="$style.user">
      <label for="">用户:</label>
      <a-input :value="currentQueryUser" read-only @click="selectUser">
        <a-icon slot="suffix" type="user" />
      </a-input>
    </div>
    <div :class="$style.permission">
      <label>有效权限:</label>
      <a-table
        :row-key="(record) => record.key"
        :columns="columns"
        bordered
        :data-source="permissionData"
        :pagination="false"
      >
        <template slot="accessible" slot-scope="key">
          <span>{{ queryUserPermission.includes(key) ? '√' : '' }}</span>
        </template>
      </a-table>
    </div>
    <a-modal
      :visible="visible"
      title="选择用户"
      destroy-on-close
      v-bind="{ width: 800 }"
      :confirm-loading="confirmLoading"
      @ok="handleQueryPermission"
      @cancel="() => (visible = false)"
    >
      <sd-nav-user v-model="selectedUser" />
    </a-modal>
  </div>
</template>

<script>
import { Message } from 'ant-design-vue'
import navService from './nav-service'
import components from './_import-components/sd-nav-permission-query-import'

export default {
  name: 'SdNavPermissionQuery',
  metaInfo: {
    title: 'SdNavPermissionQuery',
  },
  components,
  props: {
    unid: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      selectedUser: {
        name: '',
        account: '',
      },
      visible: false,
      confirmLoading: false,
      columns: [
        {
          title: '权限',
          dataIndex: 'name',
        },
        {
          title: '',
          dataIndex: 'key',
          scopedSlots: {
            customRender: 'accessible',
          },
        },
      ],
      permissionData: [
        {
          name: '读取',
          key: 1,
        },
        {
          name: '写入',
          key: 2,
        },
        {
          name: '新建',
          key: 4,
        },
        {
          name: '删除',
          key: 8,
        },
        {
          name: '管理',
          key: 16,
        },
      ],
      queryUserPermission: [],
      currentQueryUser: '',
    }
  },
  methods: {
    selectUser() {
      this.visible = true
    },
    handleQueryPermission() {
      if (!this.selectedUser.account) {
        Message.warn('请先选择用户！')
        return
      }
      this.currentQueryUser = `${this.selectedUser.name}(${this.selectedUser.account})`
      const params = {
        menuId: this.unid,
        account: this.selectedUser.account,
      }
      navService
        .queryPermission(params)
        .then((data) => {
          this.queryUserPermission = data
          this.confirmLoading = false
          this.visible = false
        })
        .catch((error) => {
          Message.error(error.response?.data?.message || '查询失败')
        })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.wrapper {
  .user {
    label {
      margin-left: 32px;
    }
    :global(.ant-input-affix-wrapper) {
      width: 80%;
      margin-left: 8px;
    }
  }
  .permission {
    margin-top: 12px;
    :global(.ant-table) {
      width: 80%;
      margin-top: -18px;
      margin-left: 76px;
    }
  }
}
</style>
