
<style>
.tourType {
  height: calc(100% - 25px);
}
.statistics-title {
  font-size: 24px;
  color: #111;
  margin-bottom: 30px;
  font-family: perfectFont;
}
.tourType .conten-box {
  display: flex;
  flex-direction: column;
  height: calc(100% - 62px);
}
.tourType .conten-box .el-card .el-card__header {
  font-weight: normal !important;
}
.tourType .conten-box .top {
  flex: 1.2;
  margin-bottom: 25px;
}
.tourType .conten-box .bottom {
  flex: 0.8;
}
.tourType .conten-box .left {
  height: 100%;
}
.tourType .conten-box .el-card.blue {
  background: #409efe !important;
  color: #fff !important;
  height: calc(100% - 2px);
}
.tourType .conten-box .el-card .el-card__body {
  padding: 20px;
  height: calc(100% - 98px);
  max-height: calc(100% - 98px);
}
.tourType .conten-box .img {
  display: flex;
  align-items: flex-end;
  text-align: center;
  padding: 27px 0 0 40px !important;
  justify-content: center;
  font-size: 14px;
}
.tourType .sjsm {
  height: 198px;
  overflow: auto;
}
.tourType .sjsm > div {
  margin-bottom: 20px;
}
.tourType .sjsm > div:last-child {
  margin-bottom: 0px;
}
.tourType .sjsm > div {
  flex: 1;
  background: rgba(244, 245, 249, 1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
}
.tourType .sjsm > div .left {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-family: "perfectFont";
  font-weight: 900;
}
.tourType .sjsm > div .left img {
  padding-right: 10px;
}
.tourType .sjsm > div .right {
  text-align: right;
  color: #888888;
  font-size: 12px;
}
.tourType .hight-font {
  color: #409efe !important;
  font-size: 14px;
}
.tourType .situ {
  /* width: 100%;*/
  height: 100%;
}
.tourType .situ .head {
  height: 36px;
  display: flex;
  line-height: 36px;
  margin: 10px 0;
  /* border-bottom: 1px solid #EEE; */
}
.tourType .situ .c {
  font-size: 14px;
  color: #333;
  height: calc(100% - 20px);
  overflow-y: auto;
}
.tourType .situ .bot {
  height: 20px;
  line-height: 20px;
  /* text-decoration: underline; */
  cursor: pointer;
  color: rgb(13, 36, 129);
  font-size: 12px;
  text-align: right;
}
</style>
<template>
  <div class="tourType" 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/qinzi.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 class="sjsm">
              <div v-for="(item, index) in orders" :key="index">
                <div class="left">
                  <img v-if="index==0" src="../../assets/img/tongji/qinzhi.png" alt />
                  <img v-if="index==1" src="../../assets/img/tongji/miyue.png" alt />
                  <img v-if="index==2" src="../../assets/img/tongji/in3.png" alt />
                  <img v-if="index==3" src="../../assets/img/tongji/d1.png" alt />
                  <img v-if="index==4" src="../../assets/img/tongji/hanjia.png" alt />
                  <span class="font-size-12">{{item.TravelTypeName}}</span>
                </div>
                <div class="right">
                  <p>
                    累计报名
                    <span class="hight-font">{{item.TravelCount}}</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="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">{{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>
        </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 sexChart from "./model/sexChart";
import shopChart from "./model/shopChart";
import discussBox from "./model/discussBox";
export default {
  components: {
    sexChart,
    shopChart,
    discussBox,
  },
  data() {
    return {
      orders: [],
      drawer: false,
      chartData: [],
      shopChartData: [],
      SexOrder: [17, 5, 20, 37, 21],
      loading: false,
      strArr: ["亲子", "蜜月", "夕阳红", "暑期", "寒假"],
      imgs: [
        {
          url: require("../../assets/img/tongji/qinzhi.png"),
        },
        {
          url: require("../../assets/img/tongji/miyue.png"),
        },
        {
          url: require("../../assets/img/tongji/xiyang.png"),
        },
        {
          url: require("../../assets/img/tongji/shujia.png"),
        },
        {
          url: require("../../assets/img/tongji/hanjia.png"),
        },
      ],
      discussID: 17,
      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/GetTravelTypeShopList", {}, (res) => {
        this.strArr = [];
        let data = res.data.data;
        data.forEach((item) => {
          this.strArr.push(item.TravelTypeName);
        });
        let contShop =
            res.data.data[0].TotalMoney +
            res.data.data[1].TotalMoney +
            res.data.data[2].TotalMoney +
            res.data.data[3].TotalMoney +
            res.data.data[4].TotalMoney,
          one = res.data.data[0].TotalMoney,
          two = res.data.data[1].TotalMoney,
          three = res.data.data[2].TotalMoney,
          four = res.data.data[3].TotalMoney,
          five = res.data.data[4].TotalMoney,
          contNum =
            res.data.data[0].TravelCount +
            res.data.data[1].TravelCount +
            res.data.data[2].TravelCount +
            res.data.data[3].TravelCount +
            res.data.data[4].TravelCount,
          oneN = res.data.data[0].TravelCount,
          twoN = res.data.data[1].TravelCount,
          threeN = res.data.data[2].TravelCount,
          fourN = res.data.data[3].TravelCount,
          fiveN = res.data.data[4].TravelCount;
        let chartData = [],
          shopChartData = [];
        if (contNum == 0) {
          chartData = [0, 0, 0, 0, 0];
        } else {
          chartData.push(((oneN / contNum) * 100).toFixed(2));
          chartData.push(((twoN / contNum) * 100).toFixed(2));
          chartData.push(((threeN / contNum) * 100).toFixed(2));
          chartData.push(((fourN / contNum) * 100).toFixed(2));
          chartData.push(((fiveN / contNum) * 100).toFixed(2));
        }
        if (contShop == 0) {
          let colorArr = [
            "#409efe",
            "#FFA475",
            "#99BD7B",
            "#D2C9F1",
            "#6EBCE2",
          ];
          let strArr = this.strArr;
          for (let i = 0; i < 5; i++) {
            shopChartData.push({
              num: 0,
              color: colorArr[i],
              text: strArr[i],
            });
          }
        } else {
          shopChartData.push({
            num: Number(((one / contShop) * 100).toFixed(2)),
            color: "#409efe",
            text: "亲子",
          });
          shopChartData.push({
            num: Number(((two / contShop) * 100).toFixed(2)),
            color: "#FFA475",
            text: "蜜月",
          });
          shopChartData.push({
            num: Number(((three / contShop) * 100).toFixed(2)),
            color: "#99BD7B",
            text: "夕阳红",
          });
          shopChartData.push({
            num: Number(((four / contShop) * 100).toFixed(2)),
            color: "#D2C9F1",
            text: "暑假",
          });
          shopChartData.push({
            num: Number(((five / contShop) * 100).toFixed(2)),
            color: "#6EBCE2",
            text: "寒假",
          });
        }

        this.chartData = chartData;
        this.shopChartData = shopChartData;
        this.orders = res.data.data;

        this.getOrders();
      });
    },
    getOrders() {
      this.apipost("/api/Statistic/GetTravelTypeOrderList", {}, (res) => {
        this.loading = false;
        res.data.data.forEach((x) => {
          this.orders[x.NewTravelType - 1].LtName = x.LtName;
          this.orders[x.NewTravelType - 1].Unit_Price = x.Unit_Price;
        });
      });
    },
  },
};
</script>
