<style>
    .TTicketSpotDetails .mainTable{width:100%;min-height:500px;overflow-x: auto;}
    .TTicketSpotDetails .mainTable::-webkit-scrollbar{width: 4px;height:8px;}
    .TTicketSpotDetails .mainTable::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);border-radius: 4px;background: #EDEDED;}
    .TTicketSpotDetails .mainTable::-webkit-scrollbar-thumb{border-radius: 4px;-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);background: #c9c9c9;}
    .TTicketSpotDetails .produceNames span, .showSpan{display: inline-block;color: white;border-radius: 50%;width: 26px;height: 26px;line-height: 26px;font-size:12px;}
     .TTicketSpotDetails .myTable{width:100%;margin-top:20px;min-width: 1400px;}
     .TTicketSpotDetails .myTable tr:nth-child(n+2):hover{background-color: white;box-shadow:0px 0px 14px 0px #adadad;z-index: 10;position: relative;}
     .TTicketSpotDetails .myTable tr{background-color:#fff;height:60px;text-align: center;}
    .TTicketSpotDetails .dataIn{margin:30px 0;}
    .TTicketSpotDetails .leftDate{font-size:14px;font-weight:bold;color:#333333; background-color:#E3E3E3;border-radius:4px;float:left;width:103px;height:30px;text-align: center;
    line-height: 30px;}
    .TTicketSpotDetails .backBtn{float:right;}
    .TTicketSpotDetails .listSpan span{display:inline-block;margin-right:50px;font-size:12px;color:#333333;}
    .TTicketSpotDetails .noteList{margin-left:20px;color:#666666;}
    .TTicketSpotDetails .listDiv{width:1660px;height:60px;background-color:#fff;}
    .TTicketSpotDetails .nei{background-color:#4CC0FC;}
    .TTicketSpotDetails .Border{background-color:#47BF8C;}
    .TTicketSpotDetails .Corder{background-color:#FF793E;}
    .TTicketSpotDetails .orderTitle{display: inline-block;width:100%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin-top:6px;}
    .TTicketSpotDetails .icon-dingdanhao{font-size:16px;color:#CCCCCC;margin-right:8px;}
    .TTicketSpotDetails .orderId{color:#333333;font-weight:bold;margin-left:5px; text-decoration: underline;}
    .TTicketSpotDetails .myTable tr td{font-size:12px;border-bottom:1px solid #d1d1d1;}
    .TTicketSpotDetails .icon-img-ren{color:#cccccc;margin-right:8px;}
    .TTicketSpotDetails .CreateName{border-right:1px dashed #D7D7D7;}
    .TTicketSpotDetails .ExchangePrice{color:#32CC8A;font-size:16px;font-weight:bold;}
    .TTicketSpotDetails .CostPrice{color:#E95252;font-weight:bold;}
    .TTicketSpotDetails .RebateMoney{color:#32CC8A;font-weight:bold;}
    .TTicketSpotDetails .icon-img_shijian{color:#cccccc;margin-right:10px;}
    .TTicketSpotDetails .orderNum{position:relative;cursor: pointer;}
    .TTicketSpotDetails .orderNum:hover .orderId{color:#E95252;}
    .TTicketSpotDetails .orderNum_info{width: 540px;height: 325px;background-color: #fff;position: absolute;left: -100px;z-index: 50;top:70px;padding:20px;font-size:12px;
      box-shadow:0px 0px 14px 0px #adadad;border-radius:4px;}
    .TTicketSpotDetails .orderNum_info:after {position:absolute;border-left:9px solid transparent;border-right:9px solid transparent;border-bottom:9px solid #fff;content:" ";display:block;width:0;height:0 ;top: -9px;left: 48%;}
    .TTicketSpotDetails .leftShow{float:left;}
    .TTicketSpotDetails .showNum{float:right;font-size:14px;margin:5px 5px 0 0;}
    .TTicketSpotDetails .sTitle{font-size:14px;width:340px;float:left;color:#333333;font-weight:bold;text-align:left;
    margin-top:5px;overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:1; }
    .TTicketSpotDetails .showSpan{float:left;margin-right:14px;}
    .TTicketSpotDetails .leftTwoinfo{float:left;width:180px;}
    .TTicketSpotDetails .innerSpan{width:150px;overflow:hidden;display:inline-block;text-align: left;text-overflow: ellipsis;white-space: nowrap;margin-bottom:10px;}
    .TTicketSpotDetails .leftTwoinfo span i{color:#E0E0E0;margin-right:10px;float:left;}
    .TTicketSpotDetails .rightTwoinfo{float:right;width:300px;height:80px;background-color:#EDEDED;border-radius:4px;}
    .TTicketSpotDetails .showTwoInfo{margin:17px 5px 25px 5px;text-align: left;color:#666666;border-bottom:1px solid #E8EAE7;padding-bottom:20px;}
    .TTicketSpotDetails .rightOne{margin:5px 0 0 20px;}
    .TTicketSpotDetails .rightTwo{width:250px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;margin:10px 0 0 20px;}
    .TTicketSpotDetails .rightThr span{display: inline-block;margin-right:20px;}
    .TTicketSpotDetails .rightThr{margin:10px 0 0 20px;}
    .TTicketSpotDetails .leftThree{float:left;width:50%;border-right:1px solid #E8EAE7;text-align: left;margin-left:10px;}
    .TTicketSpotDetails .rightThree{text-align: left;margin-left:30px;float:left;}
    .TTicketSpotDetails .leftThree div,.rightThree div{margin-bottom:20px;}
    .TTicketSpotDetails .lastSpan{font-weight:bold;color:#333333;margin-left:20px;}
    .TTicketSpotDetails .produceNames{border-left:3px solid #fff;}
    .TTicketSpotDetails .c1{border-color:#4CC0FC;}
    .TTicketSpotDetails .c2{border-color:#47BF8C;}
    .TTicketSpotDetails .c3{border-color:#FF793E;}
    .TTicketSpotDetails .closeBtn{color:#E95252;position: absolute;right:-15px;top:-15px;display: inline-block;z-index: 999;width:30px;height:30px;}
    .TTicketSpotDetails .closeBtn i{font-size:25px;}

</style>
<template>
    <div class='flexOne TTicketSpotDetails'>
            <div class="dataIn clearfix">
                <div class="leftDate">{{msg.YearStr}}{{$t('pub.year')}}{{msg.MonthStr}}{{$t('pub.month')}}</div>
                <input type="button" class="hollowFixedBtn backBtn" @click="goUrl('TicketAccounting')" :value="$t('pub.returnBack')"/>
            </div>
            <div class="listSpan">
                <span>{{$t('restaurant.res_income')}}：￥{{TotalPrice}}</span>
                <span>{{$t('restaurant.res_outcome')}}：￥{{CostPrice}}</span>
                <span>{{$t('objFill.lirunjsgzqkzs')}}：￥{{Profit}}<span class="noteList">（{{$t('restaurant.res_OrderInfo')}}）</span></span>
            </div>
    <div class="mainTable">
        <table class="myTable centerTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading" style="border-collapse:separate; border-spacing:0px 10px;table-layout:fixed;">
			<tr v-for="(item,index) in DataList" :key="index">
                <td class='produceNames' :class="{'c1':item.OrderSourceStr=='内','c2':item.OrderSourceStr=='B2B','c3':item.OrderSourceStr=='B2C'}" width="80">
                    <span :class="{'nei':item.OrderSourceStr=='内','Border':item.OrderSourceStr=='B2B','Corder':item.OrderSourceStr=='B2C'}">{{item.OrderSourceStr}}</span>
                </td>
				<td width="100"><span calss="iconfont icon-zixiangmukanban"></span>{{item.CheckInDay}}</td>
				<td width="150">
                    <el-tooltip class="item" effect="dark" :content="item.AirName" placement="top-start" popper-class="max-w250">
                        <span class="orderTitle">{{item.AirName}}</span>
                    </el-tooltip>
                </td>
                <td width="80">
                    {{item.UseAccount}}{{$t('hotel.hotel_people')}}
                </td>
                <td width="300" class="orderNum" @click="showTip(index)">
                    <i class="iconfont icon-dingdanhao"></i><span class="orderId">{{$t('objFill.orderid')}}{{item.ID}}</span>
                    <div class="orderNum_info" v-if="item.infoShow">
                        <div class="showTitle clearfix">
                            <div class="leftShow clearfix">
                                <span class="showSpan" :class="{'nei':item.OrderSourceStr=='内','Border':item.OrderSourceStr=='B2B','Corder':item.OrderSourceStr=='B2C'}">{{item.OrderSourceStr}}</span>
                                <el-tooltip class="item" effect="dark" :content="item.AirName" placement="top-start" popper-class="max-w250">
                                    <span class="sTitle">{{item.AirName}}</span>
                                </el-tooltip>
                            </div>
                            <div class="showNum">No.{{item.ID}}</div>
                            <div class="closeBtn" @click.stop="closeTip()">
                                <i class="iconfont icon-yiquxiao "></i>
                            </div>
                        </div>
                        <div class="showTwoInfo clearfix">
                             <div class="leftTwoinfo">
                                 <span>
                                     <i class="iconfont icon-img_dz"></i><span class="innerSpan">{{item.FreightSpaceAndCode}}</span>
                                 </span>
                                 <span>
                                     <i class="iconfont icon-img-canying"></i><span class="innerSpan">{{item.UseAccount}}</span>
                                 </span>
                                 <span>
                                     <i class="iconfont icon-img_shijian"></i><span class="innerSpan">{{item.FlightDate}}</span>
                                 </span>
                            </div>
                             <div class="rightTwoinfo">
                                    <div class="rightOne">{{$t('hotel.hotel_corrlelatition')}}</div>
                                    <el-tooltip class="item" effect="dark" :content="item.Title" placement="top-start" popper-class="max-w250">
                                        <div class="rightTwo">{{item.Title}}</div>
                                    </el-tooltip>
                                    <div class="rightThr">
                                        <span>{{item.CreateName}}</span>
                                        <span>{{item.CreatePhone}}</span>
                                    </div>
                            </div>
                        </div>
                        <div class="clearfix">
                            <div class="leftThree">
                                <div>{{$t('hotel.hotel_DealPrice')}}<span class="lastSpan">￥{{item.ExchangeUnitPrice}}</span></div>
                                <div>{{$t('hotel.hotel_CostPrice')}}<span class="lastSpan">￥{{item.CostUnitPrice}}</span></div>
                                <div>{{$t('hotel.hotel_UseAmount')}}<span class="lastSpan">￥{{item.UseAccount}}</span></div>
                            </div>
                            <div class="rightThree">
                                <div>{{$t('restaurant.res_income')}}<span class="lastSpan">{{item.ExchangeUnitPrice}}*{{item.UseAccount}}=<span class="RebateMoney">{{item.Income}}</span></span></div>
                                <div>{{$t('restaurant.res_outcome')}}<span class="lastSpan">-{{item.CostUnitPrice}}*{{item.UseAccount}}=<span class="CostPrice">{{item.Expenditure}}</span></span></div>
                                <div>{{$t('restaurant.res_profit')}}<span class="lastSpan"><span class="RebateMoney">{{item.Profit}}</span></span></div>
                            </div>
                        </div>
                    </div>
                </td>
                <td class="CreateName">
                    <i class="iconfont icon-img-ren"></i>{{item.CreateName}}
                </td>
                <td>
                    <el-tooltip class="item" effect="dark" :content="$t('restaurant.res_income')" placement="top-start" popper-class="max-w250">
                        <span class="ExchangePrice">{{item.Income}}</span>
                    </el-tooltip>
                </td>
                <td>
                    <el-tooltip class="item" effect="dark" :content="$t('restaurant.res_outcome')" placement="top-start" popper-class="max-w250">
                        <span class="CostPrice">{{item.Expenditure}}</span>
                    </el-tooltip>
                </td>
                 <td class="CreateName">
                    <el-tooltip class="item" effect="dark" :content="$t('restaurant.res_profit')" placement="top-start" popper-class="max-w250">
                        <span class="RebateMoney">+{{item.Profit}}</span>
                    </el-tooltip>
                </td>
                <td>
                    <i class="iconfont icon-img_shijian"></i>{{item.CreateDate}}
                </td>
			</tr>
		</table>
        <div class="noData" v-show="noData">
            {{$t('system.content_noData')}}
        </div>
    </div>
          <el-pagination background @current-change="handleCurrentChange" :current-page.sync="currentPage" layout="total,prev, pager, next, jumper" :page-size=msg.pageSize :total=total>
		</el-pagination>
    </div>
</template>
<script>
export default {
    data(){
        return{
            msg:{
                pageIndex:1,
                pageSize:10,
                YearStr:2018,
                MonthStr:6
            },
            noData:false,
            loading:true,
            currentPage: 1,
            total:0,
            DataList:'',
            YearStr:'',
            MonthStr:'',
            TotalPrice:'',
            CostPrice:'',
            Profit:''
        }
    },methods:{
        getList(){
            this.loading = true;
            this.apipost('dmcindex_get_GetAirTicketDetails',this.msg,res=>{
                if(res.data.resultCode==1){
                    this.loading = false;
                    if(res.data.data.count>0){
                        this.total = res.data.data.count;
                        this.noData =false;
                        res.data.data.pageData.forEach(x=>{
                            x.infoShow = false
                        })
                        this.DataList = res.data.data.pageData;
                    }else{
                        this.noData =true;
                    }
                }else{
                    this.loading = false;
                }
            },err=>{})
        },
        goUrl(path,id){
             this.$router.push({ path: path,query:{"ID":id} })
        },
        handleCurrentChange(val) {//翻页功能按钮
            this.msg.pageIndex = val;
            this.getList();
        },
        goUrl(path) {
            this.$router.push({ path: path})
        },
        showTip(index){
            this.DataList.forEach(x=>{
                x.infoShow = false
            })
            this.DataList[index].infoShow = true;
        },
        closeTip(){
            this.DataList.forEach(x=>{
                x.infoShow = false
            })
        },
    },mounted(){
        this.getList();
        this.msg.YearStr = this.$route.query.YearStr;
        this.msg.MonthStr = this.$route.query.MonthStr;
        this.TotalPrice = this.$route.query.TotalPrice;
        this.CostPrice = this.$route.query.CostPrice;
        this.Profit = this.$route.query.Profit;
    }
}
</script>