let memberChart = null;
const newMemberChartOption = {
  tooltip: {
    show: true,
    trigger: 'axis',
    axisPointer: {
      lineStyle: {
        width: 6,
        type: "solid",
        color: "#ffbf0d",
        opacity: 0.5
      }
    }
  },
  grid: {
    bottom: 34,
    top: 83,
    left: 44,
    right: 37
  },
  itemStyle: {
    color: "#ffa958"
  },
  legend: {
    data: [{
      name: "新增会员数"
    }],
    left: 4,
    top: 25,
    icon: "circle",
  },
  xAxis: {
    type: 'category',
    data: [],
    boundaryGap: false,
  },
  yAxis: {
    type: 'value',
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: "#ffb767",
        opacity: 0.2
      }
    }
  },
  series: [{
    name: "新增会员数",
    data: [],
    type: 'line',
    smooth: true,
    showSymbol: false,
    lineStyle: {
      color: "#ffbf0d"
    },
    symbolSize: 8,
    itemStyle: {
      color: "#ffa958"
    },
    areaStyle: {
      color: "#ffbf0d",
      opacity: 0.1
    }
  }]
};

let pageTypeChart = null;
const pageTypeChartOption = {
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['浏览量', '访问量'],
    right: 0
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [],
  },
  yAxis: {
    type: 'value',
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: "#f0f3f6",
        opacity: 1
      }
    }
  },
  series: [
    {
      name: '浏览量',
      type: 'line',
      stack: '总量',
      data: [],
    },
    {
      name: '访问量',
      type: 'line',
      stack: '总量',
      data: [],
    }
  ]
}

const memberDistributionChartOption = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  barMaxWidth: 12,
  grid: {
    top: 0,
    left: 0,
    right: 20,
    bottom: 0,
    containLabel: true
  },
  xAxis: {
    type: 'value',
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: "#f0f3f6",
        opacity: 1
      }
    }
  },
  yAxis: {
    type: 'category',
    data: [],
  },
  series: [
    {
      type: 'bar',
      data: [],
      itemStyle: {
        color: "#a193f4"
      },
    }
  ]
}

const sexRatioChartOption = {
  tooltip: {
    trigger: 'item',
    show: true,
    formatter: "{b}：{c}人，占比：{d}%"
  },
  labelLine: {
    normal: {
      show: false,
      smooth: true
    },
    emphasis: {
      show: true,
    },
  },
  legend: {
    orient: "horizontal",
    left: 'center',
    bottom: 10,
  },
  series: [
    {
      name: '占比图',
      type: 'pie',
      radius: ['40%', '50%'],
      center: ["50%", "40%"],
      avoidLabelOverlap: false,
      top: "top",
      label: {
        normal: {
          show: false,
          formatter: '{d}%',
          textStyle: {
            fontWeight: 'normal',
            fontSize: 12
          }
        },
        emphasis: {
          show: true
        },
      },
      data: []
    }
  ]
}

const mixin = {
  mounted() {
    const sexRatio = echarts.init(this.$refs['sexRatio']);
    const memberDistribution = echarts.init(this.$refs['memberDistribution']);
    sexRatio.showLoading();
    memberDistribution.showLoading();
    this.fetchData(GetMemberStatisticsUrl, {}).then(res => {
      this.members = res.member_total;
      this.memberNews = res.member_new.member_new;
      if (res.browse_footprint) {
        this.broweFootprintPluginTurnon = true;

        this.$nextTick(() => {
          pageTypeChart = echarts.init(this.$refs['pageTypeChart']);
          this.getPageTypeStatisticsData();
        })
      }

      for (const item of res.memberStructure) {
        memberDistributionChartOption.yAxis.data.push(item.name);
        memberDistributionChartOption.series[0].data.push(item.value);
      }
      memberDistribution.setOption(memberDistributionChartOption);
      memberDistribution.hideLoading();

      let sexData = {};
      let memberTotal = 0;
      for (const item of res.sex_ratio
      ) {
        sexData[item.name] = item.value;
        memberTotal += item.value;
        switch (item.name) {
          case "男":
            item.itemStyle = {
              color: "#005bff"
            }
            break;
          case "女":
            item.itemStyle = {
              color: "#7466ff"
            }
            break;
          case "未知":
            item.itemStyle = {
              color: "#ffcd30"
            }
            break;
        }
      }
      sexRatioChartOption.legend.formatter = (name) => {
        return name + "：" + sexData[name] + "人，占比" + ((sexData[name] / memberTotal) * 100).toFixed(2) + "%";
      }
      sexRatioChartOption.series[0]['data'] = res.sex_ratio;
      sexRatio.setOption(sexRatioChartOption);
      sexRatio.hideLoading();
    });
    memberChart = echarts.init(this.$refs['memberNewsChart']);
    this.getMemberNewsStatisticsData();

    this.getMemberLevels();

    this.getMemberShip();
  },
  data() {
    return {
      members: 0,
      memberNews: 0,
      views: 0,
      visitors: 0,
      newMember: {
        search: {
          timeRangeType: "day",
          timeRange: null
        }
      },
      pageType: {
        search: {
          timeRangeType: "day",
          timeRange: null
        },
        selectedType: 0,
        types: [],
        series: {}
      },
      levelMembers: [],
      levelMembersPagination: {
        limit: 15,
        total: 50,
        pages: 1
      },
      membership: {
        search: {
          keywordType: 1,
          keyword: ""
        },
        datas: [],
        pagination: {
          limit: 15,
          total: 50,
          pages: 1
        },
        searchLoading: false
      },
      broweFootprintPluginTurnon: false
    }
  },
  methods: {
    newMembertimeRangeChanged(range) {
      this.newMember.search = range;
      range['timeRange'] = range['timeRange'] ? range['timeRange'] / 1000 : null;
      this.getMemberNewsStatisticsData();
    },
    getMemberNewsStatisticsData() {
      memberChart.showLoading();
      this.fetchData(GetMemberNewsStatisticsUrl, {
        time_type: this.newMember.search.timeRangeType,
        time: this.newMember.search.timeRange
      }).then(res => {
        newMemberChartOption.xAxis.data = res.x_axis;
        newMemberChartOption.series[0].data = res.series;
        this.memberNews = res.member_new;
        memberChart.setOption(newMemberChartOption);
        memberChart.hideLoading();
      });
    },
    pageTypeRangeChanged(range) {
      range['timeRange'] = range['timeRange'] ? range['timeRange'] / 1000 : null;
      this.pageType.search = range;
      this.pageType.selectedType = 0;
      this.getPageTypeStatisticsData();
    },
    getPageTypeStatisticsData() {
      pageTypeChart.showLoading();
      this.fetchData(GetPageTypeStatisticsUrl, {
        time_type: this.pageType.search.timeRangeType,
        time: this.pageType.search.timeRange
      }).then(res => {
        this.views = res.search_data.count;
        this.visitors = res.search_data.cookie_count;
        let types = [];
        for (const item of res.data) {
          this.$set(this.pageType.series, item.key, item);
          types.push({
            value: item.key,
            text: item.name
          });
        }
        this.pageType.types = types;
        pageTypeChart.setOption(pageTypeChartOption);
        this.switchPageTypeChartData();
      })
    },
    switchPageTypeChartData() {
      pageTypeChart.showLoading();
      let showSeries = this.pageType.series[this.pageType.selectedType];
      pageTypeChart.setOption({
        xAxis: {
          data: showSeries.x_axis
        },
        series: [
          {
            name: '浏览量',
            data: showSeries.series.count
          },
          {
            name: '访问量',
            data: showSeries.series.cookie_count
          }
        ]
      });
      pageTypeChart.hideLoading();
    },
    getMemberLevels(page = this.levelMembersPagination.pages) {
      const dataLoading = this.$loading({
        target: "#memberLevelsPanel"
      });
      this.fetchData(GetMemberLevelsDataUrl, {
        page
      }).then(({ total, data, per_page }) => {
        dataLoading.close();
        this.levelMembersPagination.limit = per_page;
        this.levelMembersPagination.total = total;
        this.levelMembers = data;
      }).catch(() => { dataLoading.close(); })
    },
    searchMembership() {
      this.membership.pagination.pages = 1;
      this.getMemberShip();
    },
    getMemberShip(page = this.membership.pagination.pages) {
      this.membership.pagination.pages = page;
      this.membership.searchLoading = true;
      this.fetchData(GetMembershipDataUrl, {
        page,
        search_type: this.membership.search.keywordType,
        search_data: this.membership.search.keyword
      }).then(({
        data, per_page, total
      }) => {
        this.membership.pagination.total = total;
        this.membership.pagination.limit = per_page;
        for (let index = 0; index < data.length; index++) {
          data[index]['rank'] = ((this.membership.pagination.pages - 1) * this.membership.pagination.limit) + index + 1
        }
        this.membership.datas = data;
        this.membership.searchLoading = false;
      }).catch(() => {
        this.membership.searchLoading = false;
      })
    },
    exportMemberShip() {
      window.location.href = ExportMemberRelationDataUrl + '&search_type=' + this.membership.search.keywordType + '&search_data=' + this.membership.search.keyword;
    }
  },
  watch: {
    "pageType.selectedType"() {
      this.switchPageTypeChartData();
    }
  }
};