<style>
  .productQuerySearch {
    width: 100%;
    min-height: auto;
    overflow: hidden;
    padding: 0 0 20px 0;
  }

  .productQuerySearch li {
    float: left;
    font-size: 12px;
    color: #666;
    margin: 20px 0 0px 0;
  }

  .productQuerySearch li>span {
    display: inline-block;
  }

  .productQuerySearch li span>em {
    display: inline-block;
    min-width: 60px;
    text-align: right;
    font-style: normal;
    margin: 0 12px 0 0;
  }

  .productQuerySearch li:last-child {
    position: fixed;
    z-index: 50;
    top: 36px;
    right: 20px;
  }

  .productQuerySearch ul {
    overflow: hidden
  }

  ._teamProductModule {
    padding: 0 10px;
  }

  ._teamProductModule li {
    height: 144px;
    border: 1px solid #E5E5E5;
    background: #fff;
    margin-bottom: 10px;
    color: #333;
    font-size: 14px;
  }

  ._teamProductModule li i.iconfont {
    color: #bbb;
    margin-right: 8px;
  }

  ._teamProductModule li>div {
    float: left;
    height: 144px;
    border-right: 1px dashed #DCDFE6;
  }

  ._teamProductModule li>div:last-child {
    border-right: none;
  }

  ._teamProductModule li .d11 {
    float: left;
    width: 120px;
    height: 80px;
    margin: 14px 14px 0 14px;
  }

  ._teamProductModule li .d11>li {
    width: 120px;
    height: 80px;
    border: none;
  }

  ._teamProductModule li .d11>li>img {
    width: 120px;
    heAlNameight: 80px;
  }

  ._teamProductModule li .d12 {
    float: left;
    padding-top: 18px;
    width: 200px;
  }

  ._teamProductModule li .d12 .d12p {
    margin-top: 3px;
    font-size: 12px;
    color: #999;
    cursor: pointer;
    max-height: 80px;
    line-height: 20px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical
  }

  ._teamProductModule li .d12 .d12p:hover {
    text-decoration: underline;
    color: #333;
  }

  ._teamProductModule li .d2 {
    text-align: center;
    padding-top: 20px;
  }

  ._teamProductModule li .d2 p.flightNo {
    background: #ccc;
    width: 136px;
    margin: 5px 0;
    padding: 0 10px;
    height: 22px;
    line-height: 22px;
    display: inline-block;
    font-size: 14px;
  }

  ._teamProductModule li .d2 p.flightNo em {
    font-style: normal;
    color: #333;
    font-size: 12px;
    font-weight: bold;
  }

  ._teamProductModule li .d2 p.flightNo .flem {
    height: 22px;
    width: 50px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
  }

  ._teamProductModule li .d2 p>span {
    color: #fff;
    font-size: 12px;
    border-radius: 10px;
    background: #2AAEF2;
    padding: 2px 5px;
    cursor: pointer;
  }

  ._teamProductModule li .d2>div>div {
    display: inline-block;
    line-height: 24px;
    font-size: 12px;
  }

  ._teamProductModule li .d3 {
    padding-left: 40px;
    padding-top: 20px;
  }

  ._teamProductModule li .d3 p {
    line-height: 24px;
  }

  ._teamProductModule li .d3 p>span {
    color: #666;
    font-size: 12px;
    margin-right: 10px;
  }

  ._teamProductModule li .d3 p>em {
    background: #FF9C00;
    font-style: normal;
    margin-left: 8px;
    color: #fff;
    border-radius: 4px;
    padding: 2px 5px;
  }

  ._teamProductModule li .d4 {
    padding-left: 40px;
    padding-top: 20px;
  }

  ._teamProductModule li .d4 p span.price {
    color: #333;
    text-decoration: underline;
    font-size: 12px;
  }

  ._teamProductModule li .d4 p span.price:hover {
    color: #E95252;
    font-weight: bold;
    cursor: pointer;
  }

  ._teamProductModule li .d5 {
    padding-left: 40px;
    padding-top: 20px;
  }

  ._teamProductModule li .d5 p {
    line-height: 26px;
  }

  ._teamProductModule li .d5 p>span {
    color: #666;
    font-size: 12px;
    margin-right: 10px;
  }

  ._teamProductModule li .d5 p>i {
    font-weight: bold;
    font-style: normal;
  }

  ._teamProductModule li .d7 {
    text-align: center;
    padding-top: 60px;
  }

  ._teamProductModule li .d7 button {
    width: 30px;
    height: 30px;
    border-radius: 4px;
  }

  ._teamProductModule li .d7 .el-button--primary {
    padding: 5px;
    margin: 0;
    font-size: 14px !important;
    color: #fff;
  }

  ._teamProductModule li .d7 i.iconfont {
    color: #fff;
    margin: 0;
  }

  .elPopoverLayer {
    padding: 0px 10px;
  }

  .elPopoverLayer p {
    line-height: 34px;
    font-size: 12px;
  }

  .elPopoverLayer p>i {
    font-style: normal;
    border: 1px solid #999;
    padding: 0 3px;
    font-size: 12px;
    margin-right: 10px;
    font-weight: bold;
    color: #333;
  }

  .elPopoverLayer p>span {
    display: inline-block;
    width: 130px;
  }

  .elPopoverLayer p>span>b {
    margin-left: 10px;
    color: #2AAEF2;
  }

  .superSearchLayer>p {
    padding: 20px 0;
    font-size: 14px;
    color: #333;
    font-weight: bold;
  }

  .superSearchLayer>div {
    margin-top: 20px;
    color: #666;
    font-size: 12px;
  }

  .superSearchLayer>div>span {
    margin: 0 15px 0 5px;
  }

  .pro_tripDetails {
    padding: 0;
    box-shadow: 0px 1px 3px 0px #dedede;
  }

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

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

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

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

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

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

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

  ._teamProductModule .disabledBtn {
    background: #999 !important;
    border-color: #999 !important
  }

  ._new_item {
    margin: 0;
    padding: 15px 15px 15px 10px;
  }

  ._new_item>._tit {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #6e6e6e;
  }

  ._new_item>._tit .iconfont {
    font-size: 12px;
  }

  ._new_item>._new_item_i {
    margin: 15px 0;
  }

  ._new_item>._new_item_i .iconfont {
    color: #BBBBBB;
  }

  ._new_item>._new_item_i span {
    color: #333333;
    font-size: 14px;
  }

  ._new_item>._new_item_i ._new_item_i_name {
    margin-top: 3px;
    font-size: 12px;
    color: #333333;
    cursor: pointer;
    max-height: 80px;
    line-height: 20px;
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  ._cunter_info {
    margin-top: 5px;
    margin-left: 20px;
    padding: 10px;
    background-color: #F5F5F5;
  }

  ._new_item_i p.flightNo {
    margin: 5px 10px 5px 0;
    background: #ccc;
    width: 136px;
    padding: 0 10px;
    height: 22px;
    line-height: 22px;
    display: inline-block;
    font-size: 14px;
  }

  ._new_item_i p.flightNo em {
    font-style: normal;
    color: #333;
    font-size: 12px;
    font-weight: bold;
  }

  ._new_item_i p.flightNo .flem {
    height: 22px;
    width: 50px;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
  }

  ._new_item_i>div>div {
    display: inline-block;
    line-height: 24px;
    font-size: 12px;
    text-align: center;
  }

  ._new_item_i span._wangfan {
    color: #fff;
    font-size: 12px;
    border-radius: 10px;
    background: #2AAEF2;
    padding: 2px 5px;
    cursor: pointer;
  }

  ._team_info {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  ._cunter_info._team_info p>span {
    color: #666;
    font-size: 12px;
    margin-right: 10px;
  }

  ._new_item_i_line ._date_info {
    background: #FF9C00;
    font-style: normal;
    margin-left: 8px;
    color: #fff;
    border-radius: 4px;
    padding: 2px 5px;
  }

  ._price_info {
    display: flex;
    align-items: center;
  }

  ._price_info span.price {
    color: #333;
    text-decoration: underline;
    font-size: 12px;
  }

  ._price_info span.price:hover {
    color: #E95252;
    font-weight: bold;
    cursor: pointer;
  }

  ._price_info p {
    margin-right: 10px !important;
  }

  ._font_bold {
    font-weight: bold;
  }

  ._rotate {
    transform: rotate(180deg);
  }

  ._open_block {
    cursor: pointer;
  }

  ._tcid_num {
    background-color: #dbdbdb;
    display: inline-block;
    padding: 3px;
  }

  ._border_bottom {
    border-bottom: 1px solid #e5e5e5;
  }

</style>
<template>
  <!--财务单据显示团队信息-->
  <div class="flexOne">
    <div class="_teamProductModule" v-loading='loading'>
      <template v-if="list.length!=0">
        <dir class="_new_item" v-for="(item,index) in list" :key="index"
          :class="index!=list.length-1?'_border_bottom':''">
          <p class="_tit">
            <span class="_tcid_num">团号：{{item.TCNUM}} ({{item.TCID}})</span>
          </p>
          <div class="_new_item_i">
            <p class="_new_item_i_line">
              <i class="iconfont icon-biaoti1"></i>
              <span>{{item.LineName}}（{{item.LtName}}）</span>
            </p>
            <p class="_new_item_i_name _cunter_info" @click="getJourney(item.TCID,item.LineName)" :title="item.Title">
              {{item.Title}}</p>
          </div>
          <div class="_new_item_i">
            <p class="_new_item_i_line">
              <i class="iconfont icon-hangban1"></i>
              <span>去程航班</span>
            </p>
            <div class="_cunter_info" v-if="item.flightList&&item.flightList.length>0">
              <p class="flightNo">
                <em class="fl flem"
                  :title="item.flightList[0]&&item.flightList[0].AlName">{{item.flightList[0].AlName}}</em>
                <em class="fr">{{item.flightList[0]&&item.flightList[0].Flight_number}}</em>
              </p>
              <div>
                <p>
                  {{item.flightList[0]&&item.flightList[0].DepartureName}}---------{{item.flightList[0]&&item.flightList[0].ArrivalCityName}}
                </p>
                <p>
                  <span
                    style="background-color: transparent;color: #000000;">{{item.flightList[0]&&item.flightList[0].Departure_time}}</span>
                  <el-popover width="900" trigger="click" popper-class="pro_tripDetails">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tr class="_color_666">
                        <th width="60">{{$t('Airticket.Air_segment')}}</th>
                        <th width="250">{{$t('Airticket.Air_Trip')}}</th>
                        <th width="80">{{$t('system.query_flightNum')}}</th>
                        <th width="150">起飞时间</th>
                        <th width="100">经停城市</th>
                        <th width="150">经停时间</th>
                        <th width="80">到达时间</th>
                      </tr>
                      <tr v-for="(ds,din) in tripDetails" :key="din">
                        <td class="_d_name _color_666">
                          <span v-if="din==0">{{$t('Airticket.Air_go')}}</span>
                          <span v-else-if="din==tripDetails.length-1">{{$t('Airticket.Air_returnTrip')}}</span>
                          <span v-else-if="din>0 && din!=tripDetails.length-1">{{$t('Airticket.Air_transit')}}</span>
                        </td>
                        <td>
                          <div>{{ds.DepartureName}}-{{ds.ArrivalCityName}}</div>
                          <div style="margin-top:5px;">{{ds.dName}}-{{ds.aName}}</div>
                        </td>
                        <td>{{ds.Flight_number}}</td>
                        <td>{{ds.FlightDate}} {{ds.Departure_time}}</td>
                        <td>{{ds.StopoverName}}</td>
                        <td>{{ds.Stopover_time!=' - '?ds.Stopover_time:''}}</td>
                        <td>{{ds.Arrival_time}}</td>
                      </tr>
                    </table>
                    <span slot="reference" class="_wangfan" @click="getDetails(index)">往返</span>
                  </el-popover>
                  <span
                    style="background-color: transparent;color: #000000;">{{item.flightList[0]&&item.flightList[0].Arrival_time}}</span>
                </p>
              </div>
              <div>
                <p>{{item.ACityName}}</p>
                <p>{{item.Arrival_time}}</p>
              </div>
            </div>
          </div>
          <div class="_new_item_i">
            <p class="_new_item_i_line">
              <i class="iconfont icon-tuandui"></i>
              <span>团队信息</span><em class="_date_info">{{item.DayNum}}天{{item.NightNum}}晚</em>
            </p>
            <div class="_cunter_info _team_info">
              <p><span>出发时间</span>{{item.StartDate}}</p>
              <p><span>出发城市</span>{{item.StartCityName}}</p>
              <p><span>返回城市</span>{{item.ReturnArriveCityName}}</p>
              <p><span>出团公司</span>{{item.OutBranchName}}</p>
            </div>
          </div>
          <div class="_new_item_i">
            <p class="_new_item_i_line">
              <i class="iconfont icon-jiage"></i>
              <span>价格信息</span>
            </p>
            <div class="_cunter_info _price_info">
              <p style="color:#47BF8C; font-size: 16px; font-weight: bold; margin: 5px 0;">
                ￥{{item.B2BMemberPrice|priceFormat(item.B2BMemberPrice)}}</p>
              <p>
                <el-popover width="630" trigger="click">
                  <div class="elPopoverLayer">
                    <p>
                      <i>成人</i>
                      <span>同行会员<b>{{item.B2BMemberPrice|priceFormat(item.B2BMemberPrice)}}</b></span>
                      <span>同行<b>{{item.B2BPrice|priceFormat(item.B2BPrice)}}</b></span>
                      <span>直客会员<b>{{item.B2CMemberPrice|priceFormat(item.B2CMemberPrice)}}</b></span>
                      <span>直客<b>{{item.B2CPrice|priceFormat(item.B2CPrice)}}</b></span>
                    </p>
                    <p>
                      <i>小孩</i>
                      <span>占床<b>{{item.ChildNeedPrice|priceFormat(item.ChildNeedPrice)}}</b></span>
                      <span>不占床<b>{{item.ChildNoNeedPrice|priceFormat(item.ChildNoNeedPrice)}}</b></span>
                      <span>婴儿<b>{{item.BabyPrice|priceFormat(item.BabyPrice)}}</b></span>
                      <span>附加费<b>{{item.BabyChargePrice|priceFormat(item.BabyChargePrice)}}</b></span>
                    </p>
                    <p>
                      <i>老人</i>
                      <span>附加费<b>{{item.OldManChargePrice|priceFormat(item.OldManChargePrice)}}</b></span>
                    </p>
                    <p>
                      <i>其他</i>
                      <span>签证费<b>{{item.VisaPrice|priceFormat(item.VisaPrice)}}</b></span>
                      <span>退签证费<b>{{item.BackVisaPrice|priceFormat(item.BackVisaPrice)}}</b></span>
                      <span>杂费<b>{{item.OtherPrice|priceFormat(item.OtherPrice)}}</b></span>
                      <span>单地接价格<b>{{item.SingleDMCPrice|priceFormat(item.SingleDMCPrice)}}</b></span>
                      <span>单房差价<b>{{item.SingleRoomPrice|priceFormat(item.SingleRoomPrice)}}</b></span>
                    </p>
                    <p>
                      <i style="color: #F57C00; border-color: #F57C00;">优惠</i>
                      <span>同行返佣<b>{{item. RebatePrice|priceFormat(item.RebatePrice)}}</b></span>
                      <span>早鸟优惠<b>{{item.DiscountPrice|priceFormat(item.DiscountPrice)}}</b></span>
                    </p>
                  </div>
                  <span slot="reference" class="price">查看价格明细</span>
                </el-popover>
              </p>
            </div>
          </div>
          <div class="_new_item_i">
            <p class="_new_item_i_line">
              <i class="iconfont icon-tuandui"></i>
              <span>团位信息</span>
            </p>
            <div class="_cunter_info _team_info">
              <p><span>当前余位</span><i class="_font_bold">{{item.SurplusSeat}}</i></p>
              <p><span>已报入</span><i class="_font_bold">{{item.Seat==''?"0":item.Seat}}人</i>(占位：{{item.Occupied}}人)</p>
              <p><span>候补</span>
                <em v-if='item.IsSubstitution==1'>可以候补</em>
                <em v-if='item.IsSubstitution!=1' style="color: #E95252;">本团拒绝候补</em>
              </p>
            </div>
          </div>
        </dir>
      </template>
      <div class="noData" v-else>
        暂无数据
      </div>
    </div>
    <el-dialog custom-class='ComTeamPlan_info_box' :title="tripTitle" :visible.sync="outerVisible" center
      :modal="false">
      <commonTeamInfo1 ref="comTeam"></commonTeamInfo1>
    </el-dialog>
  </div>
</template>
<script>
  import commonTeamInfo from "./commonTeamInfo.vue";
  export default {
    props: ["ID"],
    data() {
      return {
        loading: true, //数据加载
        outerVisible: false, //是否显示行程
        tripTitle: '',
        list: [],
        tripDetails: [],
      }
    },
    components: {
      commonTeamInfo1: commonTeamInfo,
    },
    filters: {
      //价格格式化
      priceFormat(value) {
        if (value == null) {
          return 0.00;
        }
        let nStr = value.toFixed(2)
        nStr += '';
        let x = nStr.split('.');
        let x1 = x[0];
        let x2 = x.length > 1 ? '.' + x[1] : '';
        var rgx = /(\d+)(\d{3})/;
        while (rgx.test(x1)) {
          x1 = x1.replace(rgx, '$1' + ',' + '$2');
        }
        return x1 + x2;
      },
    },
    methods: {
      //获取航班信息
      getDetails(index) {
        this.tripDetails = this.list[index].flightList;
      },
      //获取行程信息
      getJourney(id, title) {
        var that = this;
        this.tripTitle = title;
        this.$nextTick(() => {
          that.$refs.comTeam.GetTrip(id);
        });
        that.outerVisible = true;
      },
      //获取团队详情
      getList(ID) {
        this.loading = true
        this.apipost('TaskManagemnet_get_GetSellProductCenterForFinance', {
          TCIDList: ID
        }, res => {
          if (res.data.resultCode == 1) {
            this.loading = false;
            let data = res.data.data;
            data.forEach(x => {
              x.tableShowTeam = false;
            })
            this.list = data
          }
        })
      },
    },
    mounted() {

      this.getList(this.ID)
    }
  }

</script>
