<template>
  <!-- 优惠码 - 搜索弹窗 -->
  <div class="codeSearch flex-col">
    <van-popup v-model:show="sheetShow" round class="codeSearchPopup">
      <div class="content">
        <van-form @submit="onSubmit">
          <van-field
            v-model="code"
            name="code"
            label="优惠码编号"
            :placeholder="'请输入优惠码编号'"
          />
          <div class="van-cell van-field">
            <div class="van-cell__title van-field__label">
              <label id="van-field-4-label" for="van-field-4-input">创建时间</label>
            </div>
            <div class="van-cell__value van-field__value">
              <div class="van-field__body">
                <input type="text" class="van-field__control" placeholder="开始时间" style="text-align: center; width: 50%;" v-model="createStratDate" @click="createStratDateClick()"/>
                <span>至</span>
                <input type="text" class="van-field__control" placeholder="结束时间" style="text-align: center; width: 50%;" v-model="createEndDate" @click="createEndDateClick()"/>
              </div>
            </div>
          </div>
          <div class="van-cell van-field">
            <div class="van-cell__title van-field__label">
              <label id="van-field-4-label" for="van-field-4-input">使用时间</label>
            </div>
            <div class="van-cell__value van-field__value">
              <div class="van-field__body">
                <input type="text" class="van-field__control" placeholder="开始时间" style="text-align: center; width: 50%;" v-model="useStratDate" @click="useStratDateClick()"/>
                <span>至</span>
                <input type="text" class="van-field__control" placeholder="结束时间" style="text-align: center; width: 50%;" v-model="useEndDate" @click="useEndDateClick()"/>
              </div>
            </div>
          </div>
          <!-- 操作 -->
          <van-row justify="space-around" style="padding: 1em;">
            <van-button span="5" round type="primary" style="height: 2em; padding: 0 2em;" native-type="submit">点击查询</van-button>
          </van-row>
        </van-form>
      </div>
    </van-popup>
    <van-popup v-model:show="createStratDateShow" round position="bottom">
      <van-datetime-picker
        v-model="createStratDate"
        type="datetime"
        title="选择完整时间"
        @confirm="createStratDateConFirm($event)"
        @cancel="createStratDateCancel()"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </van-popup>
    <van-popup v-model:show="createEndDateShow" round position="bottom">
      <van-datetime-picker
        v-model="createEndDate"
        type="datetime"
        title="选择完整时间"
        @confirm="createEndDateConFirm($event)"
        @cancel="createEndDateCancel()"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </van-popup>
    <van-popup v-model:show="useStratDateShow" round position="bottom">
      <van-datetime-picker
        v-model="useStratDate"
        type="datetime"
        title="选择完整时间"
        @confirm="useStratDateConFirm($event)"
        @cancel="useStratDateCancel()"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </van-popup>
    <van-popup v-model:show="useEndDateShow" round position="bottom">
      <van-datetime-picker
        v-model="useEndDate"
        type="datetime"
        title="选择完整时间"
        @confirm="useEndDateConFirm($event)"
        @cancel="useEndDateCancel()"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </van-popup>
  </div>
</template>

<script>
import { ref } from 'vue';
import dateUtil from "@/utils/dateUtil";

export default {
  name: 'codeSearch',
  components: {},
  setup(prop, context) {
    const sheetShow = ref(false);
    const minDate = new Date(1920, 0, 1);
    const maxDate = new Date(2025, 10, 1);
    const showSearch = () => { sheetShow.value = true; };
    const code = ref('');
    // 创建开始时间
    const createStratDate = ref(''); 
    const createStratDateShow = ref(false);
    const createStratDateClick = () => { if (createStratDate.value === '') { createStratDate.value = new Date(); } createStratDateShow.value = true;}
    const createStratDateConFirm = (data) => { createStratDate.value = dateUtil.formateDate( data, "yyyy-MM-dd hh:mm:ss" ); createStratDateShow.value = false; }
    const createStratDateCancel = () => { createStratDate.value = dateUtil.formateDate( new Date(createStratDate.value), "yyyy-MM-dd hh:mm:ss" ); createStratDateShow.value = false; }
    // 创建结束时间
    const createEndDate = ref(''); 
    const createEndDateShow = ref(false);
    const createEndDateClick = () => { if (createEndDate.value === '') { createEndDate.value = new Date(); } createEndDateShow.value = true;}
    const createEndDateConFirm = (data) => { createEndDate.value = dateUtil.formateDate( data, "yyyy-MM-dd hh:mm:ss" ); createEndDateShow.value = false; }
    const createEndDateCancel = () => { createEndDate.value = dateUtil.formateDate( new Date(createEndDate.value), "yyyy-MM-dd hh:mm:ss" ); createEndDateShow.value = false; }
    // 使用起始时间
    const useStratDate = ref(''); 
    const useStratDateShow = ref(false);
    const useStratDateClick = () => { if (useStratDate.value === '') { useStratDate.value = new Date(); } useStratDateShow.value = true;}
    const useStratDateConFirm = (data) => { useStratDate.value = dateUtil.formateDate( data, "yyyy-MM-dd hh:mm:ss" ); useStratDateShow.value = false; }
    const useStratDateCancel = () => { useStratDate.value = dateUtil.formateDate( new Date(useStratDate.value), "yyyy-MM-dd hh:mm:ss" ); useStratDateShow.value = false; }
    // 使用结束时间
    const useEndDate = ref(''); 
    const useEndDateShow = ref(false);
    const useEndDateClick = () => { if (useEndDate.value === '') { useEndDate.value = new Date(); } useEndDateShow.value = true;}
    const useEndDateConFirm = (data) => { useEndDate.value = dateUtil.formateDate( data, "yyyy-MM-dd hh:mm:ss" ); useEndDateShow.value = false; }
    const useEndDateCancel = () => { useEndDate.value = dateUtil.formateDate( new Date(useEndDate.value), "yyyy-MM-dd hh:mm:ss" ); useEndDateShow.value = false; }

    // 提交搜索表单触发搜索
    const onSubmit = () => {
      const searchParam = {};
      if (code.value !== '') { searchParam.code = code.value; }
      if (createStratDate.value !== '') { searchParam.createStratDate = dateUtil.formateDate( new Date(createStratDate.value), "dd/MM/yyyy hh:mm:ss" ); }
      if (createEndDate.value !== '') { searchParam.createEndDate = dateUtil.formateDate( new Date(createEndDate.value), "dd/MM/yyyy hh:mm:ss" ); }
      if (useStratDate.value !== '') { searchParam.useStratDate = dateUtil.formateDate( new Date(useStratDate.value), "dd/MM/yyyy hh:mm:ss" ); }
      if (useEndDate.value !== '') { searchParam.useEndDate = dateUtil.formateDate( new Date(useEndDate.value), "dd/MM/yyyy hh:mm:ss" ); }
      context.emit('search', searchParam);
      sheetShow.value = false;
    }
    return {
      sheetShow,
      minDate,
      maxDate,
      showSearch,
      code,
      createStratDate,
      createStratDateShow,
      createStratDateClick,
      createStratDateConFirm,
      createStratDateCancel,
      createEndDate,
      createEndDateShow,
      createEndDateClick,
      createEndDateConFirm,
      createEndDateCancel,
      useStratDate,
      useStratDateShow,
      useStratDateClick,
      useStratDateConFirm,
      useStratDateCancel,
      useEndDate,
      useEndDateShow,
      useEndDateClick,
      useEndDateConFirm,
      useEndDateCancel,
      onSubmit
    };
  },
};
</script>

<style lang="less" scoped>
.codeSearch {
  width: 100%;
  /deep/ .codeSearchPopup { width: 90%; }
  .content { padding-top: 1em; }
  .field .van-field__label { width: auto; }
}
</style>
