
<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 {
  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;
}
</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/zhufang.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: 100%;" class="sjsm">
                        <div v-for="(item, index) in orderList" :key="index">
                            <div class="left">
                                <img v-if="item.NewHouseType==1" src="../../assets/img/tongji/room1.png" alt="">
                                <img v-if="item.NewHouseType==2" src="../../assets/img/tongji/room2.png" alt="">
                                <img v-if="item.NewHouseType==3" src="../../assets/img/tongji/room3.png" alt="">
                                <img v-if="item.NewHouseType==5" src="../../assets/img/tongji/room4.png" alt="">
                                <span class="font-size-12">{{item.HouseTypeName}}</span>
                            </div>
                            <div class="right">
                                <p>累计报名<span class="hight-font">
                                    <span v-if="orders[index] && orders[index].HouseCount">{{orders[index].HouseCount}}</span>
                                    <span v-else>0</span>
                                    </span>人，关联购物金额<span class="hight-font">
                                        <span v-if="orders[index] && orders[index].TotalMoney">{{orders[index].TotalMoney}}</span>
                                        <span v-else>0</span>
                                    </span>万，报名均价为<span class="hight-font">{{item.Unit_Price}}</span>元</p>
                                <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">根据对客户年龄段的统计，可以更好的了解不同年龄段客 人的喜根据对客户年龄段的统计。根据对客户年龄段的统 计，可以更好的了解不同年龄段客人的喜根据对客户年龄 段的统计</div>
                        <div class="bot"  @click="drawer = true">
                            查看更多，参与讨论(1)
                            <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 :id="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 {
      discussID: 0,
      drawer: false,
      chartData: [0, 0],
      shopChartData: [],
      loading: false,
      strArr: ["70平米以下", "71-90平米", "91-120平米", "未知"],
      orders: [],
      orderList: [],
      colorArr: ["#409efe", "#FFA475", "#99BD7B", "#D2C9F1", "#6EBCE2"],
    };
  },
  watch: {},
  mounted() {
    this.GetSexOrderList();
    this.getOrderInfo();
  },
  methods: {
    GetSexOrderList() {
      let that = this;
      this.loading = true;
      this.apipost("/api/Statistic/GetHouseShopList", {}, (res) => {
        this.loading = false;
        if (res.data.resultCode == 1) {
          let chartData = [],
            shopChartData = [];
          let data = res.data.data;
          if (data.length == 0) {
            chartData = [0, 0, 0, 0, 0];
            let strArr = this.strArr;
            for (let i = 0; i < 5; i++) {
              shopChartData.push({
                num: 0,
                color: that.colorArr[i],
                text: strArr[i],
              });
            }
          } else {
            this.strArr = [];
            let contHouse = 0;
            let contNum = 0;
            data.forEach((item) => {
              this.strArr.push(item.HouseTypeName);
              contHouse += item.HouseCount;
              contNum += item.TotalMoney;
            });
            data.forEach((item, i) => {
              chartData.push(
                parseFloat(((item.HouseCount / contHouse) * 100).toFixed(2))
              );
              shopChartData.push({
                num: parseFloat(((item.TotalMoney / contNum) * 100).toFixed(2)),
                color: that.colorArr[i],
                text: that.strArr[i],
              });
            });
          }

          // let contHouse = res.data.data[0].HouseCount + res.data.data[1].HouseCount+ res.data.data[2].HouseCount+ res.data.data[3].HouseCount,
          //     one = res.data.data[0].HouseCount,
          //     two = res.data.data[1].HouseCount,
          //     three = res.data.data[2].HouseCount,
          //     four= res.data.data[3].HouseCount,
          //     contNum = res.data.data[0].TotalMoney + res.data.data[1].TotalMoney+ res.data.data[2].TotalMoney+ res.data.data[3].TotalMoney,
          //     oneN = res.data.data[0].TotalMoney,
          //     twoN = res.data.data[1].TotalMoney,
          //     threeN = res.data.data[2].TotalMoney,
          //     fourN = res.data.data[3].TotalMoney;

          // chartData.push(
          //     ((one/contHouse)*100).toFixed(2)
          // )
          // chartData.push(
          //     ((two/contHouse)*100).toFixed(2)
          // )
          // chartData.push(
          //     ((three/contHouse)*100).toFixed(2)
          // )
          // chartData.push(
          //     ((four/contHouse)*100).toFixed(2)
          // )
          // shopChartData.push(
          //     {
          //         num: Number(((oneN/contNum)*100).toFixed(2)),
          //         color: "#409efe",
          //         text: '70平米以下'
          //     }
          // )
          // shopChartData.push(
          //     {
          //         num: Number(((twoN/contNum)*100).toFixed(2)),
          //         color: "#FFA475",
          //         text: '71-90平米'
          //     }
          // )
          // shopChartData.push(
          //     {
          //         num: Number(((threeN/contNum)*100).toFixed(2)),
          //         color: "#99BD7B",
          //         text: '91-120平米'
          //     }
          // )
          // shopChartData.push(
          //     {
          //         num: Number(((fourN/contNum)*100).toFixed(2)),
          //         color: "#D2C9F1",
          //         text: '未知'
          //     }
          // )
          this.chartData = chartData;
          this.shopChartData = shopChartData;
          this.orders = res.data.data;
        }
      });
    },
    getOrderInfo() {
      this.apipost("/api/Statistic/GetHouseOrderList", {}, (res) => {
        if (res.data.resultCode == 1) {
          this.orderList = res.data.data;
        }
      });
    },
  },
};
</script>
