<template>
  <!-- 订单中心 - 搜索弹窗 -->
  <div class="orderSearch flex-col">
    <van-popup v-model:show="sheetShow" round class="orderSearchPopup">
      <div class="content">
        <van-form @submit="onSubmit">
          <van-field
            v-model="userName"
            name="userName"
            label="用户名"
            :placeholder="'请输入用户名'"
          />
          <van-field
            v-model="sn"
            name="sn"
            label="订单编号"
            :placeholder="'请输入订单编号'"
          />
          <van-field
            v-model="trxNo"
            name="trxNo"
            label="订单流水号"
            :placeholder="'请输入订单流水号'"
          />
          <van-field
            v-model="clientId"
            name="clientId"
            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="startDate" @click="startTimeClick()"/>
                <span>至</span>
                <input type="text" class="van-field__control" placeholder="结束时间" style="text-align: center; width: 50%;" v-model="endDate" @click="endTimeClick()"/>
              </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="startDateShow" round position="bottom">
      <van-datetime-picker
        v-model="startDate"
        type="datetime"
        title="选择完整时间"
        @confirm="startDateConFirm($event)"
        @cancel="startDateCancel()"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </van-popup>
    <van-popup v-model:show="endDateShow" round position="bottom">
      <van-datetime-picker
        v-model="endDate"
        type="datetime"
        title="选择完整时间"
        @confirm="endDateConFirm($event)"
        @cancel="endDateCancel()"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </van-popup>
  </div>
</template>

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

export default {
  name: 'orderSearch',
  setup(prop, context) {
    const sheetShow = ref(false);
    const startDateShow = ref(false);
    const endDateShow = ref(false);
    const minDate = new Date(1920, 0, 1);
    const maxDate = new Date(2025, 10, 1);

    const userName = ref(''); // 用户名
    const sn = ref(''); // 订单编号
    const trxNo = ref(''); // 订单流水号
    const clientId = ref(''); // 设备唯一码_设备编号
    const startDate = ref(''); // 订单时间-起始时间
    const endDate = ref('');

    // 父组件页面触发展示及初始化
    const showSearch = () => { sheetShow.value = true; };
    const startTimeClick = () => { if (startDate.value === '') { startDate.value = new Date(); } startDateShow.value = true;}
    const startDateConFirm = (data) => { startDate.value = dateUtil.formateDate( data, "yyyy-MM-dd hh:mm:ss" ); startDateShow.value = false; }
    const startDateCancel = () => { startDate.value = dateUtil.formateDate( new Date(startDate.value), "yyyy-MM-dd hh:mm:ss" ); startDateShow.value = false; }
    const endTimeClick = () => { if (endDate.value === '') { endDate.value = new Date(); } endDateShow.value = true;}
    const endDateConFirm = (data) => { endDate.value = dateUtil.formateDate( data, "yyyy-MM-dd hh:mm:ss" ); endDateShow.value = false; }
    const endDateCancel = () => { endDate.value = dateUtil.formateDate( new Date(endDate.value), "yyyy-MM-dd hh:mm:ss" ); endDateShow.value = false; }
    // 提交搜索表单触发搜索
    const onSubmit = () => {
      const searchParam = {
        userName: userName.value,
        sn: sn.value,
        trxNo: trxNo.value,
        clientId: clientId.value,
        startDate: dateUtil.formateDate( new Date(startDate.value), "dd/MM/yyyy hh:mm:ss" ),
        endDate: dateUtil.formateDate( new Date(endDate.value), "dd/MM/yyyy hh:mm:ss" ),
      };
      context.emit('search', searchParam);
      sheetShow.value = false;
    }
    
    return {
      sheetShow,
      startDateShow,
      startDateConFirm,
      startDateCancel,
      endDateShow,
      endDateConFirm,
      endDateCancel,
      minDate,
      maxDate,

      userName,
      sn,
      trxNo,
      clientId,
      startDate,
      endDate,

      showSearch,
      startTimeClick,
      endTimeClick,
      onSubmit,
    };
  },
  components: {},
};
</script>

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