<template>
  <div class="px-5 py-3" style="position: relative;">
    <h3 style="color: var(--v-primary-base);">条件筛选</h3>
    <v-divider class="my-3"></v-divider>
    <div class="text-right reset-text cursor-pointer" @click="handleReset">重置筛选</div>
    <CtForm ref="CtFormRef" :items="formItems" style="width: 100%;">
      <template #areaIds="{ item }">
        <v-menu :close-delay="1" :open-delay="0" v-bind="$attrs">
          <template v-slot:activator="{  props }">
            <TextInput
              v-model="item.value"
              :item="item"
              v-bind="props"
              style="position: relative;"
            ></TextInput>
          </template>
          <AreaSelect :select="[query.areaIds].filter(Boolean)" @handleAreaClick="handleArea" class="jobTypeCardBox" isSingle></AreaSelect>
        </v-menu>
      </template>
      <template #residence="{ item }">
        <v-menu :close-delay="1" :open-delay="0" v-bind="$attrs">
          <template v-slot:activator="{  props }">
            <TextInput
              v-model="item.value"
              :item="item"
              v-bind="props"
              style="position: relative;"
            ></TextInput>
          </template>
          <AreaSelect :select="[query.residence].filter(Boolean)" @handleAreaClick="handleResidence" class="jobTypeCardBox" isSingle></AreaSelect>
        </v-menu>
      </template>
    </CtForm>
    <div class="bottom">
      <v-divider></v-divider>
      <div class="text-end mt-3">
        <v-btn class="half-button mr-3" variant="tonal">取消</v-btn>
        <v-btn class="half-button" color="primary">确定</v-btn>
      </div>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'talent-filter'})
import { ref } from 'vue'

const CtFormRef = ref()
const query = ref({})
const formItems = ref({
  options: [
    {
      type: 'ifRadio',
      key: 'sex',
      value: '0',
      default: 0,
      label: '性别',
      width: 90,
      dictTypeName: 'system_user_sex',
      items: [
        { label: '不限', value: '0' },
        { label: '男', value: '1' },
        { label: '女', value: '1' }
      ]
    },
    {
      type: 'ifRadio',
      key: 'sex',
      value: '0',
      default: 0,
      label: '人才分类',
      width: 90,
      items: [
        { label: '不限', value: '0' },
        { label: '默认分类', value: '1' }
      ]
    },
    {
      type: 'ifRadio',
      key: 'type',
      value: '0',
      default: 0,
      label: '简历状态',
      width: 120,
      items: [
        { label: '不限', value: '0' },
        { label: '已查看', value: '1' },
        { label: '未查看', value: '2' },
        { label: '已导出', value: '3' },
        { label: '已邀请', value: '4' },
        { label: '已回复', value: '5' },
        { label: '有评语', value: '6' }
      ],
    },
    {
      type: 'autocomplete',
      key: 'expType',
      value: null,
      default: null,
      label: '学历',
      col: 6,
      outlined: true,
      itemText: 'label',
      flexStyle: 'mr-3',
      itemValue: 'value',
      dictTypeName: 'menduner_education_type',
      items: []
    },
    {
      type: 'autocomplete',
      key: 'expType',
      value: null,
      default: null,
      label: '工作经验',
      col: 6,
      outlined: true,
      itemText: 'label',
      itemValue: 'value',
      dictTypeName: 'menduner_exp_type',
      items: []
    },
    {
      slotName: 'residence',
      key: 'residence',
      value: null,
      col: 6,
      flexStyle: 'mr-3',
      label: '户籍地'
    },
    {
      slotName: 'areaIds',
      key: 'areaIds',
      value: null,
      col: 6,
      label: '期望城市'
    },
    {
      type: 'vueDatePicker',
      key: 'firstWorkTime',
      value: null,
      default: null,
      class: 'mb-3',
      options: {
        type: '',
        range: true,
        format: 'timestamp',
        placeholder: '加入日期',
      }
    },
  ]
})

const handleReset = () => {}

// 期望城市
const handleArea = (list, name) => {
  if (!list.length) return
  query.value.workAreaId = list[0]
  formItems.value.options.find(e => e.key === 'areaIds').value = name
}

// 户籍地
const handleResidence = (list, name) => {
  if (!list.length) return
  query.value.residence = list[0]
  formItems.value.options.find(e => e.key === 'residence').value = name
}
</script>

<style scoped lang="scss">
.reset-text {
  font-size: 14px;
  color: var(--color-666);
  &:hover {
    color: var(--v-primary-base);
  }
}
.jobTypeCardBox {
  position: absolute;
  top: -22px;
  left: 0;
}
.bottom {
  position: fixed;
  width: 96%;
  margin: 0 12px;
  bottom: 14px;
  left: 0;
}
</style>
