<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="$t('discountCode.discountCodeNoLabel')"
            :placeholder="$t('discountCode.discountCodeNoPlaceholder')" />
          <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">{{ $t('discountCode.creationTime') }}</label>
            </div>
            <div class="van-cell__value van-field__value">
              <div class="van-field__body">
                <input type="text" class="van-field__control" :placeholder="$t('discountCode.startTime')"
                  style="text-align: center; width: 50%;" v-model="createStratDate" @click="createStratDateClick()" />
                <span>{{ $t('discountCode.to') }}</span>
                <input type="text" class="van-field__control" :placeholder="$t('discountCode.endTime')"
                  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">{{ $t('discountCode.usageTime') }}</label>
            </div>
            <div class="van-cell__value van-field__value">
              <div class="van-field__body">
                <input type="text" class="van-field__control" :placeholder="$t('discountCode.startTime')"
                  style="text-align: center; width: 50%;" v-model="useStratDate" @click="useStratDateClick()" />
                <span>{{ $t('discountCode.to') }}</span>
                <input type="text" class="van-field__control" :placeholder="$t('discountCode.endTime')"
                  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">{{
              $t('discountCode.clickQuery') }}
            </van-button>
          </van-row>
        </van-form>
      </div>
    </van-popup>
    <van-popup v-model:show="createStratDateShow" round position="bottom">
      <van-date-picker :title="$t('discountCode.selectFullTime')" @confirm="createStratDateConFirm($event)"
        @cancel="createStratDateShow = false" :min-date="minDate" />
    </van-popup>
    <van-popup v-model:show="createEndDateShow" round position="bottom">
      <van-date-picker :title="$t('discountCode.selectFullTime')" @confirm="createEndDateConFirm($event)"
        @cancel="createEndDateShow = false" :min-date="minDate" />
    </van-popup>
    <van-popup v-model:show="useStratDateShow" round position="bottom">
      <van-date-picker :title="$t('discountCode.selectFullTime')" @confirm="useStratDateConFirm($event)"
        @cancel="useStratDateShow = false" :min-date="minDate" />
    </van-popup>
    <van-popup v-model:show="useEndDateShow" round position="bottom">
      <van-date-picker :title="$t('discountCode.selectFullTime')" @confirm="useEndDateConFirm($event)"
        @cancel="useEndDateShow = false" :min-date="minDate" />
    </van-popup>
  </div>
</template>

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

export default {
  name: 'codeSearch',
  components: {},
  setup(prop, context) {
    const sheetShow = ref(false);
    const minDate = new Date(2018, 1, 1);
    const showSearch = () => { sheetShow.value = true; };
    const code = ref('');
    //加载样式
    styleUrl('discountCode');
    // 创建开始时间
    const createStratDate = ref('');
    const createStratDateShow = ref(false);
    const createStratDateClick = () => { createStratDateShow.value = true; }
    const createStratDateConFirm = ({ selectedValues }) => { createStratDate.value = selectedValues.join("-") + " 00:00:00"; 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 = () => { createEndDateShow.value = true; }
    const createEndDateConFirm = ({ selectedValues }) => { createEndDate.value = selectedValues.join("-") + " 23:59:59"; 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 = () => { useStratDateShow.value = true; }
    const useStratDateConFirm = ({ selectedValues }) => { useStratDate.value = selectedValues.join("-") + " 00:00:00"; 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 = () => { useEndDateShow.value = true; }
    const useEndDateConFirm = ({ selectedValues }) => { useEndDate.value = selectedValues.join("-") + " 23:59:59"; 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), "yyyy/MM/dd hh:mm:ss"); }
      if (createEndDate.value !== '') { searchParam.createEndDate = dateUtil.formateDate(new Date(createEndDate.value), "yyyy/MM/dd hh:mm:ss"); }
      if (useStratDate.value !== '') { searchParam.useStratDate = dateUtil.formateDate(new Date(useStratDate.value), "yyyy/MM/dd hh:mm:ss"); }
      if (useEndDate.value !== '') { searchParam.useEndDate = dateUtil.formateDate(new Date(useEndDate.value), "yyyy/MM/dd hh:mm:ss"); }
      context.emit('search', searchParam);
      sheetShow.value = false;
    }
    return {
      sheetShow,
      minDate,
      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></style>
