<template>
  <div class="home" id="home">
    <div class="card_left_home">
      <div class="scale-up-hor-left card_block center_in">
        <growthStatistics :dataList="growthList" title="近12月钢瓶数增长统计"></growthStatistics>
      </div>
      <div class="scale-up-hor-left card_block center_in">
        <proportion :dataList="proportionList" title="企业钢瓶占比"></proportion>
        <!-- <securityCheck title="气瓶安检汇总"></securityCheck> -->
      </div>
      <div class="scale-up-hor-left card_block center_in">
        <!-- <abnormalCylinder title="气站钢瓶投入"></abnormalCylinder> -->
      </div>
    </div>
    <div class="card_center_home">
      <mapStore @lookVideoGo="lookVideoGo"></mapStore>
    </div>
    <div class="card_right_home">
      <div class="scale-up-hor-right card_block center_in">
        <wavyBlock title="企业数据汇总" :list="list"></wavyBlock>
      </div>
      <div class="scale-up-hor-right card_block center_in">
        <wavyBlock title="钢瓶数据汇总" :list="list1"></wavyBlock>
      </div>
      <div class="scale-up-hor-right card_block center_in">
        <!-- <proportion title="企业钢瓶占比"></proportion> -->
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getUserHome
  } from '@/api/user'
  import growthStatistics from '@/components/growthStatistics.vue'
  import securityCheck from '@/components/securityCheck.vue'
  import abnormalCylinder from '@/components/abnormalCylinder.vue'
  import proportion from '@/components/proportion.vue'
  import wavyBlock from '@/components/wavyBlock.vue'
  import mapStore from './mapStore.vue'
  import request from '@/utils/request'
  export default {
    name: 'HomeView',
    components: {
      growthStatistics,
      securityCheck,
      abnormalCylinder,
      proportion,
      wavyBlock,
      mapStore
    },
    data() {
      return {
        mapData: [],
        growthList: [],
        proportionList: [],
        list: [{
          num: 0,
          title: '门店数',
          icon: 'shop.png',
        }, {
          num: 0,
          title: '送气工数',
          icon: 'aspirated.png',
        }, {
          num: 0,
          title: '燃气户数',
          icon: 'client.png',
        }],
        list1: [{
          num: 0,
          title: '钢瓶总数',
          icon: 'liquefiedgas.png',
        }, {
          num: 0,
          title: '正常瓶数',
          icon: 'liquefiedgas.png',
        }, {
          num: 0,
          title: '过期瓶数',
          icon: 'liquefiedgas.png',
        }, {
          num: 0,
          title: '报废瓶数',
          icon: 'liquefiedgas.png',
        }]
      }
    },
    mounted() {
      this.getList()
      var box = document.getElementById("app");
      box.style.background = 'url(' + require('@/assets/image/login-bg.png') +
        ') center center / 100% 100% no-repeat fixed'
    },
    beforeDestroy() {
      var box = document.getElementById("app");
      box.style.background = 'url(' + require('@/assets/image/index_bg.png') +
        ') center center / 100% 100% no-repeat fixed'
    },
    methods: {
      getList() {
        getUserHome().then(res => {
          if (res.code == 200) {
            var arr = res.data
            // 地图
            this.mapData = arr.storeStat
            // 近12统计
            this.growthList = arr.gasCylinderMonthStat
            this.proportionList = arr.gasCylinderDeptStat
            // 企业数据总汇
            this.list[0].num = arr.storeCount
            this.list[1].num = arr.deliveryCount
            this.list[2].num = arr.customerCount
            // 钢瓶数据汇总
            this.list1[0].num = arr.gasCylinderCount
            if (arr.gasCylinderStat != null) {
              this.list1[1].num = arr.gasCylinderStat[0].count
            }
          }
        })
      },
      lookVideoGo(value) {
        this.$router.push({
          path: '/system/salesStore',
          query: {
            id: value
          }
        })
      },
    }
  }
</script>
<style lang="scss" scoped>
  .home {
    display: flex;
    width: 100%;
    height: 100%;
  }

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

  .card_center_home {
    position: relative;
    width: 60%;
    height: 100%;
  }

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

  .card_block1 {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 140%;
    height: 33%;
  }

  .card_block2 {
    position: absolute;
    z-index: 2;
    left: 0;
    width: 120%;
    bottom: 0;
    height: 33%;
  }

  .card_block {
    height: 33%;
  }

  .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>
