<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;
}

.Opinionpolls .conten-box .top {
  flex: 1 !important;
  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;
}

.sex .secondDiv .el-card .el-card__header {
  border: none !important;
  font-size: 14px;
  color: #111111;
  font-weight: bold !important;
  padding: 18px 20px 0 18px !important;
}

.Opinionpolls .countryUl li {
  position: relative;
  padding: 30px 0;
  border-bottom: 1px solid #e2e4ef;
  display: flex;
  align-items: center;
}

.Opinionpolls .countryUl li .rightSpan {
  position: absolute;
  right: 0;
  bottom: 32px;
}

.Opinionpolls .countryUl li img {
  width: 40px;
  height: 26px;
  border-radius: 6px;
}

.Opinionpolls .index {
  font-weight: bold;
  margin-right: 20px;
}

.Opinionpolls .countryUl li:nth-child(1) .index {
  color: #ffa475;
}

.Opinionpolls .countryUl li:nth-child(2) .index {
  color: #94b877;
}

.Opinionpolls .countryUl li:nth-child(3) .index {
  color: #409efe;
}

.Opinionpolls .countryUl li:nth-child(4) .index {
  color: #55bde9;
}

.Opinionpolls .timeUl li {
  position: relative;
}

.timeChart {
  width: 100%;
  height: 386px;
}
</style>
<template>
    <div class="sex Opinionpolls" v-loading="loading">
        <div class="statistics-title bold18">意见调查统计</div>
        <div class="conten-box">
            <el-row :gutter="25" class="top">
                <el-col :span="6" style="height: 450px">
                    <el-card style="height: calc(100% - 2px);background:#FFA475">
                        <p style="color:#FDFEFE;margin-top:15px;font-size:14px">意见调查总和</p>
                        <div>
                            <img style="width:80%;display:block;margin:0 auto" src="../../assets/img/tongji/yj1.png"
                                alt="">
                            <img style="width:100%;" src="../../assets/img/tongji/yj2.png" alt="">
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="18" class="left">
                    <el-card>
                        <div slot="header" class="clearfix">
                            <span>景点评分（前10名）</span>
                        </div>
                        <el-row :gutter="80" style="height: 100%;">
                            <div id="tenTopchart" style="height:350px;" class="tenTopchart" ref="tenTopchart"></div>
                        </el-row>
                    </el-card>
                </el-col>

            </el-row>
            <el-row :gutter="22" class="secondDiv" style="margin-bottom:30px">
                <el-col :span="9" style="height: 100%;">
                    <el-card style="height: calc(100% - 2px);">
                        <div slot="header" class="clearfix">
                            <span>首选印象产品</span>
                        </div>
                        <shopChart v-if="isShowTop" :shopChartData="shopChartData" />
                    </el-card>
                </el-col>
                <el-col :span="7">
                    <el-card style="height: calc(100% - 2px);">
                        <div slot="header" class="clearfix">
                            <span>下次出行时间</span>
                        </div>
                        <!-- <sexChart :myData="chartData" :strArr="strArr"/> -->
                        <div id="timeChart" class="timeChart" ref="timeChart"></div>
                    </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>
                        </div>
                        <ul class="countryUl">
                            <li v-for="(item,index) in dataList.countryList" :key="index">
                                <span class="index" style="font-size:14px">NO.{{index+1}}</span>
                                <!-- <img style="margin:0 15px" src="../../assets/img/tongji/cj.png" alt=""> -->
                                <span style="font-size:18px;">{{item.ItemName}}</span>
                                <span class="rightSpan">{{item.OrderCount}}<span class="font-size-12">票</span> </span>
                            </li>
                        </ul>
                    </el-card>

                </el-col>
            </el-row>
            <el-row :gutter="22" 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 dataList.GuestSurveyShopList" :key="index">
                                <div class="left">
                                    <img v-if="item.SeasonType === 1" src="../../assets/img/tongji/cj.png" alt="">
                                    <img v-if="item.SeasonType === 2" src="../../assets/img/tongji/xj.png" alt="">
                                    <img v-if="item.SeasonType === 3" src="../../assets/img/tongji/qj.png" alt="">
                                    <img v-if="item.SeasonType === 4" src="../../assets/img/tongji/dj.png" alt="">
                                    <span class="font-size-12">{{item.SeasonTypeName}}</span>
                                </div>
                                <div class="right">
                                    <p>累计报名<span class="hight-font">{{item.SeasonCount}}</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-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: [],
      shopChartData: [],
      SexOrder: [],
      loading: false,
      strArr: [],
      orders: [],
      dataList: {},
      isShowTop: false,

      //出游日期
      chuyouDate: [],
      chuyouList: [],
    };
  },
  watch: {},
  mounted() {
    this.getData();
  },
  methods: {
    initTimeChart() {
      var myChart = this.$echarts.init(document.getElementById("timeChart"));
      var option = {
        xAxis: {
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          type: "category",
          data: this.chuyouDate,
        },
        yAxis: {
          show: false,
          type: "value",
        },
        series: [
          {
            data: this.chuyouList,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)",
            },
            barWidth: "20",
            itemStyle: {
              color: "#409efe",
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    //初始化top10插件
    initTopTen() {
      let myChart = this.$echarts.init(document.getElementById("tenTopchart"));
      let option = {
        grid: {
          left: "75",
          right: "75",
        },
        xAxis: {
          data: this.strArr,
          type: "category",
          axisLabel: {
            color: "#999999",
          },
          axisLine: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
          },
          axisLabel: {
            color: "#999999",
            formatter: "{value} %",
          },
          max: 100,
        },
        series: [
          {
            data: this.chartData,
            type: "bar",
            itemStyle: {
              color: "#FFA475",
            },
            barWidth: "44",
          },
        ],
      };
      myChart.setOption(option);
    },
    getData() {
      this.loading = true;
      this.apipost("/api/Statistic/GetGuestSurveyList", {}, (res) => {
        this.loading = false;
        if (res.data.resultCode == 1) {
          this.dataList = res.data.data;
          this.chartData = [];
          this.strArr = [];
          var totalTenCount = 0;
          var totalChuyou = 0;
          this.dataList.TopTenScenicList.forEach((x, index) => {
            this.strArr.push(x.ItemName);
            totalTenCount += x.OrderCount;
          });
          this.dataList.TopTenScenicList.forEach((x, index) => {
            this.chartData.push();
            this.chartData.push(
              parseFloat(((x.OrderCount / totalTenCount) * 100).toFixed(2))
            );
          });
          //获取总的出游首选
          this.dataList.souXuanList.forEach((x) => {
            totalChuyou += x.OrderCount;
          });
          var hefeng = this.dataList.souXuanList[0].OrderCount;
          var xierdunSj = this.dataList.souXuanList[1].OrderCount;
          var dantuan = this.dataList.souXuanList[2].OrderCount;
          var xierdun = this.dataList.souXuanList[3].OrderCount;
          //和风畅享系列
          this.shopChartData.push({
            num: Number(((hefeng / totalChuyou) * 100).toFixed(0)),
            color: "#409efe",
            text: "和风畅享系列",
          });
          this.shopChartData.push({
            num: Number(((xierdunSj / totalChuyou) * 100).toFixed(0)),
            color: "#FFA97C",
            text: "希尔顿假期<升级版>",
          });
          this.shopChartData.push({
            num: Number(((dantuan / totalChuyou) * 100).toFixed(0)),
            color: "#99BD7B",
            text: "单团小团系列(本州大阪.东京)",
          });
          this.shopChartData.push({
            num: Number(((xierdun / totalChuyou) * 100).toFixed(0)),
            color: "#D2C9F1",
            text: "希尔顿假期系列",
          });

          //遍历出游计划
          this.chuyouDate = [];
          this.chuyouList = [];
          this.dataList.chuyouList.forEach((x) => {
            this.chuyouDate.push(x.ItemName);
            this.chuyouList.push(x.OrderCount);
          });

          this.isShowTop = true;
          this.initTimeChart();
          this.initTopTen();
        } else {
          this.$message.error(res.data.message);
        }
      });
    },
  },
};
</script>
