<template>
  <div class="text-right">
    <el-button type="primary" @click="handleRefresh"><Icon icon="ep:refresh" class="mr-5px" /> 刷新</el-button>
  </div>
  <el-table v-loading="loading" :data="tableData" :stripe="true" class="m-t-20px">
    <el-table-column label="职位名称" align="center" prop="name">
      <template #default="{ row }">{{ formatName(row.name) }}</template>
    </el-table-column>
    <el-table-column label="职位类型" align="center" prop="positionName" />
    <el-table-column label="地区" align="center" prop="areaName">
      <template #default="scope">
        {{ !scope.row.areaId ? '全国' : scope.row.areaName }}
      </template>
    </el-table-column>
    <el-table-column label="薪资" align="center" prop="payFrom">
      <template #default="scope">
        <span v-if="scope.row.payFrom && scope.row.payTo">
          {{ scope.row.payFrom }} - {{ scope.row.payTo }}/{{ payUnit.find(e => e.value === Number(scope.row.payUnit))?.label }}
        </span>
        <span v-else>面议</span>
      </template>
    </el-table-column>
    <el-table-column label="招聘类型" align="center" prop="type">
      <template #default="scope">
        <dict-tag :type="DICT_TYPE.MENDUNER_JOB_TYPE" :value="scope.row.type" />
      </template>
    </el-table-column>
    <el-table-column label="要求学历" align="center" prop="eduType">
      <template #default="scope">
        <dict-tag :type="DICT_TYPE.MENDUNER_EDUCATION_TYPE" :value="scope.row.eduType" />
      </template>
    </el-table-column>
    <el-table-column label="工作经验" align="center" prop="expType">
      <template #default="scope">
        <dict-tag :type="DICT_TYPE.MENDUNER_EXP_TYPE" :value="scope.row.expType" />
      </template>
    </el-table-column>
    <el-table-column label="职位状态" align="center" prop="status">
        <template #default="scope">
          <el-tag v-if="scope.row.status === '99'" type="warning">待支付</el-tag>
          <dict-tag v-else :type="DICT_TYPE.MENDUNER_STATUS" :value="scope.row.status" />
        </template>
      </el-table-column>
    <el-table-column label="刷新时间" align="center" prop="updateTime" width="180px">
      <template #default="scope">
        {{ timesTampChange(scope.row.updateTime, 'Y-M-D h:m') }}
      </template>
    </el-table-column>
    <el-table-column label="到期时间" align="center" prop="expireTime" width="180px">
      <template #default="scope">
        {{ scope.row.expireTime ? timesTampChange(scope.row.expireTime, 'Y-M-D') : '长期有效' }}
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-button link type="primary" @click="openDetail(scope.row)">详情</el-button>
        <el-button link type="primary" @click="handleActions(scope.row.id, 0)">刷新</el-button>
        <el-button link type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        <el-button v-if="scope.row.status === '1'" link type="success" @click="handleActions(scope.row.id, 1)">开启</el-button>
        <el-button v-if="scope.row.status === '0'" link type="danger" @click="handleActions(scope.row.id, 2)">关闭</el-button>
      </template>
    </el-table-column>
  </el-table>

  <Pagination
    :total="total"
    v-model:page="queryParams.pageNo"
    v-model:limit="queryParams.pageSize"
    @pagination="getList"
  />

  <Dialog title="职位详情" v-model="dialogVisible">
    <el-descriptions :column="1" border>
      <el-descriptions-item label="职位名称">{{ formatName(itemData.name) }}</el-descriptions-item>
      <el-descriptions-item label="职位类型">{{ itemData.positionName }}</el-descriptions-item>
      <el-descriptions-item label="工作城市">{{ !itemData.areaId ? '全国' : itemData.areaName }}</el-descriptions-item>
      <el-descriptions-item label="详细地址">{{ itemData.address }}</el-descriptions-item>
      <el-descriptions-item label="薪资">
        <span v-if="itemData.payFrom && itemData.payTo">
          {{ itemData.payFrom }} - {{ itemData.payTo }}/{{ payUnit.find(e => e.value === Number(itemData.payUnit))?.label }}
        </span>
        <span v-else>面议</span>
      </el-descriptions-item>
      <el-descriptions-item label="招聘类型">
        <dict-tag :type="DICT_TYPE.MENDUNER_JOB_TYPE" :value="itemData.type" />
      </el-descriptions-item>
      <el-descriptions-item label="学历要求">
        <dict-tag :type="DICT_TYPE.MENDUNER_EDUCATION_TYPE" :value="itemData.eduType" />
      </el-descriptions-item>
      <el-descriptions-item label="工作经验">
        <dict-tag :type="DICT_TYPE.MENDUNER_EXP_TYPE" :value="itemData.expType" />
      </el-descriptions-item>
      <el-descriptions-item label="刷新时间">{{ timesTampChange(itemData.updateTime, 'Y-M-D h:m') }}</el-descriptions-item>
      <el-descriptions-item label="到期时间">
        {{ itemData.expireTime ? timesTampChange(itemData.expireTime, 'Y-M-D') : '长期有效' }}
      </el-descriptions-item>
      <el-descriptions-item label="岗位职责">
        <div v-html="cleanedHtml(itemData.content)"></div>
      </el-descriptions-item>
      <el-descriptions-item label="岗位要求">
        <div v-html="cleanedHtml(itemData.requirement)"></div>
      </el-descriptions-item>
      <el-descriptions-item label="职位关键字">
        <el-tag type="primary" v-for="k in itemData.tagList" :key="k" class="m-r-5px">{{ k }}</el-tag>
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <el-button @click="dialogVisible = false; itemData = {}">取 消</el-button>
    </template>
  </Dialog>
</template>

<script setup>
defineOptions({ name: 'EnterpriseUserList'})
import { EnterpriseApi } from '@/api/menduner/system/enterprise/message'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { dealDictArrayData } from '@/utils/transform/position'
import { timesTampChange } from '@/utils/transform/date'
import { formatName } from '@/utils'

const props = defineProps({
  id: String
})

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const loading = ref(false)
const tableData = ref([])
const total = ref(0)
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  enterpriseId: props.id
})
const payUnit = getIntDictOptions(DICT_TYPE.MENDUNER_PAY_UNIT)
const dialogVisible = ref(false)
const itemData = ref({})

// 职位列表
const getList = async () => {
  loading.value = true
  try {
    const data = await EnterpriseApi.getEnterpriseJobPage(queryParams)
    tableData.value = dealDictArrayData([], data.list)
    total.value = data.total
  } finally {
    loading.value = false
  }
}
getList()

const handleRefresh = () => {
  queryParams.pageNo = 1
  getList()
}

// 职位刷新、开启、关闭
const arr = [
  { api: EnterpriseApi.refreshEnterpriseJob, label: '刷新' },
  { api: EnterpriseApi.openEnterpriseJob, label: '开启' },
  { api: EnterpriseApi.closeEnterpriseJob, label: '关闭' }
]
const handleActions = async (id, index) => {
  const obj = arr[index]
  if (!obj || !id) return
  try {
    await message.confirm(`确定${obj.label}该职位吗？`)
    await obj.api([id])
    message.success(obj.label + '成功')
    // 刷新列表
    await getList()
  } catch {}
}

// 富文本去除空格、换行、空标签
const cleanedHtml = (text) => {
  let cleaned = text.replace(/\n/g, '</br>')
  cleaned = cleaned.replace(/\s+/g, ' ').trim()
  cleaned = cleaned.replace(/(^|\s+)<\/p>(\s*<p>|$)/g, '</p><p>').trim()
  cleaned = cleaned.replace(/<p>\s*(<br>)\s*<\/p>/g, '')
  cleaned = cleaned.replace(/<p>\s*(<\/br>)\s*<\/p>/g, '')
  return cleaned
}

// 职位详情
const openDetail = (item) => {
  itemData.value = item
  dialogVisible.value = true
}

/** 删除按钮操作 */
const handleDelete = async (id) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await EnterpriseApi.deleteJob(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}
</script>

<style scoped lang="scss">
:deep(.el-descriptions__label.el-descriptions__cell.is-bordered-label) {
  width: 100px;
}
</style>
