
<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: .8;
}
.tourType .conten-box .left{
    height: 100%;
}
.tourType .conten-box .el-card.blue {
  background: #0D2481!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: #0D2481 !important;
    font-size: 14px;
}

</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.TotalMoney}}</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 :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:[],
            discussID: 0,
            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')
            }]
        };
    },watch:{
        
    },
    mounted() {
        this.GetSexOrderList()
    },
    methods: {
        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=['#0D2481','#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: "#0D2481",
                            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
                console.log("this.chartData",this.chartData)
                this.shopChartData = shopChartData
                this.orders=res.data.data;
                
                this.getOrders();
            });
        },
        getOrders(){
            this.apipost("/api/Statistic/GetTravelTypeOrderList", {}, res => {
                this.loading = false
                // console.log("res",res);
                res.data.data.forEach(x => {
                    this.orders[x.NewTravelType - 1].LtName = x.LtName;
                    this.orders[x.NewTravelType - 1].Unit_Price = x.Unit_Price;
                });
            });
        }       
    }
}
</script>