<template>
  <!-- 搜索组件 -->
  <van-popup position="right"
    class="wrap">
    <van-nav-bar title="筛选条件" />
    <!-- 快捷日期 -->
    <van-field readonly
      label="快捷日期"
      class="var-button-wrap">
      <template #input>
        <van-button size="small"
          type="primary"
          v-for="item in pickerOptions"
          @click="pickerSelDate(item)">{{ item.text }}</van-button>
      </template>
    </van-field>

    <!-- 日期区间 -->
    <van-field :modelValue="searchDateStr"
      is-link
      readonly
      label="日期范围"
      placeholder="选择日期"
      @click="selSearchCalendar">
    </van-field>
    <PickerCalendar v-model:show="showCalendar"
      :default-date="[query.activityStartDate, query.activityEndDate]"
      @confirm="confirmCalendar" />
    <!-- 活动类型 -->
    <van-field v-model="query.planStatus"
      is-link
      readonly
      label="活动状态"
      placeholder="选择活动状态"
      @click="showPlanStatus = true">
    </van-field>
    <van-popup v-model:show="showPlanStatus"
      destroy-on-close
      teleport="body"
      position="bottom">
      <van-picker :model-value="[planColumns.find(o => o.text === query.planStatus)?.value]"
        :columns="planColumns"
        @cancel="showPlanStatus = false"
        @confirm="confirmPlan" />
    </van-popup>

    <!-- 归属人 -->
    <van-field :modelValue="query.employeeName"
      is-link
      readonly
      label="归属人"
      placeholder="选择归属人"
      :disabled="promotionIdentity"
      @click="showEmployee = true">
    </van-field>
    <PickerBelong v-model:show="showEmployee"
      @confirm="onEmployeeConfirm" />

    <!-- 店铺名 -->
    <van-field v-model="query.storeNameLike"
      label="店铺名"
      placeholder="请输入店铺名"
      @update:model-value="searchByStoreName"
      clearable />

    <!-- 查看有效/已删除计划 -->
    <van-field label="计划状态">
      <template #input>
        <van-radio-group v-model="query.isDeleted"
          @change="selIsDeleted">
          <van-radio :name="undefined">有效</van-radio>
          <van-radio name="INVALID">已删除</van-radio>
        </van-radio-group>
      </template>
    </van-field>

    <!-- 重置按钮 -->
    <van-button icon="replay"
      class="reset-btn"
      block
      @click="resetFn">重置</van-button>
  </van-popup>
</template>

<script setup>
import { parseTime } from '@/utils'
import { useDatePickerOptions } from '@/hooks'
import userStore from '@/store/modules/user'
import PickerBelong from '../components/PickerBelong'

const promotionIdentity = computed(() => userStore().promotionIdentity)

const { recentPickerOptions: pickerOptions } = useDatePickerOptions()

const props = defineProps({
  planColumns: { // 活动状态列表
    type: Array,
    default: []
  },
  allEmpolyeeList: { // 所有归属人
    type: Array,
    default: []
  },
  query: { // 搜索对象
    type: Object,
    default: () => { }
  }
})

const emits = defineEmits(['query'])


// 选择快捷日期
const pickerSelDate = (item) => {
  let [startTime, endTime] = item.value() // 拿到日期对象
  // 同步更新单独选择日期的选择器和参数
  props.query.activityStartDate = startTime
  props.query.activityEndDate = endTime
  emits('query')
}

// 选择日期区间
const showCalendar = ref(false)
const searchDateStr = computed(() => {
  if (!props.query.activityStartDate || !props.query.activityEndDate) {
    return ''
  }
  return [props.query.activityStartDate, props.query.activityEndDate].map(o => parseTime(o, "{y}-{m}-{d}")).join(' 至 ')
})

// 日期日历范围
const selSearchCalendar = () => {
  // 默认设置今日日期
  if (!props.query.activityStartDate || !props.query.activityEndDate) {
    props.query.activityStartDate = new Date()
    props.query.activityEndDate = new Date()
  }
  showCalendar.value = true
}
// 确定日期
const confirmCalendar = (value) => {
  showCalendar.value = false
  props.query.activityStartDate = value[0]
  props.query.activityEndDate = value[1]
  emits('query')
}

// 活动状态
const showPlanStatus = ref(false)
// 选中的活动状态
const confirmPlan = (val) => {
  props.query.planStatus = val.selectedOptions[0].text
  showPlanStatus.value = false
  emits('query')
}

// 归属人
const showEmployee = ref(false)
// 如果是城市经理，设置默认归属人
watch(() => props.allEmpolyeeList, (newVal) => {
  if (newVal.length > 0 && promotionIdentity.value) {
    props.query.employeeName = newVal.find(o => o.employeeNo === userStore().userInfo.userName)?.text
    props.query.employeeId = newVal.find(o => o.employeeNo === userStore().userInfo.userName)?.value
  }
})

// 确定归属人
const onEmployeeConfirm = (val) => {
  props.query.employeeName = val.selectedOptions[0]?.text
  props.query.employeeId = val.selectedOptions[0]?.value
  showEmployee.value = false
  emits('query')
}

// 店铺名
const searchByStoreName = (val) => {
  // props.query.storeNameLike = val
  emits('query')
}

// 计划状态
const selIsDeleted = () => {
  emits('query')
}

// 重置
const resetFn = () => {
  props.query.pageNum = 1
  props.query.activityStartDate = ''
  props.query.activityEndDate = ''
  props.query.planStatus = undefined
  if (!promotionIdentity.value) {
    props.query.employeeName = undefined
    props.query.employeeId = undefined
  }
  props.query.storeNameLike = undefined
  props.query.isDeleted = undefined
  emits('query')
}

// 暴露方法
defineExpose({
  resetFn
})
</script>

<style scoped
  lang="scss">
  .wrap {
    --van-field-label-width: 80px;
    height: 100vh;
    width: 85% !important;

    /* 头部搜索文字 */
    .van-nav-bar {
      background: var(--van-nav-bar-background);

      ::v-deep(.van-nav-bar__title) {
        font-size: 14px;
      }
    }

    /* 按钮搜索 */
    .var-button-wrap {
      ::v-deep(.van-field__control) {
        gap: 5px;
      }
    }

    .van-search {
      width: 60%;
    }

    /* 计划状态 */
    .van-radio:nth-child(n+2) {
      margin-top: 20px;
    }

    .reset-btn {
      margin-top: 20px;
    }
  }






</style>