<template>
  <div>
    <div class="query-box" style="border-bottom: none;">
      <ul>
        <li>
          <span>
            <em>{{$t('advmanager.v_line')}}</em>
            <el-select v-model="msg.LineId" filterable :placeholder="$t('pub.pleaseSel')" @change="getLinePlaceList()">
              <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
              <el-option v-for="item in queryCommonData.LineList" :label='item.LineName' :value='item.LineID'
                :key='item.LineID'>
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('Operation.Op_Country')}}/{{$t('system.query_dest')}}</em>
            <el-select v-model="msg.PlaceID" filterable :placeholder="$t('pub.pleaseSel')" @change="getLineTeamList()">
              <el-option :label="$t('pub.unlimitedSel')" :value="0"></el-option>
              <el-option v-for="item in queryCommonData.PlaceList" :label="item.PlaceName" :value="item.PlaceID"
                :key="item.LtID"></el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>{{$t('advmanager.v_xilie')}}</em>
            <el-select v-model="msg.LineteamId" filterable :placeholder="$t('pub.pleaseSel')">
              <el-option :label="$t('pub.unlimitedSel')" :value='0'></el-option>
              <el-option v-for="item in queryCommonData.LineTeamList" :label='item.LtName' :value='item.LtID'
                :key='item.LtID'>
              </el-option>
            </el-select>
          </span>
        </li>
        <li>
          <span>
            <em>地接团号</em>
            <el-input v-model='msg.CombinationNum'></el-input>
          </span>
        </li>
        <li>
          <span>
            <em>团号</em>
            <el-input v-model='msg.TCNUM'></el-input>
          </span>
        </li>
        <li><span><em>日期</em>
            <el-date-picker v-model='msg.StartDate' class='w135' value-format="yyyy-MM-dd" type="date"></el-date-picker>
            -
            <el-date-picker v-model='msg.EndDate' class='w135' value-format="yyyy-MM-dd" type="date"></el-date-picker>
          </span>
        </li>
        <li><span><em>状态</em></span>
          <el-select v-model='msg.PriceStatus'>
            <el-option label='正常' value='0' key='0'></el-option>
            <el-option label='取消' value='1' key='1'></el-option>
          </el-select>
        </li>
        <li>
          <input type="button" class="normalBtn" value="查询" @click="getList();resetPageIndex()" />
        </li>
      </ul>
    </div>
    <div class="mt10 fz14 color333 busIconStyle">
      车辆状态&nbsp;&nbsp;&nbsp;已确定:<span style="color:#4BCA81 ;">√</span>未确定:<span
        style="color: #ff6600;">O</span>未分配:<span style="color:#E95252 ;">X</span>
    </div>
    <div style="width: 100%;  overflow-x: auto;padding-bottom: 10px; margin-top: 10px; " class="ownScrollbarStyle"
      :style="{height: boxHeight + 'px'}">
      <table border="0" cellspacing="1" cellpadding="0" class="busStatisticsTalbe" v-loading='loading'>
        <tr>
          <th class="w100">序号</th>
          <th width="110">出发地</th>
          <th width="110">酒店</th>
          <th width="150">航班时间</th>
          <th width="150">公司团号</th>
          <th width="100">线路负责人</th>
          <th width="70">进出点</th>
          <th width="80">机位总数<br />(Y/E/F/单地接)</th>
          <th width="80">领队</th>
          <th width="80">导游</th>
          <th width="150">车型</th>
          <th width="100" v-for='item in thLengthTitle'>{{item}}</th>
          <th width="150">车辆状态</th>
          <th width="150">车费总计</th>
          <th width="80">配车天数</th>
          <th width="120">操作</th>
        </tr>
        <tbody v-for="(outItem,outindex) in DataList" :class="{splitTrCss:outindex%2!=0}">
          <template v-for="(item,index) in outItem.StaticsReportList">
            <tr>
              <td :rowspan="2*outItem.StaticsReportList.length" v-if='index==0'>
                <div class="w100">{{outItem.NewCombinationNum}}</div>
              </td>
              <td>
                <div class="w80">
                  {{item.StartCityNames}}
                </div>
              </td>
              <td>
                <el-popover width="750" trigger="click" popper-class="Bus_HotelPop">
                  <commonHotelInfo :HotelObj="item.CommonReport.PriceHotelResult" :showHotelObj="showHotelObj">
                  </commonHotelInfo>
                  <div slot="reference" class="w80" style="cursor:pointer;text-decoration:underline;">酒店信息</div>
                </el-popover>
              </td>
              <td>
                <div class="w120">
                  {{item.FlightDate}}
                  <el-popover popper-class="busStatistics_tripDetails" width="550" trigger="click">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tr class="_color_666" style="text-align:center;">
                        <th width="60">{{$t('Airticket.Air_segment')}}</th>
                        <th width="80">{{$t('system.query_flightNum')}}</th>
                        <th width="150">起飞时间</th>
                        <th width="150">到达时间</th>
                        <th width="100">经停城市</th>
                      </tr>
                      <tr v-for="(ds,din) in item.FlightList" :key="din" style="text-align:center;">
                        <td class="_d_name _color_666">
                          <span v-if="din==0">{{$t('Airticket.Air_go')}}</span>
                          <span v-else-if="din==item.FlightList.length-1">{{$t('Airticket.Air_returnTrip')}}</span>
                          <span
                            v-else-if="din>0 && din!=item.FlightList.length-1">{{$t('Airticket.Air_transit')}}</span>
                        </td>
                        <td>
                          <div>{{ds.Flight_number}}</div>
                          <div style="margin-top:5px;">{{ds.AlName}}</div>
                        </td>
                        <td>
                          <div>{{ds.FlightDate}} {{ds.Departure_time}}</div>
                          <div style="margin-top:5px;">{{ds.dName}}</div>
                        </td>
                        <td>
                          <div>{{ds.FlightArrivalTime}} {{ds.Arrival_time}}</div>
                          <div style="margin-top:5px;">{{ds.aName}}</div>
                        </td>
                        <td>{{ds.StopoverName}}</td>
                      </tr>
                    </table>
                    <el-button slot="reference" class="normalBtn mt5"
                      style='height:24px; padding: 0 10px; background: #2AAEF2; border-color: #2AAEF2;'>详情</el-button>
                  </el-popover>
                </div>
              </td>
              <td>
                <div class="w120 link">
                  <p @click="goUrlT('productQuery',item.TCNUMS,'产品查询')">{{item.TCNUMS}}</p>
                </div>
              </td>
              <td>
                <div class="w80">{{item.CreateByName}}</div>
              </td>
              <td>
                <div class="w80">{{item.InOut}}</div>
              </td>
              <td>
                <div class="w100 link">
                  <p @click="goUrlT('RegistrationList',item.TCIDS,'报名清单')">
                    {{item.TotalSeat}}/{{item.CommonReport.HouseStatistics.RealityYSeatNum}}/{{item.CommonReport.HouseStatistics.RealityESeatNum}}/{{item.CommonReport.HouseStatistics.RealityFSeatNum}}/{{item.CommonReport.HouseStatistics.SingleDMNum}}
                  </p>
                </div>
              </td>
              <td>
                <div class="w80">{{item.LeaderName}}</div>
              </td>
              <td>
                <div class="w80">{{item.GuideName}}</div>
              </td>
              <td>
                <div class="w80">
                  <template
                    v-if="item.CommonReport&&item.CommonReport.BusPlanListReport&&item.CommonReport.BusPlanListReport.length>0&&item.CommonReport.BusPlanListReport[0].BusPlanOrderList&&item.CommonReport.BusPlanListReport[0].BusPlanOrderList[0]">
                    {{item.CommonReport.BusPlanListReport[0].BusPlanOrderList[0].MainBusTypeStr}}
                  </template>
                </div>
              </td>
              <td v-for="(x,ww) in item.CommonReport.BusPlanListReport" style="vertical-align: top;">
                <div class="w100">
                  <template v-if="x.BusPlanOrderList" v-for="(childItem,childIndex) in x.BusPlanOrderList">
                    <p class="pDateStyle" v-if="childIndex==0"> {{childItem.PlanDateStr}}</p>
                    <p class="pDateStyle">
                      {{(childItem.AirportPickUpStr!=""?childItem.AirportPickUpStr:"") }}
                      <span style="color: #4BCA81;" v-if="(childItem.AirportPickUpStr!='')">√</span>
                      <span style="color: #E95252;" v-else>X</span>
                      <template v-if="x.BusPlanOrderList.length>1 && x.BusPlanOrderList.length-1!=childIndex">
                        <br />
                      </template>
                    </p>
                  </template>
                </div>
              </td>
              <td v-for="is in item.isCha"></td>
              <td>
                <div class="w80 fbold fz16">
                  <span style="color: #E95252;" v-if="item.CommonReport.BusOrderState==-1">X</span>
                  <span style="color: #ff6600;" v-else-if="item.CommonReport.BusOrderState==0">O</span>
                  <span style="color: #4BCA81;" v-else-if="item.CommonReport.BusOrderState==1">√</span></div>
              </td>
              <td>
                <div class="w150">
                  {{GetTotalPrice(item.CommonReport.BusPlanListReport,item.CommonReport.HouseStatistics.RealityNum)}}
                </div>
              </td>
              <td>
                <div class="w100">
                  {{GetPeiChe(item.CommonReport.BusPlanListReport)}}
                </div>
              </td>
              <td :rowspan="2*outItem.StaticsReportList.length" v-if='index==0'>
                <div class="w100 link">
                  <span @click="goUrlX('BusInfo',item,outItem,'车配信息')">详情</span>
                  <span @click="GoDownLoad(outItem)">手配书</span>
                </div>
              </td>
            </tr>
            <tr>
              <td :colspan="colspanTotal" style="text-align: left!important;padding-left: 20px;">
                <div class="link">
                  <p @click="goUrlT('productQuery',item.TCNUMS,'产品查询')">{{item.Titles}}</p>
                  <div v-show="item.DMCRemark!=''" class="colorE95252">地接备注:{{item.DMCRemark}}</div>
                  <div v-show="item.OPRemark!=''" class="colorE95252"> OP备注（对外）:{{item.OPRemark}}</div>
                  <div v-show="item.OPInnerRemark!=''" class="colorE95252">OP备注（对内）:{{item.OPInnerRemark}}</div>
                </div>
              </td>
            </tr>
          </template>
        </tbody>
      </table>
    </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>
  import commonHotelInfo from "../commonPage/commonHotelInfo.vue";
  export default {
    data() {
      return {
        userInfo: {}, //用户信息
        loading: false,
        currentPage: 1,
        total: 0,
        msg: {
          pageIndex: 1,
          pageSize: 10,
          SelectType: 4,
          LineId: 0,
          PlaceID: 0,
          LineteamId: 0,
          StartDate: '',
          EndDate: '',
          PriceStatus: "0",
          CombinationNum: ""
        },
        queryCommonData: {
          PlaceList: [],
          LineList: [],
          LineTeamList: [],
        },
        thLengthTitle: [],
        DataList: [],
        colspanTotal: 0,
        isCha: 0,
        boxHeight: 0,
        showHotelObj: {
          showPrice: false, //是否显示价格
          showPay: false, //是否显示支付方式
          showZhan: false, //占房时间
          showBtnList: false, //是否下载、确认按钮
          ShowTaxType: false, //显示税入税别
          ShowRebateRatio: false, //显示返佣比列
          ShowSupplier: false, //是否显示供应商
          showCaozuoTime: false, //操作时间
          colspanLength: 6 //跨行
        }
      }
    },
    components: {
      commonHotelInfo
    },
    methods: {
      getLineList() {
        this.apipost("line_post_GetAllList", {}, res => {
          if (res.data.resultCode == 1) {
            this.queryCommonData.LineList = res.data.data;
            this.queryCommonData.PlaceList = []
            this.queryCommonData.LineTeamList = []
          } else {
            this.Error(res.data.message);
          }
        });
      },
      //获取目的地列表
      getLinePlaceList() {
        this.msg.PlaceID = 0;
        this.msg.LineteamId = 0;
        let msg = {
          lineID: this.msg.LineId,
        }
        this.apipost('team_post_GetLinePlace', msg, res => {
          if (res.data.resultCode == 1) {
            this.queryCommonData.PlaceList = res.data.data
            this.queryCommonData.LineTeamList = []
          }
        })
      },
      //获取系列列表
      getLineTeamList() {
        this.msg.LineteamId = 0
        let msg = {
          lineID: this.msg.LineId,
          placeID: this.msg.PlaceID,
          isTOOP: 1
        }
        this.apipost('team_post_GetList', msg, res => {
          if (res.data.resultCode == 1) {
            this.queryCommonData.LineTeamList = res.data.data
          }
        })
      },
      GetTotalPrice(obj) { //车费总价
        let totalPrice = 0;
        obj.forEach(busInfo => {
          if (busInfo.BusPlanOrderList) {
            busInfo.BusPlanOrderList.forEach(subItem => {
              if (subItem.CostPrice != undefined) {
                totalPrice += subItem.CostPrice;
              }
            });
          }
        });
        return totalPrice;
      },

      GetPeiChe(obj) { //配车信息
        let jieji = "";
        let songji = "";
        let allStr = "";
        let DayNum = 0;
        obj.forEach((busInfo, index) => {
          if (index == 0) {
            if (busInfo.BusPlanOrderList) {
              busInfo.BusPlanOrderList.forEach(subItem => {
                if (subItem.AirportPickUpStr != "") {
                  jieji += subItem.AirportPickUpStr + ",";
                } else {
                  jieji += "接机,";
                }

              });
            }
          } else if (index == (obj.length - 1)) {
            if (busInfo.BusPlanOrderList) {
              busInfo.BusPlanOrderList.forEach(subItem => {
                if (subItem.AirportPickUpStr != "") {
                  songji += subItem.AirportPickUpStr + ",";
                } else {
                  songji += "送机,";
                }
              });
            }

          } else {
            DayNum += 1;
          }
        });
        if (parseInt(DayNum) > 0) {
          allStr += jieji.substring(0, jieji.lastIndexOf(',')) + "+" + DayNum + "天"
        }
        if (songji.length > 0) {
          allStr += "+" + songji.substring(0, songji.lastIndexOf(','))
        }
        return allStr;
      },
      GoDownLoad(item) {
        this.$router.push({
          name: "busHandBook",
          query: {
            "TCID": item.TCIDs,
            blank: 'y',
            tab: "手配依赖书"
          }
        })
      },
      goUrlX(path, obj, outItem, title) {
        this.$router.push({
          name: path,
          query: {
            "TCID": outItem.TCIDs,
            StartDate: obj.StartDateStr,
            DayNum: obj.DayNum,
            TotalNumber: obj.TotalSeat, //机位总数
            RealityYSeatNum: obj.CommonReport.HouseStatistics.RealityYSeatNum,
            RealityESeatNum: obj.CommonReport.HouseStatistics.RealityESeatNum,
            RealityFSeatNum: obj.CommonReport.HouseStatistics.RealityFSeatNum,
            LeaderName: obj.LeaderName,
            GuideName: obj.GuideName,
            NewCombinationNum: outItem.NewCombinationNum,
            blank: 'y',
            title: obj.Titles,
            TCNUMS: obj.TCNUMS,
            InOut: obj.InOut,
            RealityNum: obj.CommonReport.HouseStatistics.RealityNum,
            tab: title
          }
        })
      },
      goUrlR(path, obj, title) {
        this.$router.push({
          name: path,
          query: {
            "ID": obj,
            blank: 'y',
            tab: title
          }
        })
      },
      goUrlT(path, obj, title) {
        this.$router.push({
          name: path,
          query: {
            "id": obj,
            blank: 'y',
            tab: title
          }
        })
      },
      goUrl(path, obj, title) {
        this.$router.push({
          name: path,
          query: {
            "id": obj.TCIDS,
            'TCNUM': obj.TCNUMS,
            'flightTotal': obj.TotalSeat,
            'GuestNum': obj.CommonReport.HouseStatistics.RealityNum,
            'NewCombinationNum': obj.NewCombinationNum,
            blank: 'y',
            tab: title
          }
        })
      },
      handleCurrentChange(val) {
        this.msg.pageIndex = val;
        this.getList();
      },
      resetPageIndex() {
        this.msg.pageIndex = 1;
        this.currentPage = 1;
      },
      getList() {
        this.loading = true
        this.apipost('bus_Get_GetBusUniteCombinationNumService_V2', this.msg, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.total = res.data.data.count;
            this.DataList = res.data.data.pageData.data;
            this.thLengthTitle = [];
            this.colspanTotal = res.data.data.pageData.columnsCount + 13;
            for (let i = 1; i <= res.data.data.pageData.columnsCount; i++) {
              this.thLengthTitle.push('第' + i + '天');
            }
            this.DataList.forEach(outItem => {
              outItem.StaticsReportList.forEach(item => {
                if (item.CommonReport.BusPlanListReport.length < res.data.data.pageData.data.length) {
                  item.isCha = res.data.data.pageData.columnsCount - item.CommonReport.BusPlanListReport
                    .length;
                } else {
                  item.isCha = 0;;
                }
              })
            })
            this.$forceUpdate();
          } else {
            this.Error(res.data.message);
          }
        }, err => {})
      },
    },
    mounted() {
      this.userInfo = this.getLocalStorage();
      if (this.userInfo.RB_Group_id == 2) {
        this.msg.LineId = 14;
      }
      let myDate = new Date();
      let nowDate =
        myDate.getFullYear() +
        "-" +
        parseInt(myDate.getMonth() + 1) +
        "-" +
        myDate.getDate();
      this.msg.StartDate = nowDate;

      let width = window.innerWidth - 50;
      let height = window.innerHeight - 65 - 210;
      this.boxHeight = height;
      this.offsetwidth = width;
      this.getList();
      this.getLineList();
    },
  }

</script>
<style>
  .splitTrCss td {
    background: #eee !important;
  }

  .busIconStyle>span {
    margin-right: 20px;
    font-weight: bold;
  }

  .busStatisticsTalbe {
    background: #ccc;
  }

  .busStatisticsTalbe tr th {
    background: #E6E6E6;
    height: 40px;
    font-size: 12px;
    color: #333;
  }

  .busStatisticsTalbe tr {
    background: #fff;
    text-align: center;
    height: 40px;
  }

  .busStatisticsTalbe tr td {
    font-size: 12px;
  }

  .busStatisticsTalbe tr td .pDateStyle {
    border-bottom: 1px solid #ccc;
    min-height: 24px;
    line-height: 24px;
    margin-top: 0;
    box-sizing: content-box;
    padding: 0 10px;
  }

  .busStatisticsTalbe tr td .pDateStyle:last-child {
    border-bottom: none;
  }

  .busStatisticsTalbe tr td .link p:hover {
    text-decoration: underline;
    cursor: pointer;
  }

  .busStatisticsTalbe tr td .link span:hover {
    text-decoration: underline;
    cursor: pointer;
  }

  .busStatistics_tripDetails {
    padding: 0;
    box-shadow: 0px 1px 3px 0px #dedede;
    max-height: 400px;
    overflow-y: auto;
  }

  .busStatistics_tripDetails .popper__arrow::after {
    border-bottom-color: #ededed !important;
  }

  .busStatistics_tripDetails table {
    padding: 10px 0 0 20px;
    background-color: #ededed;
    border-collapse: collapse;
    border: 1px solid #d2d2d2;
    font-size: 12px;
  }

  .busStatistics_tripDetails table th {
    background-color: #ededed;
    padding: 5px;
  }

  .busStatistics_tripDetails table td {
    background-color: #ffffff;
    padding: 9px 15px;
    color: #333333;
    border: 1px solid #d2d2d2;
  }

  .busStatistics_tripDetails table td._d_name {
    background-color: #ededed;
  }

  .busStatistics_tripDetails table ._color_666 {
    color: #666666;
  }

  .busStatistics_tripDetails table tr._color_666 th {
    padding: 9px 15px;
  }

  .Bus_HotelPop {
    overflow: auto;
    max-height: 350px;
  }

</style>
