<style>
    .AirClick{
        text-decoration: underline;
        cursor: pointer;
    }
</style>
<template>
    <div class="AirTicketApp" style="padding-bottom:20px">
         <div class="Header" style="display: flex;flex-wrap: nowrap; justify-content: space-between;padding: 10px 0;">
            <div style="flex-shrink: 0; display: flex;align-items: center; flex-wrap: nowrap;">
                <el-date-picker
                  v-model="value1"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  :range-separator="$t('OrderList.zhi')"
                  :start-placeholder="$t('OrderList.star')"
                  :end-placeholder="$t('OrderList.end')">
                  </el-date-picker>


            <button class="normalBtn" @click="getList">{{$t('pub.searchBtn')}}</button>
            <button class="hollowFixedBtn" @click="Export">导出</button>
          </div>
          <div v-if="LossIncomeList&&LossIncomeList.length>0" style="display: flex;flex-wrap: wrap;flex-grow: 1;margin-left: 20px;justify-content: end;">
            <div style="margin-top: 7px;">
              <span style="font-size: 14px;">机损增收:</span>
              <el-tag size="small" v-for="(x,index) in LossIncomeList" :key="index" @click="goUrl(x)"
              style="margin-left: 5px;margin-top: 2px;margin-bottom: 2px; cursor: pointer;">{{x.LineName}}/{{x.AirLossIncome}}</el-tag>
            </div>
          </div>
      </div>
      <div v-if="LossIncomeList&&LossIncomeList.length>0" style="font-size: 14px;color: red;margin-bottom: 3px;text-align: right;">
        <!-- 注: 韩国线与日本自由行是统计团队亏损，其他线路为机票损失 -->
        注: 以下为团队航空公司-线路-航班目的地统计
      </div>
       <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
           <tr>
               <th v-if="index==0" v-for="(item,index) in ColNameList" :key="index">{{item}}</th>
               <th v-if="index!=0 && index!=ColNameList.length" colspan="2" v-for="(item,index) in ColNameList" :key="index">{{item}}</th>
               <th v-if="index==ColNameList.length" v-for="(item,index) in ColNameList" :key="index">{{item}}</th>
           </tr>
           <tr>
               <td></td>
               <td v-for="item in LossList" :class="{'AirClick':item.Value!='损失占比'}" @click="goToDetail(item)">{{item.Value}}</td>
               <td>{{SunMoney}}</td>
           </tr>
           <tr v-for="(item,index) in Rlist" :key="index">
               <td>{{item.BranchName}}</td>
               <td v-for="(cl,index) in item.LossTL" :key="index">{{cl}}</td>
               <td>{{item.TotalMoney}}</td>
           </tr>
       </table>

    </div>
</template>
<script>
export default {
    data(){
        return{
           LossIncomeList:[],
           loading:false,
           ColNameList:[],
           LossList:[],
           SunMoney:0,
           Rlist:[],
           value1:[],
           msg:{
               StartTime:"",
               EndTime:"",
           },
           userInfo:{},
        }
    },created(){
        this.userInfo = this.getLocalStorage();
    },methods:{
      goUrl(x){
        this.$router.push({
            name: 'TeamRevenueReport',
            query: {
                StartTime:this.msg.StartTime,
                EndTime:this.msg.EndTime,
                LineId:x.LineId,
                blank: "y",
            }
        })
      },
        Export(){

            let msg=this.msg;
            msg.EmployeeId = this.userInfo.EmployeeId;
            var fileName = "机票损失分摊.xls";
            this.GetLocalFile("financestatistics_post_OutToExcelGetCompamyAirTicketRatioList", msg, fileName);
        },
        getList(){
            if(this.value1){
                this.msg.StartTime=this.value1[0];
                this.msg.EndTime=this.value1[1];

            }else{
                this.msg.StartTime="";
                this.msg.EndTime="";

            }
            this.loading = true;
            this.apipost('financestatistics_post_GetCompamyAirTicketRatioList',this.msg, res => {
                    this.loading = false;

                    if(res.data.resultCode == 1) {
                        this.ColNameList=res.data.data.ColNameList;
                        this.Rlist=res.data.data.Rlist;
                        this.LossList=res.data.data.LossList[0].LossTL;
                        this.SunMoney = res.data.data.LossList[0].TotalMoney;
                        this.LossIncomeList = res.data.data.LossIncomeList
                    } else {
                        this.$message.error(res.data.message);
                    }
                    this.loading = false;
            }, err => {})
        },
        //跳转至详情
        goToDetail(item){
            if(item.Value!='损失占比'){
                if(item.IsTravel==1){
                    if(item.AirType && item.AirType==2){
                        this.$router.push({
                            name: 'TeamRevenueReport',
                            query: {
                                StartTime:item.StartTime,
                                EndTime:item.EndTime,
                                LineId:item.LineId,
                                IsSelectTravelLoss:2,
                                AirLossId:item.AirLossId,
                                AirLossType:item.LossType,
                                blank: "y",
                            }
                        });
                    }
                    else{
                    this.$router.push({
                    name: 'TeamRevenueReport',
                    query: {
                        StartTime:item.StartTime,
                        EndTime:item.EndTime,
                        LineId:item.LineId,
                        LtIdStr:item.LtIdStr,
                        IsSelectTravelLoss:1,
                        blank: "y",
                    }
                    });
                }
                }
                else{
                    this.$router.push({
                    name: 'AirTicketLossDetail',
                    query: {
                        msg: JSON.stringify(item),
                        blank: "y",
                        }
                    });
                }

            }
        }

    },mounted(){
        //默认查询当月第一个到最后一天日期
        if(this.$route.query.startDate && this.$route.query.endDate){
            let startDate=this.$route.query.startDate;
            let endDate=this.$route.query.endDate;
            this.value1.push(startDate,endDate);
        }else{
            var now = new Date();
            var month = now.getMonth() + 1;//js获取到的是月份是 0-11 所以要加1
            var year = now.getFullYear();
            var nextMonthFirstDay = new Date([year,month + 1,1].join('-')).getTime();
            var oneDay = 1000 * 24 * 60 * 60;
            var monthLast = new Date(nextMonthFirstDay - oneDay).getDate()
            if(month<10){
                month='0'+month;
            }
            let startDate = [year,month,1].join('-');
            let endDate = [year,month,monthLast].join('-');
            this.value1.push(startDate,endDate);

        }

        this.getList();
    }
}
</script>