<!--
 * @Descripttion:
 * @version:
 * @Author: kBank
 * @Date: 2022-10-24 15:45:01
-->
<template>
  <div class="page">
    <topBar v-if="topList.length > 0"
            :top-list="topList"
            :moren="moren" />
    <div v-if="topList[0].changed==true">
      <div class="main">
        <div class="form_all">
          <el-form ref="select"
                   :model="select"
                   label-width="auto">
            <el-row :gutter="40">
              <el-col :span="8">
                <el-form-item :label="'开始日期'">
                  <el-date-picker v-model="creationTime"
                                  @change="changeTime"
                                  value-format="yyyy-MM-dd"
                                  type="daterange"
                                  :range-separator="'至'"
                                  :start-placeholder="'开始日期'"
                                  :end-placeholder="'结束日期'">
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-button type="primary"
                           size="small"
                           @click="getDataList"> {{ '搜索' }}</el-button>
                <el-button size="small"
                           class="resetBtn"
                           @click="reset"> {{ '重置' }}</el-button>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="form_all1">
          <el-button size="small"
          @click="handleExport(1)"
                     v-hasButtons="['performanceRatioExport']"
                     class="exportBtn"> {{ '导出' }}柱状图</el-button>
          <el-button size="small"
          @click="handleExport(2)"
                     v-hasButtons="['performanceRatioExport']"
                     class="exportBtn"> {{ '导出' }}饼图</el-button>
          <div class="disFlex">
            <div class="btn1">{{ '注册' }}</div>
            <div class="btn2">{{ '升级' }}</div>
            <div class="btn3">{{ '复购' }}</div>
            <div class="btn4">{{ '嗨粉' }}</div>
          </div>
          <div id="firstPv"
               style="width: 600px; height: 250px"></div>
          <div class="disFlex1">
            <div id="firstBb"
                 style="width: 500px; height: 350px"></div>
            <div id="twoBb"
                 style="width: 500px; height: 350px"></div>
            <div id="allBb"
                 style="width: 500px; height: 350px"></div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import topBar from '@/components/topBarRole'
import * as api from '@/api/settle.js'
import { getRouters } from '@/api/settle.js'

export default {
  name: 'Bzpz',
  components: {
    topBar,
  },

  data() {
    return {
      creationTime: [],
      select: {
        startDate: '',
        endDate: '',
      },
      moren: '/settlementCenter/performanceRatio',
      topList: [
        {
          name: '拨比图型',
          path: '/settlementCenter/performanceRatio',
          url: 'performanceRatio',
          changed: false,
        },
        {
          name: '拨比图表',
          path: '/settlementCenter/performanceChart',
          url: 'performanceChart',
          changed: false,
        },
        {
          name: '拨比列表',
          path: '/settlementCenter/performanceList',
          url: 'performanceList',
          changed: false,
        },
        {
          name: '个人伞下拨比查询',
          path: "/settlementCenter/personalAllocation",
          url: "PersonalAllocation",
          changed: false,
        },
      ],
    }
  },
  mounted() {
    this.getUserRoute()
  },
  methods: {
    getUserRoute() {
      getRouters().then((res) => {
        res.data.forEach((item) => {
          this.topList.forEach((items) => {
            if (item.routeName == items.url) {
              items.changed = true
            }
          })
        })
      })
    },
      /** 导出按钮操作 */
   handleExport(index) {
      this.$confirm('是否确认导出所有数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then((_) => {
        if(index == 1){
          this.download(
          '/member/manage/bonus-statis/export-pillarRatio',
          Object.assign({}, this.queryParams, this.select),
          `柱状图-${new Date().getTime()}.xlsx`
        )
        }else{
          this.download(
          '/member/manage/bonus-statis/export-pieChartRatio',
          Object.assign({}, this.queryParams, this.select),
          `饼图-${new Date().getTime()}.xlsx`
        )
        }
      })
    },
    drawChart(lastList, newList) {
      let myChart = this.$echarts.init(document.getElementById('firstPv'))
      // 指定图表的配置项和数据
      let option = {
        xAxis: [
          {
            type: 'category',
            data: ['去年  今年', '去年  今年', '去年  今年', '去年  今年'],
            axisPointer: {
              type: 'shadow',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
          },
        ],
        series: [
          {
            name: '去年',
            type: 'bar',
            data: lastList,
          },
          {
            name: '今年',
            type: 'bar',
            data: newList,
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    getDataList() {
      api.pillarRatio(this.select).then((res) => {
        let lastList = [
          {
            value: res.data.lastMainRegAmount,
            itemStyle: {
              color: '#FE5354',
            },
          },
          {
            value: res.data.lastMainUpAmount,
            itemStyle: {
              color: '#FDDC33',
            },
          },
          {
            value: res.data.lastMainRepurAmount,
            itemStyle: {
              color: '#5B8FF9',
            },
          },
          {
            value: res.data.lastHifansRegAmount,
            itemStyle: {
              color: '#9528DF',
            },
          },
        ]
        let newList = [
          {
            value: res.data.mainRegAmount,
            itemStyle: {
              color: '#950304',
            },
          },
          {
            value: res.data.mainUpAmount,
            itemStyle: {
              color: '#E46C03',
            },
          },
          {
            value: res.data.mainRepurAmount,
            itemStyle: {
              color: '#0B307D',
            },
          },
          {
            value: res.data.hifansRegAmount,
            itemStyle: {
              color: '#5D039A',
            },
          },
        ]
        this.drawChart(lastList, newList)
      })
      api.pieChartRatio(this.select).then((res) => {
        let data = [
          { value: res.data.introduceBonus, name: '直推收益拨比' },
          { value: res.data.orgBonus, name: '拓展收益拨比' },
          { value: res.data.leaderBonus, name: '辅导收益拨比' },
          { value: res.data.shareBonus, name: '分红收益拨比' },
          { value: res.data.serviceBonus, name: '服务补贴拨比' },
          { value: res.data.agentIntroduceBonus, name: '云代直推拨比' },
          { value: res.data.agentRepurAmount, name: '云代复购拨比' },
          { value: res.data.agentFirstAmount, name: '云代首购拨比' },
        ]
        let data2 = [
          { value: res.data.repurRangeBonus, name: '复购级差收益拨比' },
          { value: res.data.repurOrgBonus, name: '复购拓展收益拨比' },

        ]
        this.drawChartPie1(data)
        this.drawChartPie2(data2)
        this.drawChartPie3(data)
      })
    },
    drawChartPie1(data) {
      let myChart = this.$echarts.init(document.getElementById('firstBb'))
      let option = {
        title: {
          text: '首购拨比',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
          formatter: '占比{d}%<br/> {a} {b}: {c}',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          top: 'middle',
          formatter: function (name) {
            let data = option.series[0].data
            let total = 0
            let tarValue
            for (let i = 0; i < data.length; i++) {
              total += Number(data[i].value)
              if (data[i].name == name) {
                tarValue = data[i].value
              }
            }
            let p = Math.round((Number(tarValue) / total) * 100) + '%'
            return `${name}   ${p}`
          },
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '50%',
            center: ['75%', '50%'],
            data: data,
            label: {
              show: false,
              position: 'center',
            },
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    drawChartPie2(data) {
      let myChart = this.$echarts.init(document.getElementById('twoBb'))
      let option = {
        title: {
          text: '复购拨比',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
          formatter: '占比{d}%<br/> {a} {b}: {c}',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          top: 'middle',
          formatter: function (name) {
            let data = option.series[0].data
            let total = 0
            let tarValue
            for (let i = 0; i < data.length; i++) {
              total += Number(data[i].value)
              if (data[i].name == name) {
                tarValue = data[i].value
              }
            }
            let p = Math.round((Number(tarValue) / total) * 100) + '%'
            return `${name}   ${p}`
          },
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '50%',
            center: ['75%', '50%'],
            data: data,
            label: {
              show: false,
              position: 'center',
            },
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    drawChartPie3(data) {
      let myChart = this.$echarts.init(document.getElementById('allBb'))
      let option = {
        title: {
          text: '各个拨比',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
          formatter: '占比{d}%<br/> {a} {b}: {c}',
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          top: 'middle',
          formatter: function (name) {
            let data = option.series[0].data
            let total = 0
            let tarValue
            for (let i = 0; i < data.length; i++) {
              total += Number(data[i].value)
              if (data[i].name == name) {
                tarValue = data[i].value
              }
            }
            let p = Math.round((Number(tarValue) / total) * 100) + '%'
            return `${name}   ${p}`
          },
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '50%',
            center: ['25%', '50%'],
            data: data,
            label: {
              show: false,
              position: 'center',
            },
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    changeTime(val) {
      this.select.startDate = val[0]
      this.select.endDate = val[1]
    },
    reset() {
      this.creationTime= []
    },
  },
}
</script>
<style scoped lang="scss">
.page {
  padding: 20px;
  background: #f9f9f9;
  font-size: 14px;
  .main {
    background: #f9f9f9;
    display: flex;
    flex-direction: column;
    height: 870px;
  }
}
.form_all {
  padding: 0px 20px 0 20px;
  //margin-bottom: 20px;
  background: #fff;
}
.form_all1 {
  flex: 1;
  padding: 10px 20px 0 20px;
  margin-bottom: 20px;
  background: #fff;
}
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 100%;
}
.disFlex {
  display: flex;
  margin-top: 20px;
  div {
    padding: 3px 22px;
    color: #fff;
    margin-right: 20px;
    border-radius: 2px;
  }
  .btn1 {
    background: #fe5354;
  }
  .btn2 {
    background: #fac427;
  }
  .btn3 {
    background: #5b8ff9;
  }
  .btn4 {
    background: #9528df;
  }
}
.disFlex1{
  display: flex;
}
</style>
