
<style>
.festivalOrder {
  height: calc(100% - 25px);
}
.statistics-title {
  font-size: 24px;
  color: #111;
  margin-bottom: 30px;
  font-family: perfectFont;
}
.festivalOrder .conten-box {
  display: flex;
  flex-direction: column;
  height: calc(100% - 62px);
}
.festivalOrder .conten-box .el-card .el-card__header {
  font-weight: normal !important;
}
.festivalOrder .conten-box .top {
  flex: 1.2;
  margin-bottom: 25px;
}
.festivalOrder .conten-box .bottom {
  flex: 0.8;
}
.festivalOrder .conten-box .left {
  height: 100%;
}
.festivalOrder .conten-box .el-card.blue {
  background: #409efe !important;
  color: #fff !important;
  height: calc(100% - 2px);
}
.festivalOrder .conten-box .el-card .el-card__body {
  padding: 0 20px 20px 20px;
  height: calc(100% - 98px);
  max-height: calc(100% - 98px);
}
.festivalOrder .conten-box .img {
  display: flex;
  align-items: flex-end;
  text-align: center;
  padding: 27px 0 0 40px !important;
  justify-content: center;
  font-size: 14px;
}
.festivalOrder .sjsm {
  height: 198px;
  overflow: auto;
}
.festivalOrder .sjsm > div {
  margin-bottom: 20px;
}
.festivalOrder .sjsm > div:last-child {
  margin-bottom: 0px;
}
.festivalOrder .sjsm > div {
  flex: 1;
  background: rgba(244, 245, 249, 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}
.festivalOrder .sjsm > div .left {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-family: "perfectFont";
  font-weight: 900;
}
.festivalOrder .sjsm > div .left img {
  padding-right: 10px;
}
.festivalOrder .sjsm > div .right {
  text-align: right;
  color: #888888;
  font-size: 12px;
}
.festivalOrder .hight-font {
  color: #409efe !important;
  font-size: 14px;
}
.fesIcon {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: relative;
  top: 1px;
}
.fes1 {
  background-color: #ffaf86;
}
.fes2 {
  background-color: #97bc7a;
}
.fes3 {
  background-color: #d2c9f1;
}
.fes4 {
  background-color: #24b896;
}
.fes5 {
  background-color: #ed70e9;
}
.fes6 {
  background-color: #f3c108;
}
.fes7 {
  background-color: #6ebce2;
}
.fesList {
  float: left;
  margin-right: 90px;
  font-size: 14px;
  font-family: "微软雅黑";
}
.fesSpan2 {
  display: inline-block;
  margin: 0 30px 30px 8px;
}
.fesList:nth-of-type(even) {
  margin-right: 0 !important;
}
.botTaolun {
  position: absolute;
  bottom: 15px;
  right: 25px;
  cursor: pointer;
  color: #ffa475;
  font-size: 12px;
}
.fesRemind {
  color: #111111;
  font-size: 12px;
  line-height: 20px;
  margin-top: 15px;
}
.comListDiv {
  float: left;
  width: 10%;
  height: 30px;
}
.clearfix:after {
  content: "\0020";
  display: block;
  height: 0;
  clear: both;
}
</style>
<template>
  <div class="festivalOrder" 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%;margin-top:60px;">
                        <el-col :span="10" class="img">
                            <div>
                                <div style="margin-bottom: 10px;">
                                    <img src="../../assets/img/tongji/jieri.png" alt="">
                                </div>
                                <!-- <p>亲子出游</p> -->
                            </div>
                        </el-col>
                        <el-col :span="14" style="height: 100%;">
                            <div class="clearfix" style="width:350px;">
                                <div class="fesList" v-for="(item,index) in dataList" :key="index">
                                    <span class="fesIcon" :class="{'fes1': item.FestivalName=='元旦', 'fes2': item.FestivalName=='春节','fes3': item.FestivalName=='清明',
                                    'fes4': item.FestivalName=='端午','fes5': item.FestivalName=='中秋','fes6': item.FestivalName=='国庆','fes7': item.FestivalName=='劳动',
                                    }"></span><span class="fesSpan2">{{item.FestivalName}}</span>
                                    <span>{{getPercent(item)}}</span>
                                </div>
                            </div>
                            <div class="clearfix" style="width:350px;margin-top:20px;display:flex;">
                                    <div class="comListDiv" :class="{'fes1': item.FestivalName=='元旦', 'fes2': item.FestivalName=='春节','fes3': item.FestivalName=='清明',
                                        'fes4': item.FestivalName=='端午','fes5': item.FestivalName=='中秋','fes6': item.FestivalName=='国庆','fes7': item.FestivalName=='劳动',
                                    }"  v-for="(item,index) in dataList" :key="index" :style="{'width': getPercent(item)}"></div>
                            </div>
                        </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>
                    <festivalChart v-if="isShowFeature" :dataList="dataList" :totalCount="totalCount"/>
                </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 class="sjsm" style="height:225px;">
                        <div v-for="(item,index) in dataList" :key="index">
                            <div class="left">
                                <img :src="getImgSrc(item.FestivalName)" alt="">
                                <p>{{item.FestivalName}}</p>
                            </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="fesRemind">{{topOne && topOne.Content ? topOne.Content : '暂无'}}</div>
                        <div class="botTaolun"  @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 festivalChart from "./model/festivalChart";
import discussBox from "./model/discussBox";
export default {
  components: {
    festivalChart,
    discussBox,
  },
  data() {
    return {
      loading: false,
      dataList: [],
      totalCount: 0,
      discussID: 0,
      drawer: false,
      isShowFeature: false,
      discussID: 11,
      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.apipost("/api/Statistic/GetFestivalOrderList", {}, (res) => {
        this.loading = false;
        this.dataList = res.data.data;
        this.isShowFeature = true;
        this.totalCount = 0;
        if (this.dataList && this.dataList.length > 0) {
          this.dataList.forEach((x) => {
            this.totalCount += x.OrderCount;
          });
        }
      });
    },
    //获取对应节日图片
    getImgSrc(item) {
      let str = "";
      switch (item) {
        case "元旦":
          str = require("../../assets/img/tongji/yuandan.png");
          break;
        case "中秋":
          str = require("../../assets/img/tongji/zhongqiu.png");
          break;
        case "劳动":
          str = require("../../assets/img/tongji/laodong.png");
          break;
        case "国庆":
          str = require("../../assets/img/tongji/guoqing.png");
          break;
        case "春节":
          str = require("../../assets/img/tongji/chunjie.png");
          break;
        case "清明":
          str = require("../../assets/img/tongji/qingmin.png");
          break;
        case "端午":
          str = require("../../assets/img/tongji/duanwu.png");
          break;
      }
      return str;
    },
    //获取百分百
    getPercent(item) {
      return (
        (
          Math.round((item.OrderCount / this.totalCount) * 10000) / 100.0
        ).toFixed(1) + "%"
      );
    },
  },
};
</script>
