<template>
  <section class="eval-charts">
    <div class="dm-form__wrap">
      <vue-gic-store-group width="240" class="pr5" :model="storeGroupData" @commit-store="getStoreGroup"></vue-gic-store-group>
      <span class="pl10 danger-color">*以下数据取自近180天</span>
    </div>
    <div class="dm-form__wrap">
      <h3 class="dm-title__label">
        评价趋势
        <el-button style="float: right;padding: 0px 32px;" type="text" @click="preTrend">详情</el-button>
      </h3>
      <div id="mountNode" ref="mountNode" v-show="list.length"></div>
      <div class="chart--nodata" v-show="!list.length"></div>
    </div>
    <div class="dm-form__wrap">
      <div slot="header">
        <h3 class="dm-title__label">
          各项评分概况
          <el-button style="float: right;padding: 0px 32px;" type="text" @click="preDetail">详情</el-button>
        </h3>
      </div>
      <div class="rate-wrap">
        <div class="rate-item" :class="{ pb20: index !== 2 }" v-for="(item, index) in rate" :key="index">
          <div class="rate-top">
            <span class="pr10">{{ item.name }} （共{{ item.sum }}人）</span>
            <span class="fz18 bold"> {{ Number(item.score / item.sum).toFixed(2) }}分</span>
          </div>
          <ul class="rate-bottom gray-bg">
            <li v-for="(v, i) in item.list" :key="i">
              <el-rate class="inline-block" v-model="v.socre" disabled></el-rate>
              <span class="rate-text">{{ v.socre * 2 }}分</span>
              <div class="progress" :style="{ width: (v.count / item.sum) * 100 + 'px' }"></div>
              <span class="progress-text fz12 vertical-middle pl5"> {{ Number((v.count * 100) / item.sum).toFixed(2) }}%</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div>
      <div class="charts-half">
        <h3 class="dm-title__label--outer">正面快评使用统计</h3>
        <div id="mountNodePieGood" ref="mountNodePieGood" v-show="goodList.length"></div>
        <div class="chart--nodata" v-show="!goodList.length"></div>
      </div>
      <div class="charts-half">
        <h3 class="dm-title__label--outer">负面快评使用统计</h3>
        <div id="mountNodePieBad" ref="mountNodePieBad" v-show="badList.length"></div>
        <div class="chart--nodata" v-show="!badList.length"></div>
      </div>
    </div>
    <detail :show.sync="detailShow" :id="groupId"></detail>
    <scoredetail :show.sync="scoredetailShow" :id="groupId"></scoredetail>
  </section>
</template>
<script>
import G2 from '@antv/g2';
import DataSet from '@antv/data-set';
import storeGroup from '@/components/storeGroup';
import { evaluateOverviewEchart } from '@/service/api/evaluationApi.js';
import detail from './detail';
import scoredetail from './scoredetail';

import demoData from './demo.js';

export default {
  components: {
    storeGroup,
    detail,
    scoredetail
  },
  data() {
    return {
      list: [],
      goodList: [],
      badList: [],
      rate: [{ name: '服务态度评分', list: [], score: 0, sum: 1 }, { name: '专业程度评分', list: [], score: 0, sum: 1 }, { name: '门店环境评分', list: [], score: 0, sum: 1 }],
      detailShow: false,
      scoredetailShow: false,
      groupId: '',
      storeGroupData: {}
    };
  },
  created() {
    this.$store.commit('mutations_breadcrumb', [{ name: '企业管理', path: '' }, { name: '服务监督', path: '/evaluation' }, { name: '评价概览', path: '' }]);
    this.evaluateOverviewEchart(1);
    this.evaluateOverviewEchart(2);
    this.evaluateOverviewEchart(3);
  },
  methods: {
    getStoreGroup(val) {
      this.evaluateOverviewEchart(1, val.storeGroupId);
      this.evaluateOverviewEchart(2, val.storeGroupId);
      this.evaluateOverviewEchart(3, val.storeGroupId);
    },
    async evaluateOverviewEchart(type = 1, id = '') {
      let res = await evaluateOverviewEchart({ currentStoreGroupId: id, chartType: type });
      if (type === 1) {
        const result = res.result;
        // const result = demoData.result;
        let list = [];
        result.sundayList.map((v, i) => {
          list.push({ day: v, name: '订单总数', temperature: result.yDataorders[i] });
          list.push({ day: v, name: '评价总数', temperature: result.yDataevaluate[i] });
          list.push({ day: v, name: '好评总数', temperature: result.yDatagood[i] });
        });
        list.sort((a, b) => {
          return a.temperature - b.temperature;
        });
        //先清空原先图表
        const mountNode = this.$refs.mountNode;
        const mountNodeChilds = Array.from(mountNode.childNodes);
        mountNodeChilds.map(v => {
          mountNode.removeChild(v);
        });
        this.list = list;
        list = list.sort((a, b) => {
          return a.temperature - b.temperature;
        });
        console.log(list);
        this.$nextTick(_ => {
          this.initCharts(list, 'mountNode');
        });
      }
      if (type === 2) {
        const scoreList = res.result.evaluateScoreList;
        var fwtdScore = 0,
          fwtdSum = 1,
          fwtdCount2 = 0,
          fwtdCount4 = 0,
          fwtdCount6 = 0,
          fwtdCount8 = 0,
          fwtdCount10 = 0;
        var zycdScore = 0,
          zycdSum = 1,
          zycdCount2 = 0,
          zycdCount4 = 0,
          zycdCount6 = 0,
          zycdCount8 = 0,
          zycdCount10 = 0;
        var mdhjScore = 0,
          mdhjSum = 1,
          mdhjCount2 = 0,
          mdhjCount4 = 0,
          mdhjCount6 = 0,
          mdhjCount8 = 0,
          mdhjCount10 = 0;
        scoreList.map((v, i) => {
          if (i == 0) {
            fwtdSum = 0;
            zycdSum = 0;
            mdhjSum = 0;
          }
          var name = scoreList[i][0];
          var count = scoreList[i][2];
          var score = scoreList[i][1];
          if (name.indexOf('service') != -1) {
            fwtdSum += count;
            fwtdScore += score * count;
            if (parseInt(score) == 2) {
              fwtdCount2 = count;
            }
            if (parseInt(score) == 4) {
              fwtdCount4 = count;
            }
            if (parseInt(score) == 6) {
              fwtdCount6 = count;
            }
            if (parseInt(score) == 8) {
              fwtdCount8 = count;
            }
            if (parseInt(score) == 10) {
              fwtdCount10 = count;
            }
          }
          if (name.indexOf('major') != -1) {
            zycdSum += count;
            zycdScore += score * count;
            if (parseInt(score) == 2) {
              zycdCount2 = count;
            }
            if (parseInt(score) == 4) {
              zycdCount4 = count;
            }
            if (parseInt(score) == 6) {
              zycdCount6 = count;
            }
            if (parseInt(score) == 8) {
              zycdCount8 = count;
            }
            if (parseInt(score) == 10) {
              zycdCount10 = count;
            }
          }
          if (name.indexOf('store') != -1) {
            mdhjSum += count;
            mdhjScore += score * count;
            if (parseInt(score) == 2) {
              mdhjCount2 = count;
            }
            if (parseInt(score) == 4) {
              mdhjCount4 = count;
            }
            if (parseInt(score) == 6) {
              mdhjCount6 = count;
            }
            if (parseInt(score) == 8) {
              mdhjCount8 = count;
            }
            if (parseInt(score) == 10) {
              mdhjCount10 = count;
            }
          }
        });
        this.rate[0].name = '服务态度评分';
        this.rate[0].score = fwtdScore;
        this.rate[0].sum = fwtdSum;
        this.rate[0].list = [{ socre: 1, count: fwtdCount2 }, { socre: 2, count: fwtdCount4 }, { socre: 3, count: fwtdCount6 }, { socre: 4, count: fwtdCount8 }, { socre: 5, count: fwtdCount10 }];

        this.rate[1].name = '专业程度评分';
        this.rate[1].score = zycdScore;
        this.rate[1].sum = zycdSum;
        this.rate[1].list = [{ socre: 1, count: zycdCount2 }, { socre: 2, count: zycdCount4 }, { socre: 3, count: zycdCount6 }, { socre: 4, count: zycdCount8 }, { socre: 5, count: zycdCount10 }];

        this.rate[2].name = '门店环境评分';
        this.rate[2].score = mdhjScore;
        this.rate[2].sum = mdhjSum;
        this.rate[2].list = [{ socre: 1, count: mdhjCount2 }, { socre: 2, count: mdhjCount4 }, { socre: 3, count: mdhjCount6 }, { socre: 4, count: mdhjCount8 }, { socre: 5, count: mdhjCount10 }];
      }
      if (type === 3) {
        const goodTagList = res.result.goodTagList;
        const badTagList = res.result.badTagList;
        //正面快评生成
        let goodList = [];
        const goodTotal = goodTagList.map(v => v[0]).reduce((total, num) => total + num);
        goodTagList.map((v, i) => {
          goodList.push({ item: v[1], count: parseInt(v[0]), percent: parseFloat((v[0] / goodTotal).toFixed(2)) });
        });
        this.goodList = goodList;
        //先清空原先图表
        const mountNodePieGood = this.$refs.mountNodePieGood;
        const goodChilds = Array.from(mountNodePieGood.childNodes);
        goodChilds.map(v => {
          mountNodePieGood.removeChild(v);
        });
        this.goodList = goodList;
        this.$nextTick(_ => {
          this.initPieChart(goodList, 'mountNodePieGood');
        });

        //负面快评生成
        let badList = [];
        const badTotal = badTagList.map(v => v[0]).reduce((total, num) => total + num);
        badTagList.map((v, i) => {
          badList.push({ item: v[1], count: parseInt(v[0]), percent: parseFloat((v[0] / badTotal).toFixed(2)) });
        });
        this.badList = badList;
        //先清空原先图表
        const mountNodePieBad = this.$refs.mountNodePieBad;
        const badChilds = Array.from(mountNodePieBad.childNodes);
        badChilds.map(v => {
          mountNodePieBad.removeChild(v);
        });
        this.badList = badList;
        this.$nextTick(_ => {
          this.initPieChart(badList, 'mountNodePieBad');
        });
      }
    },
    preTrend() {
      this.detailShow = true;
    },
    preDetail() {
      this.scoredetailShow = true;
    },
    //生成饼图
    initPieChart(data, nodeName) {
      console.log(data);
      var chart = new G2.Chart({
        container: nodeName,
        forceFit: true,
        height: 400
      });
      chart.source(data, {
        percent: {
          formatter: function formatter(val) {
            val = (val * 100).toFixed(2) + '%';
            return val;
          }
        }
      });
      chart.coord('theta', {
        radius: 0.75,
        innerRadius: 0.6
      });
      chart.tooltip({
        showTitle: false,
        itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
      });
      chart.on('click', ev => {
        if (nodeName === 'mountNodePieBad') {
          this.$router.push('/evaluation/bad/' + ev.data._origin.item);
        }
      });
      // 辅助文本
      chart.guide().html({
        position: ['50%', '50%'],
        html: `<div style="color:#8c8c8c;font-size: 14px;text-align: center;width: 10em;">${nodeName === 'mountNodePieGood' ? '正面快评' : '负面快评'}</div>`,
        alignX: 'middle',
        alignY: 'middle'
      });

      chart
        .intervalStack()
        .position('percent')
        .color('item')
        .label('percent', {
          formatter: function formatter(val, item) {
            return item.point.item + ': ' + val;
          }
        })
        .tooltip('item*percent', function(item, percent) {
          percent = percent * 100 + '%';
          return {
            name: item,
            value: percent
          };
        })
        .style({
          lineWidth: 1,
          stroke: '#fff'
        });
      chart.render();
    },
    //生成折线图
    initCharts(data, nodeName) {
      var chart = new G2.Chart({
        container: nodeName,
        forceFit: true,
        height: 400,
        padding: { top: 20, right: 0, bottom: 60, left: 40 }
      });
      chart.source(data, {
        day: {
          range: [0, 1],
          alias: '日期'
        },
        temperature: {
          tickCount: 10
        }
      });
      chart.tooltip({
        crosshairs: {
          type: 'line'
        }
      });
      chart.axis('temperature', {
        label: {
          formatter: function formatter(val) {
            return val;
          }
        },
        offset: 1,
        subTickCount: 20,
        subTickLine: {
          subTickCount: 20,
          lineWidth: 1, // 次刻度线宽
          stroke: '#ddd', // 次刻度线颜色
          strokeOpacity: 0.5, // 次刻度线颜色的透明度
          length: 3 // 次刻度线的长度，可以为负值（表示反方向渲染）
        }
      });
      chart
        .area()
        .position('day*temperature')
        .color('name', ['#8543e0', '#1890ff', '#13c2c2'])
        .shape('smooth');
      chart
        .line()
        .position('day*temperature')
        .color('name', ['#8543e0', '#1890ff', '#13c2c2'])
        .size(2)
        .shape('smooth');
      chart.render();
    }
  }
};
</script>
<style lang="scss" scoped>
.eval-charts {
  position: relative;
  .eval-tips {
    position: absolute;
  }
  .progress {
    height: 10px;
    background: #f49f71;
    display: inline-block;
    vertical-align: middle;
    border-radius: 3px;
  }
  .progress-text {
    color: #f49f71;
  }
  .rate-wrap {
    display: flex;
    justify-content: space-around;
    width: 100%;
  }
  .rate-item {
    // width:33%;
    justify-content: space-between;
  }
  .rate-bottom {
    font-size: 12px;
    padding: 20px;
    li {
      line-height: 1.5;
    }
  }
  .rate-top {
    padding: 20px 0;
  }
  .rate-text {
    display: inline-block;
    color: #f55c6c;
    vertical-align: middle;
    width: 30px;
  }
  /deep/ .el-rate__icon {
    font-size: 12px;
    margin-right: 3px;
  }
  /deep/ .el-rate__text {
    font-size: 12px;
  }
}

.choice-store {
  position: absolute;
  top: -54px;
  right: 0px;
}

.tips1 {
  position: absolute;
  top: 200px;
  left: 20%;
}

.tips2 {
  position: absolute;
  top: 200px;
  left: 70%;
}
.charts-half {
  display: inline-block;
  width: calc(50% - 79px);
  padding: 24px;
  margin: 0 10px 0 24px;
  background: #fff;
  vertical-align: top;
  min-height: 460px;
}
.charts-half + .charts-half {
  margin: 0 24px 0 0;
}
</style>
