<template>
  <div class="student-container">
    <div class="container">
      <img :src="baseURL + '/' + posterList?.[0].FPOSTERPICTURE" height="560" />
      <div class="student">
        <el-tabs v-model="activeName" class="student-tabs" stretch @tab-change="tabChange">
          <el-tab-pane
            v-for="(item, index) in tabsList"
            :key="index"
            v-loading="loading"
            :label="item.label"
            :name="item.name"
            class="student-tab-pane"
          >
            <div v-if="!index">
              <div v-if="userPostionList.length">
                <div class="student-list">
                  <div
                    v-for="col in userPostionList"
                    :key="col"
                    class="student-item"
                    @click="toPositionDetail(col.FID)"
                  >
                    <div class="flx-justify-between" style="margin-bottom: 20px">
                      <div class="student-title nowrap-ellipsis">
                        {{ col.JobName }}
                      </div>
                      <div>
                        <span class="salary">{{ col.FMINIMUMWAGE }}-{{ col.FMAXIMUMSALARY }}</span>
                        <span class="monthly-pay">元/月</span>
                      </div>
                    </div>
                    <div class="position-label">
                      <span>{{ col.FEDUCATIONALBACKGROUND }}</span>
                      <el-divider direction="vertical" />
                      <span>{{ col.FEXPERIENCE }}</span>
                      <el-divider direction="vertical" />
                      <span>招聘{{ col.FRECRUITSNUMBER }}人</span>
                    </div>
                    <el-divider style="margin: 14px 0" />
                    <div class="company">{{ col.FirmName }}</div>
                    <div class="company-label">
                      <span>{{ col.FFINANCINGS }}</span>
                      <el-divider direction="vertical" />
                      <span>{{ col.FSCALES }}</span>
                      <el-divider direction="vertical" />
                      <span>{{ col.FINDUSTRY }}</span>
                    </div>
                  </div>
                </div>
                <customPagination
                  :pageSize="queryList.pageSize"
                  :pageIndex="queryList.pageIndex"
                  :total="queryList.total"
                  @current-change="currentChange"
                />
              </div>
              <el-empty v-else description="暂无数据" />
            </div>
            <div v-else-if="index === 1">
              <div v-if="guideGuidance" class="article">
                <div v-dompurify-html="guideGuidance" class="article-html" />
                <div class="content__showmore" @click="toCommonDetailType('A')">
                  <span>查看更多</span>
                  <el-icon color="#176efa"><i-ep-ArrowRight /></el-icon>
                </div>
              </div>
              <el-empty v-else description="暂无数据" />
            </div>
            <div v-else-if="index === 2" class="employment-policy">
              <div class="employment-policy-list">
                <div
                  v-for="(col, cIndex) in policyList"
                  :key="col.FID"
                  class="poliy-item"
                  @click="handleChange(col)"
                >
                  <span
                    class="poliy-item-order"
                    :class="cIndex < 3 && policyQuery.pageIndex == 1 ? 'poliy-item-postorder' : ''"
                    >{{
                      policyQuery.pageIndex === 1
                        ? cIndex + 1
                        : policyQuery.pageSize * policyQuery.pageIndex + cIndex + 1
                    }}</span
                  >
                  <el-link>{{ col.FTITLE }}</el-link>
                </div>
              </div>
              <customPagination
                :pageSize="policyQuery.pageSize"
                :pageIndex="policyQuery.pageIndex"
                :total="policyQuery.total"
                @current-change="currentChange"
              />
            </div>
            <div v-else-if="index === 3" class="hot-company">
              <div class="company-list">
                <div v-for="col in hotCompanyList" :key="col.FirmFID" class="company-item">
                  <div class="company-tp" @click="toCompanyDetail(col.FirmFID)">
                    <img :src="baseURL + '/' + col.FLOGO" width="50" height="50" />
                    <div class="company-tp-rg flx-column-start-between">
                      <span>{{ col.FirmName }}</span>
                      <div class="company-label">
                        <span>{{ col.FFINANCINGS }}</span>
                        <el-divider direction="vertical" />
                        <span>{{ col.FSCALES }}</span>
                        <el-divider direction="vertical" />
                        <span>{{ col.FINDUSTRY }}</span>
                      </div>
                    </div>
                  </div>
                  <div class="company-bt">
                    <div class="company-position-list flx-direction-column">
                      <div
                        v-for="colS in col.JobS"
                        :key="colS.JobFID"
                        class="company-position-item"
                        @click="toPositionDetail(colS.JobFID)"
                      >
                        <div class="flx-justify-between" style="margin-bottom: 22px">
                          <div
                            class="nowrap-ellipsis"
                            style="width: 207px; text-align: left"
                            :title="colS.JobName"
                          >
                            {{ colS.JobName }}
                          </div>
                          <div>
                            <span class="salary"
                              >{{ colS.FMINIMUMWAGE }}-{{ colS.FMAXIMUMSALARY }}</span
                            >
                            <span class="monthly-pay">元/月</span>
                          </div>
                        </div>
                        <div class="hot-position-item-ft">
                          <span class="nowrap-ellipsis" :title="colS.FWORKPLACE">{{
                            `${colS.FWORKPLACE.split('/')[1]} ${colS.FWORKPLACE.split('/')[2]} ${
                              colS.FWORKPLACE.split('/')[3]
                            }`
                          }}</span>
                          <span>{{ colS.FEXPERIENCE }} </span>
                          <span>{{ colS.FEDUCATIONALBACKGROUND }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-else-if="index === 4">
              <div v-if="guideGuidance" class="article">
                <div v-dompurify-html="guideGuidance" class="article-html" />
                <div class="content__showmore" @click="toCommonDetailType('B')">
                  <span>查看更多</span>
                  <el-icon color="#176efa"><i-ep-ArrowRight /></el-icon>
                </div>
              </div>
              <el-empty v-else description="暂无数据" />
            </div>
            <div v-else-if="index === 5" class="live-broadcast">
              <div v-for="col in 6" :key="col" class="live-broadcast-item">
                <img src="@/assets/img/Banner.png" height="214" />
                <p>
                  有时候,上天没有给你想要的,不是因为你不配,而是你值得更好的
                  有时候,上天没有给你想要的,不是因为你不配,而是你值得更好的
                </p>
                <div class="flx-justify-between">
                  <div class="flx-align-center">
                    <img src="@/assets/img/icon-chuang.png" style="width: 20px; height: 20px" />
                    <span class="live-broadcast-info">陈大大</span>
                    <span class="live-broadcast-info">2021-9-10</span>
                  </div>
                  <div class="flx-align-center">
                    <el-icon size="14"><i-ep-View /></el-icon>
                    <span class="live-broadcast-info">1538</span>
                  </div>
                </div>
              </div>
            </div>
            <div v-else-if="index === 6" class="flx-direction-column">
              <div
                v-for="col in displayList"
                :key="col.FID"
                class="entrepreneurship-item"
                @click="toCommonDetail(col)"
              >
                <img :src="baseURL + '/' + col.FPICTURE" />
                <div class="entrepreneurship-item-rg">
                  <p>{{ col.FTITLE }}</p>
                </div>
              </div>
              <customPagination
                :pageSize="displayQuery.pageSize"
                :pageIndex="displayQuery.pageIndex"
                :total="displayQuery.total"
                @current-change="currentChange"
              />
            </div>
            <div v-else-if="index === 7" class="flx-center">
              <div class="job-registration">
                <div class="n-title">求职登记</div>
                <div class="login-dialog">
                  <el-form
                    ref="formRef"
                    :model="state.loginForm"
                    :rules="state.loginRules"
                    label-width="0"
                    class="demo-dynamic"
                  >
                    <el-form-item label="" prop="Phone">
                      <el-input
                        v-model="state.loginForm.Phone"
                        size="large"
                        placeholder="请输入手机号"
                      >
                        <template #prefix>
                          <img src="../../assets/img/Phone.png" alt="" />
                        </template>
                      </el-input>
                    </el-form-item>
                    <el-form-item label="" prop="Code">
                      <el-input
                        v-model="state.loginForm.Code"
                        size="large"
                        placeholder="请输入验证码"
                      >
                        <template #prefix>
                          <img src="../../assets/img/pwd.png" alt="" />
                        </template>
                        <template #suffix>
                          <el-button type="primary" link :disabled="state.disabled"
                            >获取验证码</el-button
                          >
                        </template>
                      </el-input>
                    </el-form-item>
                  </el-form>
                  <el-button type="primary" style="width: 100%; margin-top: 46px" @click="onConfirm"
                    >登录/注册</el-button
                  >
                </div>
                <div class="agree-with">
                  <el-checkbox v-model="state.agreeWith" label="" size="large" text-color="#ffffff">
                    <template #default>
                      <div style="color: #999999">
                        同意南山就业帮
                        <span style="color: #409eff" @click.prevent="open"
                          >《南山就业帮用户服务协议》</span
                        >
                        及
                        <span style="color: #409eff" @click.prevent="open"
                          >《个人信息保护政策》</span
                        >
                      </div>
                    </template>
                  </el-checkbox>
                </div>
              </div>
            </div>
            <div v-else class="student-tab-item flx-center">{{ item.label }}</div>
          </el-tab-pane>
        </el-tabs>
        <!-- <span v-show="activeName === 6" class="n-more" style="margin-top: 24px">查看更多</span> -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { baseURL } from '@/services'
import { getPoster, getGuideGuidance, getCommonList } from '@/services/api/common'
import { getUserPostionList, getHotCompany } from '@/services/api/recruitmentManagement'
import { getPolicyList } from '@/services/api/policy'
import customPagination from '@/components/customPagination.vue'

const router = useRouter()
const activeName = ref(1)
const formRef = ref()
const tabsList = [
  { label: '岗位速递', name: 0 },
  { label: '就业引导', name: 1 },
  { label: '就业政策', name: 2 },
  { label: '就业见习', name: 3 },
  { label: '职业指导', name: 4 },
  { label: '直播带岗', name: 5 },
  { label: '创业展示', name: 6 },
  { label: '求职登记', name: 7 }
]

const state = reactive({
  loginForm: {
    Phone: '',
    Code: ''
  },
  loginRules: {
    Phone: [
      { required: true, message: '请输入手机号', trigger: 'blur' },
      {
        pattern: /^1[3|4|5|6|7|8][0-9]\d{8}$/,
        message: '手机号码格式不正确',
        trigger: 'blur'
      }
    ],
    Code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
  },
  disabled: false,
  agreeWith: false
})

const loading = ref(true)
const posterList = ref()
const guideGuidance = ref()
const userPostionList: any = ref([])
const policyList: any = ref([])
const hotCompanyList: any = ref([])
const queryList = ref({
  pageIndex: 1,
  pageSize: 12,
  total: 0,
  Filter: {}
})

// 创业展示请求参数
const displayQuery = ref({
  pageIndex: 1,
  pageSize: 6,
  FormType: 'O',
  total: 0
})

// 创业展示数据
const displayList = ref([] as any)

const policyQuery = ref({
  pageIndex: 1,
  pageSize: 10,
  Type: 0,
  total: 0
})

const currentChange = (pageIndex: number) => {
  switch (activeName.value) {
    case 0:
      queryList.value.pageIndex = pageIndex
      initUserPostionList()
      break
    case 2:
      policyQuery.value.pageIndex = pageIndex
      initPolicyList()
      break

    default:
      break
  }
}

const handleChange = (row: any) => {
  router.push({ path: '/commonDetail', query: { FID: row.FID, FormType: 'B', FTITLE: row.FTITLE } })
}

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

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

const toCommonDetail = (row: any) => {
  router.push({ path: '/commonDetail', query: { FID: row.FID, FormType: 'O', FTITLE: '创业展示' } })
}

const toCommonDetailType = (Type: string) => {
  router.push({
    path: '/commonDetail',
    query: { Type, FTITLE: Type === 'A' ? '就业引导' : '职业指导' }
  })
}

const tabChange = (name: number) => {}

const open = () => {
  console.log('open')
}

const onConfirm = () => {
  formRef.value?.validate((valid: boolean, fields: any) => {
    if (valid) {
      console.log(state.loginForm)
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}

const initHotCompany = async () => {
  const res: any = await getHotCompany({ FNUMBER: activeName.value })
  if (res.code === 200) {
    hotCompanyList.value = res.data || []
  }
}

const initPolicyList = async () => {
  const res: any = await getPolicyList(policyQuery.value)
  if (res.code === 200) {
    policyList.value = res.data || []
    policyQuery.value.total = res.total
  }
}

const initUserPostionList = async () => {
  loading.value = true
  const res: any = await getUserPostionList(queryList.value)
  if (res.code === 200) {
    loading.value = false
    userPostionList.value = res.data || []
    queryList.value.total = res.total
  }
}

const initGuideGuidance = async (Type: string) => {
  loading.value = true
  const res: any = await getGuideGuidance({ Type })
  if (res.code === 200) {
    loading.value = false
    guideGuidance.value = res.data?.FRICHTEXT_Tag
  }
}

const initCommonList = async () => {
  loading.value = true
  const res: any = await getCommonList(displayQuery.value)
  if (res.code === 200) {
    loading.value = false
    displayList.value = res.data || []
    displayQuery.value.total = res.total
  }
}

watch(
  () => activeName.value,
  (newVal: number) => {
    switch (newVal) {
      case 0:
        initUserPostionList()
        break
      case 1:
        guideGuidance.value = ''
        initGuideGuidance('A')
        break
      case 2:
        initPolicyList()
        break
      case 3:
        initHotCompany()
        break
      case 4:
        guideGuidance.value = ''
        initGuideGuidance('B')
        break
      case 6:
        initCommonList()
        break
      default:
        break
    }
  },
  { immediate: true }
)

const init = async () => {
  const res: any = await getPoster({ Type: 'H' })
  if (res.code === 200) {
    posterList.value = res.data || []
    loading.value = false
  }
}

init()
</script>

<style lang="scss" scoped>
@import url(./index.scss);
</style>
