<template>
  <div class="student-container">
    <div class="container">
      <img :src="imgUrl" 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"
            :label="item.label"
            :name="item.name"
            class="student-tab-pane"
          >
            <div v-if="!index" class="student-list">
              <div v-for="col in 12" :key="col" class="student-item">
                <div class="flx-justify-between" style="margin-bottom: 20px">
                  <div class="student-title nowrap-ellipsis">
                    销售经理销售经理销售经理销售经理销售经理销售经理
                  </div>
                  <div>
                    <span class="salary">6000-8000</span>
                    <span class="monthly-pay">元/月</span>
                  </div>
                </div>
                <div class="position-label">
                  <span>大专</span>
                  <el-divider direction="vertical" />
                  <span>1-3年</span>
                  <el-divider direction="vertical" />
                  <span>招聘2人</span>
                </div>
                <el-divider style="margin: 14px 0" />
                <div class="company">深圳市世杰创益酒店酒店管理限公司</div>
                <div class="company-label">
                  <span>大专</span>
                  <el-divider direction="vertical" />
                  <span>1-3年</span>
                  <el-divider direction="vertical" />
                  <span>招聘2人</span>
                </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/Frame690(3).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/Frame690(3).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 === 0 || activeName === 6" class="n-more" style="margin-top: 24px"
          >查看更多</span
        >
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { imgUrl } from '@/assets/imgUrl'

const activeName = ref(7)
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 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)
    }
  })
}
</script>

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