<template>
  <div class="main">
    <div class="header">
      <el-form :model="form" label-width="auto">
        <el-button plain @click="setTimeToYesterday" style="margin: 0 10px; float: left">昨天</el-button>
        <el-button plain @click="setTimeToLast7Days" style="margin: 0 -10px; float: left">近7日</el-button>
        <el-button plain @click="setTimeToLast30Days" style="margin: 0 10px; float: left">30日</el-button>
        <el-date-picker
          style="width: 200px; float: left"
          v-model="form.time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="開(kāi)始時(shí)間"
          end-placeholder="結(jié)束時(shí)間"/>
          </el-form>
         </div>
  </div>
</template>
<script lang='ts'>
import { ref, reactive, toRefs, onUnmounted, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router"; //引入路由
export default {
  name: "",
  setup() {
    let router = useRouter(),
    route = useRoute();
    const data: any = reactive({
      form: {
        time: ""
      },
    });
     const setTimeToYesterday=()=> {
        const end = new Date();
        const start = new Date();
        start.setDate(start.getDate() - 1);
        start.setHours(0, 0, 0, 0);
        end.setHours(23, 59, 59, 999);
        data.form.time = [start, end];
      };
      const setTimeToLast7Days=()=>  {
        const end = new Date();
        const start = new Date();
        start.setDate(start.getDate() - 7);
        start.setHours(0, 0, 0, 0);
        end.setHours(23, 59, 59, 999);
        data.form.time = [start, end];
      };
      const setTimeToLast30Days=()=> {
        const end = new Date();
        const start = new Date();
        start.setDate(start.getDate() - 30);
        start.setHours(0, 0, 0, 0);
        end.setHours(23, 59, 59, 999);
        data.form.time = [start, end];
      };
    onMounted(() => {
    });
    onUnmounted(() => {
    });
    const refData = toRefs(data);
    return {
      ...refData,
      setTimeToYesterday,
      setTimeToLast7Days,
      setTimeToLast30Days,
    };
  },
};
</script>
<style lang="scss" scoped>
::v-deep.el-form-item__label-wrap {
  margin: 0 !important;
}
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .header {
    display: flex;
    vertical-align: middle;
    padding: 15px 0 0 0;
  }
  .section {
    flex: 5;
    padding: 0 10px;
    box-sizing: border-box;
  }
}
</style>