<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>三嫂数据</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- <el-card shadow="hover"> -->
    <el-tabs type="border-card" v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane label="全部三嫂数据" name="1">
        <div class="top-data">
          <div class="data-left">
            <div class="data-left-item">
              <div class="data-left-item-title">本月累计业绩</div>
              <div class="data-left-item-value1">
                {{ nannyData.dyYjMoney }}￥
              </div>
              <div class="data-left-item-value2">
                <span
                  class="green"
                  :class="{ red: nannyData.dyTbZbType == 0 }"
                ></span>
                <span
                  class="greena"
                  :class="{ reda: nannyData.dyTbZbType == 0 }"
                  >{{ nannyData.dyTbZb }}%</span
                >
              </div>
            </div>
            <div class="data-right-item">
              <div class="data-right-item-title">
                全量线索量：{{ nannyData.dyXsCount }}
              </div>
              <div class="data-right-item-title">
                全量线索订单：{{ nannyData.dyDdCount }}
              </div>
              <div class="data-right-item-title">
                月平均客单价：{{ nannyData.dyKdMoney }}
              </div>
            </div>
          </div>
          <div class="data-right">
            <div class="data-left-item" style="width: 50%;">
              <div class="data-left-item-title">上月累计业绩</div>
              <div class="data-left-item-value1">
                {{ nannyData.syYjMoney }}￥
              </div>
              <div class="data-left-item-value2">
                <span
                  class="green"
                  :class="{ red: nannyData.syTbZbType == 0 }"
                ></span>
                <span class="greena" :class="{ red: nannyData.syTbZbType == 0 }"
                  >{{ nannyData.syTbZb }}%</span
                >
              </div>
            </div>
            <div class="data-right-item">
              <div class="data-right-item-title">
                全量线索量：{{ nannyData.syXsCount }}
              </div>
              <div class="data-right-item-title">
                全量线索订单：{{ nannyData.syDdCount }}
              </div>
              <div class="data-right-item-title">
                月平均客单价：{{ nannyData.syKdMoney }}
              </div>
            </div>
          </div>
        </div>

        <div class="middle-data">
          <div class="middle-data-box">
            <div class="middle-data-box-left">
              <img src="https://jzmall.lifejingzhi.com/file/jzreport/xs.png" />
            </div>
            <div class="middle-data-box-right">
              <div style="color: #999;">今日全量线索</div>
              <div class="middle-data-box-right-value">
                {{ nannyData.jrXsCount }}
              </div>
              <div>
                <span
                  class="green"
                  :class="{ red: nannyData.jrSxTbType == 0 }"
                ></span>
                <span
                  class="greena"
                  :class="{ reda: nannyData.jrSxTbType == 0 }"
                  >{{ nannyData.jrSxTbZb }}%</span
                >
              </div>
            </div>
          </div>
          <div class="middle-data-box">
            <div class="middle-data-box-left">
              <img src="https://jzmall.lifejingzhi.com/file/jzreport/dd.png" />
            </div>
            <div class="middle-data-box-right">
              <div style="color: #999;">全量线索订单</div>
              <div class="middle-data-box-right-value">
                {{ nannyData.jrDdCount }}
              </div>
              <div>
                <span
                  class="green"
                  :class="{ red: nannyData.jrDdCountTbType == 0 }"
                ></span>
                <span
                  class="greena"
                  :class="{ reda: nannyData.jrDdCountTbType == 0 }"
                  >{{ nannyData.jrDdCountTbZb }}%</span
                >
              </div>
            </div>
          </div>
          <div class="middle-data-box">
            <div class="middle-data-box-left">
              <img src="https://jzmall.lifejingzhi.com/file/jzreport/zhl.png" />
            </div>
            <div class="middle-data-box-right">
              <div style="color: #999;">全量线索转化率</div>
              <div class="middle-data-box-right-value">
                {{ nannyData.jrXszhl }}
              </div>
              <div>
                <span
                  class="green"
                  :class="{ red: nannyData.jrXszhlTbType == 0 }"
                ></span>
                <span
                  class="greena"
                  :class="{ reda: nannyData.jrXszhlTbType == 0 }"
                  >{{ nannyData.jrXszhlTbZb }}%</span
                >
              </div>
            </div>
          </div>
          <div class="middle-data-box">
            <div class="middle-data-box-left">
              <img src="https://jzmall.lifejingzhi.com/file/jzreport/zyj.png" />
            </div>
            <div class="middle-data-box-right">
              <div style="color: #999;">今日总业绩</div>
              <div class="middle-data-box-right-value">
                {{ nannyData.jrYjMoney }}
              </div>
              <div>
                <span
                  class="green"
                  :class="{ red: nannyData.jrYjMoneyTbType == 0 }"
                ></span>
                <span
                  class="greena"
                  :class="{ reda: nannyData.jrYjMoneyTbType == 0 }"
                  >{{ nannyData.jrYjMoneyTbZb }}%</span
                >
              </div>
            </div>
          </div>
          <div class="middle-data-box">
            <div class="middle-data-box-left">
              <img src="https://jzmall.lifejingzhi.com/file/jzreport/kdj.png" />
            </div>
            <div class="middle-data-box-right">
              <div style="color: #999;">今日均客单价</div>
              <div class="middle-data-box-right-value">
                {{ nannyData.jrKdMoney }}
              </div>
              <div>
                <span
                  class="green"
                  :class="{ red: nannyData.jrKdMoneyTbType == 0 }"
                ></span>
                <span
                  class="greena"
                  :class="{ reda: nannyData.jrKdMoneyTbType == 0 }"
                  >{{ nannyData.jrKdMoneyTbZb }}%</span
                >
              </div>
            </div>
          </div>
        </div>

        <div class="charts-data">
          <div class="charts-data-left">
            <div class="chart-title">
              <div class="chart-title-left">城市数据汇总</div>
              <div class="chart-title-right">
                <el-radio-group
                  v-model="cityDateType"
                  size="mini"
                  @input="cityDateChange"
                >
                  <el-radio-button label="1">昨日</el-radio-button>
                  <el-radio-button label="2">当月</el-radio-button>
                  <el-radio-button label="3">上月</el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div class="chart-title chart-title1">
              <div class="chart-yeji">
                <el-tabs v-model="cityDataType" @tab-click="cityDataChange">
                  <el-tab-pane label="业绩" name="1"></el-tab-pane>
                  <el-tab-pane label="订单量" name="2"></el-tab-pane>
                  <el-tab-pane label="客单价" name="3"></el-tab-pane>
                  <el-tab-pane label="线索量" name="4"></el-tab-pane>
                </el-tabs>
              </div>

              <div>
                <el-select
                  v-model="channel"
                  clearable
                  placeholder="全部渠道"
                  @change="handleSelectChange"
                >
                  <el-option
                    v-for="item in sourceList"
                    :key="item.id"
                    :value="item.sourceName"
                    :label="item.sourceName"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <div
              class="box"
              ref="charts"
              id="mains"
              style="width: 100%; height: 440px; margin-top: 10px"
            ></div>
          </div>
          <div class="charts-data-right" s>
            <div class="chart-title chart-title2">
              <div class="chart-title-left">服务分类</div>
              <div class="chart-title-right">
                <el-radio-group
                  v-model="serviceOrderType"
                  size="mini"
                  @input="serviceOrderChange"
                >
                  <el-radio-button label="1">昨日</el-radio-button>
                  <el-radio-button label="2">当月</el-radio-button>
                  <el-radio-button label="3">上月</el-radio-button>
                </el-radio-group>
              </div>
            </div>
            <div style="display:flex;">
              <div
                class="box"
                ref="chartContainer"
                id="main"
                style="width: 50%; height: 440px"
              ></div>
              <div class="table" style="width: 50%;height: 440px;">
                <el-table
                  :data="tableData"
                  :highlight-current-row="false"
                  :stripe="false"
                >
                  <el-table-column width="20">
                    <template slot-scope="scope">
                      <div
                        class="color-block"
                        :style="{
                          backgroundColor: colors[scope.$index % colors.length]
                        }"
                      ></div>
                    </template>
                  </el-table-column>

                  <el-table-column prop="serviceModel">
                    <template slot-scope="scope">
                      <span style="margin-left: 10px">{{
                        scope.row.serviceModel
                      }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="kdj" label="客单价" width="80">
                  </el-table-column>
                  <el-table-column prop="count" label="成单数量" width="80">
                  </el-table-column>
                  <el-table-column prop="payAmount" label="签约金额" width="80">
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>

    <!-- </el-card> -->
  </div>
</template>
<script>
import moment from "moment";
import Pagination from "./common/Pagination";
import url from "@/script/baseUrl.js";
import Service from "../script/api/service";
import globalData from "@/components/common/globaldata/global.data.vue";
import commutil from "@/components/common/globaldata/commutil.data.vue";
import * as echarts from "echarts";
import { data } from "jquery";
// import addTrainHisDia from './components/addTrainHisDia';
export default {
  components: { Pagination },
  computed: {
    colors() {
      return this.option.color;
    }
  },
  data() {
    return {
      activeTab: "1",
      serviceOrderType: 3,
      cityDateType: 3,
      cityDataType: "1",
      channel: "",
      channelId: "",
      charts: null,
      options: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },

        grid: {
          left: "4%",
          right: "10%",
          bottom: "0%",
          top: "0%", //去掉标题，图表整体往上移动
          containLabel: true
        },
        xAxis: {
          type: "value",
          show: false, //直接设置show|的属性的话x轴的轴线和垂直于它的网格线以及x轴数据会一起显示隐藏，这里需要全部隐藏包括所以直接show，如果需要单独给它们设置显示隐藏详见以下设置
          bottom: 2,
          boundaryGap: ["0%", "1%"] //留白大小，坐标轴1边留白,横向柱状图的右侧label**人不会超出宽度被隐藏
        },
        yAxis: {
          boundaryGap: ["0%", "1%"], //留白大小，坐标轴1边留白
          axisLabel: {
            fontSize: 12,
            fontWeight: 800,
            interval: 0,
            margin: 10
          },
          type: "category",
          data: [],
          axisTick: {
            //y轴刻度线
            show: false
          },
          axisLine: {
            //y轴轴线
            show: false
          }
        },
        series: [
          {
            name: "",
            top: 10,
            color: "#00A6FC",
            type: "bar",
            stack: "总量",
            barCategoryGap: 2,
            itemStyle: {
              //通常情况下：
              normal: {
                //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
                color: function(params) {
                  var colorList = [
                    ["#1CAEFE", "#EEF1F2"],
                    ["#1CAEFE", "#EEF1F2"],
                    ["#1CAEFE", "#EEF1F2"],
                    ["#1CAEFE", "#EEF1F2"],
                    ["#1CAEFE", "#EEF1F2"],
                    ["#1CAEFE", "#EEF1F2"],
                    ["#1CAEFE", "#EEF1F2"],
                    ["#1CAEFE", "#EEF1F2"]
                  ];
                  var index = params.dataIndex;
                  if (params.dataIndex >= colorList.length) {
                    index = params.dataIndex - colorList.length;
                  }
                  return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                    {
                      offset: 0,
                      color: colorList[index][0]
                    },
                    {
                      offset: 1,
                      color: colorList[index][1]
                    }
                  ]);
                }
              }
            },
            label: {
              formatter: "{c}",
              right: "3%",
              show: true,
              textStyle: {
                fontWeight: 400,
                fontSize: 14,
                color: "#069AE6"
              },
              position: "right"
            },
            //设置柱的宽度
            barWidth: 18,
            data: []
          }
        ]
      },
      chartInstance: null,
      option: {
        tooltip: {
          trigger: "item",
          formatter:"{b}:{d}%"
        },
        legend: {
          orient: "vertical",
          left: "left",
          top: "center",
          data: []
        },
        color: [
          "#FFD3D3",
          "#FF9797",
          "#9E79FF",
          "#FA9BFF",
          "#B9DEFF",
          "#BAFFDC",
          "#FFEBBA"
        ],
        series: [
          {
            type: "pie",
            radius: "50%",
            label: {
              formatter: "{b}: {d}%"
            },
            data: []
          }
        ]
      },
      tableData: [],
      citydata: null,
      serviceData: null,
      nannyData: {},
      sourceList: [],
      cityType: ""
    };
  },
  mounted() {
    this.initBarChart();
    this.initPieChart();
    this.getNannyData();
    this.getSource();
    this.getCityData();
    this.getServiceData();
  },
  beforeDestroy() {
    this.disposePieChart();
    this.disposeBarChart();
  },
  methods: {
    getSource() {
      Service.$axiosGetSource()
        .then(res => {
          this.sourceList = res.data.data;
        })
        .catch(err => {
          console.log(err);
        });
    },
    getNannyData() {
      Service.$axiosGetNannyData()
        .then(res => {
          this.nannyData = res.data.data;
          // console.log(res.data.data);
        })
        .catch(err => {
          console.log(err);
        });
    },
    getCityData() {
      let params = {
        dateType: this.cityDateType,
        dataType: this.cityDataType,
        channelId: this.channelId
      };
      Service.$axiosGetNannyCityStation(params)
        .then(res => {
          if (res.data.errno == 0) {
            this.options.yAxis.data = res.data.data.cityList.reverse();
            this.options.series[0].data = res.data.data.data.reverse();
            if(this.cityDataType==1){
              this.options.series[0].name="业绩"
            }else if(this.cityDataType==2){
              this.options.series[0].name="订单量"
            }else if(this.cityDataType==3){
              this.options.series[0].name="客单价"
            }else if(this.cityDataType==4){
              this.options.series[0].name="线索量"
            }
            this.initBarChart();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    getServiceData() {
      let params = {
        dateType: this.serviceOrderType
      };
      Service.$axiosGetNannyServiceMode(params)
        .then(res => {
          if (res.data.errno == 0) {
            // console.log("服务模式", res.data.data);
            // console.log("服务模式1", res.data.data.serviceModelZb);
            // console.log("服务模式2", res.data.data.serviceModel);
            this.tableData = res.data.data.serviceModel.reverse();
            this.option.series[0].data = res.data.data.serviceModelZb.reverse();
            this.initPieChart();
          }
        })
        .catch(err => {});
    },

    cityDataChange(tab, event) {
      console.log("cityDataType", this.cityDataType);
      this.getCityData();
    },
    cityDateChange(val) {
      console.log(this.cityDateType);
      this.getCityData();
    },
    //选中的渠道id
    handleSelectChange(newValue) {
      // newValue是当前选中的sourceName
      const selectedOption = this.sourceList.find(
        item => item.sourceName === newValue
      );
      if (selectedOption) {
        const id = selectedOption.id;
        console.log("选中项的ID是:", id);
        this.channelId = id;
        console.log(this.channelId);
        this.getCityData();
      }
    },
    serviceOrderChange(val) {
      // console.log(val);
      console.log(this.serviceOrderType);
      this.getServiceData();
    },
    handleTabClick(tab) {},
    initPieChart() {
      this.chartInstance = echarts.init(this.$refs.chartContainer);
      this.chartInstance.setOption(this.option);
    },
    disposePieChart() {
      if (this.chartInstance) {
        this.chartInstance.dispose();
        this.chartInstance = null;
      }
    },
    initBarChart() {
      this.charts = echarts.init(this.$refs.charts);
      this.charts.setOption(this.options);
    },
    disposeBarChart() {
      if (this.charts) {
        this.charts.dispose();
        this.charts = null;
      }
    }
  }
};
</script>
<style scoped>
.crumbs {
  margin: 0 0 10px 0;
}
.data-left::after {
  content: "";
  display: block;
  width: 2px;
  background-color: #cecece;
  height: 160px;
}
.el-tabs__content {
  background-color: unset;
}

.green {
  display: inline-block;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-bottom: 8px solid green;
}
.greena {
  color: green;
}
.red {
  display: inline-block;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-top: 8px solid red;
  margin-top: 4px;
  position: relative;
  top: 6px;
}
.reda {
  color: red;
}
.top-data {
  display: flex;
  text-align: center;
  width: 100%;
  height: 160px;
  background-color: #fff;
  padding: 30px 50px;
}
.data-left,
.data-right {
  display: flex;
  width: 50%;
}
.data-left-item-title {
  color: #999;
  font-size: 16px;
  font-weight: 500;
}
.data-left-item-value1 {
  font-weight: bold;
  font-size: 24px;
  margin: 15px 0 12px;
}
.data-left-item {
  width: 50%;
  display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.data-right-item {
  width: 50%;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-weight: 500;
}

.data-left-item-value2 {
  color: green;
  font-size: 16px;
}
.middle-data {
  width: 100%;
  height: 150px;
  background-color: #fff;
  margin: 20px auto;
  padding: 30px 40px;
  display: flex;
}
.middle-data-box {
  width: 20%;
  height: 100%;
  display: flex;
}
.middle-data-box-left {
  width: 100px;
  height: 80px;
}
.middle-data-box-left img {
  width: 100%;
  height: 100%;
}
.middle-data-box-right {
  text-align: center;
  display: flex;
  flex-direction: column;
  width: 50%;
  height: 100%;
}
.middle-data-box-right-value {
  font-weight: bold;
  font-size: 24px;
  margin: 15px 0 12px;
}
.charts-data {
  display: flex;
  justify-content: space-between;
}
.charts-data-left,
.charts-data-right {
  width: 49%;
  height: 580px;
  background-color: #fff;
  padding-top: 20px;
  padding-right: 10px;
}
.chart-title {
  display: flex;
  justify-content: space-between;
  height: 40px;
  line-height: 40px;
  padding-left: 20px;
  font-weight: bold;
  font-size: 18px;
}
.chart-title1 {
  border-bottom: 1px solid #ccc;
  height: 42px;
  font-weight: normal;
  font-size: 14px;
}
.chart-title2 {
  margin-bottom: 30px;
}
.chart-title-right {
  display: flex;
  align-items: center;
}
.chart-yeji {
  display: flex;
  justify-content: space-evenly;
  width: 200px;
  height: 30px;
  margin-top: 10px;
}
.el-table .el-table__row {
  height: 50px; /* 举例：设置行高为50px */
}
.el-table {
  width: 100%;
  background-color: rgba(205, 236, 247, 0.1) !important;
}
.el-table th,
.el-table tr {
  background-color: rgba(205, 236, 247, 0.1) !important;
}
.el-table .el-table__row {
  height: 58px;
  background: rgba(205, 236, 247, 0.1);
}
.color-block {
  width: 10px; /* 颜色块的宽度 */
  height: 10px; /* 颜色块的高度 */
  display: inline-block; /* 内联块级元素 */
  border-radius: 50%;
}
.blue {
  background-color: #20b5eb;
}

.el-select > .el-input {
  display: block;
  width: 120px;
}

.el-radio-button .el-radio-button__inner {
  width: 100px;
}
.chart-yeji .el-tabs__nav-wrap::after {
  position: static !important;
}
.el-tabs__active-bar {
  background-color: transparent !important;
}
</style>
