<template>
  <div style="width: 100%; height: 100%; display: flex; flex-flow: column;">
    <el-date-picker
      v-model="calendarDate"
      :clearable="false"
      :picker-options="pickerOptions"
      end-placeholder="结束日期"
      range-separator="至"
      start-placeholder="开始日期"
      type="daterange"
      unlink-panels
      value-format="YYYY-MM-DD"
    >
    </el-date-picker>
    <div class="total">
      <div class="count-inner">
        <div class="item-title">抽查次数</div>
        <div class="count">
          <vue-count-to :duration="2600" :end-val="totalNum.total_count" :start-val="0" class="card-panel-num" />
        </div>
      </div>
      <div class="count-inner">
        <div class="item-title">发现问题数</div>
        <div class="count">
          <vue-count-to :duration="2600" :end-val="totalNum.fail_count" :start-val="0" class="card-panel-num" />
        </div>
      </div>
      <div class="count-inner">
        <div class="item-title">异常率</div>
        <div class="count">
          <vue-count-to :duration="2600" :end-val="totalNum.fail_percentage" :start-val="0" class="card-panel-num" />
          <span class="card-panel-num">%</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { onMounted, onUnmounted, ref, watchEffect } from 'vue';
  import * as echarts from 'echarts';
  import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
  import VueCountTo from '@/components/VueCountTo/vue-countTo.vue';

  const pickerOptions = {
    shortcuts: [{
      text: '最近一周',
      onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        picker.$emit('pick', [start, end]);
      },
    }, {
      text: '最近一个月',
      onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        picker.$emit('pick', [start, end]);
      },
    }, {
      text: '最近三个月',
      onClick(picker) {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
        picker.$emit('pick', [start, end]);
      },
    }],
  };
  let calendarDate = ref(['2023-03-01', '2023-03-30']);
  let totalNum = ref({
    total_count: 0,
    fail_count: 0,
    fail_percentage: 0,
  });

  watchEffect(() => {
    const [startDate, endDate] = calendarDate.value || ['2023-03-01', '2023-03-30'];
    executeSqlByKeyAndParam('select_time_range_and_number_of_spot_checks', { startDate, endDate }).then(res => {
      totalNum.value = res.data[0];
    });
  });
</script>

<style scoped>
  .total {
    display: flex;
    justify-content: space-between;
    margin: 10px 10px 20px;
  }

  :deep(.el-date-editor) {
    background: inherit;
    flex: 0 0 40px;
    width: 100%;
    color: #fbffff;

    .el-range-input, .el-range-separator {
      color: #fbffff;
    }
  }

  .item-title {
    position: relative;
    display: flex;
    z-index: 1;
    align-content: flex-start;
    background: url('../../../assets/images/titlebg-4340cf1c.png');
    background-size: 100% 100%;
    font-weight: 400;
    font-size: 14px;
    color: #fbffff;
    padding: 8px 20px 8px 12px;
    border-radius: 8px;
    white-space: nowrap;
  }

  .count-inner {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  :deep(.card-panel-num) {
    font-size: 20px;
    color: #fbffff;
  }
</style>
