<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="clientId"
            name="clientId"
            label="{{$t('alarmHistory.equipmentNoLabel')}}"
            :placeholder="$t('alarmHistory.equipmentNoPlaceholder')"
          />
          <van-field
            v-model="name"
            name="name"
            label="{{$t('alarmHistory.equipmentNameLabel')}}"
            :placeholder="$t('alarmHistory.equipmentNamePlaceholder')"
          />
          <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('alarmHistory.alarmTime')}}</label>
            </div>
            <div class="van-cell__value van-field__value">
              <div class="van-field__body">
                <input type="text" class="van-field__control" placeholder="{{$t('alarmHistory.startTime')}}" style="text-align: center; width: 50%;" v-model="createStratDate" @click="createStratDateClick()"/>
                <span>{{$t('alarmHistory.to')}}</span>
                <input type="text" class="van-field__control" placeholder="{{$t('alarmHistory.endTime')}}" style="text-align: center; width: 50%;" v-model="createEndDate" @click="createEndDateClick()"/>
              </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('alarmHistory.clickQuery')}}</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="{{$t('alarmHistory.selectFullTime')}}"
        @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="{{$t('alarmHistory.selectFullTime')}}"
        @confirm="createEndDateConFirm($event)"
        @cancel="createEndDateCancel()"
        :min-date="minDate"
        :max-date="maxDate"
      />
    </van-popup>
  </div>
</template>

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

export default {
  name: 'historySearch',
  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 clientId = ref('');
    const name = 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 onSubmit = () => {
      const searchParam = {};
      if (clientId.value !== '') { searchParam.clientId = clientId.value; }
      if (name.value !== '') { searchParam.name = name.value; }
      if (createStratDate.value !== '') { searchParam.startDate = dateUtil.formateDate( new Date(createStratDate.value), "yyyy/MM/dd hh:mm:ss" ); }
      if (createEndDate.value !== '') { searchParam.endDate = dateUtil.formateDate( new Date(createEndDate.value), "yyyy/MM/dd hh:mm:ss" ); }
      context.emit('search', searchParam);
      sheetShow.value = false;
    }
    return {
      sheetShow,
      minDate,
      maxDate,
      showSearch,
      clientId,
      name,
      createStratDate,
      createStratDateShow,
      createStratDateClick,
      createStratDateConFirm,
      createStratDateCancel,
      createEndDate,
      createEndDateShow,
      createEndDateClick,
      createEndDateConFirm,
      createEndDateCancel,
      onSubmit
    };
  },
};
</script>

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