<template>
  <v-card class="card-box pa-5">
    <div class="d-flex color-666 font-size-14">
      <div class="d-flex align-center">
        <span>选择时间</span>
        <div class="ml-5 after">
          <span v-for="(k, i) in list" :key="i" :class="['item', { 'active': current === i }]" @click="handleClickType(i)">{{ k.label }}</span>
        </div>
      </div>
      <div class="d-flex align-center ml-15">
        <span>自定义日期</span>
        <div class="ml-5">
          <date-picker v-model="date" :options="{ range: true, clearable: true, placeholder: '请选择要查看的时间范围', change: handleChangeDate, format: 'timestamp' }"></date-picker>
        </div>
      </div>
    </div>
    <div class="mt-10">
      <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#f7f8fa">
        <v-tab :value="1">招聘进展</v-tab>
      </v-tabs>
      <Overview class="mt-5" :query="query"></Overview>
    </div>
    <div class="my-10">
      <v-tabs class="mb-5" v-model="tab" align-tabs="start" color="primary" bg-color="#f7f8fa">
        <v-tab :value="1">应聘简历分析</v-tab>
      </v-tabs>
      <ResumeAnalysis :query="query"></ResumeAnalysis>
    </div>
    <div>
      <v-tabs v-model="tab" align-tabs="start" color="primary" bg-color="#f7f8fa">
        <v-tab :value="1">每日统计</v-tab>
      </v-tabs>
      <DailyPage class="mt-5"></DailyPage>
    </div>
  </v-card>
</template>

<script setup>
defineOptions({ name: 'overallAnalysis'})
import { reactive, ref } from 'vue'
import Overview from './components/overview.vue'
import DailyPage from './components/daily.vue'
import ResumeAnalysis from './components/resume.vue'
import { convertTimestampsToDayRange } from '@/utils/date'

const tab = ref(1)
const date = ref(null)
const current = ref(0)
const query = reactive({
  type: 0,
  time: null
})
const list = [
  { label: '最近7天', value: 0 },
  { label: '上个月', value: 1 },
  { label: '上季度', value: 2 }
]

// 类型选择
const handleClickType = (i) => {
  current.value = i
  query.time = null
  date.value = null
  query.type = list[i].value
}

// 时间范围选择
const handleChangeDate = (time) => {
  if (!time) {
    query.type = 0
    query.time = null
    return
  }
  current.value = null
  query.type = 99
  query.time = convertTimestampsToDayRange(time)
}

</script>

<style scoped lang="scss">
.after {
  height: 36px;
  background-color: #f2f3f5;
  border-radius: 4px;
  padding: 1.5px;
}
.item {
  line-height: 31px;
  padding: 0 12px;
  margin: 1.5px;
  cursor: pointer;
}
.active {
  position: relative;
  color: var(--v-primary-base);
  background-color: #fff;
  display: inline-block;
  margin: 1.5px;
  height: 30px;
  border-radius: 4px;
  transition: all .1s linear;
}
</style>
