<template>
  <div class="dashboard-editor-container">

    <template >
      <div>欢迎使用机动车管理系统</div>
<!--        <div style="width: 100%;display: flex; align-items: center ">-->
<!--          <div class="haha">-->

<!--          </div>-->
<!--        </div>-->
      <el-row :gutter="20" class="panel-group">
        <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
          <div class="card-panel" >
            <div class="card-panel-icon-wrapper icon-people">
              <svg-icon icon-class="money" class-name="card-panel-icon"/>
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">
                检测进行中
              </div>
              <div style="font-size: 24px">{{threenum.workingNum}}</div>
<!--              <count-to :start-val="0" :end-val="threenum.workingNum" :duration="1600" class="card-panel-num"/>-->
            </div>
          </div>
        </el-col>

        <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
          <div class="card-panel" @click="goTab('order')">
            <div class="card-panel-icon-wrapper icon-shopping">
              <svg-icon icon-class="money" class-name="card-panel-icon"/>
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">
                今日成交金额
              </div>
              <div style="font-size: 24px">{{threenum.todayOrderAmount}}</div>
<!--              <count-to :start-val="0" :end-val="threenum.todayOrderAmount" :duration="1600" class="card-panel-num"/>-->
            </div>
          </div>
        </el-col>

        <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
          <div class="card-panel" @click="handleSetLineChartData('purchases')">
            <div class="card-panel-icon-wrapper icon-money">
              <svg-icon icon-class="money" class-name="card-panel-icon"/>
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">
                今日订单数量
              </div>
              <div style="font-size: 24px">{{threenum.todayOrderNum}}</div>
<!--              <count-to :start-val="0" :end-val="threenum.todayOrderNum" :decimals="2" :duration="1600" class="card-panel-num"/>-->
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
          <div class="card-panel" @click="goTab('user')">
            <div class="card-panel-icon-wrapper icon-people">
              <svg-icon icon-class="money" class-name="card-panel-icon"/>
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">
                当日完成
              </div>
              <div style="font-size: 24px">{{threenum.workedNum}}</div>
<!--              <count-to :start-val="0" :end-val="threenum.workedNum" :duration="1600" class="card-panel-num"/>-->
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
          <div class="card-panel" @click="goTab('user')">
            <div class="card-panel-icon-wrapper icon-people">
              <svg-icon icon-class="money" class-name="card-panel-icon"/>
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">
                总金额
              </div>
              <div style="font-size: 24px">{{threenum.orderAmount}}</div>
<!--              <count-to :start-val="0" :end-val="threenum.orderAmount" :duration="1600" class="card-panel-num"/>-->
            </div>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :lg="4" class="card-panel-col">
          <div class="card-panel" @click="goTab('user')">
            <div class="card-panel-icon-wrapper icon-people">
              <svg-icon icon-class="money" class-name="card-panel-icon"/>
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">
                总订单
              </div>
              <div style="font-size: 24px">{{threenum.orderNum}}</div>
<!--              <count-to :start-val="0" :end-val="threenum.orderNum" :duration="1600" class="card-panel-num"/>-->
            </div>
          </div>
        </el-col>
      </el-row>
      <div style="width: 100%;display: flex; align-items: center ">
<!--        三个柱状图-->
        <div style="width: 33%">
          <div style="display: flex;width: 100%; justify-content: space-between">
            <span>金额统计</span>
            <div class="lan-you">

              <div class="yi" :class="{'er' : qhindex == index}" v-for="(item,index) in zilist" :key="index" @click="gbindex(index,item.unit)"> {{item.text}}</div>
            </div>
          </div>
          <qiunVueUcharts
            :ontouch="ontouch"
            type="column"
            :opts="dopts"
            :chartData="chartData1"
          />
        </div>
          <div style="width: 33%">
            <div style="display: flex;width: 100%; justify-content: space-between">
              <span>数量统计</span>
              <div class="lan-you">

                <div class="yi" :class="{'er' : qhindex1 == index}" v-for="(item,index) in zilist" :key="index" @click="gbindex1(index,item.unit)"> {{item.text}}</div>
              </div>
            </div>
            <qiunVueUcharts
              :ontouch="ontouch"
              type="column"
              :opts="dopts"
              :chartData="chartData2"
            />
          </div>
        <div style="width: 33%">
          <div style="display: flex;width: 100%; justify-content: space-between">
            <span>检测合格率</span>
            <div class="lan-you">

              <div class="yi" :class="{'er' : qhindex2 == index}" v-for="(item,index) in zilist" :key="index" @click="gbindex2(index,item.unit)"> {{item.text}}</div>
            </div>
          </div>
          <qiunVueUcharts
            :ontouch="ontouch"
            type="column"
            :opts="dopts"
            :chartData="chartData3"
          />
        </div>

      </div>

    </template>
  </div>
</template>

<script>
  import * as echarts from 'echarts';
  import qiunVueUcharts from '../../../node_modules/@qiun/vue-ucharts'
  import {statisticsTop,chartInfoAmount,chartInfoNum,chartInfoRatio,shopInfo,} from "./api/index";
  // import CountTo from 'vue-count-to'
  export default {
    name: 'Index',
    components: {
      qiunVueUcharts,
      // CountTo
    },
    data() {
      return {
        dopts: {
          fontSize:12,
          color: ["#0D2E8D","#3CBC6F","#FF571A","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
          padding: [15,15,0,5],
          touchMoveLimit: 24,
          enableScroll: true,
          legend: {},
          xAxis: {
            disableGrid: true,
            scrollShow: true,
            itemCount: 3,
            fontSize:10,
          },
          yAxis: {
            data: [
              {
                min: 0

              }
            ]
          },
          extra: {
            column: {
              type: "group",
              width: 35,
              activeBgColor: "#000000",
              activeBgOpacity: 0.08
            }
          }
        },
        ontouch:true,
        chartData1:{},
        chartData2:{},
        chartData3:{},
        qhindex:1,
        qhindex1:1,
        qhindex2:1,
        zilist:[
          {text:'日',unit:'day'},
          {text:'周',unit:'week'},
          {text:'月',unit:'month'},
          {text:'年',unit:'year'},

        ],
        threenum:{},
        sum:1,
        partnerId:19,
        unit:'week',
        unit1:'week',
        unit2:'week',
        countPass:2,
        countNoPass:3,
        xData: ["1", "2", "3", "4","5", "6", "7", "8", "9", "10"], //横坐标
        yData: [23, 24, 18, 25, 27, 28, 25], //数据
        xData1: [ ], //横坐标
        yData1: [23, 24, 18, 25, 27, 28, 25], //数据
        xData2: [ ], //横坐标
        yData2: [23, 24, 18, 25, 27, 28, 25], //数据
        myChartStyle: { float: "left", width: "100%", height: "400px" } //图表样式

      }
    },
    mounted() {
      this.getlist()
      this.initEcharts();
      this.initEcharts1();
      this.initEcharts2();
    },
    created() {
      this.getshopInfo()

    },

    methods: {
      getshopInfo(){
        shopInfo().then(res=>{
          console.log('p',res)
        })
      },
      getlist(){
        statisticsTop(this.partnerId).then(res =>{

          let nums = {
            orderAmount : Math.trunc(res.data.orderAmount / 100) ,
            orderNum : res.data.orderNum ,
            todayOrderAmount : res.data.todayOrderAmount / 100,
            todayOrderNum : res.data.todayOrderNum ,
            workedNum : res.data.workedNum ,
            workingNum : res.data.workingNum

          }
          this.threenum = nums
        })
      },
      initEcharts() {
        let data = {
          partnerId:this.partnerId,
          unit:this.unit,
        }
        chartInfoAmount(data).then(res =>{
          let rex = res.data
          this.chartData1 = JSON.parse(JSON.stringify(rex));
          console.log('rex',this.chartData1)
        })

      },
      gbindex(index,unit){
        this.qhindex = index
        this.unit = unit
        this.initEcharts()
      },
      initEcharts1() {
        let data = {
          partnerId:this.partnerId,
          unit:this.unit,
        }
        chartInfoNum(data).then(res =>{
          console.log('柱状图2',res)
          let rex = res.data
          this.chartData2 = JSON.parse(JSON.stringify(rex));
          console.log('rex',this.chartData1)

        })

      },
      gbindex1(index,unit){
        this.qhindex1 = index
        this.unit1 = unit
        this.initEcharts1()
      },
      initEcharts2() {
        let data = {
          partnerId:this.partnerId,
          unit:this.unit,
        }
        chartInfoRatio(data).then(res =>{
          let rex = res.data
          this.chartData3 = JSON.parse(JSON.stringify(rex));
          console.log('rex',this.chartData1)

        })

      },
      gbindex2(index,unit){
        this.qhindex2 = index
        this.unit2 = unit
        this.initEcharts2()
      },

    }
  }
</script>

<style lang="scss" scoped>
  .charts-box {
    width: 500px;
    height: 300px;
  }
  .lan-you{
    display: flex;
    align-items: center;
  }
  .yi{
    cursor: pointer;
    font-size: 15px;
    font-weight: 400;
    color: #666666;
    line-height: 15px;
    margin-right: 15px;
  }
  .er{
    width: 25px;
    height: 25px;
    background: #0D2E8D;
    border-radius: 3px ;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white !important;
  }
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;
    height: 100vh;
    width: 100%;

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
  .chart-title{
    padding:10px;
    width: 100%;
    text-align: center;
    margin:0 auto;
    line-height: 18px;
    color: rgba(0, 0, 0, 0.45);
    font-size: 16px;
    font-weight: bold;
  }
  .haha{

      height: 108px;
      cursor: pointer;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      background: #fff;
      -webkit-box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
      box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
      border-color: rgba(0, 0, 0, 0.05);

  }
  .panel-group {
    margin-top: 18px;

    .card-panel-col {
      margin-bottom: 32px;
    }

    .card-panel {
      height: 108px;
      cursor: pointer;
      font-size: 12px;
      position: relative;
      overflow: hidden;
      color: #666;
      background: #fff;
      box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
      border-color: rgba(0, 0, 0, .05);

      &:hover {
        .card-panel-icon-wrapper {
          color: #fff;
        }

        .icon-people {
          background: #40c9c6;
        }

        .icon-message {
          background: #36a3f7;
        }

        .icon-money {
          background: #f4516c;
        }

        .icon-shopping {
          background: #34bfa3
        }
      }

      .icon-people {
        color: #40c9c6;
      }

      .icon-message {
        color: #36a3f7;
      }

      .icon-money {
        color: #f4516c;
      }

      .icon-shopping {
        color: #34bfa3
      }

      .card-panel-icon-wrapper {
        float: left;
        margin: 14px 0 0 14px;
        padding: 16px;
        transition: all 0.38s ease-out;
        border-radius: 6px;
      }

      .card-panel-icon {
        float: left;
        font-size: 48px;
      }

      .card-panel-description {
        float: right;
        font-weight: bold;
        margin: 26px;
        margin-left: 0px;

        .card-panel-text {
          line-height: 18px;
          color: rgba(0, 0, 0, 0.45);
          font-size: 16px;
          margin-bottom: 12px;
        }

        .card-panel-num {
          font-size: 20px;
        }
      }
    }
  }

  @media (max-width: 550px) {
    .card-panel-description {
      display: none;
    }

    .card-panel-icon-wrapper {
      float: none !important;
      width: 100%;
      height: 100%;
      margin: 0 !important;

      .svg-icon {
        display: block;
        margin: 14px auto !important;
        float: none !important;
      }
    }
  }
</style>
