<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <CardTitle fontSize="16" :title="jobFairInfo.title?.replace(/<\/?p[^>]*>/gi, '')" />
    <el-form
      class="-mb-15px m-t-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" :loading="exportLoading" plain @click="handleExport"><Icon icon="ep:download" class="mr-5px" /> 参加招聘会职位列表导出</el-button>
        <el-button type="primary" :loading="exportDeliveryLoading" plain @click="handleExportDelivery"><Icon icon="ep:download" class="mr-5px" /> 招聘会职位投递情况导出</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <el-tabs v-model="activeName" @tab-change="handleClick">
      <el-tab-pane label="白名单" name="whiteList">
        <div class="text-right">
          <el-button type="primary" plain @click="handleAdd"><Icon icon="ep:plus" class="mr-5px" /> 新增</el-button>
        </div>
        <el-table v-loading="loading" :data="list" :stripe="true">
          <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">
            <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>
      </el-tab-pane>
      <el-tab-pane label="购买门票企业" name="ticketEntList">
        <el-table v-loading="loading" :data="list" :stripe="true">
          <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="status">
            <template #default="scope">
              <span :style="{'color': scope.row.status === '1' ? '#f56c6c' : '#67c23a' }">{{ scope.row.status === '1' ? '已禁用' : '已开启' }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button v-if="scope.row.status === '1'" link type="primary" @click="handleEnableRights(formatName(scope.row.enterprise.anotherName || scope.row.enterprise.name), scope.row.id)">
                开启权益
              </el-button>
              <el-button v-if="scope.row.status === '0'" link type="danger" @click="handleDisableRights(formatName(scope.row.enterprise.anotherName || scope.row.enterprise.name), scope.row.id)">禁用权益</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>

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

<script setup lang="ts">
import { JobFairWhiteApi } from '@/api/menduner/system/jobFair/white'
import JobFairForm from './jobFairForm.vue'
import download from '@/utils/download'
import { useTagsViewStore } from '@/store/modules/tagsView'
import { ElMessage } from 'element-plus'
import { formatName } from '@/utils'
import { JobFairManageApi } from '@/api/menduner/system/jobFair/manage'

/** 招聘会 列表 */
defineOptions({ name: 'JobFairDetails' })

const message = useMessage() // 消息弹窗

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

/** 查询列表 */
const getList = async () => {
  loading.value = true
  const api = activeName.value === 'whiteList' ? JobFairWhiteApi.getJobFairWhiteList : JobFairManageApi.getBuyTicketEnterprise
  try {
    const data = await api(queryParams.value)
    total.value = data.total
    list.value = data.list
  } finally {
    loading.value = false
  }
}

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

/* 查询招聘会详情 */
const jobFairInfo = ref({})
const getJobFairDetail = async () => {
  try {
    const data = await JobFairManageApi.getJobFair(queryParams.value.jobFairId)
    jobFairInfo.value = data
  } catch {}
}

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 handleEnableRights = async (enterpriseName: string, id: string) => {
  if (!id) return message.warning('操作失败，请刷新页面重试')
  try {
    await message.confirm(`是否确定开启【${formatName(enterpriseName)}】的招聘会权益？`)
    await JobFairManageApi.enableTicketRights(id)
    message.success('开启成功')
    getList()
  } catch (err) {}
}

// 关闭权益
const handleDisableRights = async (enterpriseName: string, id: string) => {
  if (!id) return message.warning('操作失败，请刷新页面重试')
  try {
    await message.confirm(`是否确定禁用【${formatName(enterpriseName)}】的招聘会权益？`)
    await JobFairManageApi.disableTicketRights(id)
    message.success('禁用成功')
    getList()
  } catch (err) {}
}

const exportLoading = ref(false)
/** 导出按钮操作 */
const handleExport = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportLoading.value = true
    const data = await JobFairWhiteApi.exportJobFairWhiteList(queryParams.value.jobFairId)
    download.excel(data, '招聘会职位列表.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}

// 招聘会投递情况导出
const exportDeliveryLoading = ref(false)
const handleExportDelivery = async () => {
  try {
    // 导出的二次确认
    await message.exportConfirm()
    // 发起导出
    exportDeliveryLoading.value = true
    const data = await JobFairWhiteApi.exportJobFairApplyData(queryParams.value.jobFairId)
    download.excel(data, '招聘会职位投递情况.xls')
  } catch {
  } finally {
    exportDeliveryLoading.value = false
  }
}

/** 初始化 */
const { currentRoute } = useRouter() // 路由
const { delView } = useTagsViewStore() // 视图操作
const route = useRoute()
const { id } = route.params
onMounted(() => {
  if (!id) {
    ElMessage.warning('参数错误，招聘会编号不能为空！')
    delView(unref(currentRoute))
    return
  }
  queryParams.value.jobFairId = id
  getList()
  getJobFairDetail()
})
</script>