<template>
  <div class="home_page">
    <div class="card_left_home">
      <div class="scale-up-hor-left card_block">
        <AnnualWaybill ref="annual" :textData="textData" title="全年运单量图表" @changeYearTime="changeYearTime">
        </AnnualWaybill>
      </div>
      <div class="scale-up-hor-left card_block">
        <monthWaybill ref="month" :dataList="monthData" title="全月运单量图表" @changeMonthTime="changeMonthTime">
        </monthWaybill>
      </div>
      <div class="scale-up-hor-left card_block">
        <WaybillDistribution ref="bution" :listData="listData" title="运单配送图表"></WaybillDistribution>
      </div>
    </div>
    <div class="card_center_home">
      <chinaMap ref="china" v-if="chinaFlag" :listData="listData" @cutChina="cutChina"></chinaMap>
      <province ref="prov" :listData="listData" :provinceName="provinceName" :province="province" v-if="provinceFlag"
        @cutProvince="cutProvince" @goBack="goBack"></province>
      <cityLevel ref="level" :listData="listData" :city="city" v-if="cityFlag" @goBack="goBackCity"></cityLevel>
    </div>
    <div class="card_right_home">
      <div class="scale-up-hor-right card_block center_in">
        <CustomerWaybill ref="customer" :dataList="customerWaybillData" title="用户运单统计" @changeTimeType="getcustTimeType"
          @changeMonthTime="custMonthTime" @changeYearTime="custYearTime" @changeUserType="getcustUserType">
        </CustomerWaybill>
      </div>
      <div class="scale-up-hor-right card_block1 center_in">
        <UserTypestatistics ref="tistics" title="用户类型统计"></UserTypestatistics>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getWaybillHome,
    getUserStats
  } from '@/api/waybill'
  import AnnualWaybill from '@/components/AnnualWaybill.vue'
  import monthWaybill from '@/components/monthWaybill.vue'
  import WaybillDistribution from '@/components/WaybillDistribution.vue'
  import CustomerWaybill from '@/components/CustomerWaybill.vue'
  import UserTypestatistics from '@/components/UserTypestatistics.vue'
  import chinaMap from './chinaMap.vue'
  import province from './province.vue'
  import cityLevel from './cityLevel.vue'
  export default {
    name: 'HomeView',
    components: {
      AnnualWaybill,
      monthWaybill,
      WaybillDistribution,
      CustomerWaybill,
      UserTypestatistics,
      chinaMap,
      province,
      cityLevel
    },
    data() {
      return {
        chinaFlag: true,
        provinceFlag: false,
        cityFlag: false,
        growthList: [],
        cylinderCount: 0,
        provinceName: '',
        province: '',
        city: '',
        timeData: '',
        timeType: '',
        listData: {},
        textData: [],

        monthTime: '',
        monthData: [],
        custTime: '',
        custTimeType: 'year',
        custUserType: 'reCheck',
        customerWaybillData: [],
      }
    },
    mounted() {
      window.onresize = () => {
        // 当窗口大小变化时，ECharts实例调用resize方法
        // myChart2.resize();
        if (this.$refs.china) {
          this.$refs.china.getResize()
        }
        if (this.$refs.annual) {
          this.$refs.annual.getResize()
        }
        if (this.$refs.month) {
          this.$refs.month.getResize()
        }
        if (this.$refs.bution) {
          this.$refs.bution.getResize()
        }
        if (this.$refs.customer) {
          this.$refs.customer.getResize()
        }
        if (this.$refs.tistics) {
          this.$refs.tistics.getResize()
        }
      };
      var box = document.getElementById("app");
      box.style.background = 'url(' + require('@/assets/images/login-bg.png') +
        ') center center / 100% 100% no-repeat fixed'

      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.timeData = yearTime
      this.monthTime = monthTime
      this.custTime = yearTime
      this.getQuantityWaybill()
      this.getMonth()
      this.getUserStatsList()
    },
    beforeDestroy() {
      var box = document.getElementById("app");
      box.style.background = 'url(' + require('@/assets/images/index_bg.png') +
        ') center center / 100% 100% no-repeat fixed'
    },
    methods: {
      // 月份搜索
      changeMonthTime(event) {
        this.monthTime = event
        this.getMonth()
      },
      // 年份搜索
      changeYearTime(event) {
        this.timeData = event
        this.getQuantityWaybill()
      },
      // 获取运单统计
      getQuantityWaybill() {
        let params = {
          date: this.timeData,
          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.$set(this.textData, 0, arr1)
            this.$set(this.textData, 1, arr2)
          }
        })
      },
      // 获取按月数据
      getMonth() {
        let params = {
          date: this.monthTime,
          type: 'month',
        }
        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.$set(this.monthData, 0, arr1)
            this.$set(this.monthData, 1, arr2)
          }
        })
      },
      // 切换时间类型搜索
      getcustTimeType(event) {
        this.custTimeType = event
        this.getUserStatsList()
      },
      // 选择月搜索用户统计
      custMonthTime(event) {
        this.custTime = event
        this.getUserStatsList()
      },
      // 选择年搜索用户统计
      custYearTime(event) {
        this.custTime = event
        this.getUserStatsList()
      },
      // 切换用户类型搜索用户统计
      getcustUserType(event) {
        this.custUserType = event
        this.getUserStatsList()
      },
      // 获取用户统计
      getUserStatsList() {
        let params = {
          date: this.custTime,
          type: this.custTimeType,
          userType: this.custUserType,
          userIds: [],
        }
        getUserStats(params).then(res => {
          if (res.code == 200) {
            let arr = res.data
            let arr1 = []
            arr.forEach(item => {
              let data = {
                name: item.Name,
                count: sum(item.stats),
              }
              arr1.push(data)

              function sum(arr) {
                var s = 0;
                for (var i = arr.length - 1; i >= 0; i--) {
                  s += arr[i].num;
                }
                return s;
              }
            })
            this.customerWaybillData = arr1
          }
        })
      },
      // 选中省份
      cutChina(event) {
        this.chinaFlag = false
        this.provinceFlag = true
        this.provinceName = event.provinceName
        this.province = event.province
      },
      // 选中省份
      cutProvince(event) {
        this.provinceFlag = false
        this.cityFlag = true
        this.city = event
      },
      // 选中省份
      goBack(event) {
        this.chinaFlag = true
        this.provinceFlag = false
      },
      // 选中省份
      goBackCity(event) {
        this.provinceFlag = true
        this.cityFlag = false
      },
    }
  }
</script>
<style lang="scss" scoped>
  .home_page {
    display: flex;
    // width: 1920px;
    // height: 1080px;
    width: 100%;
    height: 100%;
  }

  .card_left_home {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 25%;
    // flex: 1;
  }

  .card_center_home {
    position: relative;
    width: 50%;
    // width: 900px;
    height: 100%;
    flex: none;
    margin: 0px auto;
  }

  .card_right_home {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 25%;
    // flex: 1;
  }

  .card_block {
    height: 60%;
  }

  .card_block1 {
    padding-top: 10px;
    height: calc(40% - 10px);
  }

  .scale-up-hor-left {
    -webkit-animation: scale-up-hor-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: scale-up-hor-left 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  }

  @-webkit-keyframes scale-up-hor-left {
    0% {
      -webkit-transform: scaleX(0.4);
      transform: scaleX(0.4);
      -webkit-transform-origin: 0% 0%;
      transform-origin: 0% 0%;
    }

    100% {
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
      -webkit-transform-origin: 0% 0%;
      transform-origin: 0% 0%;
    }
  }

  @keyframes scale-up-hor-left {
    0% {
      -webkit-transform: scaleX(0.4);
      transform: scaleX(0.4);
      -webkit-transform-origin: 0% 0%;
      transform-origin: 0% 0%;
    }

    100% {
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
      -webkit-transform-origin: 0% 0%;
      transform-origin: 0% 0%;
    }
  }

  .scale-up-hor-right {
    -webkit-animation: scale-up-hor-right 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: scale-up-hor-right 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  }

  @-webkit-keyframes scale-up-hor-right {
    0% {
      -webkit-transform: scaleX(0.4);
      transform: scaleX(0.4);
      -webkit-transform-origin: 100% 100%;
      transform-origin: 100% 100%;
    }

    100% {
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
      -webkit-transform-origin: 100% 100%;
      transform-origin: 100% 100%;
    }
  }

  @keyframes scale-up-hor-right {
    0% {
      -webkit-transform: scaleX(0.4);
      transform: scaleX(0.4);
      -webkit-transform-origin: 100% 100%;
      transform-origin: 100% 100%;
    }

    100% {
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
      -webkit-transform-origin: 100% 100%;
      transform-origin: 100% 100%;
    }
  }
</style>
