<template>
  <div :class="$style.wrapper">
    <div>
      <a-radio-group v-model="ownerType">
        <a-radio :value="1">
          用户
        </a-radio>
        <a-radio :value="2">
          角色
        </a-radio>
      </a-radio-group>
      <a-button icon="edit" @click="changeOwner">
        变更所有者
      </a-button>
    </div>
    <div :class="$style.currentOwner"> 当前所有者：{{ currentOwner }} </div>
    <a-modal
      :visible="visible"
      :title="ownerType === 1 ? '选择用户' : '添加角色'"
      destroy-on-close
      v-bind="{ width: 800 }"
      :confirm-loading="confirmLoading"
      @ok="handleChangeOwner"
      @cancel="handleCancel"
    >
      <sd-nav-user v-if="ownerType === 1" v-model="selectedUser" />
      <sd-nav-role v-else v-model="selectedRole" :hiera-info="hieraInfo" :cur-parent="curParent" />
    </a-modal>
  </div>
</template>

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

export default {
  name: 'SdNavOwner',
  metaInfo: {
    title: 'SdNavOwner',
  },
  components,
  props: {
    hieraInfo: {
      type: Object,
      default: () => {},
    },
    menuPermission: {
      type: Object,
      default: () => {},
    },
    curParent: {
      type: Object,
      default: () => {},
    },
    unid: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      ownerType: 1,
      currentOwner: '',
      visible: false,
      selectedUser: {},
      confirmLoading: false,
      selectedRole: {},
    }
  },
  created() {
    const menuPermission = this.menuPermission
    this.currentOwner = `${Object.values(menuPermission.users)[0]}(${
      menuPermission.acl.owner.identifier
    })`
    this.ownerType = menuPermission.acl.owner.type === 'USER' ? 1 : 2
  },
  methods: {
    changeOwner() {
      this.visible = true
    },
    handleChangeOwner() {
      if (!this.selectedUser.account && !this.selectedRole.code) {
        Message.warn(this.ownerType === 1 ? '请选择用户' : '请选择角色')
        return
      }
      this.confirmLoading = true
      const params = {
        owner:
          this.ownerType === 1 ? `U${this.selectedUser.account}` : `R${this.selectedRole.code}`,
        ids: this.unid,
      }
      navService
        .changeOwner(params)
        .then((data) => {
          Message.success('变更所有者成功')
          this.visible = false
          this.currentOwner =
            this.ownerType === 1
              ? `${this.selectedUser.name}(${this.selectedUser.account})`
              : `${this.selectedRole.name}(${this.selectedRole.code})`
          this.selectedUser = {}
          this.selectedRole = {}
        })
        .catch((error) => {
          Message.error(error.response?.data?.message || '获取失败')
        })
        .finally(() => {
          this.confirmLoading = false
        })
    },
    handleCancel() {
      this.visible = false
      this.selectedUser = {}
      this.selectedRole = {}
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.wrapper {
  .current-owner {
    margin-top: 12px;
  }
}
</style>
