<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 === 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 === 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 5" :key="col" class="entrepreneurship-item">
                <img src="@/assets/img/Banner.png" />
                <div class="entrepreneurship-item-rg">
                  Lorem ipsum dolor sit amet, consectetur adipiscingelit. Aenean euismod bibendum
                  laoreet. Proin gravidadolor sit amet lacus accumsan et viverra justocommodo. Proin
                  sodales pulvinar sic tempor. Sociisnatoque penatibus et magnis dis parturient
                  montesnascetur ridiculus mus. Nam
                </div>
              </div>
            </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 } 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(0)
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 userPostionList: any = ref([])
const policyList: any = ref([])
const hotCompanyList: any = ref([])
const queryList = ref({
  pageIndex: 1,
  pageSize: 12,
  total: 0,
  Filter: {}
})
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 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
  }
}

watch(
  () => activeName.value,
  (newVal: number) => {
    switch (newVal) {
      case 0:
        initUserPostionList()
        break
      case 1:
        break
      case 2:
        initPolicyList()
        break
      case 3:
        initHotCompany()
        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>
