<template>
  <ADialog v-model:show="showDialog"
    title="分配资源"
    width="900">
    <ElTransfer
      v-model="rightValue"
      :button-texts="['解绑', '绑定']"
      :data="allRes"
      :filter-method="filterMethod"
      :props="{
      key: 'id',
      label: 'roleName',
    }"
      :titles="['资源列表', '已有资源']"
      class="transfer"
      filter-placeholder="搜索"
      filterable
    >
      <template #default="{ option }">
        <ElTooltip
          :content="option.sn"
          placement="top">
          <span> {{ option.memo }} </span>
        </ElTooltip>
      </template>
      <template #left-empty>
        <el-empty :image-size="60" description="暂无数据"/>
      </template>
      <template #right-empty>
        <el-empty :image-size="60" description="暂无数据"/>
      </template>
      <template #left-footer>
        <ElSelect
          v-model="resourceOrigin"
          placeholder="资源类型"
          @change="resourceOriginChangeHandle">
          <ElOption label="菜单" value="sys_menu"/>
          <ElOption label="端点" value="sys_endpoint"/>
        </ElSelect>
      </template>
      <template #right-footer>
        <ElSelect
          v-model="resourceOrigin"
          placeholder="资源类型"
          @change="resourceOriginChangeHandle">
          <ElOption label="菜单" value="sys_menu"/>
          <ElOption label="端点" value="sys_endpoint"/>
        </ElSelect>
      </template>
    </ElTransfer>
    <template #footer>
      <ElButton @click="showDialog = false">取消</ElButton>
      <ElButton :disabled="rightValue.length <= 0" :loading="submiting" type="primary" @click="submitHandler">提交</ElButton>
    </template>
  </ADialog>
</template>
<script lang="ts" setup>
import RoleApi from '@/pages/sys/role/role-api.ts'
import Strings from '@/common/utils/strings.ts'
import {
  ElMessage,
  type TransferDataItem,
} from 'element-plus'
import ResourceApi from '@/pages/sys/resource/resource-api.ts'
import ADialog from '@/components/a-dialog/ADialog.vue'

const showDialog = ref(false)
const submiting = ref(false)
const hadRes = ref<ResourceTypes.SearchResourceResult[]>([])
const allRes = ref<ResourceTypes.SearchResourceResult[]>([])
const rightValue = ref<string[]>([])
const currentUserId = ref<string>('')

function filterMethod(query: string, item: TransferDataItem) {
  return Strings.isBlank(query) || (item as ResourceTypes.SearchResourceResult).memo!.includes(query) || (item as ResourceTypes.SearchResourceResult).memo!.includes(query)
}

const resourceOrigin = ref<'sys_menu' | 'sys_endpoint'>('sys_menu')

function resourceOriginChangeHandle(val: 'sys_menu' | 'sys_endpoint') {
  ResourceApi.listRoleRes(currentUserId.value, val)
    .then(res => {
      hadRes.value = res.data ?? []
      rightValue.value = hadRes.value.map(it => it.id!)
    })

  ResourceApi.list(val)
    .then(res => {
      allRes.value = res.data ?? []
    })
}

function submitHandler() {
  submiting.value = true
  RoleApi.bindRes({
    id: currentUserId.value,
    res: rightValue.value,
  }).then(() => {
    ElMessage.success('修改成功')
    showDialog.value = false
  })
    .finally(() => {
      submiting.value = false
    })
}

defineExpose({
  open(roleId: string) {
    currentUserId.value = roleId
    showDialog.value = true
    resourceOriginChangeHandle(resourceOrigin.value)
  },
})
</script>
<style lang="stylus" scoped>
.transfer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  :deep(.el-transfer-panel) {
    flex 1
  }
}
</style>
