<template>
  <div style="min-width:1200px;">
    <div class="data-top">
      <div class="data-day">
        <div class="data-total">
          <div
            style="font-size:20px"
          >¥ {{daySales.daygmv==null?0:Number(daySales.daygmv).toLocaleString()}}</div>
          <div>
            {{currentDay}}
            <span>昨日</span>
          </div>
          <div>总销售GMV</div>
        </div>
        <div>
          <div>¥ {{daySales.jmsdaygmv==null?0:Number(daySales.jmsdaygmv).toLocaleString()}}</div>
          <div>加盟商销售GMV</div>
        </div>
        <div>
          <div>¥ {{daySales.jzdaygmv==null?0:Number(daySales.jzdaygmv).toLocaleString()}}</div>
          <div>自营销售GMV</div>
        </div>
      </div>
      <div class="data-month">
        <div class="data-total">
          <div
            style="font-size:20px"
          >¥ {{daySales.daygmv==null?0:Number(monthSales.monthgmv).toLocaleString()}}</div>
          <div>
            {{currentMonth}}
            <span>本月</span>
          </div>
          <div>总销售GMV</div>
        </div>
        <div>
          <div>¥ {{monthSales.jmsmonthgmv==null?0:Number(monthSales.jmsmonthgmv).toLocaleString()}}</div>
          <div>加盟商销售GMV</div>
        </div>
        <div>
          <div>¥ {{monthSales.jzmonthgmv==null?0:Number(monthSales.jzmonthgmv).toLocaleString()}}</div>
          <div>自营销售GMV</div>
        </div>
      </div>
      <div class="data-jms">
        <div class="jms-month">
          <div style="font-size:20px">+{{jmsNumber.jmsadd}}</div>
          <div>当月</div>
          <div>新增加盟商</div>
        </div>
        <div class="jms-current">
          <div style="font-size:20px">{{jmsNumber.jmsall}} 家</div>
          <div>当前</div>
          <div>加盟商数量</div>
        </div>
      </div>
    </div>
    <div class="chart-row">
      <div class="chart-left">
        <div class="sort-title">
          <div>城市销量排行</div>
          <div class="type-check">
            <div
              :class="['day-btn', sortRange.city=='day'?'active':'']"
              @click="switchType('city','day')"
            >昨日</div>
            <div
              :class="['month-btn',sortRange.city=='month'?'active':'']"
              @click="switchType('city','month')"
            >当月</div>
          </div>
        </div>
        <div class="line-wrapper">
          <div v-for="(item,index) in citySales" :key="index">
            <div class="city-line">
              <span>{{index+1}}. {{item.name}}（整体核销率{{item.rate}}）</span>
              <span>¥{{item.salesNumber}}</span>
            </div>
            <div class="pg-line" v-for="(item1,index1) in item.subList" :key="index1">
              <span>{{item1.name}}</span>
              <div class="pg-wrapper">
                <el-progress
                  :percentage="item1.proportion"
                  color="#7BF9FC"
                  :format="formatProgress"
                  :stroke-width="14"
                ></el-progress>
              </div>
              <span>¥{{item1.value}}</span>
            </div>
          </div>
         
        </div>
         <div v-if="citySales.length==3" class="more-data">
            <span @click="viewMore('1',sortRange.city)">查看更多</span>
          </div>
      </div>
      <div class="chart-center">
        <div style="paddint-top:10px;">核销热力图</div>
        <div style="text-align:center;margin:0 0 10px;">
          <el-radio-group v-model="mapDataRank" @change="mapTabChange">
            <el-radio-button label="昨日" value="昨日" key="昨日"></el-radio-button>
            <el-radio-button label="近7天" value="近7天" key="近7天"></el-radio-button>
            <el-radio-button label="近30天" value="近30天" key="近30天"></el-radio-button>
          </el-radio-group>
        </div>
        <div id="container" style="height: 400px"></div>
      </div>
      <div class="chart-right">
        <div class="sort-title">
          <div>加盟商销量排行</div>
          <div class="type-check">
            <div
              :class="['day-btn', sortRange.jms=='day'?'active':'']"
              @click="switchType('jms','day')"
            >昨日</div>
            <div
              :class="['month-btn',sortRange.jms=='month'?'active':'']"
              @click="switchType('jms','month')"
            >当月</div>
          </div>
        </div>
        <div class="line-wrapper">
          <div v-for="(item,index) in jmsSales" :key="index">
            <div class="city-line">
              <span>{{index+1}}. {{item.name}}<br/>（整体核销率{{item.rate}}）</span>
              <span>¥{{item.salesNumber}}</span>
            </div>
            <div class="pg-line" v-for="(item1,index1) in item.subList" :key="index1">
              <span>{{item1.name}}</span>
              <div class="pg-wrapper">
                <el-progress
                  :percentage="item1.proportion"
                  color="#7BF9FC"
                  :format="formatProgress"
                  :stroke-width="14"
                ></el-progress>
              </div>
              <span>¥{{item1.value}}</span>
            </div>
          </div>
         
        </div>
         <div v-if="jmsSales.length==3" class="more-data">
            <span @click="viewMore('2',sortRange.jms)">查看更多</span>
          </div>
      </div>
    </div>
    <div class="chart-row chart-row-2" style="height:430px;">
      <div class="chart-left">
        <div class="sort-title">
          <div>履约排行</div>
          <div class="type-check">
            <div
              :class="['day-btn', sortRange.ly=='day'?'active':'']"
              @click="switchType('ly','day')"
            >昨日</div>
            <div
              :class="['month-btn',sortRange.ly=='month'?'active':'']"
              @click="switchType('ly','month')"
            >当月</div>
          </div>
        </div>
        <div class="line-wrapper">
          <div v-for="(item,index) in performanceRank" :key="index">
            <div class="city-line">
              <span>{{index+1}}. {{item.name}}</span>
              <span>{{item.salesNumber}}单</span>
            </div>
            <div class="pg-line" v-for="(item1,index1) in item.subList" :key="index1">
              <span>{{item1.name}}</span>
              <div class="pg-wrapper">
                <el-progress
                  :percentage="item1.proportion"
                  color="#7BF9FC"
                  :format="formatProgress"
                  :stroke-width="14"
                ></el-progress>
              </div>
              <span>{{item1.value}}单</span>
            </div>
          </div>
          
        </div>
        <div v-if="performanceRank.length==3" class="more-data">
            <span @click="viewMore('3',sortRange.ly)">查看更多</span>
          </div>
      </div>
      <div class="chart-center" style="padding:20px;">
        <div class="sort-title">
          <div>商品销售排行</div>
          <div class="type-check">
            <div
              :class="['day-btn', sortRange.good=='day'?'active':'']"
              @click="switchType('good','day')"
            >昨日</div>
            <div
              :class="['month-btn',sortRange.good=='month'?'active':'']"
              @click="switchType('good','month')"
            >当月</div>
          </div>
        </div>
        <div class="line-wrapper">
          <div v-for="(item,index) in goodsSalesRank" :key="index">
            <div class="city-line">
              <span>{{index+1}}. {{item.name}}</span>
              <span>¥{{item.salesNumber}}</span>
            </div>
            <div class="pg-line" v-for="(item1,index1) in item.subList" :key="index1">
              <span>{{item1.name}}</span>
              <div class="pg-wrapper">
                <el-progress
                  :percentage="item1.proportion"
                  color="#7BF9FC"
                  :format="formatProgress"
                  :stroke-width="14"
                ></el-progress>
              </div>
              <span>¥{{item1.value}}</span>
            </div>
          </div>
         
        </div>
         <div v-if="goodsSalesRank.length==3" class="more-data">
            <span @click="viewMore('4',sortRange.good)">查看更多</span>
          </div>
      </div>
      <div class="chart-right">
        <div class="sort-title">
          <div>POI排行</div>
          <div class="type-check">
            <div
              :class="['day-btn', sortRange.poi=='day'?'active':'']"
              @click="switchType('poi','day')"
            >昨日</div>
            <div
              :class="['month-btn',sortRange.poi=='month'?'active':'']"
              @click="switchType('poi','month')"
            >当月</div>
          </div>
        </div>
        <div class="line-wrapper">
          <div v-for="(item,index) in poiRank" :key="index">
            <div class="city-line">
              <span>{{index+1}}. {{item.name}}</span>
              <span>¥{{item.salesNumber}}</span>
            </div>
            <div class="pg-line" v-for="(item1,index1) in item.subList" :key="index1">
              <span>{{item1.name}}</span>
              <div class="pg-wrapper">
                <el-progress
                  :percentage="item1.proportion"
                  color="#7BF9FC"
                  :format="formatProgress"
                  :stroke-width="14"
                ></el-progress>
              </div>
              <span>¥{{item1.value}}</span>
            </div>
          </div>
          
        </div>
        <div v-if="poiRank.length==3" class="more-data">
            <span @click="viewMore('5',sortRange.poi)">查看更多</span>
          </div>
      </div>
    </div>
  </div>
</template>


<script>
import moment from "moment";
import service from "../../script/api/service";

var map;
var dayss;

export default {
  name: "douyinBoard",
  data() {
    return {
      currentDay: moment()
        .subtract(1, "days")
        .format("YYYY-MM-DD"),
      currentMonth: moment(new Date()).format("YYYY-MM"),
      daySales: {},
      jmsNumber: {},
      monthSales: {},
      citySales: [],
      jmsSales: [],
      performanceRank: [],
      goodsSalesRank:[],
      poiRank: [],

      sortRange: {
        city: "month",
        jms: "month",
        ly: "month",
        good: "month",
        poi: "month",
      },
      mapDataRank: "昨日",
      listLoading: false
    };
  },
  computed: {},
  mounted() {
    dayss = 1;
    this.mapInit();
    this.getTopSalesNumber();
    this.getAllRank();
  },
  created() {},
  methods: {
    getTopSalesNumber() {
      service.$axiosTopSalesNumber().then(res => {
        this.daySales = res.data.data.daySales;
        this.monthSales = res.data.data.monthSales;
        this.jmsNumber = res.data.data.jmsNumber;
      });
    },
    getAllRank() {
      service
        .$axiosGetAllRank({
          type: "",
          dayOrMonth: 2
        })
        .then(res => {
          this.citySales = res.data.data.citySales;
          this.jmsSales = res.data.data.jmsSales;
          this.performanceRank = res.data.data.performanceRank;
          this.goodsSalesRank = res.data.data.goodsSalesRank;
          this.poiRank = res.data.data.poiRank;
        });
    },
    switchType(obj, type) {
      this.sortRange[obj] = type;

      service
        .$axiosGetAllRank({
          type: "",
          dayOrMonth: type == "month" ? 2 : 1
        })
        .then(res => {
          if (obj == "city") {
            this.citySales = res.data.data.citySales;
          }else if(obj=='jms'){
             this.jmsSales = res.data.data.jmsSales;
          }else if(obj=='ly'){
             this.performanceRank = res.data.data.performanceRank;
          }else if(obj=='good'){
             this.goodsSalesRank = res.data.data.goodsSalesRank;
          }else if(obj=='poi'){
             this.poiRank = res.data.data.poiRank;
          }
          this.$forceUpdate();
        });
    },
    viewMore(type,day){
         service.$axiosGetAllRank({
          type: type,
          dayOrMonth: day == "month" ? 2 : 1
        })
        .then(res => {
          if (type == "1") {
            this.citySales = res.data.data.citySales;
          }else if(type=='2'){
             this.jmsSales = res.data.data.jmsSales;
          }else if(type=='3'){
             this.performanceRank = res.data.data.performanceRank;
          }else if(type=='4'){
             this.goodsSalesRank = res.data.data.goodsSalesRank;
          }else if(type=='5'){
             this.poiRank = res.data.data.poiRank;
          }
          this.$forceUpdate();
        });
    },
    formatProgress(percentage) {
      return "";
    },
    getSalesToday() {
      service.$axiosGetDYSalesTodayTotal().then(res => {
        this.salesToday = res.data.data.data;
        this.refreshTime = moment(res.data.data.refreshTime).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      });
    },
    tabChange(e) {
      console.info(this.activeName);
      if (this.activeName == "book" && this.bookData.length == 0) {
        service.$axiosGetDYBookLineData().then(res => {
          this.bookData = res.data.data;
          this.lineEchart(this.bookData, "bookChart", "服务工单已核销曲线图");
        });
      }
    },
    getSalesMonth() {
      service.$axiosGetDYSalesMonthTotal().then(res => {
        this.salesMonth = res.data.data.data;
      });
    },
    getLineData() {
      service.$axiosGetDYSalesLineData().then(res => {
        console.info(res.data.data);
        this.lineEchart(res.data.data, "lineChart", "订单销售及履约情况");
      });
    },
    mapInit() {
      map = new AMap.Map("container", {
        zoom: 5
      });

      //加载相关组件
      AMapUI.load(["ui/geo/DistrictCluster", "lib/$"], function(
        DistrictCluster
      ) {
        window.DistrictCluster = DistrictCluster;
        //启动页面
        initPage(DistrictCluster);
      });

      function initPage(DistrictCluster) {
        var distCluster = new DistrictCluster({
          map: map, //所属的地图实例
          zIndex: 11,
          //excludedAdcodes: [120000, 130000, 140000, 150000, 210000, 220000, 230000, 340000,
          //    350000, 360000, 410000, 420000, 430000, 450000, 460000, 520000, 530000, 540000, 610000,
          //    620000, 630000, 640000, 650000, 710000, 810000, 820000],
          autoSetFitView: false,
          getPosition: function(item) {
            if (!item) {
              return null;
            }
            var parts = item.split(",");
            //返回经纬度
            return [parseFloat(parts[0]), parseFloat(parts[1])];
          },
          renderOptions: {}
        });

        window.distCluster = distCluster;
        service.$axiosGetServicedHotMap({ days: dayss }).then(res => {
          distCluster.setData(res.data.data);
        });
      }
    },
    mapTabChange() {
      if (this.mapDataRank == "昨日") dayss = 1;
      if (this.mapDataRank == "近7天") dayss = 7;
      if (this.mapDataRank == "近30天") dayss = 30;

      let that = this;
      setTimeout(() => {
        that.mapInit();
      }, 500);
    },
    lineEchart(data, chartName, name) {
      var myChart = this.$echarts.init(document.getElementById(chartName));
      let legendList = [];
      let yAxisList = data.series;
      yAxisList.forEach(item => {
        legendList.push(item.name);
        if (item.type == "line") {
          item.yAxisIndex = 1;
        }
      });

      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 }
          }
        },
        xAxis: [
          {
            type: "category",
            data: data.days,
            axisLabel: { interval: 0, rotate: 30 }
          }
        ],
        yAxis: [
          {
            type: "value",
            name: "GMV",
            axisLabel: {
              formatter: "{value} 元"
            }
          },
          {
            type: "value",
            name: "单量",
            axisLabel: {
              formatter: "{value} 单"
            }
          }
        ],
        series: yAxisList
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option, true);
      myChart.resize();
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    }
  }
};
</script>

<style scoped>
.top {
  border-radius: 10px;
  background-color: #fff;
  padding: 10px;
}

.top-title {
  font-weight: 600;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
  text-align: left;
  color: #409eff;
}

.items {
  display: flex;
}

.item {
  flex: 1;
}

.content {
  margin: 10px 0;
  text-align: center;
  overflow: unset;
}

.detail {
  display: flex;
  justify-content: center;
}

.detail div {
  padding: 5px;
  margin: 0 5px;
  color: #666;
}

.title {
  display: flex;
  flex-direction: column;
}

.sub-title {
  color: #5cb85c;
  text-align: center;
  font-size: 36px;
}

.border-right {
  border-right: 1px dotted #ccc;
}

.amap-cluster {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-size: 12px;
}

.data-top {
  display: flex;
  height: 100px;
  justify-content: space-between;
  font-size: 14px;
}
.data-day {
  margin-right: 40px;
}
.data-day,
.data-month {
  border: 1px solid #ddd;
  display: flex;
  border-radius: 14px;
  padding: 10px;
  flex: 1;
}
.data-day > div,
.data-month > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 26px;
}
.data-day > div.data-total,
.data-month > div.data-total {
  flex: 1.4;
  border-right: 1px solid #ddd;
  line-height: 22px;
}
.data-top span {
  color: #888;
  margin-left: 14px;
}
.data-top .data-month span {
  margin-left: 40px;
}
.data-jms {
  flex: 0.6;
  display: flex;
  margin-left: 60px;
  height: 100px;
  border: 1px solid blue;
  border-radius: 12px;
}
.data-jms > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 20px;
}
.jms-current {
  border: 1px solid #2f82ee;
  border-radius: 12px;
  height: 100px;
  flex: 1.4;
  position: relative;
  top: -1px;
  right: -1px;
  padding: 0 20px 0 40px;
}
.chart-row {
  display: flex;
  margin-top: 20px;
}
.chart-row > div {
  background: #fff;
  flex: 1;
  min-height: 200px;
  border-radius: 14px;
}
.chart-row > div.chart-center {
  flex: 2;
  margin: 0 20px;
  padding: 10px;
}
.chart-row div.line-wrapper {
  overflow-y: auto;
  height: 400px;
}
.chart-row.chart-row-2 div.line-wrapper {
  height: 330px;
  overflow-y: auto;
}
.pg-line {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.pg-line span {
  font-size: 12px;
  color: #999;
  text-align: right;
}
.chart-left,
.chart-right {
  padding: 20px;
}
.pg-wrapper {
  flex: 1;
  margin: 0 10px;
}
.sort-title {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.type-check {
  display: flex;
}
.type-check div {
  width: 60px;
  text-align: center;
  line-height: 24px;
  border: 1px solid #409eff;
  margin-left: 2px;
  font-size: 13px;
  cursor: pointer;
}
.type-check div.active {
  background: #409eff;
}
.city-line {
  line-height: 20px;
  font-size: 13px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.more-data {
  text-align: right;
  font-size: 13px;
  color: #09afff;
  cursor: pointer;
}
>>> .pg-wrapper .el-progress-bar {
  padding-right: 0;
}
>>> .el-progress-bar__outer {
  background: #fff;
}
</style>
<style>
#container {
  height: 560px;
  width: 100%;
}

#lineChart {
  /* min-width: 900px; */
  height: 560px;
  margin: 0 auto;
  padding: 10px;
}
</style>
