<template>
  <div class="home">
    <div class="card_head_home">
      <div class="card_image_flex">
        <div style="display: flex;flex: none;height: 120px;">
          <el-image :src="require('@/assets/images/transport.svg')"></el-image>
          <div class="home_content">
            <div class="title_content1">Logistics transportation system</div>
            <div class="title_content">物流运输 高效管理</div>
            <div class="title_content1">物流运输管理系统 客户管理系统</div>
          </div>
          <el-image :src="require('@/assets/images/transport1.svg')"></el-image>
        </div>
      </div>
    </div>
    <div class="card_head_statistics">
      <div class="item_statistics">
        <span class="sum_title">今日总运单数</span>
        <span class="sum_num">{{listData.todayNum}}</span>
      </div>
      <div style="height: 4rem;">
        <el-divider direction="vertical"></el-divider>
      </div>
      <div class="item_statistics">
        <span class="sum_title">本月运单总数</span>
        <span class="sum_num icon_blue">{{listData.thisMonthNum}}</span>
      </div>
      <div style="height: 4rem;">
        <el-divider direction="vertical"></el-divider>
      </div>
      <div class="item_statistics">
        <span class="sum_title">本年运单总数</span>
        <span class="sum_num icon_blue">{{listData.thisYearNum}}</span>
      </div>
      <div style="height: 4rem;">
        <el-divider direction="vertical"></el-divider>
      </div>
      <div class="card_statistics">
        <div class="item_statistics" v-for="(item,index) in list" :key="index">
          <span class="title_hint" :style="{color:item.color,}">{{item.title}}</span>
          <span class="sum_num">{{listData[`${item.field}`]}}</span>
        </div>
      </div>
    </div>
    <div class="card_head_statisticsil" v-if="userName != 'admin'">
      <div class="card_time_select">
        <div style="display: flex;">
          <div :class="yearsType ? 'month_title' : 'year_title'" @click="switchover(true)">按月</div>
          <div :class="!yearsType ? 'month_title' : 'year_title'" @click="switchover(false)">按年</div>
        </div>
        <div v-show="yearsType">
          <el-date-picker v-model="timeValue" value-format="yyyy-MM" type="month" placeholder="选择月" size="small"
            @change="changeTime">
          </el-date-picker>
        </div>
        <div v-show="!yearsType">
          <el-date-picker v-model="timeValue1" value-format="yyyy" type="year" placeholder="选择年" size="small"
            @change="changeTime1">
          </el-date-picker>
        </div>
      </div>
      <div class="card_chart">
        <div id="pie1" class="chart"></div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getWaybillHome
  } from '@/api/waybill'
  export default {
    name: 'HomeView',
    data() {
      return {
        list: [{
          color: '#F56C6C',
          title: '未派单',
          field: 'waitDeliveryNum',
        }, {
          color: '#E6A23C',
          title: '未装车',
          field: 'waitTruckNum',
        }, {
          color: '#E6A23C',
          title: '未入库',
          field: 'waitStorageNum',
        }, {
          color: '#67C23A',
          title: '运送中',
          field: 'inDeliveryNum',
        }],
        myChart: null,
        timeValue: '',
        timeValue1: '',
        yearsType: true,
        listData: {},
        textData: [],
        userName: '',
      }
    },
    mounted() {
      const arr = localStorage.getItem('userData')
      const arr1 = JSON.parse(arr)
      this.userName = arr1.name

      function formatDate(date, type) {
        const year = date.getFullYear();
        const month = ('0' + (date.getMonth() + 1)).slice(-2);
        const day = ('0' + date.getDate()).slice(-2);
        const hours = ('0' + date.getHours()).slice(-2);
        const minutes = ('0' + date.getMinutes()).slice(-2);
        const seconds = ('0' + date.getSeconds()).slice(-2);
        if (type == 'month') {
          return `${year}-${month}`;
        } else if (type == 'year') {
          return `${year}`;
        }
      }
      const monthTime = formatDate(new Date(), 'month')
      const yearTime = formatDate(new Date(), 'year')
      this.timeValue = monthTime
      this.timeValue1 = yearTime
      this.getList()
      if (this.userName != 'admin') {
        this.resizeChart()
      }
    },
    methods: {
      getList() {
        let params = {
          date: '',
          type: '',
        }
        if (this.yearsType) {
          params.date = this.timeValue
          params.type = 'month'
        } else {
          params.date = this.timeValue1
          params.type = 'year'
        }
        getWaybillHome(params).then(res => {
          if (res.code == 200) {
            this.listData = res.data
            const arr1 = []
            const arr2 = []
            if (res.data.stats) {
              let arrList = res.data.stats
              arrList.forEach(item => {
                arr1.push(item.date)
                arr2.push(item.num)
              })
            }
            this.textData[0] = arr1
            this.textData[1] = arr2
            if (this.userName != 'admin') {
              this.drawPie1()
            }
          }
        })
      },
      // 选择月
      changeTime(value) {
        this.timeValue = value
        this.getList()
      },
      // 选择年
      changeTime1(value) {
        this.timeValue1 = value
        this.getList()
      },
      resizeChart() {
        window.addEventListener("resize", () => {
          this.myChart.resize();
        });
      },
      switchover(value) {
        this.yearsType = value
        this.getList()
      },
      drawPie1() {
        let that = this
        that.myChart = that.$echarts.init(document.getElementById('pie1'))
        let option = {
          tooltip: {
            trigger: 'axis',
          },
          grid: {
            top: '3%',
            left: '3%',
            right: '3%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: that.textData[0],
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: that.textData[1],
            type: 'line',
            smooth: true,
            lineStyle: { //设置线条颜色
              normal: {
                color: '#409EFF' // 折线线条颜色:红色
              }
            },
            itemStyle: {
              color: '#409EFF', // 数据点颜色
            },
            areaStyle: {
              normal: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                      offset: 0,
                      color: "#409EFF", // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: "rgba(64,158,255,.5)", // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(64,158,255,.1)", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
              },
            },
          }]
        };
        that.myChart.setOption(option);
      },
    }
  }
</script>
<style>
  .home {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .card_head_home {
    display: flex;
    align-items: center;
    background-color: #c8f4fa;
    border-radius: 5px;
    overflow: hidden;
    flex: none;
  }

  .card_image_flex {
    display: flex;
    align-items: center;
    height: 140px;
  }

  .home_content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin: 0px 30px;
    flex: none;
  }

  .title_content {
    color: #2d4578;
    font-size: 30px;
    font-weight: 600;
    margin: 10px 0px;
  }

  .title_content1 {
    color: #2d4578;
    font-size: 20px;
  }

  .card_head_statistics {
    display: flex;
    align-items: center;
    margin-top: 20px;
    background-color: #fff;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
    width: calc(100% - 30px);
    overflow: auto;
  }

  .card_head_statisticsil {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 20px;
    background-color: #fff;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
    width: calc(100% - 30px);
    flex: 1;
  }

  .card_left_waybill {
    display: flex;
    flex-direction: column;
    height: 400px;
    flex: none;
    margin-right: 15px;
  }

  .card_right {
    display: flex;
    align-items: flex-end;
    width: 89%;
  }

  .card_statistics {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
  }

  .item_statistics {
    height: 100px;
    flex: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0px 20px;
    padding-right: 10px;
  }

  .sum_title {
    font-size: 16px;
    color: #909399;
  }

  .sum_num {
    margin-top: 5px;
    font-size: 30px;
  }

  .title_hint {
    font-size: 15px;
  }

  .el-divider--vertical {
    height: 100%;
    display: inline-block;
    width: 1px;
    margin: 0 8px;
    vertical-align: middle;
    position: relative;
  }

  .icon_blue {
    color: #67C23A;
  }

  .icon_red {
    color: #F56C6C;
  }

  .card_left {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .sum_item_title {
    text-align: left;
    font-size: 24px;
    margin: 5px;
  }

  .card_compare {
    display: flex;
    align-items: center;
  }

  .fs_13 {
    margin-left: 5px;
    font-size: 13px;
  }

  .card_time_select {
    /* position: absolute; */
    top: 20px;
    right: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    z-index: 20000;
  }

  .month_title {
    cursor: pointer;
    color: #67C23A;
    font-size: 15px;
    margin-right: 15px;
  }

  .year_title {
    cursor: pointer;
    font-size: 15px;
    margin-right: 15px;
  }

  .card_chart {
    display: flex;
    width: 100%;
    height: 100%;
  }

  #pie1 {
    margin-top: 20px;
    width: 100%;
    height: 100%;
    margin: auto;
  }
</style>
