<template>
  <div>
    <!-- 顶部数据 -->
    <div class="topCard">
      <div v-for="(item, index) in infoList" :key="index" class="details">
        <div class="textOne">{{ item.value }}</div>
        <div class="textTwo">
          <div class="l_text">{{ item.name }}</div>
          <div class="r_text">
            <img src="../../../assets/images/shuoming.png" alt srcset>
          </div>
        </div>
      </div>
    </div>
    <div class="centerCard">
      <div class="leftCard">
        <div id="mapChart" />
      </div>
      <div class="rightCard">
        <div class="r_sCard">
          <div id="LpieChart" />
          <div id="RpieChart" />
        </div>
        <div class="r_sCard">
          <div id="LpieCharts" />
          <div id="RpieCharts" />
        </div>
      </div>
    </div>
    <div class="botCard">
      <div class="botLeftCard">
        <el-tabs v-model="activeName" style="padding-left: 20px;" @tab-click="handleClick">
          <el-tab-pane label="销售额" name="first" />
          <el-tab-pane label="访问量" name="second" />
        </el-tabs>
        <div id="mains" ref="mains" style="width: 1100px;height: 520px;" />
      </div>
      <div class="botRightCard">
        <div class="ri_top">
          <div class="text">商家成交排行榜</div>
          <div class="text">成交额/元</div>
        </div>
        <div class="ri_details">
          <div v-for="(item, index) in details.shopRankings" :key="index" class="list">
            <span :class="[ index <= 2 ? 'spanAct' : '' ]">{{ index + 1 }}</span>
            <span>{{ item.shopName }}</span>
            <span>{{ item.money }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="botCard">
      <div class="botLeftCard">
        <div id="botLeftCardMain" />
      </div>
      <div class="botRightCard">
        <div class="ri_top">
          <div class="text">畅销商品排行榜</div>
          <div class="text">售卖个数/个</div>
        </div>
        <div class="ri_details">
          <div v-for="(item, index) in details.productRankings" :key="index" class="list">
            <span :class="[ index <= 2 ? 'spanAct' : '' ]">{{ index + 1 }}</span>
            <span>{{ item.productName }}</span>
            <span>{{ item.total }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { chinaMap } from '../map'
import {
  getChartData
} from '@/api/active/active_coupon.js'
export default {
  name: 'List',
  props: {
    listId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      activeName: 'first',
      infoList: [
        { name: '成交总额(元)', value: '0', fields: 'money' },
        { name: '支付订单数(笔)', value: '0', fields: 'orders' },
        { name: '支付客户数(人)', value: '0', fields: 'users' },
        { name: '参与商家数(家)', value: '0', fields: 'business' },
        { name: '参与商品数(件)', value: '0', fields: 'products' }
      ],
      formInline: {
        activityId: this.listId,
        page: 1,
        pageSize: 10
      },
      details: ''
    }
  },
  mounted() {
    this.getAll()
  },
  methods: {
    async getAll() {
      // const res = await getActivitys(this.formInline)
      const res = await getChartData(this.formInline)
      if (res.code === '') {
        this.details = res.data
        this.activeName = 'first'
        this.getInfo(res.data)
        this.chartFns1(this.details)
        this.chartFns2(this.details)
        this.chartFns3(this.details)
        this.chartFns4(this.details)
        this.chartFns5(this.details, this.activeName)
        this.chartFns6(this.details)
        this.chartFns7(this.details)
      }
    },
    getInfo(o) {
      this.infoList.map((item) => {
        item.value = o[item.fields] || ''
      })
    },
    handleClick(tab, event) {
      this.activeName = tab.name
      this.chartFns5(this.details, tab.name)
    },
    chartFns1(arr) {
      // 基于准备好的dom，初始化echarts实例
      var LpieChart = this.$echarts.init(document.getElementById('LpieChart'))
      LpieChart.setOption({
        title: {
          text: '省份分布',
          x: 'center',
          y: 'bottom'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        color: ['#3A68F2', '#DDDDDD', '#48B9C1', '#A27DE2', '#32C0D6'],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            // radius: ["50", "40"],
            labelLine: {
              normal: {
                length: 20,
                length2: 70,
                lineStyle: {
                  color: '#333'
                }
              }
            },
            label: {
              show: false,
              position: 'center'
            },
            itemStyle: {
              normal: {
                formatter: '{b|{b}}{a|{d}%}\n\n',
                borderWidth: 20,
                borderRadius: 4,
                padding: [0, -120],
                rich: {
                  a: {
                    color: '#333',
                    fontSize: 12,
                    lineHeight: 20
                  },
                  b: {
                    fontSize: 12,
                    lineHeight: 20,
                    color: '#333'
                  }
                }
              }
            },
            data: arr.cityPeople
          }
        ]
      })
    },
    chartFns2(arr) {
      // 基于准备好的dom，初始化echarts实例
      var RpieChart = this.$echarts.init(document.getElementById('RpieChart'))
      RpieChart.setOption({
        title: {
          text: '访问类型',
          x: 'center',
          y: 'bottom'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        color: ['#3A68F2', '#DDDDDD'],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            labelLine: {
              normal: {
                length: 20,
                length2: 70,
                lineStyle: {
                  color: '#333'
                }
              }
            },
            label: {
              show: false,
              position: 'center'
            },
            itemStyle: {
              normal: {
                formatter: '{b|{b}}{a|{d}%}\n\n',
                borderWidth: 20,
                borderRadius: 4,
                padding: [0, -70],
                rich: {
                  a: {
                    color: '#333',
                    fontSize: 12,
                    lineHeight: 20
                  },
                  b: {
                    fontSize: 12,
                    lineHeight: 20,
                    color: '#333'
                  }
                }
              }
            },
            data: arr.newOlds
          }
        ]
      })
    },
    chartFns3(arr) {
      // 基于准备好的dom，初始化echarts实例
      var LpieCharts = this.$echarts.init(document.getElementById('LpieCharts'))
      LpieCharts.setOption({
        title: {
          text: '终端分布',
          x: 'center',
          y: 'bottom'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        color: ['#3A68F2', '#DDDDDD'],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            labelLine: {
              normal: {
                length: 20,
                length2: 70,
                lineStyle: {
                  color: '#333'
                }
              }
            },
            label: {
              show: false,
              position: 'center'
            },
            itemStyle: {
              normal: {
                formatter: '{b|{b}}{a|{d}%}\n\n',
                borderWidth: 20,
                borderRadius: 4,
                padding: [0, -70],
                rich: {
                  a: {
                    color: '#333',
                    fontSize: 12,
                    lineHeight: 20
                  },
                  b: {
                    fontSize: 12,
                    lineHeight: 20,
                    color: '#333'
                  }
                }
              }
            },
            data: arr.terminals
          }
        ]
      })
    },
    chartFns4(arr) {
      // 基于准备好的dom，初始化echarts实例
      var RpieCharts = this.$echarts.init(document.getElementById('RpieCharts'))
      RpieCharts.setOption({
        title: {
          text: '操作系统情况',
          x: 'center',
          y: 'bottom'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        color: ['#3A68F2', '#DDDDDD'],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            labelLine: {
              normal: {
                length: 20,
                length2: 70,
                lineStyle: {
                  color: '#333'
                }
              }
            },
            label: {
              show: false,
              position: 'center'
            },
            itemStyle: {
              normal: {
                formatter: '{b|{b}}{a|{d}%}\n\n',
                borderWidth: 20,
                borderRadius: 4,
                padding: [0, -70],
                rich: {
                  a: {
                    color: '#333',
                    fontSize: 12,
                    lineHeight: 20
                  },
                  b: {
                    fontSize: 12,
                    lineHeight: 20,
                    color: '#333'
                  }
                }
              }
            },
            data: arr.systems
          }
        ]
      })
    },
    // 销售额趋势' : '访问量趋势
    chartFns5(arr, activeName) {
      var mains = this.$echarts.init(this.$refs.mains)
      console.log(mains)
      mains.setOption({
        tooltip: {},
        title: {
          text: activeName === 'first' ? '销售额趋势' : '访问量趋势',
          x: 'center',
          y: 'bottom'
        },
        xAxis: {
          type: 'category',
          data: arr.trend.times
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ])
            },
            name: '销量',
            type: 'bar',
            data: activeName === 'first' ? arr.trend.moneys : arr.trend.totals
          }
        ]
      })
    },
    // 销售类别分布
    chartFns6(arr) {
      console.log('index', arr)
      // 基于准备好的dom，初始化echarts实例
      var botLeftCardMain = this.$echarts.init(document.getElementById('botLeftCardMain'))
      botLeftCardMain.setOption({
        title: {
          text: '销售类别分布'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        color: ['#3AA0FF', '#35CACA', '#FAD337', '#F1627B', '#965DE4'],
        legend: {
          orient: 'vertical',
          right: 10,
          top: 20,
          data: arr.classifyName
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            labelLine: {
              normal: {
                length: 20,
                length2: 70,
                lineStyle: {
                  color: '#333'
                }
              }
            },
            label: {
              show: false,
              position: 'center'
            },
            itemStyle: {
              normal: {
                formatter: '{b|{b}}{a|{d}%}\n\n',
                borderWidth: 20,
                borderRadius: 4,
                padding: [0, -70],
                rich: {
                  a: {
                    color: '#333',
                    fontSize: 12,
                    lineHeight: 20
                  },
                  b: {
                    fontSize: 12,
                    lineHeight: 20,
                    color: '#333'
                  }
                }
              }
            },
            data: arr.classifies
          }
        ]
      })
    },
    // 访问分布情况
    chartFns7(arr) {
      var botLeftCardMain = this.$echarts.init(document.getElementById('mapChart'))
      this.$echarts.registerMap('mymap', chinaMap)
      botLeftCardMain.setOption({
        title: {
          text: '访问分布情况 ',
          subtext: '',
          sublink: '',
          left: 'left'
        },
        tooltip: {
          trigger: 'item',
          showDelay: 0,
          transitionDuration: 0.2,
          formatter(params) {
            if (params.value) {
              return (
                params.seriesName + '<br/>' + params.name + ' : ' + params.value
              )
            }
            return params.seriesName + '<br/>' + params.name + ' : ' + '0'
          }
        },
        series: [
          {
            name: '访问量',
            type: 'map',
            zoom: 1.3,
            roam: true,
            map: 'mymap',
            emphasis: {
              label: {
                show: true
              }
            },
            // 文本位置修正
            textFixed: {
              Alaska: [20, -20]
            },
            data: arr.cities
          }
        ]
      })
    }
  }
}
</script>

<style scoped lang='scss'>
#LpieChart {
	width: 410px;
	height: 250px;
}

#RpieChart {
	width: 410px;
	height: 250px;
}

#LpieCharts {
	width: 410px;
	height: 250px;
}

#mapChart {
	width: 610px;
	height: 500px;
}

#RpieCharts {
	width: 410px;
	height: 250px;
}

#botLeftCardMain {
	width: 1000px;
	height: 500px;
}

.topCard {
	width: 100%;
	height: 140px;
	background: #ffffff;
	box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.15);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: space-around;

	.details {
		.textOne {
			font-size: 40px;
			font-weight: bold;
			color: #ffae11;
		}

		.textTwo {
			font-size: 18px;
			color: #333333;
			display: flex;
			justify-content: center;
			align-items: center;

			.l_text {
				height: 20px;
			}

			.r_text {
				img {
					width: 20px;
					height: 20px;
					margin-left: 5px;
				}
			}
		}
	}
}

.centerCard {
	display: flex;
	margin: 20px auto;
	align-items: center;

	.leftCard {
		width: 55%;
		height: 520px;
		background: #ffffff;
		box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.15);
		border-radius: 4px;
	}

	.rightCard {
		margin-left: 20px;

		.r_sCard {
			width: 820px;
			height: 250px;
			background: #ffffff;
			box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.15);
			border-radius: 4px;
			margin-bottom: 10px;
			display: flex;
		}

		.r_sCard {
			width: 820px;
			height: 250px;
			background: #ffffff;
			box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.15);
			border-radius: 4px;
		}
	}
}

.botCard {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;

	.botLeftCard {
		width: 1100px;
		height: 600px;
		background: #ffffff;
		box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.15);
		border-radius: 4px;
	}

	.botRightCard {
		margin-left: 20px;
		width: 540px;
		height: 560px;
		background: #ffffff;
		box-shadow: 0px 0px 10px 0px rgba(51, 51, 51, 0.15);
		border-radius: 4px;

		.ri_top {
			width: 440px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 20px;

			.text {
				font-size: 18px;
				color: #333333;
			}

			.text:nth-child(1) {
				margin-right: 140px;
			}
		}

		.ri_details {
			width: 440px;

			.list {
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-top: 20px;

				span {
					color: #666666;
				}

				.spanAct {
					width: 26px;
					height: 26px;
					background: #ff7911 !important;
					border-radius: 50% !important;
					display: flex;
					justify-content: space-around;
					align-items: center;
					color: #ffffff !important;
				}

				span:nth-child(1) {
					display: flex;
					justify-content: space-around;
					align-items: center;
					color: #666666;
					width: 26px;
					height: 26px;
					background: #dddddd;
					border-radius: 50%;
				}

				span:nth-child(2) {
					width: 135px;
				}

				span:nth-child(3) {
					width: 50px;
				}
			}
		}
	}
}

.botTable {
	width: 100%;

	.box-card {
		.clearfix {
			button {
				width: 60px;
				height: 38px;
				background: #3a68f2;
				border-radius: 4px;
				float: right;
				padding: 3px 0;
			}
		}
	}
}</style>
