<style>
     .HotelAccountInfo .produceNames span, .showSpan{display: inline-block;color: white;border-radius: 50%;width: 26px;height: 26px;line-height: 26px;font-size:12px;}
     .HotelAccountInfo .myTable{width:100%;margin-top:20px;}
     .HotelAccountInfo .myTable tr:nth-child(n+2):hover{background-color: white;box-shadow:0px 0px 14px 0px #adadad;z-index: 10;position: relative;}
     .HotelAccountInfo .myTable tr{background-color:#fff;height:60px;text-align: center;}
    .HotelAccountInfo .dataIn{margin:30px 0;}
    .HotelAccountInfo .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;}
    .HotelAccountInfo .backBtn{float:right;}
    .HotelAccountInfo .listSpan span{display:inline-block;margin-right:50px;font-size:12px;color:#333333;}
    .HotelAccountInfo .noteList{margin-left:20px;color:#666666;}
    .HotelAccountInfo .listDiv{width:1660px;height:60px;background-color:#fff;}
    .HotelAccountInfo .HA_nei{background-color:#4CC0FC;}
    .HotelAccountInfo .HA_Border{background-color:#47BF8C;}
    .HotelAccountInfo .HA_Corder{background-color:#FF793E;}
    .HotelAccountInfo .orderTitle{display: inline-block;width:100%;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin-top:6px;text-align: left;}
    .HotelAccountInfo .icon-dingdanhao{font-size:16px;color:#CCCCCC;margin-right:8px;}
    .HotelAccountInfo .orderId{color:#333333;font-weight:bold;margin-left:5px;border-bottom:1px dashed #d1d1d1;}
    .HotelAccountInfo .myTable tr td{font-size:12px;border-bottom:1px solid #d1d1d1;}
    .HotelAccountInfo .icon-img-ren{color:#cccccc;margin-right:8px;}
    .HotelAccountInfo .CreateName{border-right:1px dashed #D7D7D7;}
    .HotelAccountInfo .ExchangePrice{color:#32CC8A;font-size:16px;font-weight:bold;}
    .HotelAccountInfo .CostPrice{color:#E95252;font-weight:bold;}
    .HotelAccountInfo .RebateMoney{color:#32CC8A;font-weight:bold;}
    .HotelAccountInfo .icon-img_shijian{color:#cccccc;margin-right:10px;}
    .HotelAccountInfo .orderNum{position:relative;cursor: pointer;}
    .HotelAccountInfo .orderNum:hover .orderId{color:#E95252;border-bottom:1px dashed #d1d1d1;}
    .HotelAccountInfo .orderNum_info{width: 540px;height: 356px;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;cursor:auto;}
    .HotelAccountInfo .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%;}
    .HotelAccountInfo .leftShow{float:left;}
    .HotelAccountInfo .showNum{float:right;font-size:14px;margin:5px 5px 0 0;}
    .HotelAccountInfo .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; }
    .HotelAccountInfo .showSpan{float:left;margin-right:14px;}
    .HotelAccountInfo .leftTwoinfo{float:left;width:180px;}
    .HotelAccountInfo .innerSpan{width:150px;overflow:hidden;display:inline-block;text-align: left;text-overflow: ellipsis;white-space: nowrap;margin-bottom:10px;}
    .HotelAccountInfo .leftTwoinfo span i{color:#E0E0E0;margin-right:10px;float:left;}
    .HotelAccountInfo .rightTwoinfo{float:right;width:300px;height:80px;background-color:#EDEDED;border-radius:4px;}
    .HotelAccountInfo .showTwoInfo{margin:17px 5px 25px 5px;text-align: left;color:#666666;border-bottom:1px solid #E8EAE7;padding-bottom:20px;}
    .HotelAccountInfo .rightOne{margin:5px 0 0 20px;}
    .HotelAccountInfo .rightTwo{width:250px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;margin:10px 0 0 20px;}
    .HotelAccountInfo .rightThr span{display: inline-block;margin-right:20px;}
    .HotelAccountInfo .rightThr{margin:10px 0 0 20px;}
    .HotelAccountInfo .leftThree{float:left;width:50%;border-right:1px solid #E8EAE7;text-align: left;margin-left:10px;}
    .HotelAccountInfo .rightThree{text-align: left;margin-left:30px;float:left;}
    .HotelAccountInfo .leftThree div,.rightThree div{margin-bottom:20px;}
    .HotelAccountInfo .lastSpan{font-weight:bold;color:#333333;margin-left:20px;}
    .HotelAccountInfo .produceNames{border-left:3px solid #fff;}
    .HotelAccountInfo .HA_c1{border-color:#4CC0FC;}
    .HotelAccountInfo .HA_c2{border-color:#47BF8C;}
    .HotelAccountInfo .HA_c3{border-color:#FF793E;}
    .HotelAccountInfo .closeBtn{color:#E95252;position: absolute;right:-15px;top:-15px;display: inline-block;z-index: 999;width:30px;height:30px;}
    .HotelAccountInfo .closeBtn i{font-size:25px;}
    .HotelAccountInfo .centerTable{min-width: 1400px;}
</style>
<template>
    <div class='flexOne HotelAccountInfo'>
            <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('RestauranAccounting')" :value="$t('pub.returnBack')"/>
            </div>
            <div class="listSpan">
                <span>{{$t('restaurant.res_income')}}：￥{{TotalPrice}}</span>
                <span>{{$t('restaurant.res_outcome')}}：￥{{CostPrice}}</span>
                <span>{{$t('restaurant.res_profit')}}：￥{{Profit}}<span class="noteList">（{{$t('restaurant.res_OrderInfo')}}）</span></span>
            </div>
        <div class="tbDiv">
            <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="{'HA_c1':item.OrderSourceStr=='内','HA_c2':item.OrderSourceStr=='B2B','HA_c3':item.OrderSourceStr=='B2C'}" width="80">
                        <span :class="{'HA_nei':item.OrderSourceStr=='内','HA_Border':item.OrderSourceStr=='B2B','HA_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.HotelName" placement="top-start" popper-class="max-w250">
                            <span class="orderTitle">{{item.HotelName}}</span>
                        </el-tooltip>
                    </td>
                    <td width="80">
                        {{item.UseAmount}}{{$t('hotel_.hotel_people')}}
                    </td>
                    <td width="200" class="orderNum" @click="showTip(index)">
                        <i class="iconfont icon-dingdanhao"></i>{{$t('hotel.order_Number')}}<span class="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.HotelName" placement="top-start" popper-class="max-w250">
                                        <span class="sTitle">{{item.HotelName}}</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.Address}}</span>
                                    </span>
                                    <span>
                                        <i class="iconfont icon-img-canying"></i><span class="innerSpan">{{item.HotelName}}</span>
                                    </span>
                                    <span>
                                        <i class="iconfont icon-img_shijian"></i><span class="innerSpan">{{item.CheckInDate}}</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.ExchangePrice}}</span></div>
                                    <div>{{$t('hotel.hotel_CostPrice')}}<span class="lastSpan">￥{{item.CostPrice}}</span></div>
                                    <div>{{$t('hotel.hotel_UseAmount')}}<span class="lastSpan">{{item.UseAmount}}</span></div>
                                </div>
                                <div class="rightThree">
                                    <div>{{$t('restaurant.res_income')}}<span class="lastSpan">{{item.ExchangePrice}}*{{item.UseAmount}}=<span class="RebateMoney">{{item.Income}}</span></span></div>
                                    <div>{{$t('restaurant.res_outcome')}}<span class="lastSpan">-{{item.CostPrice}}*{{item.UseAmount}}=<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.ExchangePrice}}</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.CostPrice}}</span>
                        </el-tooltip>
                    </td>
                    <td>
                        <el-tooltip class="item" effect="dark" :content="$t('hotel.hotel_commission')" placement="top-start" popper-class="max-w250">
                            <span class="ExchangePrice">{{item.Profit}}</span>
                        </el-tooltip>
                    </td>
                    <td class="CreateName">
                        <el-tooltip class="item" effect="dark" :content="$t('restaurant.res_fy')" placement="top-start" popper-class="max-w250">
                            <span class="ExchangePrice">{{item.PredictRebate}}</span>
                        </el-tooltip>
                    </td>

                    <td>
                        <i class="iconfont icon-img_shijian"></i>{{item.CreateDate}}
                    </td>
                </tr>
            </table>
        </div>
        <div class="noData" v-show="noData">
            {{$t('system.content_noData')}}
        </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:'',
                MonthStr:''
            },
            noData:false,
            loading:true,
            currentPage: 1,
            total:0,
            DataList:'',
            YearStr:'',
            MonthStr:'',
            TotalPrice:'',
            CostPrice:'',
            Profit:''
        }
    },methods:{
        getList(){
            this.loading = true;
            this.apipost('dmcindex_get_GetHotelDetails',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>