<script lang='ts' setup>

import ItemSelect from '../ItemSelect.vue'
import TrafficSummary from './comps/TrafficSummary.vue'
import FlowTrend from './comps/FlowTrend.vue'
import DayFlowTrend from './comps/DayFlowTrend.vue'
import DaySpeedTrend from './comps/DaySpeedTrend.vue'

import { getSummaryFlows, getFlowTrendMounth, getFlowTrendDay, getSpeedTrendDay } from '@/api/history'

import dayjs from 'dayjs'
import { ASYNC_DIRECTIONS } from '@/config/dict'
import { useAppStoreWithOut } from '@/store/modules/app'


const appStore = useAppStoreWithOut()

const params = reactive({
  time: null,
  direction: 'xl_tunnel_down' // 方向
})

const chart1 = ref(null) // 通行车次统计
const chart1El = ref(null)

const summaryFlows = ref(null)
const mounthFlows = ref(null)
const dayFlows = ref(null)
const daySpeeds = ref(null)

const setNowMonth = () => {
  params.time = [
    dayjs((new Date()).getTime() - 30 * 24 * 3600 * 1000).format('YYYY-MM-DD'),
    dayjs(new Date()).format('YYYY-MM-DD')
  ]
}

const getCharts = () => {

  if (!params.time) {
    setNowMonth()
  }

  const tempPms = {
    startStatisticsDay: params.time[0].replaceAll('-', ''),
    endStatisticsDay: params.time[1].replaceAll('-', ''),
    tunnelId: params.direction
  }

  // 通行车次
  getSummaryFlows(tempPms).then(res => {
    summaryFlows.value = res
  })

  // 月流量趋势
  getFlowTrendMounth(tempPms).then(res => {
    mounthFlows.value = res
  })

  // 日流量趋势
  getFlowTrendDay(tempPms).then(res => {
    dayFlows.value = res
  })

  // 日速度趋势
  getSpeedTrendDay({
    tunnelId: params.direction,
    startStatisticsHour: dayjs(new Date()).format('YYYYMMDD') + '00',
    endStatisticsHour: dayjs(new Date()).format('YYYYMMDDHH')
  }).then(res => {
    daySpeeds.value = res
  })

}

// 条件重置
const conditionReset = () => {
  setNowMonth()
  params.direction = 'xl_tunnel_down'
  getCharts()
}

onBeforeMount(() => {
  
  // 时间初始化
  setNowMonth()
  getCharts()

})

</script>

<template>

<div class="history-post">

  <div class="search">

    <div class="inp-item">
      <div class="i-name">统计日期：</div>
      <div class="i-content">
        <el-date-picker
          v-model="params.time"
          type="daterange"
          value-format="YYYY-MM-DD"
          :teleported="false"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
        />
      </div>
    </div>

    <div class="inp-item">
      <div class="i-name">隧道方向：</div>
      <div class="i-content">
        <el-select style="width: 100px;" :teleported="false" v-model="params.direction" placeholder="请选择">
          <el-option
            v-for="item in ASYNC_DIRECTIONS()"
            :key="item.seKey"
            :value="item.seKey"
            :label="item.name"
          />
          <template #empty>
            没有数据
          </template>
        </el-select>
      </div>
    </div>

    <div class="btns">
      <el-button @click="getCharts" type="primary">搜索</el-button>
      <el-button @click="conditionReset">重置</el-button>
    </div>

  </div>

  <div class="his-container">

    <div class="lt-block">
      <TrafficSummary :dats="summaryFlows" />
    </div>

    <div class="rt-block">

      <div class="x-block">
        <FlowTrend :dats="mounthFlows" />
      </div>

      <div class="x-block">
        <DayFlowTrend :dats="dayFlows" />
      </div>

      <div class="x-block">
        <DaySpeedTrend :dats="daySpeeds" />
      </div>

    </div>

  </div>

</div>

</template>

<style lang='scss' scoped>

$path-event: '@/assets/images/event/';

.history-post {
  overflow: hidden;
  .search {
    margin: 20px 40px 16px;
    padding: 16px 34px;
    color: white;
    background: rgba(69, 116, 182, 0.2);
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
    border-radius: 8px;

    display: grid;
    grid-template-columns: 504px 470px auto;
    row-gap: 14px;

    .inp-item {
      position: relative;
      display: flex;
      align-items: center;
      margin-right: 60px;
      .i-name {
        font-size: 14px;
        white-space: nowrap;
        width: 82px;
      }
      .i-content {
        display: flex;
        align-items: center;
        & > span {
          white-space: nowrap;
        }
      }
    }

  }

  .his-container {
    margin: 16px 40px;
    display: flex;
    justify-content: space-between;

    .lt-block {
      width: 500px;
      height: 800px;
      flex-shrink: 0;
      background: rgba(69, 116, 182, 0.2);
      box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
      border-radius: 8px;
    }

    .rt-block {
      width: 1324px;
      position: relative;


      .x-block {
        height: 256px;
        position: relative;
        background: rgba(69, 116, 182, 0.2);
        box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        margin-bottom: 16px;
      }
    }

  }
  
}

</style>

<style lang="scss">

.history-post {

  .el-input__wrapper {
    border-radius: 0;
    background: transparent;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
    .el-input__inner {
      color: #FFFFFF;
    }
  }

  .el-date-editor {
      
    .el-icon:nth-of-type(1) {
      display: none;
    }

    .el-range-input {
      color: white;
      width: 48%;
    }

    &.is-active {
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset !important;
    }
  
  }

  .btns {
    .el-button {
      &:first-child {
        background: rgba(18, 112, 255, 1);
      }
      &:last-child {
        background: rgba(0, 125, 250, 0.15);
        color: white;
        border: 1px solid rgba(255, 255, 255, 0.29);
        &:hover {
          border-color: rgba(255, 255, 255, 0.5);
        }
      }
    }
  }

}



</style>