<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" width="700">

    <el-transfer
      v-model="selectedKeys"
      :data="transferData"
      :titles="['可选用户', '已选用户']"
      :button-texts="['移除', '添加']"
      :filterable="true"
      :filter-placeholder="'请输入姓名或登录名'"
      :filter-method="filterMethod"
      :left-default-checked="[]"
      :right-default-checked="[]"

    />

    <template #footer>
      <el-button :disabled="formLoading" type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>

<script lang="ts" setup>
import * as BlacklistApi from '@/api/material/blacklist/index'

defineOptions({ name: 'BlacklistForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中

// 穿梭框数据
const transferData = ref([])
const selectedKeys = ref([])

/** 打开弹窗 */
const open = async (type: string) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  resetForm()
  await getLeftList()
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 获取左侧列表数据 */
const getLeftList = async () => {
  const data = {
    pageNo: 1,
    pageSize: -1, // 获取所有数据
    nickName: undefined
  }
  const res = await BlacklistApi.listWhitelist(data)

  // 转换为穿梭框需要的格式
  transferData.value = (res.list || []).map((item: any) => ({
    key: item.userId,
    label: `${item.nickName} (${item.userName})`,
    disabled: false,
    userId: item.userId,
    nickName: item.nickName,
    userName: item.userName
  }))
}

/** 过滤方法 */
const filterMethod = (query: string, item: any) => {
  if (query === '') {
    return true
  }
  return item.nickName.toLowerCase().includes(query.toLowerCase()) ||
    item.userName.toLowerCase().includes(query.toLowerCase())
}

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  formLoading.value = true
  try {
    // 获取右侧已选中的数据
    const selectedData = transferData.value.filter((item: any) =>
      selectedKeys.value.includes(item.key)
    )

    const data = selectedData.map((item: any) => ({
      userId: item.userId,
      module: '2'
    }))

    await BlacklistApi.addBlacklist(data)
    message.success(t('common.createSuccess'))
    dialogVisible.value = false
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  transferData.value = []
  selectedKeys.value = []
}
</script>

<style scoped lang="scss">
:deep(.el-transfer) {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  .el-transfer-panel {
    width: 50%;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
  }

  .el-transfer-panel__header {
    background-color: #f5f7fa;
    border-bottom: 1px solid #dcdfe6;
    padding: 12px 16px;
    font-weight: 500;
  }

  .el-transfer-panel__body {
    height: 450px;
  }

  .el-transfer-panel__list {
    height: 350px;
    padding: 0;
  }

  .el-transfer-panel__item {
    padding: 10px 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;

    &:hover {
      background-color: #f5f7fa;
    }

    &.is-checked {
      background-color: #ecf5ff;
      color: #409eff;
    }
  }

  .el-transfer__buttons {
    width: 10%;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 400px;
  }

  .el-transfer__button {
    margin: 10px 0;
    width: 100%;
  }

  .el-transfer-panel__filter {
    padding: 10px 16px;
    border-bottom: 1px solid #dcdfe6;

    .el-input__wrapper {
      box-shadow: 0 0 0 1px #dcdfe6 inset;
    }
  }
}

:deep(.el-checkbox) {
  margin-right: 8px;
}

:deep(.el-transfer-panel__empty) {
  padding: 30px 0;
  text-align: center;
  color: #909399;
}
</style>
