<template>
  <div class="content">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>服务质量</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-card shadow="hover" style="margin-bottom:10px;">
      <div class="complain-data">
        <div class="data-item">
          <img src="../assets/img/icon-01.png" alt />
          <div>
            <div>{{complainData.callInRate}}</div>
            <div>进线接听率</div>
          </div>
        </div>
        <div class="data-item">
          <img src="../assets/img/icon-02.png" alt />
          <div>
            <div>{{complainData.callOutRate}}</div>
            <div>外呼接听率</div>
          </div>
        </div>

        <div class="data-item">
          <img src="../assets/img/icon-03.png" alt />
          <div>
            <div>{{complainData.aliveDispose}}</div>
            <div>现存客诉单</div>
          </div>
        </div>

        <div class="data-item">
          <img src="../assets/img/icon-04.png" alt />
          <div>
            <div>{{complainData.avgTime}}</div>
            <div>平均处理时效</div>
          </div>
        </div>

        <div :class="[complainData.superTicketCount>0?'special':'','data-item','link-ticket']" @click="goTicket(2)">
          <img src="../assets/img/icon-05.png" alt />
          <div>
            <div>{{complainData.superTicketCount}}</div>
            <div>S级工单</div>
          </div>
        </div>
        <!-- <div class="special">
          <div>{{complainData.superTikects}}单</div>
          <div>S级工单</div>
        </div>-->
        <div :class="[complainData.overTimeOrderCount>0?'special':'','data-item','link-ticket']" @click="goTicket(3)">
          <img src="../assets/img/icon-06.png" alt />
          <div>
            <div>{{complainData.overTimeOrderCount}}</div>
            <div>>48小时工单</div>
          </div>
        </div>
      </div>
    </el-card>
    <el-card shadow="hover">
      <!-- 搜索 -->
      <el-form :inline="true" size="small" v-model="listQuery">
        <el-form-item label="城市">
          <el-select v-model="listQuery.city" clearable placeholder="请选择城市" @change="cityChange" multiple>
            <el-option v-for="(item,index) in cityList" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务站">
          <el-select v-model="listQuery.storeNames" clearable placeholder="请选择服务站" >
            <el-option v-for="(item,index) in stationList" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间范围">
          <el-date-picker
            v-model="listQuery.createTime"
            type="monthrange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM"
            :picker-options="pickerOptions"
            @change="dateChange"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="getServiceQualityStackLine">查询</el-button>
        </el-form-item>
      </el-form>
      <!-- 数据 -->
      <div class="top-wrapper">
        <div class="data-board">
          <div
            :class="[{'danger-rate':Number(wholeData.currentTotalRate.substr(0,wholeData.currentTotalRate.length-1))>0.5},'whole-complain']"
          >
            <div class="title">当月整体客诉率</div>
            <div class="whole-complain-rate">{{wholeData.currentTotalRate}}</div>
            <div>{{wholeData.currentTotalClaim}}单</div>
          </div>
          <div
            :class="[{'danger-rate':Number(wholeData.currentBJRate.substr(0,wholeData.currentBJRate.length-1))>0.5},'clean-complain','small-data-board']"
          >
            <div>当月保洁客诉率</div>
            <div class="data">
              <span>{{wholeData.currentBJRate}}</span>
              <span>{{wholeData.currentBJClaim}}单</span>
            </div>
          </div>
          <div
            :class="[{'danger-rate':Number(wholeData.currentPlRate.substr(0,wholeData.currentPlRate.length-1))>0.5},'category-complain','small-data-board']"
          >
            <div>当月品类客诉率</div>
            <div class="data">
              <span>{{wholeData.currentPlRate}}</span>
              <span>{{wholeData.currentPlClaim}}单</span>
            </div>
          </div>
        </div>
        <!-- 曲线图 -->
        <div id="mainChart1"></div>
        <!-- 差评来源分布 -->
        <div class="complain-source">
          <!-- <el-carousel
            trigger="click"
            height="310px"
            indicator-position="outside"
            :autoplay="false"
          >
            <el-carousel-item>
              <div id="mainChart6"></div>
              <p>差评来源分布</p>
            </el-carousel-item>
            <el-carousel-item> -->
              <div id="mainChart8"></div>
              <p>工单处理结果分布</p>
            <!-- </el-carousel-item>
          </el-carousel> -->
        </div>
      </div>
    </el-card>
      <!-- 客诉数与服务能力 -->
     <el-card shadow="hover" style="margin:10px 0;">
           <!-- 搜索 -->
      <el-form :inline="true" size="small" v-model="listQuery1">
        <el-form-item label="城市">
          <el-select v-model="listQuery1.city" clearable placeholder="请选择城市" @change="cityChange1" multiple>
            <el-option v-for="(item,index) in cityList" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="服务站">
          <el-select v-model="listQuery1.storeNames" clearable placeholder="请选择服务站">
            <el-option v-for="(item,index) in stationList1" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="时间颗粒度">
            <el-select v-model="listQuery1.timeType" placeholder="请选择时间颗粒度">
              <el-option label="天" value="2"></el-option>
              <el-option label="月" value="1"></el-option>
            </el-select>
          </el-form-item>
           <el-form-item label="时间范围" v-if="listQuery1.timeType==2">
            <el-date-picker
              v-model="listQuery1.createTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions1"
              @change="dateChange1"
            ></el-date-picker>
          </el-form-item>
        <el-form-item label="时间范围" v-if="listQuery1.timeType==1">
          <el-date-picker
            v-model="listQuery1.createTime1"
            type="monthrange"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
            value-format="yyyy-MM"
            :picker-options="pickerOptions"
            @change="dateChange2"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="getServicePowerLineGraph">查询</el-button>
        </el-form-item>
      </el-form>

             <div class="top-wrapper1">

        <!-- 曲线图 -->
        <div id="mainChart9"></div>
        <!-- 差评来源分布 -->
        <!-- <div class="complain-source">

              <div id="mainChart8"></div>
              <p>工单处理结果分布</p>

        </div> -->
      </div>
     </el-card>

    <!-- 客诉-->
    <div class="echart-wrapper" style="margin:10px 0;">
      <div class="customer-complain">
        <el-card shadow="hover">
          <!-- <p>【保洁客诉分类】/【品类客诉分类】</p> -->
          <!-- <div class="pie-wrapper">

            <div id="mainChart2"></div>
            <div id="mainChart3"></div>
          </div>-->

          <el-carousel
            trigger="click"
            height="600px"
            indicator-position="outside"
            :autoplay="false"
          >
            <el-carousel-item>
              <p>客诉</p>
              <div class="pie-wrapper">
                <div>
                  <div id="mainChart2"></div>
                  <p>保洁客诉分类</p>
                </div>
                <div>
                  <div id="mainChart3"></div>
                  <p>品类客诉分类</p>
                </div>
              </div>
              <!-- <p>保洁差评分类</p>
              <div id="mainChart4"></div>-->
            </el-carousel-item>
            <el-carousel-item>
              <p>差评</p>
              <!-- <p>品类差评分类</p>
              <div id="mainChart5"></div>-->
              <div class="pie-wrapper">
                <div>
                  <div id="mainChart4"></div>
                  <p>保洁差评分类</p>
                </div>
                <div>
                  <div id="mainChart5"></div>
                  <p>品类差评分类</p>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </el-card>
      </div>
      <div class="bad-comment">
        <el-card shadow="hover">
          <p>保洁师异常报备</p>
          <div id="mainChart7"></div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import Service from "../script/api/service";
import globalData from "@/components/common/globaldata/global.data.vue";
export default {
  name: "saleGmv",
  data() {
    return {
      wholeData: {
        currentTotalRate: "0%",
        currentTotalOrder: "",
        currentBJRate: "0%",
        currentBJOrder: "",
        currentPlRate: "0%",
        currentPlOrder: "",
        currentPlClaim:"",
        currentTotalClaim:"",
        currentBJClaim:""
      },
      complainData: {
        aliveDispose: "",
        avgTime: "",
        superTikects: "",
        overTimeOrderCount: "",
        callInRate: "",
      },
      cityList: [],
      stationList: [],
      stationList1: [],
      allStationList: [],
      listQuery: {
        city: [],
        // storeNames: [],
        storeNames: "",
        createTime: ""
      },
      listQuery1: {
        city: [],
        timeType: "2",
        storeNames: '',
        createTime: "",
        createTime1: "",
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "今年至今",
            onClick(picker) {
              const end = new Date();
              const start = new Date(new Date().getFullYear(), 0);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近六个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 6);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一年",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setMonth(start.getMonth() - 12);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
        pickerOptions1: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近半个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 15);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
    };
  },
  mounted() {
    // this.getCityStation();
       this.cityList = JSON.parse(window.localStorage.getItem("allHmCity"));

          // this.listQuery.city = this.cityList[0];
          // this.listQuery1.city = this.cityList[0];
            let allHmStation=JSON.parse(window.localStorage.getItem("allHmStation"));
          let allList=[];
          allHmStation.forEach(item=>{
            let list=item.station_names.split(',');
            allList=allList.concat(list);
          });
          this.allStationList =allList;
          this.stationList= this.allStationList;
          this.stationList1= this.allStationList;
          // this.allStationList = JSON.parse(window.localStorage.getItem("allHmStation"));
          // this.cityChange(this.listQuery.city);
          // this.cityChange1(this.listQuery1.city);
    let currentTime = new Date().getTime();
    let currentDate = this.formateDay(
      new Date(currentTime - 3600 * 1000 * 24 * 1)
    );

    let startDate = this.formateDay(
      new Date(currentTime - 3600 * 1000 * 24 * 30)
    );
    let beginMonth = this.formateMonth(
      new Date(currentTime - 3600 * 1000 * 24 * 365)
    );
    let endMonth = this.formateMonth(new Date());
    this.listQuery.createTime = [beginMonth, endMonth];
    this.listQuery1.createTime1 = [beginMonth, endMonth];
    this.listQuery1.createTime = [startDate, currentDate];

    this.claimSummaryAndPie();
    this.getServiceQualityStackLine();
    this.getServicePowerLineGraph();
    // this.initMainChart("mainChart2", "保洁客诉分类");
    // this.initMainChart("mainChart3", "品类客诉分类");
    // this.initMainChart("mainChart4", "保洁差评分类");
    // this.initMainChart("mainChart5", "保洁差评分类");
    // this.initPieChart("mainChart6");
    // this.initDynamicChart("mainChart7");
  },
  methods: {
    getCityStation() {
      Service.$axiosGetUserAuthBuzData({
        userId:globalData.userInfo.id
      }).then(res => {
        if (res.data.errno == "0") {
          this.cityList = res.data.data.userCityDataList;

          this.listQuery.city = res.data.data.userCityDataList[0].dataName;
          this.allStationList = res.data.data.userCityDataList;
          this.stationList = res.data.data.userCityDataList[0].subList;

          this.getServiceQualityStackLine();
        } else {
          this.$message.warning(res.data.errmsg);
        }
      });
    },
    cityChange(value) {
      // this.listQuery.storeNames = "";
      // let currentStation = this.allStationList.filter(item => {
      //   return item.city == value;
      // });
      // this.stationList = currentStation[0].station_names.split(',');

        this.listQuery.storeNames = '';
      let allHmStation=JSON.parse(window.localStorage.getItem("allHmStation"));
      if(value.length==0){
        this.stationList= this.allStationList;
      }else{
      let currentStation = allHmStation.filter(item => {
          return value.includes(item.city);;
      });
      let allList=[];
          currentStation.forEach(item=>{
            let list=item.station_names.split(',');
            allList=allList.concat(list);
          });
      this.stationList = allList;
      }
    },
     cityChange1(value) {
       this.listQuery1.storeNames = '';
       let allHmStation=JSON.parse(window.localStorage.getItem("allHmStation"));
      if(value.length==0){
        this.stationList= this.allStationList;
      }else{
      let currentStation = allHmStation.filter(item => {
          return value.includes(item.city);;
      });
      let allList=[];
          currentStation.forEach(item=>{
            let list=item.station_names.split(',');
            allList=allList.concat(list);
          });
      this.stationList1 = allList;
      }
    },
    dateChange(e) {
      if (e != null) {
        let start =
          new Date(e[0]).getFullYear() * 12 + new Date(e[0]).getMonth();
        let end = new Date(e[1]).getFullYear() * 12 + new Date(e[1]).getMonth();
        let isOvertime = end - start - 12 > 0;
        if (isOvertime) {
          this.$message.warning("选中时间范围不能超过一年");
          this.listQuery.createTime = null;
        }
      }
    },
      dateChange1(e) {
      if (e != null) {
        let start = new Date(e[0]).getTime();
        let end = new Date(e[1]).getTime();
        let isOvertime = end - start - 3600 * 1000 * 24 * 30 > 0;
        if (isOvertime) {
          this.$message.warning("选中时间范围不能超过一个月");
          this.listQuery1.createTime = null;
        }
      }
    },
    dateChange2(e) {
      if (e != null) {
        let start =
          new Date(e[0]).getFullYear() * 12 + new Date(e[0]).getMonth();
        let end = new Date(e[1]).getFullYear() * 12 + new Date(e[1]).getMonth();
        let isOvertime = end - start - 12 > 0;
        if (isOvertime) {
          this.$message.warning("选中时间范围不能超过一年");
          this.listQuery1.createTime1 = null;
        }
      }
    },
    getServiceQualityStackLine() {
      if (this.isEmptyObjVue(this.listQuery.createTime)) {
        this.$message.warning("时间范围不能为空");
        return false;
      }
      let params = {
        startTime: !this.isEmptyObjVue(this.listQuery.createTime)
          ? this.listQuery.createTime[0] + ""
          : "",
        endTime: !this.isEmptyObjVue(this.listQuery.createTime)
          ? this.listQuery.createTime[1] + ""
          : "",
        city: this.listQuery.city.join(','),
        // serviceStation: this.listQuery.storeNames.join(",")
        serviceStation: this.listQuery.storeNames
      };
    //    const loading = this.$loading({
    //     lock: true,
    //     text: "拼命加载中...",
    //     background: "rgba(0,0,0,0.4)"
    // });


      Service.$axiosServiceQualityStackLine(params).then(res => {
        // console.log(res);
      // loading.close();
        if (res.data.errno == "0") {
          this.wholeData = res.data.data;

          let category = res.data.data.month;
          let series = res.data.data.series;
          let claimAndServerPower=res.data.data.claimAndServerPower;
          this.initMainChart1(category, series);
          // this.initMainChart9(category,claimAndServerPower);
          let result = res.data.data;
          this.initMainChart(
            "mainChart2",
            result.bjOneClaim,
            result.bjOneCount
          );
          this.initMainChart(
            "mainChart3",
            result.plOneClaim,
            result.plOneCount
          );
          this.initMainChart(
            "mainChart4",
            result.bjTwoClaim,
            result.bjTwoCount
          );
          this.initMainChart(
            "mainChart5",
            result.plTwoClaim,
            result.plTwoCount
          );
          let length=(result.exceptionReports.exceptionReports[0]).length;
          // this.initPieChart("mainChart6",'差评来源分布', result.orderSource);
          this.initPieChart("mainChart8", '工单处理结果分布',result.ticketResult);
          this.initDynamicChart(
            "mainChart7",
            result.exceptionReports.exceptionReports,
            result.exceptionReports.exceptionReports[0][length-1]
          );
        } else {
          this.$message.warning(res.data.errmsg);
        }
      });
    },
      getServicePowerLineGraph() {

      let params = {};
      if (this.listQuery1.timeType == 2) {
        if (this.isEmptyObjVue(this.listQuery1.createTime)) {
          this.$message.warning("请选择日期");
          return false;
        }

        params = {
          startTime: !this.isEmptyObjVue(this.listQuery1.createTime)
            ? this.listQuery1.createTime[0]
            : "",
          endTime: !this.isEmptyObjVue(this.listQuery1.createTime)
            ? this.listQuery1.createTime[1]
            : "",
          city: this.listQuery1.city.join(','),
          serviceStation: this.listQuery1.storeNames,
          timeType: "2"

        };
      } else {
        if (this.isEmptyObjVue(this.listQuery1.createTime1)) {
          this.$message.warning("请选择日期");
          return false;
        }
        params = {
          startMonth: !this.isEmptyObjVue(this.listQuery1.createTime1)
            ? this.listQuery1.createTime1[0]
            : "",
          endMonth: !this.isEmptyObjVue(this.listQuery1.createTime1)
            ? this.listQuery1.createTime1[1]
            : "",
          city: this.listQuery1.city.join(','),
          serviceStation: this.listQuery1.storeNames,
          timeType: "1"

        };
      }

      Service.$axiosCustomerClaimAndServicePowerLineGraph(params).then(res => {
        // console.log(res);
        if (res.data.errno == 0) {
          // this.initEchart(res.data.data, "mainChart", "实销额与单量");
          // this.initEchart(res.data.data, "mainChart1", "服务GMV与单量");
          let category=(this.listQuery1.timeType == 1?res.data.data.erveryMonth:res.data.data.everyDay);
          let claimAndServerPower=res.data.data.claimAndServerPower;
           this.initMainChart9(category,claimAndServerPower);
        } else {
          this.$message.warning(res.data.errmsg);
        }
      });
    },
    initMainChart1(month, value) {
      var chartDom = document.getElementById("mainChart1");
      var myChart = this.$echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["整体", "保洁", "品类"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: {
          type: "category",
          // boundaryGap: false,
          data: month
        },
        yAxis: {
          type: "value",
          axisLabel: {
            formatter: "{value} %"
          }
        },
        series: [
          {
            name: "整体",
            type: "line",
            smooth: true,
            data: value[0]
          },
          {
            name: "保洁",
            type: "line",
            smooth: true,
            data: value[1]
          },

          {
            name: "品类",
            type: "line",
            smooth: true,
            data: value[2]
          }
        ]
      };

      myChart.setOption(option, true);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
      initMainChart9(month, value) {
      var chartDom = document.getElementById("mainChart9");
      var myChart = this.$echarts.init(chartDom);
      var option;

      option = {
     title: {
          text: '客诉数与服务能力投诉数(不区分成立与否)',
          left:'center'
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["客诉数", "服务能力投诉数"],
          bottom:0
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: {
          type: "category",
          // boundaryGap: false,
          data: month,
           axisLabel: {  rotate: 30 }
        },
        yAxis: {
          type: "value",
          // axisLabel: {
          //   formatter: "{value} %"
          // }
        },
        series: [
          {
            name: "客诉数",
            type: "line",
            // smooth: true,
            data: value.customerClaimCount
          },
          {
            name: "服务能力投诉数",
            type: "line",
            // smooth: true,
            data: value.servicePowerCount
          },


        ]
      };

      myChart.setOption(option, true);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
    claimSummaryAndPie() {
      Service.$axiosClaimSummaryAndPie().then(res => {
        // console.log(res);
        if (res.data.errno == "0") {
          let result = res.data.data;
          this.complainData = result;
        } else {
          this.$message.warning(res.data.errmsg);
        }
      });
    },

    initMainChart(id, key, value) {
      var chartDom = document.getElementById(id);
      var myChart = this.$echarts.init(chartDom);
      var option;

      option = {
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ["line", "bar"] },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "value",
          // boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: "category",
          data: key
        },
        series: [
          {
            // name: '单量',
            type: "bar",
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    {
                      offset: 0,
                      color: "#FE8440" // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#FFB199" // 100% 处的颜色
                    }
                  ],
                  false
                )
              }
            },

            data: value
          }
        ]
      };

      // if (id == "mainChart4") {
      //   option.legend = {
      //     orient: "vertical",
      //     left: "center",
      //     top: 30
      //   };
      // }

      myChart.setOption(option, true);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
    initPieChart(id,name, data) {
      var chartDom = document.getElementById(id);
      var myChart = this.$echarts.init(chartDom);
      var option;

      option = {
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ["line", "bar"] },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        tooltip: {
          trigger: "item",
          // formatter: "{a} <br/>{b} : {c}%",
          formatter: "{a} <br/>{b} : {c}",
          axisPointer: {
            type: "shadow"
          }
        },
        // legend: {},

        series: [
          {
            name: name,
            type: "pie",
            radius: "50%",
            label: {
              // formatter: "{d}%"
            },
            data: data,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };

      myChart.setOption(option, true);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
    initDynamicChart(id, data, target) {
      // console.log(target);
      var chartDom = document.getElementById(id);
      var myChart = this.$echarts.init(chartDom);
      var option;
      let length=data.length-1;
      let seriesList=[];
      for(let i=0;i<length;i++){
        let item={
            type: "line",
            smooth: true,
            seriesLayoutBy: "row",
            emphasis: { focus: "series" }
          };
          seriesList.push(item);

      }
       seriesList.push({

            type: "pie",
            id: "pie",
            radius: "30%",
            center: ["50%", "25%"],
            emphasis: {
              focus: "self"
            },
            label: {
              formatter: "{b}: {@" + target + "} ({d}%)"
            },
            encode: {
              itemName: "month",
              value: target,
              tooltip: target
            }

       });
      option = {
        // legend: {},
        tooltip: {
          trigger: "axis",
          showContent: false
        },
        dataset: {
          source: data
          //  [
          //   ["product", "2012", "2013", "2014", "2015", "2016", "2017"],
          //   ["Milk Tea", 56.5, 82.1, 88.7, 70.1, 53.4, 85.1],
          //   ["Matcha Latte", 51.1, 51.4, 55.1, 53.3, 73.8, 68.7],
          //   ["Cheese Cocoa", 40.1, 62.2, 69.5, 36.4, 45.2, 32.5],
          //   ["Walnut Brownie", 25.2, 37.1, 41.2, 18, 33.9, 49.1]
          // ]
        },
        xAxis: { type: "category" },
        yAxis: { gridIndex: 0 },
        grid: { top: "55%" },
        series: seriesList
      };
      myChart.on("updateAxisPointer", function(event) {
        const xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
          const dimension = xAxisInfo.value + 1;
          myChart.setOption({
            series: {
              id: "pie",
              label: {
                formatter: "{b}: {@[" + dimension + "]} ({d}%)"
              },
              encode: {
                value: dimension,
                tooltip: dimension
              }
            }
          });
        }
      });

      myChart.setOption(option, true);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
    goTicket(tab) {
            this.$router.push({
                path: '/serviceQualityDetail',
                query: {
                    activeTab: tab
                }
            });
        }




  }
};
</script>

<style scoped>
.crumbs {
  margin: 0 0 10px 0;
}

h1,
h2 {
  font-weight: normal;
}
.el-card {
  overflow-x: scroll;
  min-width: 1200px;
  border-radius: 8px;
}
.echart-wrapper .el-card {
  min-width: 790px;
}
.bad-comment .el-card {
  min-width: 400px;
}
.top-wrapper {
  display: flex;
  height: 340px;
  padding: 0 0 20px 0;
}
.data-board {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 200px;
  color: #fff;
  margin-right: 22px;
}
.whole-complain {
  background: #8de04a;
  border-radius: 10px;
  width: 200px;
  height: 150px;
  padding: 20px 10px 12px 20px;
  text-align: center;
}
.data-board .danger-rate {
  background: #e05f34;
}
.whole-complain .title {
  text-align: left;
}
.small-data-board {
  height: 75px;
  border-radius: 10px;
  width: 200px;
  padding: 6px 10px 12px 20px;
  font-size: 18px;
  background: #8de04a;
}
.small-data-board .data {
  margin-top: 6px;
  padding: 0 20px 0 14px;
  display: flex;
  width: 170px;
  justify-content: space-between;
}
.whole-complain-rate {
  font-size: 36px;
  margin: 10px 0 6px;
}

.small-font {
  font-size: 10px;
}
#mainChart1 {
  /* min-width: 900px; */
  height: 320px;
  flex: 2;
}
.top-wrapper1 {
  display: flex;
  height: 440px;
  padding: 0 0 20px 0;
}
#mainChart9 {
  /* min-width: 900px; */
  height: 420px;
  flex: 2;
}

.pie-wrapper {
  display: flex;
  margin-top: -20px;
}
.pie-wrapper > div {
  flex: 1;
  text-align: center;
}
.pie-wrapper > div p {
  margin-top: 8px;
}
#mainChart2,
#mainChart3 {
  /* min-width: 380px; */
  height: 540px;
  width: 100%;
}
#mainChart4,
#mainChart5 {
  /* min-width: 380px; */
  height: 540px;
  width: 100%;
}
#mainChart7 {
  height: 540px;
  width: 100%;
  margin-top: 30px;
}
.echart-wrapper {
  display: flex;
}
.customer-complain {
  flex: 2;
  margin-right: 10px;
}
.bad-comment {
  flex: 1.2;
}
.complain-data {
  display: flex;
  text-align: center;
  justify-content: space-between;
  /* border-bottom: 2px dashed #946c5f; */
  /* padding: 10px 0 10px 0; */
}
.complain-data > div.data-item {
  height: 105px;
  background: #50c6c7;
  border-radius: 10px;
  /* flex:1; */
  width: 164px;
  color: #fff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 12px;
  align-items: center;
  text-align: left;
  font-size: 15px;
  font-weight: lighter;
}
.complain-data > div.special {
  background: #e05f34;
}
.echart-wrapper .el-card {
  /* min-width: 595px;
  margin-right: 10px;
  flex: 1; */
  height: 700px;
}
.el-carousel__indicators--outside button {
  width: 10px !important;
  height: 10px !important;
  border-radius: 10px;
}
.complain-data img {
  width: 32px;
  height: 32px;
  margin-right: 8px;
}
.data-item > div > div:first-child {
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: normal;
}
.complain-source {
  flex: 1.2;
  padding: 6px 6px 0;
  text-align: center;
}
#mainChart6,#mainChart8{
  width: 100%;
  height: 280px;
}
.link-ticket:hover{
 cursor: pointer;
}
/* #mainChart8 {
  padding-top:60px;
  width: 100%;
  height: 380px;
} */
</style>
