<style>
  @import "../../../assets/css/newTravelManager.css";

  .TravelQueryList {
    width: 100%;
    padding-left: 10px;
  }

  .TravelQueryList {
    width: 100%;
    border: 1px solid #e5e5e5;
    background: #fff;
    margin-bottom: 10px;
    color: #333;
    font-size: 14px;
  }

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

  .TravelQueryList>div {
    height: 144px;
    border-right: 1px dashed #dcdfe6;
  }

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

  .TravelQueryList .d11 {
    float: left;
    width: 160px;
    height: 120px;
    margin: 14px 14px 0 14px;
  }

  .TravelQueryList .d11>li {
    width: 160px;
    height: 120px;
    border: none;
  }

  .TravelQueryList .d11>li>img {
    width: 160px;
    height: 120px;
  }

  .TravelQueryList .d12 {
    float: left;
    padding: 0 30px;
  }

  .TravelQueryList .d12 .d12p {
    margin-top: 3px;
    font-size: 12px;
    color: #999;
    cursor: pointer;
    line-height: 20px;
    display: -webkit-box;
    overflow: hidden;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
  }

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

  .TravelQueryList .d12 .d12TC {
    margin: 10px 0 0 0;
    color: #666666;
    font-size: 12px;
  }

  .TravelQueryList .d2 {
    text-align: center;
    padding-top: 15px;
    width: 160px;
    margin: auto;
  }

  .TravelQueryList .TCLflight_GO {
    display: inline-block;
    width: 160px;
    text-align: left;
  }

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

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

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

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

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

  .TravelQueryList .d3 {
    padding: 15px 0 0 25px;
  }

  .TravelQueryList .d3 p {
    line-height: 24px;
    font-size: 12px;
    color: #333333;
  }

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

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

  .TravelQueryList .d4 {
    padding-left: 25px;
    padding-top: 15px;
  }

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

  .TravelQueryList .d4 p span.price:hover {
    color: #e95252;
    font-weight: bold;
    cursor: pointer;
  }

  .TravelQueryList .d5 {
    padding: 15px 0 0 25px;
  }

  .TravelQueryList .d5 p {
    line-height: 26px;
    font-size: 12px;
  }

  .TravelQueryList .d5 p>span {
    color: #666;
    font-size: 12px;
    margin-right: 5px;
  }

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

  .TravelQueryList .d6 {
    padding: 20px 10px 0 15px;
  }

  .TravelQueryList .d6 p {
    line-height: 26px;
  }

  .TravelQueryList .d6 p:nth-child(2) {
    width: 100%;
    height: 78px;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .TravelQueryList .d7 {
    text-align: center;
  }

  .TravelQueryList .d7 button {
    height: 30px;
    border-radius: 4px;
  }

  .TravelQueryList .d7 .el-button--primary {
    padding: 3px;
    margin: 0;
    font-size: 12px !important;
    color: #fff;
  }

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

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

  .TravelQueryList .el-col {
    height: 100%;
    border-right: 1px dashed #dcdfe6;
  }

  .TravelQueryList .el-col:last-child {
    border: none;
  }

  .TCL-redType {
    color: red !important;
  }

  .TravelQueryList .el-dropdown {
    height: 30px;
    line-height: 30px;
    background-color: #f2f2f2;
    color: #333333;
    font-size: 12px;
    width: 70px;
    text-align: center;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    cursor: pointer;
  }

  .TravelControlList .TC_remarkContent {
    width: 100%;
    height: auto !important;
    border-top: 1px solid #e5e5e5;
    padding: 10px;
    font-size: 12px;
  }

  .TravelControlList .TCL_remarkTitle {
    float: left;
    width: 65px;
    text-align: right;
  }

  .TravelControlList .TCL_Content {
    float: left;
    width: 92%;
  }

  .TravelControlList .TCL-Opremark {
    margin-top: 10px;
  }

  .TC_customerInfo .elPopoverLayer {
    padding: 0px 10px;
  }

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

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

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

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

  .TCL-Popspan {
    margin-left: 48px;
  }

  .TC_SalePlat {
    position: absolute;
    bottom: 10px;
    left: 25px;
  }

  .TC_SalePlat span {
    display: inline-block;
    padding: 0 3px;
    margin-right: 2px;
  }

  .TravelControlList .Opcontent {
    width: 600px;
  }

  .OPremarkDiv {
    height: 250px;
  }

  .TC-dropdown .el-dropdown-menu__item {
    width: 124px;
  }

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

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

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

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

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

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

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

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

  .TCL-TCNUM {
    font-size: 12px;
    margin: 5px 0 0 30px;
  }

  .TravelControlListTable {
    width: 100%;
    border-collapse: collapse;
  }

  .TravelControlListTable tr {
    background: #fff;
  }

  .TravelControlListTable tr td {
    font-size: 12px;
    border: 1px solid #E5E5E5;
  }

</style>
<template>
  <div>
    <div class="TC_Content TravelControlList">
      <div class="query-box">
        <ul>
          <li>
            <span>
              <em>{{$t('active.ad_xlmc')}}</em>
              <el-select class="w150" v-model="queryMsg.LineteamId" filterable :placeholder="$t('pub.pleaseSel')">
                <el-option :label="$t('pub.unlimitedSel')" :value="queryCommonData.SelectDefaultValue"></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>{{$t('visa.v_tuanhao')}}</em>
              <el-input maxlength="50" v-model="queryMsg.TCNUM" class="permiss-input w150"
                @keyup.native.enter="getControlList" :placeholder="$t('pub.pleaseImport')"></el-input>
            </span>
          </li>
          <li>
            <span>
              <em>{{$t('scen.sc_ftTime')}}</em>
              <el-date-picker class="w150" type="date" v-model="queryMsg.StartGroupDate"
                :picker-options="pickerBeginDateBefore" value-format="yyyy-MM-dd" placeholder></el-date-picker>
              <el-date-picker class="w150" type="date" v-model="queryMsg.EndGroupDate"
                :picker-options="pickerBeginDateAfter" value-format="yyyy-MM-dd" placeholder></el-date-picker>
            </span>
          </li>
          <li>
            <span>
              <em>{{$t('scen.sc_temStatu')}}</em>
              <el-select class="w150" v-model="queryMsg.QTCState" filterable :placeholder="$t('pub.pleaseSel')">
                <el-option :label="$t('pub.unlimitedSel')" :value="queryCommonData.SelectDefaultValue"></el-option>
                <el-option v-for="tcItem in $tripUtils.TeamStatesList.TeamStates" :label="tcItem.Name" :key="tcItem.Id"
                  :value="tcItem.Id">{{tcItem.Name}}</el-option>
              </el-select>
            </span>
          </li>
          <li>
            <span>
              <em>{{$t('scen.sc_cp')}}</em>
              <el-select class="w150" v-model="queryMsg.OutBranchId" filterable :placeholder="$t('pub.pleaseSel')">
                <el-option :label="$t('pub.unlimitedSel')" :value="queryCommonData.BranchDefaultValue"></el-option>
                <el-option v-for="item in queryCommonData.BranchList" :label="item.BName" :key="item.Id"
                  :value="item.Id">{{item.BName}}</el-option>
              </el-select>
            </span>
          </li>
          <li>
            <span>
              <em>{{$t('Operation.Op_hetuan')}}</em>
              <el-input maxlength="50" v-model="queryMsg.CombinationNum" class="permiss-input w150"
                @keyup.native.enter="getControlList" :placeholder="$t('pub.pleaseImport')"></el-input>
            </span>
          </li>
          <li>
            <button class="hollowFixedBtn" @click="getControlList(),resetPageIndex()">{{$t('pub.searchBtn')}}</button>
            <input type="button" class="hollowFixedBtn" value="团队合团" @click="heTuan" v-show="this.ArrList.length>1" />
          </li>
        </ul>
      </div>
      <table class="TravelControlListTable TravelQueryList">
        <tbody v-for="(outItem,i) in queryCommonData.dataList" :key="i">
          <template v-for="(item,index) in outItem.TravelPriceList">
            <tr height="40">
              <td align="center" width="80" v-if="index==0" :rowspan="outItem.TravelPriceList.length*3">
                <label>
                  <input :value="outItem.TCIDs" style="vertical-align: middle;" v-model="ArrList"
                    type="checkbox">{{outItem.TCIDs}}
                </label>
                <span v-if='outItem.TravelPriceList.length>1'>合</span>
              </td>
              <td colspan="5" style="padding-left: 30px;">{{item.Title}}</td>
            </tr>
            <tr>
              <td width="20%">
                <div class="TCL-TCNUM">{{item.OutBranchName}}</div>
                <div class="TCL-TCNUM">{{item.TCNUM}}</div>
                <div class="d12" style="float:none;margin:3px auto;">
                  <p>
                    <i class="iconfont icon-biaoti1"></i>
                    {{item.LineName}}
                  </p>
                </div>
              </td>
              <td>
                <div class="d2" style="width: 100%!important;">
                  <p class="TCLflight_GO">
                    <i class="iconfont icon-hangban1"></i>{{$t('visa.v_hangban')}}
                  </p>
                  <el-popover width="900" trigger="click" popper-class="TC_tripDetails">
                    <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">{{$t('system.ph_flightTime')}}</th>
                        <th width="80">{{$t('system.query_arrivalTime')}}</th>
                        <th width="100">{{$t('system.query_stopCity')}}</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>
                    <div class="FlightDiv-TCL" slot="reference">
                      <div v-for="subItem in item.flightList" slot="reference" :key="subItem.subCode"
                        class="TCL-flighInfoList" style="text-align: center!important">
                        <span class="travelnowrap">
                          <span class="TCL-FlightNumber">{{subItem.Flight_number}}</span>{{subItem.DepartureName}}
                          {{subItem.StopoverName==""?"":"-"+subItem.StopoverName}}
                          {{subItem.ArrivalCityName==""?"":"-"+subItem.ArrivalCityName}}
                          <span v-if="subItem.FlightState==1" class="TCL-greenType">【{{$t('pub.sureBtn')}}】</span>
                          <span v-if="subItem.FlightState==2" class="TCL-redType">【{{$t('visa.v_zanding')}}】</span>
                        </span>
                      </div>
                    </div>
                  </el-popover>
                </div>
              </td>
              <td>
                <div class="d3">
                  <p>
                    <i class="iconfont icon-tuandui"></i>{{$t('visa.v_teaminfo')}}
                    <em>{{item.DayNum}}天{{item.NightNum}}晚</em>
                  </p>
                  <p>
                    <span>{{$t('Airticket.Air_StartTime')}}</span>
                    {{item.StartDate}}
                  </p>

                </div>
              </td>
              <td>
                <div class="d5">
                  <p>
                    <i class="iconfont icon-tuanwei"></i>{{$t('visa.v_tuanweiinfo')}}
                  </p>
                  <p>
                    <span>{{$t('Operation.Op_shipNum')}}</span>
                    <i> {{item.YSeat}}Y + {{item.FSeat}}F + {{item.CSeat}}F </i>
                  </p>
                  <p>
                    <span>{{$t('visa.v_yibaoru')}}</span>
                    <i>{{item.Seat==''?"0":item.Seat}}人</i>
                  </p>
                  <p>
                    <span>{{$t('visa.v_houbu')}}</span>
                    <span v-if="item.IsSubstitution==1">{{$t('visa.v_yxhoubu')}}</span>
                    <span v-else class="TCL-redType">{{$t('visa.v_byxhoubu')}}</span>
                  </p>
                </div>
              </td>
              <td width="240">
                <div class="d7">
                  <el-button-group v-if='outItem.TravelPriceList.length>1'>
                    <el-button @click.native='chaiTuan(item)' type="primary"
                      style="background:#00C6FF; border-color:#00C6FF">{{$t('Operation.Op_chaifen')}}</el-button>
                  </el-button-group>
                </div>
              </td>
            </tr>
            <tr height="40">
              <td colspan="5" style="padding-left: 30px;">
                <div>{{$t('fnc.beizhu')}}：{{item.OPRemark}}</div>
                <div v-if="item.DmcRemarkLast">{{$t('Operation.Op_dijieRemark')}}：{{item.DmcRemarkLast.DMCRemark}}</div>
              </td>
            </tr>
          </template>
        </tbody>
        <tr v-show="queryMsg.noData">
          <td colspan="6">{{$t('system.content_noData')}}</td>
        </tr>
      </table>
      <el-pagination background @current-change="handleCurrentChange" :current-page.sync="queryMsg.currentPage"
        layout="total,prev, pager, next, jumper" :page-size="queryMsg.pageSize" :total="queryMsg.total"></el-pagination>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        ArrList: [],
        //查询数据列表
        queryCommonData: {
          //线路列表
          LineList: [],
          //系列列表
          LineTeamList: [],
          //下拉框默认值
          SelectDefaultValue: 0,
          //分公司默认值
          BranchDefaultValue: -1,
          //数据列表
          dataList: [],
          //分公司列表
          BranchList: [],
        },
        //查询参数
        queryMsg: {
          pageIndex: 1,
          pageSize: 5,
          LineId: 14,
          LineteamId: 0,
          TCNUM: "",
          StartGroupDate: "",
          EndGroupDate: "",
          total: 0,
          //是否有数据
          noData: false,
          currentPage: 1,
          QTCState: 0,
          //出团公司
          OutBranchId: -1,
          //合团团号
          CombinationNum: ""
        },
        pickerBeginDateBefore: {
          disabledDate: time => {
            let endTime = new Date(this.queryMsg.EndGroupDate);
            return endTime.getTime() < time.getTime();
          }
        },
        pickerBeginDateAfter: {
          disabledDate: time => {
            let startTime = new Date(this.queryMsg.StartGroupDate);
            return startTime.getTime() >= time.getTime();
          }
        }
      };
    },
    methods: {
      //拆团
      chaiTuan(obj) {
        let subArr = [];
        subArr.push(Number(obj.TCID));
        var that = this;
        that.Confirm("是否拆团?", function () {
          that.apipost('travel_post_SetPartition', {
            Ids: subArr,
            CombinationNum: obj.CombinationNum
          }, res => {
            if (res.data.resultCode == 1) {
              that.$message.success(res.data.message);
              that.ArrList = [];
              that.getControlList()
            } else {
              that.Error(res.data.message)
            }
          }, err => {})
        })
      },
      //合团
      heTuan() {
        let sumArr = [];
        this.ArrList.forEach(item => {
          sumArr = sumArr.concat(item.split(','))
        });
        var newArray = [];
        if (sumArr != null && sumArr.length > 0) {
          sumArr.forEach(item => {
            if (item != "") {
              newArray.push(item);
            }
          });
        }
        if (newArray != null && newArray.length > 0) {


          this.apipost('travel_post_SetCombination', {
            Ids: newArray
          }, res => {
            if (res.data.resultCode == 1) {
              this.$message.success(res.data.message)
              this.getControlList()
              this.ArrList = [];
            } else {
              this.Error(res.data.message)
            }
          }, err => {});
        }
      },
      goUrl(path, obj, title) {
        this.$router.push({
          name: path,
          query: {
            "id": obj.TCID,
            'num': obj.CombinationNum,
            blank: 'y',
            tab: title
          }
        })
      },
      //翻页
      handleCurrentChange(val) {
        this.queryMsg.pageIndex = val;
        this.getControlList();
      },
      //重新查询
      resetPageIndex() {
        this.queryMsg.pageIndex = 1;
        this.queryMsg.currentPage = 1;
      },
      //获取线路列表
      getLineList() {
        this.apipost("line_post_GetList", {}, res => {
          if (res.data.resultCode == 1) {
            this.queryCommonData.LineList = res.data.data;
          }
        });
      },
      //获取系列列表
      getLineTeamList() {
        this.queryMsg.LineteamId = 0;
        let msg = {
          lineID: this.queryMsg.LineId,
          isTOOP: 1
        };
        this.apipost("team_post_GetList", msg, res => {
          if (res.data.resultCode == 1) {
            this.queryCommonData.LineTeamList = res.data.data;
          }
        });
      },
      //新获取列表数据
      getControlList() {
        this.apipost(
          "travel_get_GetUniteDmcPageList",
          this.queryMsg,
          res => {
            if (res.data.resultCode == 1) {
              this.queryMsg.total = res.data.data.count;
              this.queryMsg.noData = !this.queryMsg.total > 0;
              this.queryCommonData.dataList = res.data.data.pageData;
            }
          },
          err => {}
        );
      },
      //初始化公司
      getCompanyList() {
        let userInfo = this.getLocalStorage();
        var RB_Group_id = userInfo.RB_Group_id;
        let msg = {
          Status: 0,
          is_show: 0,
          RB_Group_Id: RB_Group_id
        };
        this.apipost(
          "admin_get_BranchGetList",
          msg,
          res => {
            if (res.data.resultCode == 1) {
              this.queryCommonData.BranchList = res.data.data;
            }
          },
          err => {}
        );
      },
    },
    mounted() {
      this.getCompanyList();
      this.getLineTeamList();
    },
    created() {
      var myDate = new Date();
      var nowDate =
        myDate.getFullYear() +
        "-" +
        parseInt(myDate.getMonth() + 1) +
        "-" +
        myDate.getDate();
      this.queryMsg.StartGroupDate = nowDate;
      this.queryMsg.TCNUM = this.$route.query.TCNUM;
      this.getControlList();
    }
  };

</script>