<style>
  .sex {
    height: calc(100% - 25px);
  }

  .statistics-title {
    font-size: 24px;
    color: #111;
    margin-bottom: 30px;
    font-family: perfectFont;
  }

  .sex .conten-box {
    display: flex;
    flex-direction: column;
    height: calc(100% - 62px);
  }

  .sex .conten-box .el-card .el-card__header {
    font-weight: normal !important;
  }

  .sex .conten-box .top {
    flex: 1.2;
    margin-bottom: 25px;
  }

  .sex .conten-box .bottom {
    flex: 0.8;
  }

  .sex .conten-box .left {
    height: 100%;
  }

  .sex .conten-box .el-card.blue {
    background: #409efe !important;
    color: #fff !important;
    height: calc(100% - 2px);
  }

  .sex .conten-box .el-card .el-card__body {
    padding: 20px;
    height: calc(100% - 98px);
    max-height: calc(100% - 98px);
  }

  .sex .conten-box .img {
    display: flex;
    align-items: flex-end;
    text-align: center;
    padding: 20px 70px 10px 70px !important;
    justify-content: space-between;
    font-size: 14px;
  }

  .sex .sjsm {
    display: flex;
    flex-direction: column;
  }

  .sex .sjsm>div:nth-child(1) {
    margin-bottom: 20px;
  }

  .sex .sjsm>div {
    flex: 1;
    background: rgba(244, 245, 249, 1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
  }

  .sex .sjsm>div .left {
    display: flex;
    align-items: center;
  }

  .sex .sjsm>div .left img {
    padding-right: 10px;
  }

  .sex .sjsm>div .right {
    text-align: right;
    color: #888888;
    font-size: 12px;
  }

  .sex .hight-font {
    color: #409efe !important;
    font-size: 14px;
  }

  .sex .situ {
    /* width: 100%;*/
    height: 100%;
  }

  .sex .situ .head {
    height: 36px;
    display: flex;
    line-height: 36px;
    margin: 10px 0;
    /* border-bottom: 1px solid #EEE; */
  }

  .sex .situ .c {
    font-size: 14px;
    color: #333;
    height: calc(100% - 20px);
    overflow-y: auto;
  }

  .sex .situ .bot {
    height: 20px;
    line-height: 20px;
    /* text-decoration: underline; */
    cursor: pointer;
    color: rgb(13, 36, 129);
    font-size: 12px;
    text-align: right;
  }
</style>
<template>
  <div class="sex" v-loading="loading">
    <div class="statistics-title bold18">单位统计</div>
    <div class="conten-box" v-if="!loading">
      <el-row :gutter="25" class="top">
        <el-col :span="16" class="left">
          <el-card class="blue">
            <div slot="header" class="clearfix">
              <span>单位统计</span>
            </div>
            <el-row :gutter="80" style="height: 100%;">
              <el-col :span="10" class="img">
                <div>
                  <div style="margin-bottom: 10px;">
                    <img src="../../assets/img/tongji/zc.png" alt />
                  </div>
                  <p>单位</p>
                </div>
              </el-col>
              <el-col :span="14" style="height: 100%;">
                <sexChart :myData="chartData" :strArr="strArr" />
              </el-col>
            </el-row>
          </el-card>
        </el-col>
        <el-col :span="8" style="height: 100%;">
          <el-card style="height: calc(100% - 2px);">
            <div slot="header" class="clearfix">
              <span>
                购物统计
                <span class="font-size-12">（按平均计算）</span>
              </span>
            </div>
            <shopChart :shopChartData="shopChartData" />
          </el-card>
        </el-col>
      </el-row>
      <el-row :gutter="25" class="bottom">
        <el-col :span="16" style="height: 100%;">
          <el-card style="height: 100%;">
            <div slot="header" class="clearfix">
              <span>数据说明</span>
            </div>
            <div style="height: 198px;overflow: auto;" class="sjsm">
              <div v-for="(item, index) in orders" :key="index">
                <div class="left">
                  <img v-if="index==0" src="../../assets/img/tongji/qinzhi.png" alt />
                  <img v-else-if="index==1" src="../../assets/img/tongji/miyue.png" alt />
                  <img v-else-if="index==2" src="../../assets/img/tongji/in3.png" alt />
                  <img v-else-if="index==3" src="../../assets/img/tongji/d1.png" alt />
                  <img v-else-if="index==4" src="../../assets/img/tongji/hanjia.png" alt />
                  <img v-else src="../../assets/img/tongji/qinzhi.png" alt />

                  <span class="font-size-12">{{item.UnitTypeName}}</span>
                </div>
                <div class="right">
                  <p>
                    累计报名
                    <span class="hight-font">{{item.OrderCount}}</span>人，报名均价为
                    <span class="hight-font">{{item.Unit_Price}}</span>元
                  </p>
                  <!-- 关联购物金额<span class="hight-font">{{item.ShopMoney}}</span>万， -->
                  <p>
                    最喜爱产品
                    <span class="hight-font">《{{item.LtName}}》</span>
                  </p>
                </div>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="8" style="height: 100%;">
          <el-card style="height: 100%;">
            <div slot="header" class="clearfix">
              <el-row style="width:100%">
                <el-col :span="12" size="30">推荐解答</el-col>
                <!-- <el-col :span="12" class="right-title">
                            <i class="iconfont icondianzan1"></i> 点赞
                </el-col>-->
              </el-row>
            </div>
            <div class="situ">
              <div class="c">{{topOne && topOne.Content ? topOne.Content : '暂无'}}</div>
              <div class="bot" @click="drawer = true">
                {{BbsList.length ? '查看更多，参与讨论('+ BbsList.length +')' : '暂时还没有讨论，快来发起讨论吧~'}}
                <i class="el-icon-d-arrow-right"></i>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <el-drawer size="695px" :visible.sync="drawer" direction="rtl" :with-header="false">
      <discussBox :type="discussID" />
    </el-drawer>
  </div>
</template>
<script>
  import sexChart from "./model/sexChart";
  import shopChart from "./model/shopChart";
  import discussBox from "./model/discussBox";
  export default {
    components: {
      sexChart,
      shopChart,
      discussBox,
    },
    data() {
      return {
        drawer: false,
        chartData: [0, 0],
        shopChartData: [],
        SexOrder: [],
        loading: false,
        strArr: ["世界500强", "事业单位", "其他", "教育机构"],
        orders: [],
        discussID: 18,
        BbsList: [],
        topOne: {},
      };
    },
    watch: {},
    mounted() {
      this.GetSexOrderList();
      this.GetBbsListByType();
    },
    methods: {
      GetBbsListByType() {
        this.apipost(
          "/api/Customer/GetBbsListByType", {
            t: this.discussID
          },
          (res) => {
            this.BbsList = res.data.data;

            if (this.BbsList && this.BbsList.length > 0) {
              this.topOne = this.BbsList[0];
              this.BbsList.forEach((x) => {
                if (x.Likes > this.topOne.Likes) {
                  this.topOne = x;
                }
              });
            }
          }
        );
      },
      GetSexOrderList() {
        this.loading = true;
        this.strArr = [];
        this.apipost("/api/Statistic/GetUnitTypeOrderList", {}, (res) => {
          // this.SexOrder = res.data.data
          let data = res.data.data;
          data.forEach((item) => {
            this.strArr.push(item.UnitTypeName);
          });

          this.loading = false;
          let contShop =
            res.data.data[0].ShopMoney +
            res.data.data[1].ShopMoney +
            res.data.data[2].ShopMoney +
            res.data.data[3].ShopMoney +
            res.data.data[4].ShopMoney,
            one = res.data.data[0].ShopMoney,
            two = res.data.data[1].ShopMoney,
            three = res.data.data[2].ShopMoney,
            four = res.data.data[3].ShopMoney,
            five = res.data.data[4].ShopMoney,
            contNum =
            res.data.data[0].OrderCount +
            res.data.data[1].OrderCount +
            res.data.data[2].OrderCount +
            res.data.data[3].OrderCount +
            res.data.data[4].OrderCount,
            zaiN = res.data.data[0].OrderCount,
            twoN = res.data.data[1].OrderCount,
            threeN = res.data.data[2].OrderCount,
            fourN = res.data.data[3].OrderCount,
            fiveN = res.data.data[4].OrderCount;
          let chartData = [],
            shopChartData = [];
          chartData.push(((zaiN / contNum) * 100).toFixed(2));
          chartData.push(((twoN / contNum) * 100).toFixed(2));
          chartData.push(((threeN / contNum) * 100).toFixed(2));
          chartData.push(((fourN / contNum) * 100).toFixed(2));
          chartData.push(((fiveN / contNum) * 100).toFixed(2));
          shopChartData.push({
            num: Number(((one / contShop) * 100).toFixed(2)),
            color: "#409efe",
            text: "世界500强",
          });
          shopChartData.push({
            num: Number(((two / contShop) * 100).toFixed(2)),
            color: "#FFA475",
            text: "事业单位",
          });
          shopChartData.push({
            num: Number(((three / contShop) * 100).toFixed(2)),
            color: "#999",
            text: "其他",
          });
          shopChartData.push({
            num: Number(((four / contShop) * 100).toFixed(2)),
            color: "#6EBCE2",
            text: "教育机构",
          });
          shopChartData.push({
            num: Number(((five / contShop) * 100).toFixed(2)),
            color: "#98BD7B",
            text: "聚集",
          });
          this.chartData = chartData;
          this.shopChartData = shopChartData;
          this.orders = res.data.data;
        });
      },
    },
  };
</script>