<!--
 * @Author: tengmingxue 1473375109@qq.com
 * @Date: 2023-06-05 17:46:54
 * @LastEditors: tengmingxue 1473375109@qq.com
 * @LastEditTime: 2023-06-08 19:41:06
 * @FilePath: \yx-big-screen\src\views\map\dialog\HistoryInfo\QueryCondition.vue
 * @Description: 查询条件
-->


<template>
  <div class="query-condition">
    <div class="condition">
      <!-- <template v-for="item in dataTypes" :key="item.id">
        <span
          class="type-span"
          :class="{ active: current === item.id }"
          @click="activeClick(item)"
          >{{ item.name }}</span
        >
      </template> -->
      <span class="label">开始时间</span>
      <span class="condition-date">
        <a-date-picker
          v-model:value="condition.startDate"
          :valueFormat="'YYYY-MM-DD'"
          style="border: 1px solid rgba(23, 120, 171, 0.7)"
          :getCalendarContainer="(triggerNode) => triggerNode.parentNode"
      /></span>
      <span class="label">结束时间</span>
      <span class="condition-date">
        <a-date-picker
          v-model:value="condition.endDate"
          :valueFormat="'YYYY-MM-DD'"
          style="border: 1px solid rgba(23, 120, 171, 0.7)"
          :getCalendarContainer="(triggerNode) => triggerNode.parentNode"
      /></span>
      <span class="btn" @click="queryClick">开始查询</span>
    </div>
  </div>
</template>
          
    <script>
import { defineComponent, reactive, toRefs, onMounted, ref, watch, getCurrentInstance } from 'vue';
import moment from 'moment';
export default defineComponent({
  name: 'QueryCondition',
  components: {},
  props: [],
  setup() {
    const data = reactive({
      current: '',
      dataTypes: [
        { id: '1', name: '近一周' },
        { id: '2', name: '近一月' },
        { id: '3', name: '近三月' },
        { id: '4', name: '近半年' },
      ],
      condition: {
        startDate: moment(new Date()).format('YYYY-MM-DD'),
        endDate: moment(new Date()).format('YYYY-MM-DD'),
      },
    });
    const activeClick = (row) => {
      data.current = row.id;
    };
    watch(
      () => data.current,
      (value) => {
        const date = new Date();
        data.condition.endDate = moment(date).format('YYYY-MM-DD');
        let diff = 0;
        switch (value) {
          case '1':
            diff = 7;
            break;
          case '2':
            diff = 30;
            break;
          case '3':
            diff = 90;
            break;
          case '4':
            diff = 180;
            break;
        }
        data.condition.startDate = moment(date).subtract(diff, 'days').format('YYYY-MM-DD');
      }
    );
    const queryClick = () => {
        eventBus.emit('historyInfoQueryEventBus',data.condition)
    };
    onMounted(() => {
      data.current = '1';
    });
    return {
      ...toRefs(data),
      activeClick,
      queryClick,
    };
  },
});
</script>
      <style lang="less" scoped>
.query-condition {
  position: relative;
  height: auto;
  width: 100%;
  margin: 10px 0;
  .condition {
    display: flex;
    align-items: center;
    justify-content: center;
    .type-span {
      height: 36px;
      line-height: 36px;
      width: 60px;
      margin: 0 2px;
      color: #feffff;
      background: rgba(3, 49, 79, 0.6);
      box-shadow: inset 0px 0px 3px 3px rgba(23, 120, 171, 0.7);
      border: 1px solid #1778ab;
      text-align: center;
      &:hover {
        box-shadow: inset 0px 0px 3px 3px rgba(34, 238, 250, 0.7);
        border: 1px solid rgb(34, 238, 250);
      }
    }
    .active {
      box-shadow: inset 0px 0px 3px 3px rgba(34, 238, 250, 0.7);
      border: 1px solid rgb(34, 238, 250);
    }
    .label {
      margin: 0 4px 0 10px;
    }
    .btn {
      height: 36px;
      line-height: 36px;
      width: 72px;
      text-align: center;
      background: rgba(34, 238, 250, 0.8);
      background: linear-gradient(90deg, rgba(74, 111, 233, 0.8) 0%, rgba(34, 238, 250, 0.8) 100%);
      color: #feffff;
      margin: 0 20px;
      cursor: pointer;
    }
  }
}
</style>