<template>
  <div class="enterprise-container">
    <div class="container">
      <div class="enterprise-header">
        <div class="enterprise-header-lf">
          <el-input v-model="searchValue" placeholder="搜索关键词" @change="search">
            <template #suffix>
              <el-icon size="24" style="cursor: pointer" @click="search"><i-ep-Search /></el-icon>
            </template>
          </el-input>
          <div style="position: relative">
            <img src="@/assets/img/Banner.png" width="869" height="376" />
            <span class="img-ct">深圳南山区就业服务平台</span>
          </div>
        </div>
        <div class="enterprise-header-rg">
          <div class="company-tp">
            <img
              src="@/assets/img/icon-can.png"
              width="90"
              height="90"
              style="border-radius: 12px"
            />
            <div class="flx-direction-column">
              <span class="company-title">货拉拉科技</span>
              <div>
                <span class="info-label">互联网</span>
                <span class="info-label">D轮及以上</span>
                <span class="info-label">10000人以上</span>
              </div>
              <div class="company-addr">
                <el-icon style="margin-right: 3px"><i-ep-Location /></el-icon>
                深圳市南山区南山街道办1109号7-6楼
              </div>
            </div>
          </div>
          <div class="company-detail">
            货拉拉于2013年创立，成长于粤港澳大湾区。是一家从事同城/跨城货运、企业版物流服务、搬家、零担、汽车租售及车后市场服务的互联网物流商城。[7-8]
            货拉拉通过共享模式整合社会运力资源，完成海量运力储备，依托移动互联、大数据和人工智能技术，搭建“方便、科技、可靠”的货运平台，实现多种车型的即时智能调度，为个人、商户及企业提供高效的物流解决方案。[9]
            截至2021年10月，货拉拉业务范围已覆盖352座中国内地城市，月活司机达66万，月活用户达840万
          </div>
          <el-divider style="margin: 12px 0" />
          <div class="recruit-status">
            <div class="flx-justify-between" style="margin-bottom: 12px; flex-wrap: wrap">
              <div
                v-for="(item, index) in recruitStatus"
                :key="index"
                class="flx-align-center status-item"
                style="width: 50%; margin-bottom: 12px"
              >
                <div class="label">{{ item.statu }}</div>
                <span>{{ item.value }}</span>
              </div>
            </div>
          </div>
          <div class="flx-justify-between">
            <span class="btn">编辑公司信息</span>
            <span class="btn">发布职位</span>
          </div>
        </div>
      </div>
      <el-tabs v-model="activeName" stretch style="margin-bottom: 30px">
        <el-tab-pane
          v-for="(item, index) in recruitStatus"
          :key="index"
          :label="item.statu"
          :name="item.statu"
        >
          <div style="display: flex">
            <div v-show="item.statu === '人才库'">
              <div class="talent-list">
                <div
                  v-for="(col, colIndex) in talentList"
                  :key="colIndex"
                  class="talent-item"
                  :style="{ backgroundColor: talentActive === col.name ? '#dcecff' : '' }"
                  @click="talentChange(col)"
                >
                  {{ col.name }}
                </div>
              </div>
            </div>

            <div style="flex: 1">
              <div v-for="(col, colIndex) in 4" :key="colIndex" class="tab-item">
                <div class="tab-item-tp">
                  <div class="tab-item-tp-lf">
                    <el-avatar :src="can" size="large" />
                    <div class="user-info">
                      <div>龙昌萍</div>
                      <div class="flx-align-center">
                        <span>未知</span>
                        <el-divider direction="vertical" style="margin-bottom: 0" />
                        <span>20岁</span>
                      </div>
                      <div class="flx-align-center">
                        <el-icon><i-ep-OfficeBuilding /></el-icon>
                        <span style="margin-left: 3px">在职求职中</span>
                      </div>
                      <div class="flx-align-center">
                        <el-icon><i-ep-OfficeBuilding /></el-icon>
                        <span style="margin-left: 3px">2021-09至2024-07</span>
                      </div>
                    </div>
                  </div>
                  <div class="tab-item-tp-rg">
                    <div class="flx-align-center">
                      <span class="info-label">简历待定</span>
                      <span class="info-label">安排面试</span>
                      <el-dropdown>
                        <span class="info-label">更多</span>
                        <template #dropdown>
                          <el-dropdown-menu>
                            <el-dropdown-item>已面试</el-dropdown-item>
                            <el-dropdown-item>已录用</el-dropdown-item>
                            <el-dropdown-item>已入职</el-dropdown-item>
                            <el-dropdown-item>人才库</el-dropdown-item>
                            <el-dropdown-item>黑名单</el-dropdown-item>
                          </el-dropdown-menu>
                        </template>
                      </el-dropdown>
                    </div>
                    <div class="recommend flx-align-center">
                      推荐指数
                      <el-rate v-model="rateValue" style="margin-left: 8px" />
                    </div>
                  </div>
                </div>
                <div class="tab-item-bt flx-justify-between">
                  <div>
                    <span class="user-label">大专</span>
                    <el-divider direction="vertical" />
                    <span class="user-label">长江工程职业技术学校</span>
                    <el-divider direction="vertical" />
                    <span class="user-label">计算机软件技术</span>
                  </div>
                  <div>
                    <span class="user-label">抖音运营</span>
                    <el-divider direction="vertical" />
                    <span class="user-label">2023/07/10投递</span>
                    <el-divider direction="vertical" />
                    <span class="user-label">3323234</span>
                  </div>
                </div>
              </div>
              <el-pagination background layout="->, prev, pager, next" :total="1000" />
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
import { recruitStatus, talentList } from './config/index'
import can from '@/assets/img/icon-can.png'

const searchValue = ref()
const rateValue = ref(4)
const talentActive = ref('人才储备')
const activeName = ref('简历未查看')

const search = () => {
  console.log(searchValue.value)
}
const talentChange = (row: any) => {
  talentActive.value = row.name
}
</script>

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