<template>
  <div class="old-box">
    <div class="statistics-title bold18">婚姻状态统计</div>
    <el-row :gutter="25" style="height:calc(100% - 62px)">
      <el-col :span="12" style="height:100%;">
        <div class="left-content">
          <div class="content" style="margin-top:0;">
            <el-card class="blue">
              <div slot="header" class="clearfix">
                <span>订单统计</span>
              </div>
              <orders v-if="isLoaded" :scaleData="scaleData" />
            </el-card>
          </div>
          <div class="content">
            <el-card class>
              <div slot="header" class="clearfix">
                <span>数据说明</span>
              </div>
              <div class="item" v-for="(item, index) in showChats" :key="index">
                <div class="l">
                  <i class="iconfont" :class="[item.icon]"></i>
                  {{item.name}}
                </div>
                <div class="r">
                  <div>
                    累计报名
                    <b>{{item.AgeCount}}</b> 人，关联购物金额
                    <b>
                      <template v-if="item.TotalMoney">
                        {{(item.TotalMoney/10000).toFixed(2)}}
                      </template>
                      万
                    </b>，报名均价为：
                    <b>
                      <template v-if="item.Unit_Price">
                        {{item.Unit_Price.toFixed(0)}}
                      </template>
                      元</b>
                  </div>
                  <div>
                    最喜爱的产品
                    <b>《{{item.LtName}}》</b>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </el-col>
      <el-col :span="12" style="height:100%;">
        <div class="left-content">
          <div class="content" style="margin-top:0;">
            <el-card class="blue">
              <div slot="header" class="clearfix">
                <span>购物统计（按平均计算）</span>
              </div>
              <shopping v-if="isLoaded" :scaleData="moneys"></shopping>
            </el-card>
          </div>
          <div class="content">
            <el-card class>
              <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">根据对客户年龄段的统计可以，更好的了解不同年龄段客人的喜好，消费能力的判读，从而快速的推荐团队给客人等等等</div>
                <div class="bot" @click="drawer = true">
                  查看更多，参与讨论(19)
                  <i class="el-icon-d-arrow-right"></i>
                </div>
              </div>
            </el-card>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-drawer
      size='695px'
      :visible.sync="drawer"
      direction="rtl"
      :with-header="false">
      <discussBox :type="discussID"/>
    </el-drawer>
  </div>
</template>

<script>
import shopping from "./old/shopping";
import orders from "./old/orders";
import discussBox from "./model/discussBox";
export default {
  components: {
    shopping,
    orders,
    discussBox
  },
  data() {
    return {
      discussID: 0,
      drawer: false,
      scaleData: [],
      showChats: [],
      moneys: [],
      isLoaded: false,
      icons: [
        "icon-yihun-hong",
        "icon-lihundengji",
        "icon-weihun-lan",
        "icon-sangjia",
        "icon-weizhi"
      ],
      nams: [
        "已婚",
        "离婚",
        "未婚",
        "丧偶",
        "其他未知"
      ]
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.apipost("/api/Statistic/GetMarriageShopList", {}, res => {
        res.data.data.forEach(x => {
          this.scaleData.push({
            name: x.MarriageName,
            value: x.MarriageCount
          });
          this.moneys.push({
            name: x.MarriageName,
            value: x.TotalMoney
          });
          this.showChats.push({
            name: this.nams[x.Marriage - 1],
            icon: this.icons[x.Marriage - 1],
            AgeCount: x.MarriageCount,
            TotalMoney: x.TotalMoney
          });
        });
        this.initOrders();
      });
    },
    initOrders() {
      this.apipost("/api/Statistic/GetMarriageOrderList", {}, res => {
        res.data.data.forEach(x => {
          this.showChats[x.Marriage - 1].LtName = x.LtName;
          this.showChats[x.Marriage - 1].Unit_Price = x.Unit_Price;
        });
        this.isLoaded = true;
      });
    }
  }
};
</script>

<style>
.old-box .el-drawer__body{
  height: 100%;
}
.old-box {
  height: calc(100% - 25px);
}
.statistics-title {
  font-size: 24px;
  color: #111;
  margin-bottom: 30px;
  font-family: perfectFont;
}
.t-item {
  margin-bottom: 30px;
  width: 100%;
}
.title {
  font-size: 18px;
  color: #222;
  margin-bottom: 20px;
  font-family: perfectFont;
  font-weight: bold;
}
.t-item .first {
  display: flex;
  margin-bottom: 20px;
}
.t-item .first .t {
  font-size: 14px;
  color: #333;
  flex: 1;
  /* font-family: perfectFont;
  font-weight: bold; */
}
.t-item .first .v {
  font-size: 16px;
  color: #333;
  flex: 1;
  text-align: right;
  font-family: perfectFont;
  font-weight: bold;
}
.t-item .second {
  height: 36px;
  width: 100%;
  background: url("../../assets/img/tongji/yr.png") repeat-x;
  color: rgb(16, 137, 62);
}
.t-item .second .chosen {
  overflow: hidden;
  height: 26px;
  white-space: nowrap;
  display: flex;
}
.t-item .second.et {
  color: rgb(227, 0, 140);
  background: url("../../assets/img/tongji/et.png") repeat-x;
}
.t-item .second.sn {
  color: rgb(0, 120, 215);
  background: url("../../assets/img/tongji/sn.png") repeat-x;
}
.t-item .second.qn {
  color: rgb(3, 131, 135);
  background: url("../../assets/img/tongji/qn.png") repeat-x;
}
.t-item .second.zn {
  color: rgb(116, 77, 169);
  background: url("../../assets/img/tongji/zn.png") repeat-x;
}
.t-item .second.zhn {
  color: rgb(234, 0, 94);
  background: url("../../assets/img/tongji/zhn.png") repeat-x;
}
.t-item .second.ln {
  color: rgb(132, 117, 69);
  background: url("../../assets/img/tongji/lr.png") repeat-x;
}
.t-item .second .chosen i {
  font-size: 26px;
}
.situ {
  /* width: 100%;*/
  height: 100%; 
}
.situ .head {
  height: 36px;
  display: flex;
  line-height: 36px;
  margin: 10px 0;
  /* border-bottom: 1px solid #EEE; */
}
.right-title {
  text-align: right;
  font-size: 14px;
  color: #666;
}
.right-title i {
  font-size: 16px;
  margin-right: 5px;
  color: #ccc;
}
.situ .c {
  font-size: 14px;
  color: #333;
  height: calc(100% - 20px);
  overflow-y: auto;
}
.situ .bot {
  height: 20px;
  line-height: 20px;
  /* text-decoration: underline; */
  cursor: pointer;
  color: rgb(13, 36, 129);
  font-size: 12px;
  text-align: right;
}
.left-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.left-content .content {
  flex: 1;
  margin-top: 25px;
  position: relative;
}
.left-content .content .el-card {
  overflow-y: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.left-content .content .el-card .el-card__header {
  font-weight: normal !important;
}
.left-content .content .el-card.blue {
  background: #04243e !important;
  color: #fff !important;
}
.left-content .content .el-card .el-card__body {
  padding: 20px;
  height: calc(100% - 98px);
  max-height: calc(100% - 98px);
  overflow-y: auto;
}
.left-content .content .el-card .el-card__body .item {
  line-height: 36px;
  border-bottom: 1px dotted #eee;
  font-size: 12px;
  display: flex;
}
.left-content .content .el-card .el-card__body .item i {
  font-size: 14px;
  color: #0d2481;
  margin-right: 5px;
}
.left-content .content .el-card .el-card__body .item b {
  font-size: 16px;
  font-family: perfectFont;
  color: #409eff;
}
.left-content .content .el-card .el-card__body .item .l {
  width: 120px;
}
.left-content .content .el-card .el-card__body .item .r {
  flex: 1;
  text-align: right;
}
</style>