<template>
  <div v-loading="loading" style="margin-bottom: 70px">
    <div class="position-header">
      <el-button type="primary" :icon="CirclePlusFilled" @click="toEditPosition"
        >发布职位</el-button
      >
      <div class="tag-list">
        <span
          v-for="(item, index) in positionList"
          :key="index"
          :class="positionQuery.FPOSITIONSTATUS === item.type ? 'tag-active' : ''"
          @click="tagChange(item)"
          >{{ item.name }}</span
        >
      </div>
    </div>
    <div v-if="positionData.length" class="position-list">
      <div v-for="item in positionData" :key="item.FID" class="position-item flx-justify-between">
        <div style="cursor: pointer" @click="preview(item.FID)">
          <div class="position-title">{{ item.JobName }}</div>
          <div>
            <span class="position-label">{{ item.FEDUCATIONALBACKGROUND }}</span>
            <el-divider direction="vertical" />
            <span class="position-label">{{ item.FEXPERIENCE }}</span>
            <el-divider direction="vertical" />
            <span class="position-label">招聘{{ item.FRECRUITSNUMBER }}人</span>
            <el-divider direction="vertical" />
            <span class="position-label"
              >{{ item.FMINIMUMWAGE }}-{{ item.FMAXIMUMSALARY }}.{{
                item.FMONTHLYSALARY?.replace('月', '薪')
              }}</span
            >
            <el-divider direction="vertical" />
            <span class="position-label">{{ '全职' }}</span>
          </div>
        </div>
        <div class="options">
          <span v-if="item.FPOSITIONSTATUS !== 'A'"><span class="round" /> 已关闭</span>
          <span v-else class="open"><span class="round open-round" style="" /> 开放中</span>
          <span @click="updateStatus(item)">{{
            item.FPOSITIONSTATUS === 'A' ? '关闭' : '开放'
          }}</span>
          <span @click="updatePosition(item.FID)">编辑</span>
          <span @click="preview(item.FID)">预览</span>
          <span @click="deletePosition(item)">删除</span>
        </div>
      </div>
    </div>
    <el-empty v-else description="暂未添加职位" />
    <el-pagination
      background
      layout="->, prev, pager, next"
      :total="total"
      hide-on-single-page
      style="margin-top: 15px"
    />
  </div>
  <previewPosition v-model:show="previewShow" :position-item="positionDetailData" />
</template>

<script setup lang="ts">
import { CirclePlusFilled } from '@element-plus/icons-vue'
import { positionList } from '../config/index'
import {
  getCompanyPositionList,
  updatePositionStatus,
  getCompanyPositionDetail,
  deleteCompanyPosition
} from '@/services/api/recruitmentManagement'
import previewPosition from './previewPosition.vue'

const router = useRouter()
const loading = ref(true)
const previewShow = ref(false)
const total = ref(0)
const positionQuery = ref({
  pageIndex: 1,
  pageSize: 10,
  FPOSITIONSTATUS: '' //A开放，B关闭，空全部
})

const positionData: any = ref([])
const positionDetailData: any = ref([])

const tagChange = (row: any) => {
  positionQuery.value.FPOSITIONSTATUS = row.type
  initCompanyPositionList()
}

const toEditPosition = () => {
  router.push('/recruitmentManagement/editPosition')
}

const updatePosition = (FID: string) => {
  router.push({ path: '/recruitmentManagement/editPosition', query: { FID } })
}

const preview = (FID: string) => {
  initCompanyPositionDetail(FID)
  setTimeout(() => {
    // console.log(positionDetailData.value)
    previewShow.value = true
  }, 100)
}

const updateStatus = (row: any) => {
  ElMessageBox.confirm(
    `确定${row.FPOSITIONSTATUS !== 'A' ? '开放职位' : '关闭职位'}?`,
    `${row.FPOSITIONSTATUS !== 'A' ? '开放职位' : '关闭职位'}`,
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(async () => {
      const res: any = await updatePositionStatus({
        FID: row.FID,
        Type: row.FPOSITIONSTATUS !== 'A' ? 0 : 1
      })
      if (res.code === 200) {
        initCompanyPositionList()
        ElMessage.success(row.FPOSITIONSTATUS !== 'A' ? '开放职位成功' : '关闭职位成功')
      }
    })
    .catch(() => {})
}
const deletePosition = (row: any) => {
  ElMessageBox.confirm(`确定删除职位?`, `删除`, {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      const res: any = await deleteCompanyPosition({ FID: row.FID })
      if (res.code === 200) {
        initCompanyPositionList()
        ElMessage.success('删除职位成功')
      }
    })
    .catch(() => {})
}

const initCompanyPositionDetail = async (FID: string) => {
  const res: any = await getCompanyPositionDetail({ FID })
  // console.log(res)
  if (res.code === 200) {
    positionDetailData.value = res.data
  }
}
const initCompanyPositionList = async () => {
  loading.value = true
  const res: any = await getCompanyPositionList(positionQuery.value)
  // console.log(res)
  if (res.code === 200) {
    positionData.value = res.data || []
    total.value = res.total
    loading.value = false
  }
}

defineExpose({
  initCompanyPositionList
})
</script>

<style lang="scss" scoped>
.position-header {
  padding: 26px 58px;
  background: #ffffff;
  border-radius: 12px;
  margin-bottom: 16px;

  .tag-list {
    margin-top: 20px;
    display: flex;
    span {
      display: inline-block;
      cursor: pointer;
      margin-right: 8px;
      font-size: 14px;
      font-weight: 400;
      height: 32px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 6px 12px;
    }

    .tag-active {
      background: #dcecff;
      color: #177cfa;
      border-radius: 4px;
    }
  }
}

.position-list {
  .position-item {
    padding: 24px 58px;
    background: #ffffff;
    border-radius: 12px;
    margin-bottom: 16px;

    .position-title {
      font-size: 18px;
      font-weight: 500;
      color: #222222;
      margin-bottom: 16px;
    }

    .position-label {
      font-size: 16px;
      font-weight: 400;
      color: #666666;
    }
    .options {
      display: flex;
      font-size: 16px;
      font-weight: 400;
      color: #222222;

      span {
        cursor: pointer;
        margin-left: 24px;
      }

      .open {
        color: #177cfa;
      }
      .round {
        display: inline-block;
        width: 8px;
        height: 8px;
        background: #666666;
        border-radius: 50%;
      }

      .open-round {
        background: linear-gradient(90deg, #a5cdff 0%, #177cfa 100%);
        color: #177cfa;
      }
    }
  }
}
</style>
