<template>

  <div class="app-container" style="" :data="userstati">
  <h3>
    客户总数及新增统计
  </h3>

<div style="display: flex; flex-flow: row nowrap; border-top: 1px solid #eee;justify-content: space-start;">
    <div style="margin-left: 2%;
    width: 18%;
    margin-top: 44px;">
     <p class="sdfedc">客户总量</p>
      <div class="mbboyon"><span class="numyue">{{userstati.total}}</span>
        <span>月同比</span>

        <i class="redjiantou" v-if="userstati.huanbiStatus===0">-</i>
        <i class="redjiantou" v-if="userstati.huanbiStatus<0"><a class="ggreen"></a></i>
        <i class="redjiantou" v-if="userstati.huanbiStatus>0"><a class="rred"></a></i>

        <span>{{userstati.tongbiRatio}}</span>
      </div>

      <p class="sdfedc">本月客户新增</p>
      <div><span class="numyue">{{userstati.AddNum}}</span>
        <span>月环比</span>

        <i class="redjiantou" v-if="userstati.huanbiStatus===0">-</i>
        <i class="redjiantou" v-if="userstati.huanbiStatus<0"><a class="ggreen"></a></i>
        <i class="redjiantou" v-if="userstati.huanbiStatus>0"><a class="rred"></a></i>

        <span>{{userstati.huanbiRatio}}</span>
      </div>

    </div>

  <div style="width:80%;" class="widthboxs">
    <div id="tapswitch" style="display: flex;flex-flow: row nowrap;justify-content: space-between;">
    <div class="khtj" style="margin-top: 10px;">客户统计</div>
      <div class="switchbtn" style=" ">
    <el-button @click="changeType(1)"  type="">天</el-button>
    <el-button @click="changeType(2)">周</el-button>
    <el-button @click="changeType(3)">月</el-button>
    <el-button @click="changeType(4)">年</el-button>
    </div>


        <div class="timesblock">
          <el-date-picker v-model="timevalue1" @change="getMyDateTime()" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['12:00:00']" value-format="yyyy-MM-dd">
          </el-date-picker>
        </div>

  </div>
    <ve-line :data="showChartData" :settings="chartSettings" :legend-visible="false">
    </ve-line>
  </div>



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

<script>
  import request from '@/utils/request';
  import VeLine from 'v-charts/lib/line';
  let moment = require('moment');

  export default {
    data () {
      let date=new Date();
      let monthStart = date.setDate(1);
      let currentMonth=date.getMonth();
      let nextMonth=++currentMonth;
      let nextMonthFirstDay=new Date(date.getFullYear(),nextMonth,1);
      let oneDay=1000*60*60*24;
      let firstDay = moment(monthStart).format("YYYY-MM-DD");
      let lastDay = moment(nextMonthFirstDay-oneDay).format("YYYY-MM-DD");
      return {
        timevalue1:'',
        queryInfo: {
          startTime:firstDay,
          endTime:lastDay,
          type:'1'  //类型：1 按日统计，2 按周统计，3 按月统计，4 按年统计
        },
        userstati:[],
        listdata:[],
        yearCharData: {
          columns: ['year', 'total'],
          rows: []
        },
        monthCharData: {
          columns: ['month_s', 'total'],
          rows: []
        },
        weekCharData: {
          columns: ['creatTime', 'total'],
          rows: []
        },
        chartData: {
          columns: ['creatTime', 'total'],
          rows: []
        },
        showChartData: {},
        chartSettings: {
          labelMap:{
            //date对应后台返回json数据的key，具体值根据接口字段来修改
            creatTime:"日期",
            //total对应后台返回son数据的value，具体值根据接口字段来修改
            total:"客户数量"
          }
        }
      }
    },
    components: { VeLine },
    created() {
      // this.queryInfo.startTime=this.firstDay();
      // this.queryInfo.endTime=this.lastDay();
     this.showChartData = this.chartData;
      this.getNunMun()
    },
    methods: {
      getMyDateTime() {
        const params = this.queryInfo;
        console.log(this.timevalue1);
        this.queryInfo.startTime = this.timevalue1[0];
        this.queryInfo.endTime = this.timevalue1[1];
          this.changeType(1);
      },

      changeType(index){
        this.queryInfo.type = index;
        const params = this.queryInfo;
        request({
          url:'lit/protected/lit/platform_user/statistics',
          method:'get',
          params
        }).then((res) => {
          console.log(res);
          this.userstati =res.vo
          this.listdata =res.list
          if(this.listdata.length == 0){
            this.listdata = [
              {'creatTime':this.queryInfo.startTime,'total':0},
              {'creatTime':this.queryInfo.endTime,'total':0}
            ]
          }
          if(index == 1){
            this.chartData.rows = [];
            this.showChartData = this.chartData;
          }else if(index == 2){
            this.chartData.rows = [];
            this.showChartData = this.weekCharData;
          }else if(index == 3){
            this.monthCharData.rows = [];
            this.showChartData = this.monthCharData;
          }else if(index == 4){
            this.yearCharData.rows = [];
            this.showChartData = this.yearCharData;
          }
          for (let i in this.listdata) {
            var item = this.listdata[i];
            if(item.hasOwnProperty("creatTime")){
              item.creatTime = item.creatTime.substring(0, 10);
            }
            this.showChartData.rows.push(item);
          }
        })
      },
      getNunMun(){
        const params = this.queryInfo;
        request({
          url:'lit/protected/lit/platform_user/statistics',
          method:'get',
          params
        }).then((res) => {
          // console.log(res);
          this.userstati =res.vo
          this.listdata =res.list
          this.yearCharData.rows = [];
          this.monthCharData.rows = [];
          this.chartData.rows = [];
          if(this.listdata.length == 0){
            this.listdata = [
              {'creatTime':this.queryInfo.startTime,'total':0},
              {'creatTime':this.queryInfo.endTime,'total':0}
            ]
          }
          for (let i in this.listdata) {
            var item = this.listdata[i];
            var yearItem = {
              "year":item.year,
              "total":item.total,
              "key":item.year+"-"+item.total
            };
            this.yearCharData.rows.push(yearItem);
            var monthItem = {
              "month_s":item.month_s,
              "total":item.total,
              "key":item.month_s+"-"+item.total,
              "day":item.day
            };
            this.monthCharData.rows.push(monthItem);
            item.creatTime = item.creatTime.substring(0,10);
            item.key = item.creatTime+"-"+item.total
            this.chartData.rows.push(item);
          }

        })
      }
    }

  }
</script>
<style>
  #tapswitch{margin-top: 20px}
  /deep/ #tapswitch .el-button{margin-left:0px!important;}
  .sdfedc{display: block;
    margin: 0;}
  .mbboyon{margin-bottom: 50px;}
  .numyue{
    display: inline-block;
    font-size: 30px;
    width: 63px;
  }

.redjiantou{
  margin-top: 30px;
  width: 26px;
  display: inline-block;
  }
  .rred{
    text-decoration: none;
  }

  .rred:after{
    content: '';
    display: inline-block;

    border:6px solid transparent;
    border-top-color: red;

    position: relative;
    top: 4px;
    left: 7px;
    width: 0;
    height: 0;
  }


  .ggreen{
    transform: rotate(180deg);
    display: inline-block;
    text-decoration: none;
  }

  .ggreen:after{
    content: '';
    display: inline-block;
    border: 6px solid transparent;
    border-top-color: green;
    position: relative;
    top: 2px;
    left: -7px;
    width: 0;
    height: 0px;
  }
</style>