<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>花王数据看板</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- <el-card shadow="hover"> -->

    <div class="top-data">
      <div class="data-left">
        <div class="data-left-item">
          <div class="data-left-item-title">本月销售GMV</div>
          <div class="data-left-item-value1">
            <span style="color:#F05B1A">100000￥</span>
          </div>
          <div class="data-left-item-value2">
            <span class="green" :class="{ red: nannyData.dyTbZbType == 0 }"></span>
            <span class="greena" :class="{ reda: nannyData.dyTbZbType == 0 }">99%</span>
          </div>
        </div>
        <div class="data-right-item">
          <div class="data-right-item-title">
            销售单量：199单
          </div>
          <div class="data-right-item-title">
            销售额：1999元
          </div>
          <div class="data-right-item-title">
            销售单量：1999单
          </div>
          <div class="data-right-item-title">
            退款额：1999元
          </div>
          <div class="data-right-item-title">
            退款单量：192单
          </div>
        </div>
      </div>
      <div class="data-right">
        <div class="data-left-item" style="width: 50%;">
          <div class="data-left-item-title">上月销售GMV</div>
          <div class="data-left-item-value1">
            <span style="color:#717171;">1000000￥</span>
          </div>
          <div class="data-left-item-value2">
            <span class="green" :class="{ red: nannyData.syTbZbType == 0 }"></span>
            <span class="greena" :class="{ red: nannyData.syTbZbType == 0 }">99%</span>
          </div>
        </div>
        <div class="data-right-item">
          <div class="data-right-item-title">
            销售单量：199单
          </div>
          <div class="data-right-item-title">
            销售额：1999元
          </div>
          <div class="data-right-item-title">
            销售单量：1999单
          </div>
          <div class="data-right-item-title">
            退款额：1999元
          </div>
          <div class="data-right-item-title">
            退款单量：192单
          </div>
        </div>
      </div>
    </div>

    <div class="middle-data">
      <div class="middle-data-box">

        <div class="middle-data-box-right">
          <div style="color: #999;">本月核销率</div>
          <div class="middle-data-box-right-value">
            12.33%
          </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-right">
          <div style="color: #999;">本月退款率</div>
          <div class="middle-data-box-right-value">
            12.33%
          </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-right">
          <div style="color: #999;">本月履约率</div>
          <div class="middle-data-box-right-value">
            12.33%
          </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-right">
          <div style="color: #999;">本月复购率</div>
          <div class="middle-data-box-right-value">
            12.33%
          </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-right">
          <div style="color: #999;">本月客诉率</div>
          <div class="middle-data-box-right-value">
            12.33%
          </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 class="middle-data-box">
        <div class="middle-data-box-right">
          <div style="color: #999;">本月好评率</div>
          <div class="middle-data-box-right-value">
            12.33%
          </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 style="padding-left: 40px;">
      <el-row>
        <h4>订单销量及履约情况</h4>
      </el-row>
    </div>

    <div style="padding-left: 40px;">
    <el-row>
      <h4>服务质量汇总</h4>
    </el-row>
  </div>

    <!-- </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 { 
      nannyData:{}
      
      
    };
  },
  mounted() {
    
  },
  beforeDestroy() { 
    
  },
  methods: {
    
    
  }
};
</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 {
  font-size: 16px;
  font-weight: bold;
}

.data-left-item-value1 {
  font-weight: bold;
  font-size: 28px;
  margin: 15px 0 12px;
}

.data-left-item {
  width: 50%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.data-right-item {
  margin-top: 5px;
  height: 140px;
  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: 80px;
  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>
