<template>
  <!-- 搜索组件 -->
  <van-popup position="right"
    class="wrap">
    <!-- 快捷日期 -->
    <van-field readonly
      label="快捷日期">
      <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>
    <van-calendar v-model:show="showCalendar"
      :min-date="searchMinDate"
      :show-mark="false"
      type="range"
      allow-same-day
      teleport="body"
      :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 :model-value="showEmployeeList.find(o => o.value === query.employeeId)?.text"
      is-link
      readonly
      label="归属人"
      placeholder="选择归属人"
      :disabled="promotionIdentity"
      @click="showEmployee = true">
    </van-field>
    <PickerSearch v-model:show="showEmployee"
      :columns="showEmployeeList"
      placeholder="搜索归属人"
      @confirm="onEmployeeConfirm"
      @search="searchEmployee" />

    <!-- 店铺名 -->
    <van-field v-model="query.storeNameLike"
      label="店铺名"
      placeholder="请输入店铺名"
      @update:model-value="searchByStoreName"
      clearable />
    <!-- 重置按钮 -->
    <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'

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

const { recentPickerOptions: pickerOptions } = useDatePickerOptions()

const query = reactive({})
const props = defineProps({
  planColumns: { // 活动状态列表
    type: Array,
    default: []
  },
  allEmpolyeeList: { // 所有归属人
    type: Array,
    default: []
  }
})
const emits = defineEmits(['query'])

watch(query, () => {
  emits('query', query)
}, { deep: true })

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

// 选择日期区间
const showCalendar = ref(false)
const searchDateStr = computed(() => {
  if (!query.activityStartDate || !query.activityEndDate) {
    return ''
  }
  return [query.activityStartDate, query.activityEndDate].map(o => parseTime(o, "{y}-{m}-{d}")).join(' 至 ')
})
// 日历最小范围
const searchMinDate = computed(() => {
  return new Date(!query.activityStartDate ? new Date().getFullYear() - 1 : query.activityStartDate.getFullYear() - 1, 0, 1)
})
// 日期日历范围
const selSearchCalendar = () => {
  // 默认设置今日日期
  if (!query.activityStartDate || !query.activityEndDate) {
    query.activityStartDate = new Date()
    query.activityEndDate = new Date()
  }
  showCalendar.value = true
}
// 确定日期
const confirmCalendar = (value) => {
  showCalendar.value = false
  query.activityStartDate = value[0]
  query.activityEndDate = value[1]
}

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

// 归属人
const showEmployee = ref(false)
// 展示归属人
const showEmployeeList = ref([])
watch(() => props.allEmpolyeeList, (newValue) => {
  showEmployeeList.value = newValue
  // 如果是城市经理默认填充
  if (promotionIdentity.value) {
    // 找到员工的 id
    const obj = newValue.find(o => o.employeeNo === employeeNo.value)
    query.employeeId = obj.value
  }
})
const searchEmployee = (searchName) => {
  showEmployeeList.value = props.allEmpolyeeList.filter(item => {
    return item.text.includes(searchName)
  })
}
// 确定归属人
const onEmployeeConfirm = (val) => {
  query.employeeId = val.selectedOptions[0].value
  showEmployee.value = false
}

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

// 重置
const resetFn = () => {
  query.activityStartDate = ''
  query.activityEndDate = ''
  query.planStatus = ''
  query.employeeId = ''
  query.storeNameLike = ''
}
</script>

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

    .van-field:first-of-type {
      .van-button {
        margin: 0 2.5px;
        padding: 0 5px;
        font-size: 12px !important;
      }
    }

    .van-search {
      width: 60%;
    }

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






</style>