<template>
  <div>
    <div class="top">检索</div>
    <div class="bottom">
      <div v-for="(val, i) in list" :key="i" :class="['bottom-item', {'border-bottom-dashed': i !== list.length -1}, 'd-flex', 'justify-space-between']" @mouseenter="val.active = true" @mouseleave="val.active = false">
        <div>
          <p :class="['name', {'default-active': val.active }]">{{ val.name }}</p>
          <div style="line-height: 40px;">
            <span v-for="k in desc" :key="k.mdi" class="mr-5">
              <v-icon color="#666" size="15">{{ k.mdi }}</v-icon>
              <span class="ml-1 tag-text">{{ val[k.value] }}</span>
            </span>
          </div>
        </div>
        <div v-if="!val.active" class="text-right">
          <p class="salary">{{ val.payFrom }}-{{ val.payTo }}k/{{ val.payName }}</p>
          <div class="update-time">{{ timesTampChange(val.updateTime) }} 刷新</div>
        </div>
        <div v-else class="account-info">
          <v-avatar image="https://cdn.vuetifyjs.com/images/john.jpg"></v-avatar>
          <span class="account-label">陈北方 · 人事经理</span>
          <span>
            <v-btn class="half-button" color="primary" size="small">立即沟通</v-btn>
          </span>
        </div>
      </div>
      <MPagination
        :total="total"
        :page="pageInfo.current"
        :limit="pageInfo.size"
        @handleChange="handleChangePage"
      ></MPagination>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'recruitment-positions'})
import { ref } from 'vue'
import { timesTampChange } from '@/utils/date'
import MPagination from '@/components/CtVuetify/CtPagination'

const total = ref(12)
const pageInfo = ref({
  size: 3,
  current: 1
})

const handleChangePage = (index) => {
  console.log(index, 'handle-page')
}

const list = ref([
  {
    name: '产品经理',
    payFrom: 6,
    payTo: 11,
    payName: '月',
    updateTime: 1716175909224,
    areaName: '广州',
    eduName: '本科',
    expName: '1-3年',
    active: false
  },
  {
    name: '产品经理',
    payFrom: 6,
    payTo: 11,
    payName: '月',
    updateTime: 1716175909224,
    areaName: '广州',
    eduName: '本科',
    expName: '1-3年',
    active: false
  },
  {
    name: '产品经理',
    payFrom: 6,
    payTo: 11,
    payName: '月',
    updateTime: 1716175909224,
    areaName: '广州',
    eduName: '本科',
    expName: '1-3年',
    active: false
  }
])
const desc = [
  { mdi: 'mdi-map-marker-outline', value: 'areaName' },
  { mdi: 'mdi-school-outline', value: 'eduName' },
  { mdi: 'mdi-clock-time-ten-outline', value: 'expName' }
]
</script>

<style scoped lang="scss">
.bottom-item {
  width: 100%;
  height: 82px;
  padding: 12px 0;
}
.name {
  position: relative;
  max-width: 200px;
  margin-right: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.salary {
  font-size: 16px;
  font-weight: 700;
  color: #fe574a;
  line-height: 22px;
  flex: none;
}
.tag-text {
  color: #222;
  font-size: 14px;
}
.update-time {
  color: #666;
  font-size: 14px;
  line-height: 40px;
}
.account-info {
  line-height: 52px;
  .account-label {
    color: #666;
    font-size: 14px;
    font-weight: 600;
    margin: 0 10px;
  }
}
</style>
