<template>
  <div class="mobile-container">
    <van-nav-bar title="活动计划"
      right-text="搜索"
      @click-right="showSearch = true" />
    <!-- 计划列表 -->
    <van-list v-model:loading="loading"
      :finished="finished"
      :immediate-check="false"
      finished-text="没有更多了"
      @load="onLoad">
      <van-cell-group inset>
        <van-cell v-for="item in planList"
          :key="item.id"
          :title="item.employeeName"
          :value="item.pattern"
          :label="item.storeName"
          @click="detailFn" />
      </van-cell-group>
    </van-list>

    <van-popup v-model:show="showSearch"
      position="right"
      :style="{ height: '100vh' }">
      <!-- 快捷时间 -->
      <van-field readonly
        label="快捷时间"
        placeholder="选择时间">
        <template #input>
          <van-button size="small"
            type="primary"
            v-for="item in pickerOptions"
            @click.stop.self.prevent="pickerBtn(item)">{{ item.text }}</van-button>
        </template>
      </van-field>
      <!-- 开始时间 -->
      <van-field v-model="query.activityStartDate"
        is-link
        readonly
        name="datePicker"
        label="开始时间"
        placeholder="点击选择时间"
        @click="startShowPicker = true" />
      <van-popup v-model:show="startShowPicker"
        destroy-on-close
        position="bottom"
        teleport="body">
        <van-date-picker v-model="activityStartDatePicker"
          @confirm="onStartConfirm"
          @cancel="startShowPicker = false" />
      </van-popup>
      <!-- 结束时间 -->
      <van-field v-model="query.activityEndDate"
        is-link
        readonly
        name="datePicker"
        label="结束时间"
        placeholder="点击选择时间"
        @click="endShowPicker = true" />
      <van-popup v-model:show="endShowPicker"
        destroy-on-close
        position="bottom"
        teleport="body">
        <van-date-picker v-model="activityEndDatePicker"
          @confirm="onEndConfirm"
          @cancel="endShowPicker = false" />
      </van-popup>
      <!-- 活动类型 -->
      <van-field v-model="query.planStatus"
        is-link
        readonly
        label="活动状态"
        placeholder="选择活动状态"
        @click="planStatusShowPicker = true">
      </van-field>
      <van-popup v-model:show="planStatusShowPicker"
        destroy-on-close
        teleport="body"
        position="bottom">
        <van-picker :model-value="planStatusStr"
          :columns="planColumns"
          @cancel="planStatusShowPicker = false"
          @confirm="onPlanConfirm" />
      </van-popup>
      <!-- 归属人 -->
      <van-field v-model="query.employeeId"
        is-link
        readonly
        label="归属人"
        placeholder="选择归属人"
        @click="employeeIdShowPicker = true">
      </van-field>
      <van-popup v-model:show="employeeIdShowPicker"
        destroy-on-close
        teleport="body"
        position="bottom">
        <van-picker :model-value="planStatusStr"
          :columns="employeeIdColumns"
          @cancel="employeeIdShowPicker = false"
          @confirm="onEmployeeConfirm" />
      </van-popup>
      <!-- 终端名 -->
      <van-field v-model="query.storeNameLike"
        label="终端名"
        placeholder="请输入终端名" />
    </van-popup>


    <!-- 测试 url 参数用 -->
    <div>
      <p>{{ url }}</p>
      <button @click="copy">复制 URL</button>
    </div>
  </div>
</template>

<script setup>
import { parseTime } from '@/utils'
import { useDatePickerOptions } from '@/hooks'
import { getChargeListAPI, getPlanListAPI } from '@/api'
const { recentPickerOptions: pickerOptions, thisYearDate } = useDatePickerOptions(0)


const url = ref('')
url.value = window.location.href
// 点击复制按钮复制字符串到剪切板
const copy = () => {
  const input = document.createElement('input');
  input.value = url.value;
  document.body.appendChild(input);
  input.select();
  document.execCommand('Copy');
  document.body.removeChild(input);
  alert('复制成功');
}

// 搜索弹窗
const showSearch = ref(false)
// 搜索表单对象
const query = reactive({
  activityStartDate: '',
  activityEndDate: '',
  planStatus: '',
  employeeId: '', // 归属人
  storeNameLike: '', // 终端名
})
// 快捷时间
const pickerBtn = (item) => {
  let [startTime, endTime] = item.value()
  // 判断不是空并且不是日期对象则转换成日期对象
  if (startTime && !(startTime instanceof Date)) {
    startTime = new Date(startTime)
  }
  if (endTime && !(endTime instanceof Date)) {
    endTime = new Date(endTime)
  }
  query.activityStartDate = parseTime(startTime, '{y}-{m}-{d}')
  query.activityEndDate = parseTime(endTime, '{y}-{m}-{d}')
  // 更新两个数组格式时间
  activityStartDatePicker[0] = startTime.getFullYear()
  activityStartDatePicker[1] = startTime.getMonth() + 1
  activityStartDatePicker[2] = startTime.getDate()
  activityEndDatePicker[0] = endTime.getFullYear()
  activityEndDatePicker[1] = endTime.getMonth() + 1
  activityEndDatePicker[2] = endTime.getDate()
}
// 开始时间
const startShowPicker = ref(false)
const activityStartDatePicker = [new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()]
const onStartConfirm = (val) => {
  query.activityStartDate = val.selectedValues.join('-')
  startShowPicker.value = false
}
// 结束时间
const endShowPicker = ref(false)
const activityEndDatePicker = [new Date().getFullYear(), new Date().getMonth() + 1, new Date().getDate()]
const onEndConfirm = (val) => {
  query.activityEndDate = val.selectedValues.join('-')
  endShowPicker.value = false
}
// 活动类型( 执行 EXECUTION ，未执行 NOT_EXECUTION)
const planStatusShowPicker = ref(false)
const planStatusStr = ref([])
const planColumns = [
  {
    text: '未执行',
    value: 'NOT_EXECUTION'
  },
  {
    text: '执行中',
    value: 'EXECUTION'
  }
]
const onPlanConfirm = (val) => {
  query.planStatus = val.selectedOptions[0].text
  planStatusStr.value = val.selectedValues
  planStatusShowPicker.value = false
}
// 归属人
const employeeIdShowPicker = ref(false)
const employeeIdStr = ref([])
const employeeIdColumns = ref([

])
const getEmployeeList = async () => {
  const res = await getChargeListAPI()
  employeeIdColumns.value = res.data.map(item => {
    return {
      text: item.name,
      value: item.id,
      employeeNo: item.employeeNo,
      deptQcName: item.deptQcName,
      deptQcId: item.deptQcId
    }
  })
}
getEmployeeList()

const onEmployeeConfirm = (val) => {
  query.employeeId = val.selectedOptions[0].text
  employeeIdStr.value = val.selectedValues
  employeeIdShowPicker.value = false
}

// 计划列表
const planQueryParams = reactive({
  pageNum: 1,
  pageSize: 10
})
const planList = ref([])
const loading = ref(false)
const finished = ref(false)
const getPlanList = async () => {
  loading.value = true
  const res = await getPlanListAPI(planQueryParams)
  planList.value = [...planList.value, ...res.data.records]
  finished.value = res.data.records.length === 0
  loading.value = false
}
getPlanList()
const onLoad = () => {
  planQueryParams.pageNum++
  getPlanList()
}
const detailFn = () => {

}
</script>

<style scoped
  lang="scss">
  .mobile-container{
    background: #f5f5f5;
    .van-cell-group{
      background: #f5f5f5;
    }
    .van-cell{
      margin-top: 10px;
      ::v-deep(.van-cell__label){
        /* 强制一行显示 */
        white-space: nowrap;
      }
    }
  }
  ::v-deep(.van-field):first-of-type {
    .van-button {
      margin: 0 5px;
      padding: 0 5px;
    }

    .van-cell__right-icon:first-of-type {
      display: none;
    }
  }
</style>