<template>
  <div class="old-box" v-loading="loading">
    <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.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-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>
          </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 {
      drawer: false,
      scaleData: [],
      showChats: [],
      moneys: [],
      isLoaded: false,
      loading: false,
      icons: [
        "icon-yinger",
        "icon-ertong",
        "icon-paobu",
        "icon-lingdao",
        "icon-shangban",
        "icon-zhongnian",
        "icon-laonianrenmianfeiyimiao",
      ],
      nams: [
        "婴儿（0-6岁）",
        "儿童（7-12岁）",
        "少年（13-18岁）",
        "青年（19-35岁）",
        "壮年（36-45岁）",
        "中年（46-69岁）",
        "老年（70岁以上）",
      ],
      discussID: 2,
      BbsList: [],
      topOne: {},
    };
  },
  mounted() {
    this.init();
    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;
              }
            });
          }
        }
      );
    },
    init() {
      this.loading = true;
      this.apipost("/api/Statistic/GetAgeShopList", {}, (res) => {
        this.loading = false;
        res.data.data.forEach((x) => {
          this.scaleData.push({
            name: x.AgeTypeName,
            value: x.AgeCount,
          });
          this.moneys.push({
            name: x.AgeTypeName,
            value: x.TotalMoney,
          });
          this.showChats.push({
            name: this.nams[x.AgeType - 1],
            icon: this.icons[x.AgeType - 1],
            AgeCount: x.AgeCount,
            TotalMoney: x.TotalMoney,
          });
        });
        this.initOrders();
      });
    },
    initOrders() {
      this.apipost("/api/Statistic/GetAgeOrderList", {}, (res) => {
        res.data.data.forEach((x) => {
          if (x.NewAgeType - 1 < this.showChats.length) {
            this.showChats[x.NewAgeType - 1].LtName = x.LtName;
            this.showChats[x.NewAgeType - 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: #409efe;
  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>
