<template>
  <el-form
    class=" m-y-20px"
    :model="queryParams"
    ref="queryFormRef"
    :inline="true"
    label-width="68px"
    @submit.prevent
  >
    <el-form-item label="企业名称" prop="name">
      <el-input v-model="queryParams.name" placeholder="请输入企业名称" clearable @keyup.enter="handleQuery" class="!w-240px" />
    </el-form-item>
    <el-form-item>
      <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
      <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
      <el-button type="primary" plain @click="handleAdd"><Icon icon="ep:plus" class="mr-5px" />新增</el-button>
      <el-button type="success" plain @click="queryParams.pageNo = 1, getList()"><Icon icon="ep:refresh" class="mr-5px" />刷新</el-button>
      <el-button type="primary" plain :disabled="!selectData || !selectData.length" @click="handleRemove">一键移出白名单</el-button>
    </el-form-item>
  </el-form>
  
  <el-table v-loading="loading" :data="list" :stripe="true" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column label="企业全称" align="center" prop="name">
      <template #default="scope">{{ formatName(scope.row.enterprise.name) }}</template>
    </el-table-column>
    <el-table-column label="企业别称" align="center" prop="anotherName">
      <template #default="scope">{{ formatName(scope.row.enterprise.anotherName) }}</template>
    </el-table-column>
		<el-table-column label="剩余发布职位数" align="center" prop="num" />
		<el-table-column label="来源" align="center" prop="source">
      <template #default="scope">{{ scope.row.source === '0' ? '系统添加' : scope.row.source === '1' ? '购买门票' : '' }}</template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button
          link
          type="primary"
          @click="handleRemoveWhiteList(formatName(scope.row.enterprise.anotherName || scope.row.enterprise.name), scope.row.enterpriseId)"
        >
          移出白名单
        </el-button>
      </template>
    </el-table-column>
  </el-table>
    
  <Pagination
    :total="total"
    v-model:page="queryParams.pageNo"
    v-model:limit="queryParams.pageSize"
    @pagination="getList"
  />

  <!-- 表单弹窗：添加/修改 -->
  <JobFairForm ref="formRef" @success="getList" />
</template>

<script setup lang="ts">
/** 招聘会 白名单 */
defineOptions({ name: 'WhiteList' })
import { JobFairWhiteApi } from '@/api/menduner/system/jobFair/white'
import JobFairForm from '../jobFairForm.vue'
import { formatName } from '@/utils'

const props = defineProps({ info: Object })
const message = useMessage() // 消息弹窗

const loading = ref(false) // 列表的加载中
const list = ref([]) // 列表的数据
const total = ref(0)
const queryParams = ref({
  pageNo: 1,
  pageSize: 10,
  name: undefined,
  jobFairId: undefined
})
const selectData = ref([])

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await JobFairWhiteApi.getJobFairWhiteList(queryParams.value)
    total.value = data.total
    list.value = data.list
  } finally {
    loading.value = false
  }
}

const handleSelectionChange = (data) => {
  selectData.value = data
}

const handleQuery = () => {
  total.value = 0
  list.value = []
  queryParams.value.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const queryFormRef = ref()
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

const formRef = ref()
const handleAdd = () => {
  formRef.value.open(queryParams.value.jobFairId)
}

// 移出白名单
const handleRemoveWhiteList = async (enterpriseName: string, enterpriseId: string) => {
  if (!enterpriseId) return message.warning('操作失败，请刷新页面重试')
  try {
    await message.confirm(`确定要将【${enterpriseName}】移出白名单吗？`)
    await JobFairWhiteApi.removeJobFairWhiteList({ enterpriseIds: enterpriseId, jobFairId: queryParams.value.jobFairId })
    message.success('移出成功')
    getList()
  } catch (err) {}
}

// 一键移出白名单
const handleRemove = () => {
  if (!selectData.value || selectData.value.length === 0) return message.warning('请选择要移出的企业')
  const enterpriseIds = selectData.value.map(item => item.enterpriseId).join(',')
  const enterpriseNames = selectData.value.map(item => formatName(item.enterprise.anotherName || item.enterprise.name)).join(',')

  handleRemoveWhiteList(enterpriseNames, enterpriseIds)
}

onMounted(() => {
	if (props.info && Object.keys(props.info).length > 0) {
		queryParams.value.jobFairId = props.info.id
    queryParams.value.pageNo = 1
		getList()
	}
})

defineExpose({
  getList
})
</script>