<template>
  <div class="container">
    <div class="top">
      <el-carousel height="400px">
        <el-carousel-item v-for="item in urls" :key="item">
          <el-image
            style="width: 100%; height: 100%; border-radius: 10px"
            :src="item"
            fit="cover"
          />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="content">
      <div v-for="item in 3" :key="item" :span="7" class="content-box">
        <div class="header">公告</div>
        <el-card shadow="never">
          <template #default>
            <el-scrollbar max-height="400px">
              <div v-for="item1 in 13" :key="item1" class="link">
                <el-link class="text" title="深圳市创业场租补贴办事指南"
                  >深圳市创业场租补贴办事指南</el-link
                >
                <el-icon><i-ep-search /></el-icon>
              </div>
            </el-scrollbar>
            <div class="card-footer">
              <el-link type="primary" :underline="false" href="">查看更多>>></el-link>
            </div>
          </template>
        </el-card>
      </div>
    </div>
    <div class="bottom">
      <div style="text-align: center; margin-bottom: 20px">
        <el-input
          v-model="listQuery.obj.postName"
          placeholder="搜索职位、公司"
          :suffix-icon="Search"
          size="large"
          style="width: 70%"
          @change="inputChange"
        />
      </div>
      <el-row class="job-item">
        <el-col v-for="item in positionList" :key="item.id" :span="8" @click="toDetails(item)">
          <el-card shadow="never">
            <template #header>
              <div class="card-header">
                <div class="card-header-top">
                  <div class="card-header-top-left">{{ item.postName }}</div>
                  <div class="card-header-top-right">
                    <div>
                      {{
                        item.salaryRange?.substring(0, item.salaryRange.indexOf('元'))
                          ? item.salaryRange?.substring(0, item.salaryRange.indexOf('元'))
                          : item.salaryRange
                      }}
                    </div>
                    <text v-show="item.salaryRange?.substring(0, item.salaryRange.indexOf('元'))"
                      >元/月</text
                    >
                  </div>
                </div>
                <div class="card-header-bottom">
                  {{ item.academicRequirement }} | {{ item.workingLife }} | 招聘{{
                    item.recruitingNumbers
                  }}
                  人
                </div>
              </div>
            </template>
            <div class="card-content">
              <div>{{ item.customerName }}</div>
              <div class="card-content-bottom">
                {{ item.recruitingType }} | {{ item.ageRequirement }} 人 | 餐饮
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Search } from '@element-plus/icons-vue'
import { getPositionList } from '@/services/api/home'
import { useGlobalStore } from '@/stores/index'

const globalStore = useGlobalStore()

const urls = [
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
]

const router = useRouter()

const listQuery = reactive({
  obj: {
    postName: ''
  },
  currentPage: 1,
  pageSize: 6
})
const positionList = ref([] as any)
const inputChange = (val: string) => {
  init()
}

const toDetails = (row: any) => {
  globalStore.setJobDetail(row)
  router.push('/details')
}

const init = async () => {
  const res: any = await getPositionList(listQuery)
  if (res.code === 200) {
    positionList.value = res.data.obj
  }
}
init()
</script>

<style lang="scss" scoped>
// :deep(.el-tabs__item) {
//   border: 1px solid #ccc;
// }
:deep(.el-tabs__nav-wrap::after) {
  height: 0;
}
:deep(.el-tabs__active-bar) {
  height: 0;
}
:deep(.is-active) {
  color: #303133;
}

.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  .top {
    width: 1316px;
    border-radius: 10px;
    margin: 30px;
  }
  .content {
    width: 1316px;
    // height: 410px;
    display: flex;
    margin-bottom: 40px;

    .content-box {
      width: calc((100% - 30px) / 3);
      display: flex;
      flex-direction: column;
      .header {
        width: 100%;
        height: 40px;
        color: #ffffff;
        background-color: #409eff;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .el-card {
        width: 100%;
        flex: 1;
        box-sizing: border-box;

        :deep(.el-card__body) {
          padding: 0;
        }
        :deep(.el-scrollbar) {
          padding: 10px;
          box-sizing: border-box;
        }
        .card-footer {
          height: 30px;
          line-height: 30px;
          text-align: right;
          margin-right: 10px;
          padding-bottom: 10px;

          .el-link {
            font-size: 12px;
          }
        }

        .link {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 12px;
          margin: 5px 0;
          .text {
            width: 50%;
            text-align: left;
            :deep(.el-link__inner) {
              display: inline-block;
              width: 100%; /* 设置宽度 */
              overflow: hidden; /* 隐藏超出部分 */
              text-overflow: ellipsis; /* 显示省略号 */
              white-space: nowrap; /* 阻止文本换行 */
            }
          }
        }
      }
    }

    & .content-box:nth-child(2) {
      margin: 0 15px;
    }
  }
  .bottom {
    width: 1316px;
    margin-bottom: 20px;
    .job-item {
      // :deep(.el-card__header) {
      //   padding: 26px 20px 10px;
      // }
      .card-header {
        display: flex;
        flex-direction: column;
        .card-header-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16px;
          .card-header-top-left {
            font-weight: bolder;
          }
          .card-header-top-right {
            div {
              display: inline-block;
              font-weight: bolder;
              margin-right: 5px;
              color: #f33f33;
            }
            text {
              font-size: 12px;
              color: #909399;
            }
          }
        }
        .card-header-bottom {
          font-size: 14px;
          color: #909399;
        }
      }
      .card-content {
        font-size: 14px;
        .card-content-bottom {
          color: #909399;
          margin-top: 16px;
        }
      }
      .el-col-8 {
        margin-bottom: 15px;
        max-width: calc((100% - 30px) / 3);
        flex: 0 0 calc((100% - 30px) / 3);
      }
      .el-col-8:nth-child(3n + 2) {
        margin: 0 15px;
      }
    }
  }
}
</style>
