<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="createStartDate" @click="createStartDateClick()" />
                <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="createStartDateShow" round position="bottom">
      <van-datetime-picker v-model="createStartDate" type="datehour" :title="$t('alarmHistory.selectFullTime')"
        :min-date="minDate" :max-date="maxDate" @confirm="createStartDateConFirm($event)"
        @cancel="createStartDateCancel()" />
      <!-- 			<van-datetime-picker v-model="createStartDate" type="datetime" :title="$t('alarmHistory.selectFullTime')"
              @confirm="createStartDateConFirm($event)" @cancel="createStartDateCancel()" :min-date="minDate" /> -->
    </van-popup>
    <van-popup v-model:show="createEndDateShow" round position="bottom">
      <van-datetime-picker v-model="createEndDate" type="datehour" :title="$t('alarmHistory.selectFullTime')"
        :min-date="minDate" :max-date="maxDate" @confirm="createEndDateConFirm($event)" @cancel="createEndDateCancel()" />
      <!-- 			<van-datetime-picker v-model="createEndDate" type="datetime" :title="$t('alarmHistory.selectFullTime')"
              @confirm="createEndDateConFirm($event)" @cancel="createEndDateCancel()" :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: 'historySearch',
  components: {},
  setup(prop, context) {
    const sheetShow = ref(false);
    const minDate = new Date(2018, 0, 1);
    const maxDate = new Date();
    // 加载样式
    styleUrl('alarmHistory');
    const showSearch = () => {
      sheetShow.value = true;
    };
    const clientId = ref('');
    const name = ref('');
    // 创建开始时间
    const createStartDate = ref('');
    const createStartDateShow = ref(false);
    const createStartDateClick = () => {
      if (createStartDate.value === '') {
        createStartDate.value = new Date();
      }
      createStartDateShow.value = true;
    }
    const createStartDateConFirm = (data) => {
      createStartDate.value = dateUtil.formateDate(data, "yyyy-MM-dd hh:mm:ss");
      createStartDateShow.value = false;
    }
    const createStartDateCancel = () => {
      createStartDate.value = dateUtil.formateDate(new Date(createStartDate.value), "yyyy-MM-dd hh:mm:ss");
      createStartDateShow.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 (createStartDate.value !== '') {
        searchParam.startDate = dateUtil.formateDate(new Date(createStartDate.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,
      createStartDate,
      createStartDateShow,
      createStartDateClick,
      createStartDateConFirm,
      createStartDateCancel,
      createEndDate,
      createEndDateShow,
      createEndDateClick,
      createEndDateConFirm,
      createEndDateCancel,
      onSubmit
    };
  },
};
</script>

<style lang="less" scoped></style>
