
<style>
.marriage {
  height: calc(100% - 25px);
}
.statistics-title {
  font-size: 24px;
  color: #111;
  margin-bottom: 30px;
  font-family: perfectFont;
}
.marriage .conten-box {
  display: flex;
  flex-direction: column;
  height: calc(100% - 62px);
}
.marriage .conten-box .el-card .el-card__header {
  font-weight: normal !important;
}
.marriage .conten-box .top {
  flex: 1.2;
  margin-bottom: 25px;
}
.marriage .conten-box .bottom {
  flex: 0.8;
}
.marriage .conten-box .left {
  height: 100%;
}
.marriage .conten-box .el-card.blue {
  background: #ffffff !important;
  color: #fff !important;
  height: calc(100% - 2px);
}
.marriage .conten-box .el-card .el-card__body {
  padding: 20px 20px 0 20px;
  height: calc(100% - 98px);
  max-height: calc(100% - 98px);
}
.marriage .conten-box .img {
  display: flex;
  align-items: flex-end;
  text-align: center;
  padding: 27px 0 0 40px !important;
  justify-content: center;
  font-size: 14px;
}
.marriage .sjsm {
  height: 198px;
  overflow: auto;
}
.marriage .sjsm > div {
  margin-bottom: 20px;
}
.marriage .sjsm > div:last-child {
  margin-bottom: 0px;
}
.marriage .sjsm > div {
  flex: 1;
  background: rgba(244, 245, 249, 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}
.marriage .sjsm > div .left {
  display: flex;
  align-items: center;
}
.marriage .sjsm > div .left img {
  padding-right: 10px;
}
.marriage .sjsm > div .right {
  text-align: right;
  color: #888888;
  font-size: 12px;
}
.marriage .hight-font {
  color: #409efe !important;
  font-size: 14px;
}
</style>
<template>
  <div class="marriage" v-loading="loading">
    <div class="statistics-title bold18">婚姻统计</div>
    <div class="conten-box">
        <el-row :gutter="25" class="top">
            <el-col :span="12" class="left">
                <el-card class="blue">
                    <div slot="header" class="clearfix">
                        <span style="color: #303133">报名统计</span>
                    </div>
                    <el-row :gutter="80" style="height: 100%;">
                        <el-col :span="24" style="height: 350px;">
                            <marriageChart v-if="isShow" :chartData="chartData" :strArr="strArr"/>
                        </el-col>
                    </el-row>
                </el-card>
            </el-col>
            <el-col :span="12" style="height: 100%;">
                <el-card style="height: calc(100% - 2px);">
                    <div slot="header" class="clearfix">
                        <span>购物统计<span class="font-size-12">（按平均计算）</span></span>
                    </div>
                    <marriageLineChart style="height:350px;" v-if="isShow" :chartData="shopChartData" :strArr="strArr"/>
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="25" class="bottom" >
            <el-col :span="12"  style="height: 100%;">
                <el-card style="height: 100%;">
                    <div slot="header" class="clearfix">
                        <span>数据说明</span>
                    </div>
                    <div class="sjsm">
                        <div v-for="(item, index) in dataList" :key="index">
                            <div class="left">
                                <img v-if="item.Marriage === 1" src="../../assets/img/tongji/yihun.png" alt="">
                                <img v-if="item.Marriage === 2" src="../../assets/img/tongji/woman1.png" alt="">
                                <img v-if="item.Marriage === 3" src="../../assets/img/tongji/weihun.png" alt="">
                                <img v-if="item.Marriage === 4" src="../../assets/img/tongji/yihun.png" alt="">
                                <img v-if="item.Marriage === 5" src="../../assets/img/tongji/yihun.png" alt="">
                                <span class="font-size-12">{{item.MarriageName}}</span>
                            </div>
                            <div class="right">
                                <p>累计报名<span class="hight-font">{{item.MarriageCount}}</span>人，报名均价为<span class="hight-font">{{item.Unit_Price}}</span>元</p>
                                <!-- 关联购物金额<span class="hight-font">{{item.TotalMoney}}</span>万， -->
                                <p>最喜爱产品<span class="hight-font">《{{item.LtName}}》</span></p>
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="12" 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">{{BbsList.length ? BbsList[0].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 marriageChart from "./model/marriageChart";
import shopChart from "./model/shopChart";
import discussBox from "./model/discussBox";
import marriageLineChart from "./model/marriageLineChart";
export default {
  components: {
    marriageChart,
    shopChart,
    discussBox,
    marriageLineChart,
  },
  data() {
    return {
      discussID: 1,
      drawer: false,
      chartData: [],
      shopChartData: [],
      SexOrder: [],
      loading: false,
      strArr: [],
      BbsList: [],
      isShow: false,
      orders: [],
      dataList: [],
    };
  },
  watch: {},
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.loading = true;
      this.apipost("/api/Statistic/GetMarriageShopList", {}, (res) => {
        this.loading = false;
        if (res.data.resultCode == 1) {
          this.strArr = [];
          let data = res.data.data;
          var totalOrder = 0;
          var totalMoney = 0;
          var chartData = [];
          var shopChartData = [];
          data.forEach((item) => {
            this.strArr.push(item.MarriageName);
            totalOrder += item.MarriageCount;
            totalMoney += item.TotalMoney;
          });
          data.forEach((item) => {
            chartData.push(
              parseFloat(((item.MarriageCount / totalOrder) * 100).toFixed(2))
            );
            shopChartData.push(
              parseFloat(((item.TotalMoney / totalMoney) * 100).toFixed(2))
            );
          });
          this.chartData = chartData;
          this.shopChartData = shopChartData;
          this.isShow = true;
          this.orders = res.data.data;
          this.initOrders(this.orders);
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
    initOrders(orders) {
      this.apipost("/api/Statistic/GetMarriageOrderList", {}, (res) => {
        if (res.data.resultCode == 1) {
          let data = res.data.data;
          orders.forEach((x) => {
            data.forEach((y) => {
              if (x.Marriage == y.Marriage) {
                x.LtName = y.LtName;
                x.Unit_Price = y.Unit_Price;
              }
            });
          });
          this.dataList = orders;
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
  },
};
</script>
