<template>
  <div class="content">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>商城引荐看板</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- gmv目标 gmv数据 -->
    <div class="gmv-board">
      <div class="card-module gmv-goal">
        <p class="card-title">本年度引荐人销售额占比</p>
        <div id="finishCircle"></div>
        <!-- <p>完成进度</p> -->
        <p class="grey-line">引荐人销售额/商城总销售额</p>
        <!-- <p class="grey-line">{{gmvTarget.startYm}}-{{gmvTarget.endYm}}</p> -->
      </div>
      <div class="card-module gmv-data">
        <div class="month-wrapper">
          <div class="card-title">商城引荐数据</div>
          <div class="month-select">
            <div @click="lastMonth">
              <i class="el-icon-arrow-left"></i>
              上月
            </div>
            <div class="current-month">{{current}}</div>
            <div :class="[isMax?'disable-select':'']" @click="nextMonth">
              下月
              <i class="el-icon-arrow-right"></i>
            </div>
          </div>
        </div>
        <div class="data-progress">
           <div class="progress-1">
            <p>
              <span class="bold-font">{{wholeData['当月商城销售额']}}</span>
            </p>
            <p>当月商城销售额</p>
          </div>
          <div class="progress-1">
            <p>
              <span class="bold-font">{{wholeData['当月销售额']}}</span>
            </p>
            <p>当月引荐人销售额</p>
          </div>
          <div class="progress-2">
            <p>{{wholeData['引荐人占比']}}</p>
            <p>引荐人占比</p>
          </div>
          <div class="progress-3">
            <p>{{wholeData['当月退款']}}</p>

            <!-- <p
              class="up-arrow"
              v-if="gmvDataSale.currMonthRefund>0"
            >{{gmvDataSale.currMonthRefundRatio}}↑</p>
            <p class="down-arrow" v-if="gmvDataSale.currMonthRefund<=0">
              {{gmvDataSale.currMonthRefundRatio}}
              <span v-if="gmvDataSale.currMonthRefund<0">↓</span>
            </p> -->
            <p>当月退款额</p>
          </div>
          <div class="progress-4">
            <p>
              {{wholeData['环比上月销售额']}}
              <!-- <span
                class="up-arrow"
                v-if="gmvDataSale.lastMonthGMV>0"
              >↑</span>
              <span class="down-arrow" v-if="gmvDataSale.lastMonthGMV<0">↓</span>-->
            </p>
            <!-- <p class="up-arrow" v-if="gmvDataSale.lastMonthGMV>0">{{gmvDataSale.lastMonthGRatio}}↑</p>
            <p class="down-arrow" v-if="gmvDataSale.lastMonthGMV<=0">
              {{gmvDataSale.lastMonthGRatio}}
              <span v-if="gmvDataSale.lastMonthGMV<0">↓</span>
            </p> -->
            <p>环比上月</p>
          </div>
          <div class="progress-5">
            <p>
              <!-- {{gmvDataSale.beforeYearGMV}} -->
              <!-- <span
                class="up-arrow"
                v-if="gmvDataSale.beforeYearGMV>0"
              >↑</span>
              <span class="down-arrow" v-if="gmvDataSale.beforeYearGMV<0">↓</span> -->
            </p>

            <!-- <p class="up-arrow" v-if="gmvDataSale.beforeYearGMV>0">{{gmvDataSale.beforeYearGRatio}}↑</p>
            <p class="down-arrow" v-if="gmvDataSale.beforeYearGMV<=0">
              {{gmvDataSale.beforeYearGRatio}}
              <span v-if="gmvDataSale.beforeYearGMV<0">↓</span>
            </p> -->
            <p>同比去年</p>
          </div>
        </div>

        <div class="data-progress">
           <div class="progress-1">
            <p>
              <span class="bold-font">{{wholeData['当月代客下单销售额']}}</span>
            </p>
            <p>当月代客下单额</p>
          </div>
          <div class="progress-1">
            <p>
              <span class="bold-font">{{wholeData['客单均价']}}</span>
            </p>
            <p>客单均价</p>
          </div>
          <div class="progress-2">
            <p>{{wholeData['当月新增引荐人']}}</p>
            <p>当月新增引荐人数</p>
          </div>
          <div class="progress-3">
            <p>
              {{wholeData['较上月新增引荐人']}}
              <!-- <span
                class="up-arrow"
                v-if="gmvDataService.lastMonthGMV>0"
              >↑</span>
              <span class="down-arrow" v-if="gmvDataService.lastMonthGMV<0">↓</span> -->
            </p>

            <!-- <p
              class="up-arrow"
              v-if="gmvDataService.lastMonthGMV>0"
            >{{gmvDataService.lastMonthGRatio}}↑</p>
            <p class="down-arrow" v-if="gmvDataService.lastMonthGMV<=0">
              {{gmvDataService.lastMonthGRatio}}
              <span v-if="gmvDataService.lastMonthGMV<0">↓</span>
            </p> -->
            <p>较上月变化</p>
          </div>
          <div class="progress-4">
            <p>
              {{wholeData['当月新增直客']}}
              <!-- <span
                class="up-arrow"
                v-if="gmvDataService.beforeYearGMV>0"
              >↑</span>
              <span class="down-arrow" v-if="gmvDataService.beforeYearGMV<0">↓</span> -->
            </p>

            <!-- <p
              class="up-arrow"
              v-if="gmvDataService.beforeYearGMV>0"
            >{{gmvDataService.beforeYearGRatio}}↑</p>
            <p class="down-arrow" v-if="gmvDataService.beforeYearGMV<=0">
              {{gmvDataService.beforeYearGRatio}}
              <span v-if="gmvDataService.beforeYearGMV<0">↓</span>
            </p> -->
            <p>当月新增直客数</p>
          </div>
          <div class="progress-5">
            <p>{{wholeData['较上月新增直客数']}}</p>

            <p>较上月变化</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 复购情况 -->
    <div class="sale-board card-module">
      <p>管理指标</p>
      <div class="sale-detail">
        <div class="sale-item">
          <p>
            <!-- <span class="blue-font">{{buyAgenDatas.buyAgainAmount}}</span>万 -->
           累计引荐人数：{{wholeData['累计引荐人数']}}
          </p>
          <p>累计直客人数：{{wholeData['累计直客人数']}}</p>
        </div>
        <div class="sale-item">
          <!-- <p class="blue-font">{{buyAgenDatas.buyAgainRatio}}</p>

          <el-tooltip class="item" effect="dark" content="开单金额，销售GMV" placement="top">
            <el-button type="text">复购占比</el-button>
          </el-tooltip> -->
          <p>转化率：{{wholeData['转化率']}}</p>
          <p>平均转化天数：{{wholeData['平均转化天数']}}</p>
        </div>
        <div class="devide-line"></div>
        <div class="sale-item">
          <!-- <p>
            <span v-if="buyAgenDatas.thanlastbA>0">增</span>
            <span v-if="buyAgenDatas.thanlastbA<0">减</span>
            {{buyAgenDatas.thanlastbA}} 万 {{buyAgenDatas.thanlastbARatio}}
            <span
              class="up-arrow"
              v-if="buyAgenDatas.thanlastbA>0"
            >↑</span>
            <span class="down-arrow" v-if="buyAgenDatas.thanlastbA<0">↓</span>
          </p> -->
          <p>{{wholeData['当月引荐人活跃度']}}</p>
          <p>引荐人活跃度</p>
        </div>
        <div class="sale-item">
          <p>{{wholeData['日均销售额']}}</p>
          <p>日均销售额</p>
          <!-- <el-tooltip class="item" effect="dark" content="当月保洁新客数/当月保洁客户数" placement="top">
            <el-button type="text">保洁新客率</el-button>
          </el-tooltip> -->
        </div>
        <div class="sale-item">
          <p>当月返佣:{{wholeData['当月返佣金额']}}</p>
          <p>申请提现:{{wholeData['当月提现申请金额']}}</p>
          <!-- <el-tooltip class="item" effect="dark" content="当月品类新客数/当月品类客户数" placement="top">
            <el-button type="text">品类新客率</el-button>
          </el-tooltip> -->
        </div>
        <div class="sale-item">
          <p>{{wholeData['当月引荐人均返佣金额']}}</p>
          <p>引荐人均返佣金额</p>
          <!-- <el-tooltip class="item" effect="dark" content="已签单线索数/创建线索数" placement="top">
            <el-button type="text">保姆线索转化率</el-button>
          </el-tooltip> -->
        </div>
        <!-- <div class="sale-item">
          <p>{{buyAgenDatas.chenjikehu}}人</p>
           <el-tooltip class="item" effect="dark"  placement="top">
      <div slot="content">已服务完成<br/>未来30天内无其他订单</div>
      <el-button type="text">沉寂客户数</el-button>
    </el-tooltip>
        </div>-->
      </div>
    </div>
    <div class="module-wrapper">
      <el-card shadow="hover" class="card-left">
        <!-- 搜索 -->
        <el-form :inline="true" size="small" v-model="listQuery">
          <el-form-item label="城市">
            <el-select v-model="listQuery.city" clearable placeholder="请选择城市">
              <el-option
                v-for="(item,index) in cityList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </el-form-item>
       

          <el-form-item label="时间颗粒度">
            <el-select v-model="listQuery.timeType" placeholder="请选择时间颗粒度">
              <el-option label="天" value="2"></el-option>
              <el-option label="月" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间范围" v-if="listQuery.timeType==2">
            <el-date-picker
              v-model="listQuery.createTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
              @change="dateChange"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="时间范围" v-if="listQuery.timeType==1">
            <el-date-picker
              v-model="listQuery.createTime1"
              type="monthrange"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              value-format="yyyy-MM"
              :picker-options="pickerOptions1"
              @change="dateChange1"
            ></el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-button icon="el-icon-search" type="primary" @click="getNewAdditionsAndSalesTrendsAndHighestSalesProducts()">查询</el-button>
          </el-form-item>
        </el-form>
        <!-- style="overflow-x: auto;" -->
        <div>
          <!-- <div id="mainChart" :style="'width:'+mywidth_1+'px'"></div> -->
          <div id="mainChart"></div>
        </div>
      </el-card>
      <!-- 业务线进度看板 -->
      <el-card shadow="hover" class="card-right">
        <!-- style="max-height:800px;overflow-y:scroll;"  height="800" -->
        <el-table
          :data="tableData"
          height="800px"
        >
          <el-table-column label="当月销售高的产品排名" header-align="center">
            <el-table-column label="商品分类" prop="商品分类"></el-table-column>
            <el-table-column label="销售单量" prop="销售单量"></el-table-column>
            <el-table-column label="均价" prop="均价"></el-table-column>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import Service from "../script/api/service";
import globalData from "@/components/common/globaldata/global.data.vue";
export default {
  name: "saleGmv",
  data() {
    return {
      wholeData:{
        '客单均价': "",
'平均转化天数': "",
'年度销售额占比': "0%",
'引荐人占比': "0%",
'当月引荐人均返佣金额':'',
'当月引荐人活跃度': "0%",
'当月提现申请金额': "",
'当月新增引荐人': "",
'当月新增直客': "",
'当月返佣金额':'',
'当月退款': "",
'当月销售额': "",
'环比上月销售额':'',
'累计引荐人数': "",
'累计直客人数': "",
'转化率': "0%",
'较上月新增引荐人':'',
'较上月新增直客数':'',
'日均销售额':''
      },
      channelList: [],
      isMax: true,
      current: "",
      gmvTarget: {
        totalTargetNumber: 10000000,
        startYm: "2021-09",
        endYm: "2021-10",
        completionRatio: "60%"
      },
      gmvDataSale: {},
      gmvDataService: {},
      buyAgenDatas: {},
      mywidth_1: 900,
      cityList: [],
      stationList: [],
      allStationList: [],
      displayList: [], //业务线 接口返回
      levelOneList_a: [], //一级分类
      levelTwoList_a: [], //二级分类
      listQuery: {
        city: '',
        timeType: "2",
        createTime: "",
        createTime1: ""
       
      },

    
      tableData: [],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近半个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      pickerOptions1: {
        shortcuts: [
          {
            text: "今年至今",
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 12);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  mounted() {
    let token = this.$route.query.token;
    // console.log(token);
    let currentTime = new Date().getTime();
    let currentDate = this.formateDay(
      new Date(currentTime - 3600 * 1000 * 24 * 1)
    );

    let startDate = this.formateDay(
      new Date(currentTime - 3600 * 1000 * 24 * 15)
    );
    let beginMonth = this.formateMonth(
      new Date(currentTime - 3600 * 1000 * 24 * 365)
    );
    let endMonth = this.formateMonth(new Date());
    this.listQuery.createTime = [startDate, currentDate];
    this.listQuery.createTime1 = [beginMonth, endMonth];
    let today = new Date();
    let year = today.getFullYear();
    let month = today.getMonth() + 1;
    month = month >= 10 ? month : "0" + month;

    this.current = year + "-" + month;
    this.cityList =  JSON.parse(window.localStorage.getItem("allSelfCity"));
    this.listQuery.city = this.cityList[0];
     this.getShopReferenceIndexAndoverAllIndex();
     this.getNewAdditionsAndSalesTrendsAndHighestSalesProducts();
    // this.getCSGmvTarget();
    // this.getCSGmvData();
  },
  methods: {
  
    formatNumber(nStr) {
      nStr += ""; //数字转换为字符
      let x, x1, x2;
      if (nStr.indexOf(".") != -1) {
        x = nStr.split("."); //按照小数点分隔
        x1 = x[0]; //整数部分
        x2 = x.length > 1 ? "." + x[1] : ""; //小数部分
      } else {
        x1 = nStr;
        x2 = "";
      }

      const rgx = /(\d+)(\d{3})/; //正则式定义
      while (rgx.test(x1)) {
        //正则式匹配
        x1 = x1.replace(rgx, "$1" + "," + "$2"); //正则式替换
      }
      return x1 + x2;
    },

    getCSGmvData(date) {
      let temp = {
        // yearMonth: moment(new Date()).format("YYYY-MM")
        yearMonth: this.current
      };

      Service.$axiosGetCSGmvData(temp)
        .then(res => {
          // console.log(res);
          this.gmvDataSale = res.data.data.gmvDataSale;
          this.gmvDataService = res.data.data.gmvDataService;
          this.buyAgenDatas = res.data.data.buyAgenDatas;
          this.tableData1 = res.data.data.buzLineProgress;
          this.tableData2 = res.data.data.baomuProgress;
        })
        .catch(err => {
          // console.log(err);
        });
    },
    getShopReferenceIndexAndoverAllIndex() {
      Service.$axiosShopReferenceIndexAndoverAllIndex({month:this.current})
        .then(res => {
          // console.log(res);
          this.wholeData=res.data.data.resultIndex[0];
          // this.gmvTarget = res.data.data;
          this.initFinishCircle();
        })
        .catch(err => {
          // console.log(err);
        });
    },
    initMainChart(name, id) {
      var chartDom = document.getElementById(id);
      var myChart = this.$echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "销售gmv趋势图"
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          data: ["邮件营销", "联盟广告", "视频广告", "直接访问", "搜索引擎"]
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            // boundaryGap: false,
            data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "邮件营销",
            type: "line",
            stack: "总量",
            areaStyle: {},
            emphasis: {
              focus: "series"
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: "联盟广告",
            type: "line",
            stack: "总量",
            areaStyle: {},
            emphasis: {
              focus: "series"
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: "视频广告",
            type: "line",
            stack: "总量",
            areaStyle: {},
            emphasis: {
              focus: "series"
            },
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: "直接访问",
            type: "line",
            stack: "总量",
            areaStyle: {},
            emphasis: {
              focus: "series"
            },
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: "搜索引擎",
            type: "line",
            stack: "总量",
            label: {
              show: true,
              position: "top"
            },
            areaStyle: {},
            emphasis: {
              focus: "series"
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      };

      option && myChart.setOption(option);
    },
    initFinishCircle() {
      var chartDom = document.getElementById("finishCircle");
      var myChart = this.$echarts.init(chartDom);
      var option;
      // let value=((gmvTarget.completionRatio)*100);
      // console.log(this.wholeData['年度销售额占比']);
      let value = Number(
        this.wholeData['年度销售额占比'].replace("%", "")
      ).toFixed(2);
      option = {
        series: [
          {
            type: "gauge",
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 1,
                borderColor: "#464646"
              }
            },
            axisLine: {
              lineStyle: {
                width: 30
              }
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false,
              distance: 50
            },
            data: [
              {
                value: value,
                name: "销售额占比",
                title: {
                  offsetCenter: ["0%", "-10%"]
                },
                detail: {
                  offsetCenter: ["0%", "10%"]
                }
              }
            ],
            title: {
              fontSize: 14
            },
            detail: {
              width: 50,
              height: 14,
              fontSize: 14,
              color: "auto",
              borderColor: "auto",
              borderRadius: 20,
              borderWidth: 1,
              formatter: "{value}%"
            }
          }
        ]
      };

      // option && myChart.setOption(option);

      myChart.setOption(option, true);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
   
    dateChange(e) {
      if (e != null) {
        let start = new Date(e[0]).getTime();
        let end = new Date(e[1]).getTime();
        let isOvertime = end - start - 3600 * 1000 * 24 * 30 > 0;
        if (isOvertime) {
          this.$message.warning("选中时间范围不能超过一个月");
          this.listQuery.createTime = null;
        }
      }
    },
    dateChange3(e) {
      if (e != null) {
        let start = new Date(e[0]).getTime();
        let end = new Date(e[1]).getTime();
        let isOvertime = end - start - 3600 * 1000 * 24 * 30 > 0;
        if (isOvertime) {
          this.$message.warning("选中时间范围不能超过一个月");
          this.listQuery1.createTime = null;
        }
      }
    },
    dateChange1(e) {
      // console.log(this.listQuery.createTime1);
      if (e != null) {
        let start =
          new Date(e[0]).getFullYear() * 12 + new Date(e[0]).getMonth();
        let end = new Date(e[1]).getFullYear() * 12 + new Date(e[1]).getMonth();
        let isOvertime = end - start - 12 > 0;
        if (isOvertime) {
          this.$message.warning("选中时间范围不能超过一年");
          this.listQuery.createTime1 = null;
        }
      }
    },
   

    getCityStation() {
      Service.$axiosGetUserAuthBuzData({
        userId: globalData.userInfo.id
      }).then(res => {
        if (res.data.errno == "0") {
          this.cityList = res.data.data.userCityDataList;
          this.listQuery.city = res.data.data.userCityDataList[0].dataName.split(
            ","
          );
          this.listQuery1.city = res.data.data.userCityDataList[0].dataName.split(
            ","
          );
          // console.log(this.listQuery.city);
          this.getCSTrendchart();
          //  this.getOrderNumberchart();
          // this.allStationList = res.data.data.storeStation;
        } else {
          this.$message.warning(res.data.errmsg);
        }
      });
    },
 
    getNewAdditionsAndSalesTrendsAndHighestSalesProducts() {
      let params = {};
      if (this.listQuery.timeType == 2) {
        if (this.isEmptyObjVue(this.listQuery.createTime)) {
          this.$message.warning("请选择日期");
          return false;
        }

        params = {
          startTime: !this.isEmptyObjVue(this.listQuery.createTime)
            ? this.listQuery.createTime[0]
            : "",
          endTime: !this.isEmptyObjVue(this.listQuery.createTime)
            ? this.listQuery.createTime[1]
            : "",
          city: this.listQuery.city,
          timeType: "2"
         
        };
      } else {
        if (this.isEmptyObjVue(this.listQuery.createTime1)) {
          this.$message.warning("请选择日期");
          return false;
        }
        params = {
          startMonth: !this.isEmptyObjVue(this.listQuery.createTime1)
            ? this.listQuery.createTime1[0]
            : "",
          endMonth: !this.isEmptyObjVue(this.listQuery.createTime1)
            ? this.listQuery.createTime1[1]
            : "",
          city: this.listQuery.city,
          timeType: "1"

        };
      }

      Service.$axiosNewAdditionsAndSalesTrendsAndHighestSalesProducts(params).then(res => {
        // console.log(res);
        if (res.data.errno == 0) {
          this.tableData=res.data.data.goods;
          this.initEchart(res.data.data, "mainChart", "新增人数与销售额走势");
        } else {
          this.$message.warning(res.data.errmsg);
        }
      });
    },
 
  
    initEchart(data, chartName, name) {
      var myChart = this.$echarts.init(document.getElementById(chartName));

      let dateList = (this.listQuery.timeType=='2'? data['日期']:data['月份']);

      let legendList = ['新增会员数','新增引荐人数','新增直客数','销售额'];
      let yAxisList = [
    {
      name: '新增会员数',
      type: 'bar',
      data: data['会员']
    },
    {
      name: '新增引荐人数',
      type: 'bar',
      data: data['引荐人新增']
    },
    {
      name: '新增直客数',
      type: 'bar',
      data: data['直客']
    },
    {
      name: '销售额',
      type: 'line',
      yAxisIndex: 1,
      data: data['销售额']
    }
  ];
    
// console.log(yAxisList);
      let option = {
        title: {
          text: name
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985"
            }
          }
        },
        legend: {
          data: legendList,
          bottom: 0
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        // grid: {
        //   left: "3%",
        //   right: "4%",
        //   bottom: "3%",
        //   containLabel: true
        // },
        xAxis: [
          {
            type: "category",
            // boundaryGap: false,
            data: dateList,
            axisLabel: { interval: 0, rotate: 30 }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "新增会员数/新增引荐人数/新增直客数",
            axisLabel: {
              formatter: "{value} 人"
            }
          },

          {
            type: "value",
            name: "销售额",

            axisLabel: {
              formatter: "{value} 元"
            }
          }
        ],
        series: yAxisList
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option, true);
      // myChart.resize();
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },

    initEchart1(data, chartName, text) {
      var myChart = this.$echarts.init(document.getElementById(chartName));

      let dateList = [];
      if (chartName == "mainChart1") {
        dateList = data.months;
      } else {
        dateList = data.timeList;
        if (dateList.length > 12) {
          this.mywidth_1 = 900 + dateList.length * 40;
          setTimeout(() => {
            myChart.resize();
          }, 500);
        }
      }

      let pwaList = data.pwaList;
      let legendData = [];
      pwaList.forEach(item => {
        legendData.push(item.name);
        if (item.type == "line") {
          item.yAxisIndex = 1;
        }
      });
      // 指定图表的配置项和数据
      var colors = ["#5793f3", "#d14a61", "#675bba"];

      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999"
            }
          }
        },
        grid: {
          //  top:'20%',
          right: "20%"
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        title: {
          left: "center",
          text: text
        },
        legend: {
          //     type: 'scroll',
          orient: "vertical",
          right: 0,
          top: 150,
          // bottom: 20,
          data: legendData
        },
        xAxis: [
          {
            type: "category",
            data: dateList,
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value",

            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed"
              }
            },

            name: "实销额（单位：元）",
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[2]
              }
            },
            axisLabel: {
              formatter: "{value} 元"
            }
          },
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed"
              }
            },
            name: "单量计数（单位：个）",
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[0]
              }
            },
            axisLabel: {
              formatter: "{value} 个"
            }
          }
        ],
        series: pwaList
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option, true);
      // myChart.resize();
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
    //获取上个月
    getPreMonth(date) {
      var arr = date.split("-");
      var year = arr[0]; //获取当前日期的年份
      var month = arr[1]; //获取当前日期的月份
      var day = arr[2]; //获取当前日期的日
      var days = new Date(year, month, 0);
      days = days.getDate(); //获取当前日期中月的天数
      var year2 = year;
      var month2 = parseInt(month) - 1;
      if (month2 == 0) {
        year2 = parseInt(year2) - 1;
        month2 = 12;
      }
      var day2 = day;
      var days2 = new Date(year2, month2, 0);
      days2 = days2.getDate();
      if (day2 > days2) {
        day2 = days2;
      }
      if (month2 < 10) {
        month2 = "0" + month2;
      }
      var t2 = year2 + "-" + month2 + "-" + day2;
      return t2;
    },

    //获取下个月
    getNextMonth(date) {
      var arr = date.split("-");
      var year = arr[0]; //获取当前日期的年份
      var month = arr[1]; //获取当前日期的月份
      var day = arr[2]; //获取当前日期的日
      var days = new Date(year, month, 0);
      days = days.getDate(); //获取当前日期中的月的天数
      var year2 = year;
      var month2 = parseInt(month) + 1;
      if (month2 == 13) {
        year2 = parseInt(year2) + 1;
        month2 = 1;
      }
      var day2 = day;
      var days2 = new Date(year2, month2, 0);
      days2 = days2.getDate();
      if (day2 > days2) {
        day2 = days2;
      }
      if (month2 < 10) {
        month2 = "0" + month2;
      }

      var t2 = year2 + "-" + month2 + "-" + day2;
      return t2;
    },
    lastMonth() {
      let date = this.current + "-01";
      let last = this.getPreMonth(date);
      let str = last.substr(0, 7);

      this.current = str;
      this.isMax = false;

      this.getShopReferenceIndexAndoverAllIndex();
    },
    nextMonth() {
      if (this.isMax) {
        return false;
      } else {
        let date = this.current + "-01";
        // console.log(date);
        let next = this.getNextMonth(date);
        // console.log(next);
        let today = new Date();
        let currentMonth =
          new Date(date).getFullYear() * 12 + new Date(date).getMonth() + 1;
        let totalMonth = today.getFullYear() * 12 + today.getMonth();
        // console.log(currentMonth, totalMonth);
        if (currentMonth >= totalMonth) {
          // console.log("isMax");

          this.isMax = true;
        }
        let str = next.substr(0, 7);

        this.current = str;

        this.getShopReferenceIndexAndoverAllIndex();
      }
    },
    objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 4 === 0) {
          return {
            rowspan: 4,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },

    objectSpanMethod2({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex === 0) {
          return {
            rowspan: 6,
            colspan: 1
          };
        } else if ((rowIndex - 6) % 4 === 0 && rowIndex >= 6) {
          return {
            rowspan: 4,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.crumbs {
  margin: 0 0 10px 0;
}
#finishCircle {
  min-width: 300px;
  min-height: 300px;
  margin: -30px auto;
  /* padding: 20px; */
}
h1,
h2 {
  font-weight: normal;
}
.el-card {
  overflow-x: scroll;
  /* min-width: 1200px; */
  border-radius: 8px;
}
.module-wrapper {
  display: flex;
  min-width: 1200px;
  justify-content: space-between;
  margin-bottom: 10px;
}
.card-left {
  flex: 2.2;
  margin-right: 10px;
}
.card-right {
  flex: 1;
}
#mainChart,
#mainChart1 {
  /* min-width: 900px; */
  height: 700px;
  margin: 0 auto;
  padding: 10px;
}
.gmv-board,
.sale-board {
  margin: 0 0 10px;
  min-width: 1200px;
}
.card-module {
  border-radius: 8px;
  background: #fff;
  padding: 20px;
  border: 1px solid #ebeef5;
}
.gmv-board {
  display: flex;
  justify-content: space-between;
}
.gmv-goal {
  margin-right: 10px;
  flex: 1;
}
.gmv-data {
  flex: 2;
}
.grey-line {
  color: #999;
  font-size: 14px;
  line-height: 30px;
  text-align: center;
}
.data-progress {
  border-radius: 12px;
  min-height: 116px;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  margin: 20px 0 0;
  font-size: 13px;
  /* max-width: 800px; */
}
.data-progress > div {
  flex: 1;
  height: 116px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 24px 0;
  box-sizing: border-box;
}
.progress-1 {
  background: linear-gradient(270deg, #22b7ff 0%, #09afff 100%);
}
.progress-2 {
  background: #3abfff;
}
.progress-3 {
  background: #6bcfff;
}
.progress-4 {
  background: #79d2fd;
}
.progress-5 {
  background: #84d7ff;
}
.bold-font {
  font-weight: bold;
  font-size: 24px;
}
.up-arrow {
  color: #ef583b;
  font-size: 12px;
}
.down-arrow {
  color: #01a924;
  font-size: 12px;
}
.sale-detail {
  display: flex;
  align-items: center;
  justify-content: space-around;
  color: #333;
  font-size: 13px;
}
.sale-item {
  height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}
.sale-item .el-button--text {
  padding-bottom: 0;
  color: #333;
}
.sale-item p {
  font-weight: bold;
  font-size: 14px;
}
.blue-font {
  color: #09afff;
  font-size: 15px;
}
.month-wrapper {
  display: flex;
  justify-content: space-between;
}
.month-select {
  display: flex;
  align-items: center;
  font-size: 14px;
}
.month-select:hover {
  cursor: pointer;
}
.current-month {
  margin: 0 10px;
  color: #09afff;
  font-size: 16px;
}
.month-select .current-month:hover {
  cursor: default;
}
.disable-select {
  color: gray;
}
.month-select .disable-select:hover {
  cursor: default;
}
.devide-line {
  width: 2px;
  background: #eee;
  height: 50px;
}
</style>
