<template>
  <basic-container>
    <el-card>
      <el-row :gutter="50">
        <el-col :span="24">
          <el-card header="音乐之声">
            <avue-data-rotate :option="optionMusic"></avue-data-rotate>
          </el-card>
          <br>
          <el-card header="结算统计">



            <el-button-group>
              <el-col :span="12">
                <el-button size="small" :type="buttonDay" icon="el-icon-document" @click="handleDay">按日
                </el-button>
              </el-col>
              <el-col :span="12">
                <el-button size="small" :type="buttonMonth" icon="el-icon-data-line" @click="handleMonth">按月
                </el-button>
              </el-col>
            </el-button-group>

            <el-date-picker value-format="yyyy-MM-dd" size="small" v-model="selectDate" :type="dateType" :placeholder="dataPlace">
            </el-date-picker>
            <el-button-group>

              <el-col :span="12">
                <el-button size="small" :type="buttonChart" icon="el-icon-data-line" @click="handleStatic">统计
                </el-button>
              </el-col>

            </el-button-group>


          </el-card>


        </el-col>

      </el-row>
    </el-card>
  </basic-container>
</template>
<script>
  import request from '@/router/axios';

  export default {

    data() {
      return {
        selectDate: [],
        dateType: "daterange",
        dataPlace: "选择日期",
        query: {
          staticType: 1
        },
        optionMusic: {
          span: 6,
          data: [{
              title: '用户总数',
              count: 0,
              icon: 'el-icon-user',
              color: 'rgb(56, 161, 242)',
              click: () => {
                this.$router.push("/broadcast/teacher");
              },
            },
            {
              click: () => {
                this.$router.push("/yjhutong/annualactivity");
              },
              title: '代理总数',
              count: 0,
              icon: 'el-icon-s-custom',
              color: 'rgb(3,180,144)',
            },
            {
              title: '活动总数',
              count: 0,
              icon: 'el-icon-s-flag',
              color: 'rgb(105,184,242)',
              click: () => {
                this.$router.push("/yjhutong/developprocess");
              },
            },
            {
              title: '商品总数',
              count: 0,
              icon: 'el-icon-shopping-cart-full',
              color: 'rgb(49, 180, 141)',
              click: () => {
                this.$router.push("/pay/payrecord");
              },
            },

          ]
        },




      }
    },
    mounted() {
      // this.type = this.tabsOption.column[0];
      let befDate = new Date();
      let byear = befDate.getFullYear();
      let bmonth = befDate.getMonth() + 1;
      let bday = befDate.getDate();
      let startTime = `${byear}-${bmonth}-${bday}`;
      this.selectDate = [startTime, startTime];
      this.query.status = 0;
      this.getData();
    },
    methods: {
      //按日
      handleDay() {
        this.buttonDay = "primary";
        this.buttonMonth = "";
        this.query.staticType = 1;
        this.dateType = "daterange";
        this.dataPlace = "选择日期";
      },

      //按月
      handleMonth() {
        this.buttonDay = "";
        this.buttonMonth = "primary";
        this.query.staticType = 2;
        this.dateType = "monthrange";
        this.dataPlace = "选择月份";
      },
      getData() {
        request({
          url: '/api/cyzh-static/static',
          method: "get"
        }).then(res => {
          const resData = res.data.data;
          this.optionMusic.data[0].count = resData.userCount;
          this.optionMusic.data[1].count = resData.agenterCount;
          this.optionMusic.data[2].count = resData.activityCount;
           this.optionMusic.data[3].count = resData.shopCount;
          // if (resData.broadcastPayCount != null) {
          //   var broadcastPayCountTem = resData.broadcastPayCount.toString();
          //   var array = broadcastPayCountTem.split(".");
          //   if (array.length == 2) {

          //     this.optionHyl.data[3].count = array[0] + " ." + array[1];
          //   } else {
          //     this.optionHyl.data[3].count = broadcastPayCountTem;
          //   }
          // }else{
          //    this.optionHyl.data[3].count = 0;
          // }


          // // console.log(this.optionHyl.data[3].count)
          // // console.log(resData.broadcastPayCount.toFixed(2))
          // this.toolData = resData.toolData;
          // this.echartUser.series[0].data = resData.userDistributionData;
          // this.optionUser.data[0].count = resData.userCount;
          // this.optionCourse.data[0].count = resData.broadcastCount;
          // this.optionCourse.data[1].count = resData.chaptersCount;
          // this.optionCourse.data[2].count = resData.videoCount;
          // this.optionCourse.data[3].count = resData.videoCount_display;
          // this.optionCourse.data[4].count = resData.videoCount_playing;
          // this.optionCourse.data[5].count = resData.videoCount_played;
          // this.echartCourse.xAxis.data = resData.dayOfServen;
          // this.echartCMS.xAxis.data = resData.dayOfServen;
          // this.echartCoursePay.xAxis.data = resData.dayOfServen;
          // this.echartCoursePay.series[0].data = resData.broadcastAllPayCountDayOfServen;
          // this.echartCourse.series[0].data = resData.broadcastCountDayOfServen;
          // this.echartCourse.series[1].data = resData.chaptersCountDayOfServen;
          // this.echartCourse.series[2].data = resData.videoCountDayOfServen;
          // this.echartCMS.series[0].data = resData.articleCountDayOfServen;
          // this.echartCMS.series[1].data = resData.articleReadCountDayOfServen;
          // this.echartCMS.series[2].data = resData.articleRelayCountDayOfServen;
          // this.echartCMS.series[3].data = resData.articleCollectCountDayOfServen;
          // this.optionCMS.data[0].count = resData.articleCount;
          // this.optionCMS.data[1].count = resData.articleReadCount;
          // this.optionCMS.data[2].count = resData.articleRelayCount;
          // this.optionCMS.data[3].count = resData.articleCollectCount;


        })
      },
      pushToTool() {
        console.log("totOol")
        this.$router.push("/tool/tool");
      },
      pushToToolUse() {
        this.$router.push("/tool/tooluse");
      }
    }

  }
</script>
