<template>
  <basic-container>
    <el-card>
      <el-row :gutter="50">
        <el-col :span="24">
          <el-card>
            {{userInfo.userName}} 欢迎回来
          </el-card>
          <el-card header="音乐之声-基础数据统计" v-if="permission.basic_static">
            <avue-data-rotate :option="optionMusic"></avue-data-rotate>
          </el-card>
          <br>
          <el-card header="音乐之声-财务账本" v-if="permission.account_static">
            <avue-data-display :option="option"></avue-data-display>
            <el-row>
              <el-col :span="6">
                <div align="center" id="todayOut" style="width: 100%;height: 300px;"></div>
              </el-col>
              <el-col :span="6">
                <div align="center" id="historyOut" style="width: 100%;height: 300px;"></div>
              </el-col>
              <el-col :span="6">
                <div align="center"  id="todayIn" style="width: 100%;height: 300px;"></div>
              </el-col>
              <el-col :span="6">
                <div align="center"  id="historyIn" style="width: 100%;height: 300px;"></div>
              </el-col>
            </el-row>
          </el-card>
          <el-card header="音乐之声-佣金结算统计" v-if="permission.ordercommission_static">

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

              <el-col :span="24">
                <div id="orderStatistics" style="width: 100%;height: 600px;">
                </div>
              </el-col>
            </el-row>
            <!-- 图形 -->

          </el-card>


        </el-col>

      </el-row>
    </el-card>
  </basic-container>
</template>
<script>
  import request from '@/router/axios';
  import echarts from "echarts";
  import {
    mapGetters
  } from "vuex";
  export default {

    data() {
      return {
        buttonDay: "primary",
        buttonMonth: "",
        selectDate: [],
        dateType: "daterange",
        dataPlace: "选择日期",
        query: {
          staticType: 1
        },
        option: {
          span: 6,
          data: [{
              click: function() {

              },
              count: 100,
              decimals: 2,
              title: '今日提现',

            },
            {
              click: function() {

              },
              count: 100,
              decimals: 2,
              title: '历史提现',

            },
            {
              click: function() {

              },
              count: 100,
              decimals: 2,
              title: '今日收入',

            },
            {
              click: function() {},
              count: 100,
              decimals: 2,
              title: '历史收入',

            }
          ]
        },
        optionMusic: {
          span: 6,
          data: [{
              title: '用户总数',
              count: 0,
              icon: 'el-icon-user',
              color: 'rgb(56, 161, 242)',
              click: () => {
                this.$router.push("/loginuser/loginuser");
              },
            },
            {
              click: () => {
                this.$router.push("/guosen/agenter");
              },
              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("/activity/activity");
              },
            },
            {
              title: '商品总数',
              count: 0,
              icon: 'el-icon-shopping-cart-full',
              color: 'rgb(49, 180, 141)',
              click: () => {
                this.$router.push("/userpointsgoods/userpointsgoods");
              },
            },

          ]
        },

        optionTodayOut: {
          title: {
            text: '今日提现去向',

            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },

          series: [{
            name: '今日提现去向',
            type: 'pie',
            radius: '70%',
            data: [{
                value: 0,
                name: '用户'
              },
              {
                value: 0,
                name: '代理'
              },
              {
                value: 0,
                name: '广告商'
              },
              {
                value: 0,
                name: '运营商'
              },
              {
                value: 0,
                name: '主办方'
              },

            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        },
        optionHistoryOut: {
          title: {
            text: '历史提现去向',

            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },

          series: [{
            name: '历史提现去向',
            type: 'pie',
            radius: '70%',
            data: [{
                value: 0,
                name: '用户'
              },
              {
                value: 0,
                name: '代理'
              },
              {
                value: 0,
                name: '广告商'
              },
              {
                value: 0,
                name: '运营商'
              },
              {
                value: 0,
                name: '主办方'
              },

            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        },
        optionTodayIn: {
          title: {
            text: '今日收入来源',

            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },

          series: [{
            name: '今日收入来源',
            type: 'pie',
            radius: '70%',
            data: [{
                value: 0,
                name: '用户'
              },
              {
                value: 0,
                name: '代理'
              },
              {
                value: 0,
                name: '广告商'
              },

            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        },
optionHistoryIn: {
          title: {
            text: '历史收入来源',

            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },

          series: [{
            name: '历史收入来源',
            type: 'pie',
            radius: '70%',
            data: [{
                value: 40.06,
                name: '用户'
              },
              {
                value: 0,
                name: '代理'
              },
              {
                value: 0,
                name: '广告商'
              },

            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        },

      }
    },
    computed: {
      ...mapGetters(["permission", "userInfo"])

    },
    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.getData();
      this.getOrderCommissionData();
      this.getAccoutStatic()

    },
    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 = "选择月份";
      },
      getAccoutStatic() {
        request({
          url: '/api/cyzh-static/staticAccountStatic',
          method: "get",
        }).then(res => {
          //今日提现
          let todayOut = res.data.data.todayOut;
          this.optionTodayOut.series[0].data[0].value = todayOut.userOut;
          this.optionTodayOut.series[0].data[1].value = todayOut.proxyOut;
          this.optionTodayOut.series[0].data[2].value = todayOut.adsOut;
          this.optionTodayOut.series[0].data[3].value = todayOut.operationOut;
          this.optionTodayOut.series[0].data[4].value = todayOut.sponsorOut;
          this.option.data[0].count = todayOut.total;
          //历史提现
          let historyOut = res.data.data.totalOut;
          this.optionHistoryOut.series[0].data[0].value = historyOut.userOut;
          this.optionHistoryOut.series[0].data[1].value = historyOut.proxyOut;
          this.optionHistoryOut.series[0].data[2].value = historyOut.adsOut;
          this.optionHistoryOut.series[0].data[3].value = historyOut.operationOut;
          this.optionHistoryOut.series[0].data[4].value = historyOut.sponsorOut;
          this.option.data[1].count = historyOut.total;

          //今日收入
          let todayIn = res.data.data.todayIn;
          this.optionTodayIn.series[0].data[0].value = todayIn.userIn;
          this.optionTodayIn.series[0].data[1].value = todayIn.proxyIn;
          this.optionTodayIn.series[0].data[2].value = todayIn.adsIn;

          this.option.data[2].count = todayIn.total;
          //历史收入
          let historyIn = res.data.data.totalIn;
          this.optionHistoryIn.series[0].data[0].value = historyIn.userIn;
          this.optionHistoryIn.series[0].data[1].value = historyIn.proxyIn;
          this.optionHistoryIn.series[0].data[2].value = historyIn.adsIn;

          this.option.data[3].count = historyIn.total;


          this.drawPie();
        })
      },
      getOrderCommissionData() {
        this.query.beginDate = this.selectDate[0];
        this.query.endDate = this.selectDate[1];
        request({
          url: '/api/cyzh-static/staticOrderCommission',
          method: "post",
          data: this.query
        }).then(res => {

          this.drawRealDemandLine(res.data.data.dateList, res.data.data.unClearList, res.data.data.clearedList)



        })
      },
      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;
        })
      },
      handleStatic() {
        this.getOrderCommissionData();
      },

      drawPie() {
        let todayOutChart = echarts.init(document.getElementById('todayOut'));
        todayOutChart.setOption(this.optionTodayOut);

        let histroyOuntChart = echarts.init(document.getElementById('historyOut'));
        histroyOuntChart.setOption(this.optionHistoryOut);

        let todayInChart = echarts.init(document.getElementById('todayIn'));
        todayInChart.setOption(this.optionTodayIn);

        let historyInChart = echarts.init(document.getElementById('historyIn'));
        historyInChart.setOption(this.optionHistoryIn);
      },
      //柱形图
      drawRealDemandLine(dateList, unclearDataList, clearedDataList) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('orderStatistics'))
        // 基于准备好的dom，初始化echarts实例
        // 绘制图表
        myChart.setOption({
          title: {
            text: ''
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: { //直角坐标系内绘图网格
            show: true, //是否显示直角坐标系网格。[ default: false ]
            left: "10%", //grid 组件离容器左侧的距离。
            right: "30px",
            borderColor: "#c45455", //网格的边框颜色
            bottom: "20%" //
          },
          legend: {
            data: ['待结算', '已结算'],
            show: true,
          },
          // x轴拖动
          dataZoom: [{
            type: "slider",
            realtime: true, //拖动滚动条时是否动态的更新图表数据
            height: 25, //滚动条高度
            start: 0, //滚动条开始位置（共100等份）
            end: 100 //结束位置（共100等份）
          }],

          xAxis: {
            data: dateList,
            axisLabel: { //坐标轴刻度标签的相关设置。
              interval: 0,
              rotate: "45"
            }
          },
          yAxis: {},
          series: [{
            name: '待结算',
            type: 'bar',
            stack: '佣金',
            data: unclearDataList
          }, {
            name: '已结算',
            type: 'bar',
            stack: '佣金',
            data: clearedDataList
          }]
        });
      }
    }

  }
</script>
