<template>
  <div class="position-content">
    <div class="position-content__list">
      <div
        v-for="item in positionList"
        :key="item"
        class="position-content__item enterprise"
        :class="activeName === item.FID ? 'active' : ''"
      >
        <div class="enterprise-tp" @click="positionDetailChange(item)">
          <div class="flx-justify-between">
            <div class="item-lf nowrap-ellipsis" :title="item.JobName">
              {{ item.JobName }}
            </div>
            <div class="item-rg">{{ item.FMINIMUMWAGE }}-{{ item.FMAXIMUMSALARY }}</div>
          </div>
          <div class="position-content__item-ft">
            <!-- <span class="nowrap-ellipsis">{{
              `${item.FWORKPLACE.split('/')[0]} ${item.FWORKPLACE.split('/')[1]} ${
                item.FWORKPLACE.split('/')[2]
              }`
            }}</span> -->
            <span>{{ item.FEXPERIENCE }}</span>
            <span>{{ item.FEDUCATIONALBACKGROUND }}</span>
          </div>
        </div>
        <div>
          <div v-if="!isPositon" class="enterprise-bt flx-justify-between">
            <div class="flx-align-center">
              <span style="margin-left: 8px">{{ item.FUSERNAME }}</span>
              <span style="margin-left: 8px">{{ item.FJOBTITLES }}</span>
            </div>
            <div style="color: #666666; font-size: 14px">
              {{
                `${item.FWORKPLACE.split('/')[0]} ${item.FWORKPLACE.split('/')[1]} ${
                  item.FWORKPLACE.split('/')[2]
                }`
              }}
            </div>
          </div>
          <div
            v-else
            class="enterprise-bt flx-justify-between"
            @click="toCompanyDetail(item.FirmID)"
          >
            <div class="flx-align-center">
              <img :src="baseURL + '/' + item.FLOGO" width="24" height="24" />
              <span style="margin-left: 8px">{{ item.FirmName }}</span>
            </div>
            <div>
              <span>{{ item.FINDUSTRY }}</span>
              <el-divider direction="vertical" />
              <span>{{ item.FFINANCINGS }}</span>
            </div>
          </div>
        </div>
      </div>
      <customPagination
        :pageSize="queryList.pageSize"
        :pageIndex="queryList.pageIndex"
        :total="queryList.total"
        @current-change="currentChange"
      />
    </div>

    <div class="position-content__detail">
      <div class="position-content__detail__tp">
        <div>
          <div class="flx-align-center">
            <span class="position-title">{{ positionDetail?.JobName }}</span>
            <span style="font-size: 24px; color: #ff3333"
              >{{ positionDetail?.FMINIMUMWAGE }}-{{ positionDetail?.FMAXIMUMSALARY }}</span
            >
          </div>
          <div class="flx-align-center" style="margin-top: 6px; font-size: 14px">
            <div class="flx-align-center" style="margin-right: 12px">
              <img src="@/assets/img/icon-map1.png" />
              <span>{{ positionDetail?.FWORKPLACE?.split('/')[1] }}</span>
            </div>
            <div class="flx-align-center" style="margin-right: 12px">
              <img src="@/assets/img/icon-resume8.png" />
              <span>{{ positionDetail?.FEXPERIENCE }}</span>
            </div>
            <div class="flx-align-center">
              <img src="@/assets/img/icon-resume.png" />
              <span>{{ positionDetail?.FEDUCATIONALBACKGROUND }}</span>
            </div>
          </div>
        </div>
        <span class="resume-btn" @click="submitResume">投递简历</span>
      </div>
      <el-scrollbar>
        <span class="desc-title" style="margin-bottom: 16px">职位描述</span>
        <div class="flx-align-center" style="margin-bottom: 18px; flex-wrap: wrap">
          <span
            v-for="(item, index) in positionDetail?.FJOBKEYWORDS || []"
            :key="index"
            class="keyWords"
            >{{ item }}</span
          >
        </div>
        <pre>{{ positionDetail?.FJOBDESCRIPTION_Tag }}</pre>
        <el-divider />
        <span class="desc-title" style="margin-bottom: 16px">工作地址</span>
        <div>
          <div class="flx-align-center" style="margin-bottom: 10px">
            <el-icon color="#177CFA" style="margin-right: 4px"><i-ep-LocationFilled /></el-icon>
            {{ positionDetail?.FWORKPLACE.split('/').slice(-1)[0] }}
          </div>
          <qqMap v-if="mapFlag" ref="mapRef" />
        </div>

        <div style="width: 100%; text-align: center">
          <span class="seemore-btn" @click="toPositionDetail(positionDetail?.FID)"
            >查看更多信息</span
          >
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup lang="ts">
import { baseURL } from '@/services'
import { sendResume } from '@/services/api/recruitmentManagement'
import qqMap from '@/components/qqMap.vue'
import customPagination from '@/components/customPagination.vue'

const props = defineProps({
  positionList: {
    type: Array,
    default: () => []
  } as any,
  queryList: {
    type: Array,
    default: () => {}
  } as any,
  isPositon: {
    type: Boolean,
    default: false
  }
})

const emits = defineEmits(['current-change'])

const router = useRouter()
const mapRef: any = ref()
const activeName = ref()
const positionDetail = ref()
const mapFlag = ref(false)

watch(
  () => props.positionList,
  () => {
    mapFlag.value = false
    setTimeout(() => {
      if (props.positionList.length) {
        mapFlag.value = true
        setTimeout(() => {
          activeName.value = props.positionList[0].FID
          positionDetail.value = props.positionList[0]
          mapRef.value?.initMap(props.positionList[0].FWORKPLACE)
        }, 300)
      }
    }, 100)
  },
  { immediate: true, deep: true }
)

const positionDetailChange = (row: any) => {
  if (row.FID === activeName.value) return
  mapFlag.value = false
  activeName.value = row.FID
  positionDetail.value = props.positionList.find((item: any) => item.FID === activeName.value)
  setTimeout(() => {
    mapFlag.value = true
    setTimeout(() => {
      mapRef.value.initMap(row.FWORKPLACE)
    }, 300)
  }, 100)
}

const toPositionDetail = (FID: number) => {
  router.push({ path: '/recruitmentManagement/positionDetail', query: { FID } })
}

const toCompanyDetail = (FID: number) => {
  router.push({ path: '/recruitmentManagement/companyDetail', query: { FID } })
}

const currentChange = (pageIndex: number) => {
  mapFlag.value = false
  emits('current-change', pageIndex)
}

// 投递简历
const submitResume = async () => {
  const res: any = await sendResume({ JobID: positionDetail.value?.FID })
  if (res.code === 200) {
    // console.log(res)
    ElNotification.success({
      title: '投递简历',
      message: '投递成功'
    })
  }
}

// const init = async () => {
//   mapFlag.value = true
//   setTimeout(() => {
//     if (props.positionList.length) {
//       activeName.value = props.positionList[0].FID
//       positionDetail.value = props.positionList[0]
//       mapRef.value.initMap(props.positionList[0].FWORKPLACE)
//     }
//   }, 100)
// }

// defineExpose({
//   init
// })
</script>

<style lang="scss" scoped>
.position-content {
  display: flex;
  width: 100%;
  .position-content__list {
    width: 428px;
    display: flex;
    flex-direction: column;
    margin-right: 16px;
    .position-content__item {
      width: 100%;
      margin-bottom: 16px;
      box-sizing: border-box;
      background: #ffffff;
      border-radius: 12px;
      padding: 26px 20px;
      cursor: pointer;

      .item-lf {
        width: 183px;
        font-size: 16px;
        font-weight: 400;
        color: #222222;
        text-align: left;
      }
      .item-rg {
        font-size: 18px;
        font-weight: 400;
        color: #ff3333;
      }
      .position-content__item-ft {
        margin-top: 16px;
        display: flex;
        // span:first-child {
        //   width: 40%;
        // }
        span {
          display: inline-block;
          padding: 6px 12px;
          background: #f8f8f8;
          border-radius: 4px;
          line-height: 24px;
          font-size: 14px;
          font-weight: 400;
          color: #666666;
          margin-right: 8px;
        }
      }
      .enterprise-bt {
        padding: 12px 20px;
        background: linear-gradient(90deg, #e3f0ff 0%, rgba(227, 240, 255, 0.15) 100%);
        border-radius: 0 0 12px 12px;
        span {
          font-size: 13px;
          font-weight: 400;
          color: #666666;
        }
        .line {
          display: inline-block;
          width: 1px;
          height: 10px;
          background: #cccccc;
        }
      }
    }

    .enterprise {
      padding: 0;
      padding-top: 26px;
      &:hover {
        box-shadow: 0 20px 16px 0 hsla(0, 0%, 70.2%, 0.2);
      }

      .enterprise-tp {
        padding: 0 20px;
        margin-bottom: 16px;
      }
      .enterprise-bt {
        padding: 12px 20px;
        background: linear-gradient(90deg, #e3f0ff 0%, rgba(227, 240, 255, 0.15) 100%);
        border-radius: 0 0 12px 12px;
        span {
          font-size: 13px;
          font-weight: 400;
          color: #666666;
        }
        .line {
          display: inline-block;
          width: 1px;
          height: 10px;
          background: #cccccc;
        }
      }
    }
    .active {
      border: 1px solid #177cfa;
      background: #f8f8f8;
    }
  }
  .position-content__detail {
    flex: 1;
    .position-content__detail__tp {
      display: flex;
      justify-content: space-between;
      align-items: center;
      // margin-bottom: 24px;
      border-radius: 12px 12px 0 0;
      background-color: #ffffff;
      padding: 24px 20px;
      .position-title {
        font-size: 30px;
        font-weight: 500;
        color: #222222;
        margin-right: 34px;
      }
      .resume-btn {
        display: block;
        width: 120px;
        height: 43px;
        line-height: 43px;
        background: #177cfa;
        border-radius: 6px;
        font-size: 18px;
        font-weight: 500;
        color: #ffffff;
        text-align: center;
        cursor: pointer;
      }
    }

    .el-scrollbar {
      background-color: #ffffff;
      padding: 0 20px 24px;
      max-height: calc(100vh - 223px);
      border-radius: 0 0 12px 12px;
    }
  }
}
.keyWords {
  padding: 4px 12px;
  border-radius: 39px;
  border: 1px solid #cccccc;
  margin-right: 12px;
  font-size: 14px;
  color: #999999;
  margin-bottom: 8px;
}

.desc-title {
  display: inline-block;
  font-size: 18px;
  color: #000000;
  margin-bottom: 24px;
}

pre {
  white-space: pre-wrap;
}

.seemore-btn {
  cursor: pointer;
  display: inline-block;
  width: 136px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid #177cfa;
  font-size: 16px;
  font-weight: 400;
  line-height: 14px;
  color: #177cfa;
  line-height: 38px;
  text-align: center;
  margin-top: 24px;
}
</style>
