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

  .DT_rightList {
    float: left;
    font-size: 12px;
    width: 100%;
    margin-top: 10px;
  }

  .DT_rightList ._Checked {
    padding: 5px 10px;
    border-radius: 3px;
    margin-left: 10px;
  }

  /*未选中的状态*/
  .DT_rightList .NoChecked {
    cursor: pointer;
    background-color: #c0ebd1;
  }

  /*选中的状态*/
  .DT_rightList .YesChecked {
    cursor: pointer;
    background-color: #E95252;
    color: #fff;
  }

  .DT_rightList .DT_Table {
    width: 100%;
    border-collapse: collapse;
  }

  .DT_rightList .DT_Table tr td {
    border: 1px solid #e5e5e5;
  }

  .DT_rightList .TMTitle {
    margin-bottom: 20px;
  }

  .DT_rightList .singeRowTable tr:hover {
    background-color: #fff !important;
  }

  .DT_rightList .singeRowTable tr:nth-child(2n + 1) {
    background-color: #fff !important;
  }

  .DT_rightList .el-button.is-circle {
    padding: 3px;
  }

  .DT_ConbinBtn {
    margin: 10px 0 0 0;
    padding: 0 10px;
    height: 25px;
  }

  .DT_saveBtn {
    margin: 10px 0 0 165px;
  }

  .Distri_TeamDayList {
    display: inline-block;
  }

</style>
<template>
  <div class="clearfix">
    <div class="DT_rightList">
      <div class="TMTitle"><i></i>{{$t('objFill.v101.lianyunshezhi')}}</div>
      <!--保存-->
      <input type='button' class="normalBtn" @click="SaveUnion()" :value="$t('pub.saveBtn')" />
      <table class="singeRowTable DT_Table" border="0" cellspacing="0" cellpadding="0">
        <tbody>
          <tr>
            <td width="120">{{$t('sm.xztuanqi')}}</td>
            <td align="left">
              <ul>
                <li v-for="(item,index) in PriceDataList" class="Distri_TeamDayList" :key="index+100">
                  <el-tooltip class="item" effect="dark" :content="$t('objFill.v101.dianjxztuanqi')" placement="top">
                    <span @click="clickedDay(item)" class="_Checked"
                      :class="{NoChecked:item.checkState===ShowStatusList.NoChecked,YesChecked:item.checkState===ShowStatusList.Checked}">
                      {{item.StartDate}}
                    </span>
                  </el-tooltip>
                </li>
              </ul>
            </td>
          </tr>
        </tbody>
      </table>
      <table class="singeRowTable DT_Table" border="0" cellspacing="0" cellpadding="0" v-loading="loading">
        <thead>
          <tr>
            <th width="120">
              {{$t('sm.company')}}
            </th>
            <th width="120">
              {{$t('system.table_city')}}
            </th>
            <th width="80">
              {{$t('Airticket.Air_segment')}}
            </th>
            <th width="110">
              {{$t('hotel.hotel_StarDate')}}
            </th>
            <th width="200">
              {{$t('system.query_type')}}
            </th>
            <th width="200">
              {{$t('system.query_airCompanyName')}}
            </th>
            <th width="200">
             {{$t('objFill.v101.hanbandongc')}}
            </th>
            <th width="70">
              {{$t('salesModule.IsZS')}}
            </th>
            <th width="110">
              {{$t('objFill.v101.piaowugujia')}}
            </th>
            <th width="110">
              OP{{$t('objFill.v101.hote.jiajia')}}
            </th>
            <th width="160">
             {{$t('salesModule.JHDD')}}
            </th>
            <th width="160">
              {{$t('objFill.v101.yincanghanb')}}
            </th>
            <th width="150">
              {{$t('system.table_operation')}}
            </th>
          </tr>
        </thead>
        <tbody v-for="(item,index) in UnionList" :key="item.subCode">
          <tr>
            <td rowspan="2">
              <el-select class="w95" filterable v-model="item.UnionBranchId">
                <el-option :label="$t('objFill.qingxuanzhe')" :value="defaultBranchId"></el-option>
                <el-option v-for="subItem in CompanyList" :label='subItem.bName' :value='subItem.id' :key="subItem.id">
                </el-option>
              </el-select>
            </td>
            <td rowspan="2">
              <el-select class="w95" filterable v-model="item.UnionCityId">
                <el-option :label="$t('objFill.qingxuanzhe')" :value="selectDefauleValue"></el-option>
                <el-option v-for="subItem in cityList" :label='subItem.Name' :value='subItem.ID' :key="subItem.subCode">
                </el-option>
              </el-select>
            </td>
            <td>
              {{$t('Airticket.Air_go')}}
            </td>
            <td>
              <el-select class="w95" filterable v-model="item.DayNum">
                <el-option v-for="subItem in DayList" :label='subItem.Name' :value='subItem.ID' :key="subItem.subCode">
                </el-option>
              </el-select>
            </td>
            <td>
              <el-select class="w120" :placeholder="$t('pub.pleaseSel')" filterable v-model="item.GoTrafficType"
                @change="getTrafficType1(item,1)">
                <el-option :label="$t('visa.v_hangban')" :value="1"></el-option>
                <el-option :label="$t('objFill.huoche')" :value="2"></el-option>
              </el-select>
            </td>
            <td>
              <el-select class="w180" filterable v-model="item.AirLineId" v-if="item.GoTrafficType==1"
                @change="airLineSelectChange(item,1)">
                <el-option :label="$t('objFill.qingxuanzhe')" :value="selectDefauleValue"></el-option>
                <el-option v-for="subItem in AirlineList" :label='subItem.AlName' :value='subItem.AirLineId'
                  :key="subItem.subCode">
                </el-option>
              </el-select>
            </td>
            <td>
              <el-select class="w200" filterable v-model="item.FlightId">
                <el-option :label="$t('objFill.qingxuanzhe')" :value="selectDefauleValue"></el-option>
                <el-option v-for="subItem in item.FlightList" :label='subItem.Flight_number' :value='subItem.ID'
                  :key="subItem.subCode">
                </el-option>
              </el-select>
            </td>
            <td rowspan="2">
              <el-checkbox v-model="item.IsStay" :checked="item.IsStay===CheckedVaule" :true-label="CheckedVaule"
                :false-label="UnCheckedVaule"></el-checkbox>
            </td>
            <td>
              <span v-if="item.GoEvaluatePrice<=0">{{$t('objFill.v101.traveltrip.weipeizhi')}}</span>
              <span v-else>{{item.GoEvaluatePrice}}</span>
            </td>
            <td>
              <el-input class="w95" v-model="item.GoAddPrice" @keyup.native="checkPrice(item,'GoAddPrice',true)">
              </el-input>
            </td>
            <td rowspan="2">
              <el-input class="w150" v-model="item.GatherAddress"></el-input>
            </td>
            <td rowspan="2">
              <el-select class="w200" filterable v-model="item.NotShowFlightIdsList" multiple clearable>
                <el-option v-for="subItem in TravelFlightList" :label='subItem.Flight_number' :value='subItem.ID'
                  :key="subItem.subCode">
                </el-option>
              </el-select>
            </td>
            <td rowspan="2">
              <el-button type="danger" icon="iconfont icon-guanbi" circle @click="DeleteUnion(item,index)"></el-button>
              <el-popover width="400" trigger="click">
                <div>
                  <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0" style="width:100%">
                    <tr>
                      <th>{{$t('objFill.v101.traveltrip.xuanzhe')}}</th>
                      <th>{{$t('advmanager.v_type')}}</th>
                      <th>{{$t('hotel.order_Number')}}</th>
                      <th>{{$t('visaT.sale')}}</th>
                    </tr>
                    <tbody v-for="(item,index) in  OrderDataList.OtherOrderList" :key="index">
                      <tr v-for="(subItem,subIndex) in item.List" :key="subIndex+10000">
                        <td>
                          <label>
                            <input :value="subItem.OrderId" style="vertical-align: middle;" v-model="ArrList"
                              type="checkbox" />
                          </label>
                        </td>
                        <td>{{item.GroupTypeName}}</td>
                        <td>{{subItem.OrderId}}</td>
                        <td>{{subItem.CreateBy}}</td>
                      </tr>
                    </tbody>
                  </table>
                  <input type="button" class="normalBtn DT_saveBtn" :value="$t('pub.saveBtn')" @click="SavePriceUnionOrder(item)" />
                </div>
                <el-button :title="$t('objFill.v101.FinancialModule.guangldd')" v-if="item.ID>0" slot="reference" type="primary" style="margin-left:10px;"
                  icon="iconfont icon-guanlian" circle @click="ArrList=item.ArrList,getOrderList()"></el-button>
              </el-popover>
            </td>
          </tr>
          <tr>
            <td>{{$t('objFill.v101.fancheng')}}</td>
            <td>
              <el-select class="w95" filterable v-model="item.BackDayNum">
                <el-option v-for="subItem in DayList" :label='subItem.Name' :value='subItem.ID' :key="subItem.subCode">
                </el-option>
              </el-select>
            </td>
            <td>
              <el-select class="w120" :placeholder="$t('pub.pleaseSel')" filterable v-model="item.BackTrafficType"
                @change="getTrafficType2(item,2)">
                <el-option :label="$t('visa.v_hangban')" :value="1"></el-option>
                <el-option :label="$t('objFill.huoche')" :value="2"></el-option>
              </el-select>
            </td>
            <td>
              <el-select class="w180" filterable v-model="item.BackAirlineId" v-if="item.BackTrafficType==1"
                @change="airLineSelectChange(item,2)">
                <el-option :label="$t('objFill.qingxuanzhe')" :value="selectDefauleValue"></el-option>
                <el-option v-for="subItem in AirlineList" :label='subItem.AlName' :value='subItem.AirLineId'
                  :key="subItem.subCode">
                </el-option>
              </el-select>
            </td>
            <td>
              <el-select class="w200" filterable v-model="item.BackFlightId">
                <el-option :label="$t('objFill.qingxuanzhe')" :value="selectDefauleValue"></el-option>
                <el-option v-for="subItem in item.BackFlightList" :label='subItem.Flight_number' :value='subItem.ID'
                  :key="subItem.subCode">
                </el-option>
              </el-select>
            </td>
            <td>
              <span v-if="item.BackEvaluatePrice<=0">{{$t('objFill.v101.traveltrip.weipeizhi')}}</span>
              <span v-else>{{item.BackEvaluatePrice}}</span>
            </td>
            <td>
              <el-input class="w95" v-model="item.BackAddPrice" @keyup.native="checkPrice(item,'BackAddPrice',true)">
              </el-input>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td colspan="13">
              <input v-if="ChoosrPriceArray!=null && ChoosrPriceArray.length>0" type='button' class="normalBtn"
                @click="AddItem()" :value="$t('pub.addBtn')" />
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        ArrList: [],
        cityList: [],
        CompanyList: [],
        ConfigId: 0,
        defaultBranchId: -1,
        //下拉框默认值
        selectDefauleValue: 0,
        CheckedVaule: 1,
        UnCheckedVaule: 0,
        //团期数组
        PriceDataList: [],
        //状态值
        ShowStatus: 1,
        //状态值列表
        ShowStatusList: {
          NoChecked: 1, //未选中
          Checked: 2 //选中
        },
        //点击选择的项
        ClickItem: {},
        //加载数据层
        loading: false,
        //选中的团期数组
        ChoosrPriceArray: [],
        //联运信息
        UnionList: [],
        //航空公司列表
        AirlineList: [],
        //订单详细列表
        OrderDataList: [],
        //天数
        DayList: [{
            ID: -1,
            Name: this.$t('objFill.v101.qianyitian')
          },
          {
            ID: -2,
            Name: this.$t('objFill.v101.qianliantian')
          },
          {
            ID: 0,
            Name: this.$t('objFill.v101.dangtian')
          },
          {
            ID: 1,
            Name: this.$t('objFill.v101.houyitian')
          },
          {
            ID: 2,
            Name: this.$t('objFill.v101.houliangtian')
          }
        ],
        //团绑定的航班列表
        TravelFlightList: [],
      };
    },
    methods: {
      //根据团号获取团绑定的航班列表
      getTravelPriceFlight(TCID) {
        this.apipost(
          "travel_post_GetFlightListByTCID", {
            TCID: TCID
          },
          res => {
            this.TravelFlightList = res.data.data;
          },
        );
      },
      //交通类型切换
      getTrafficType1(item, type) {
        item.FlightList = [];
        item.AirLineId = 0;
        if (item.GoTrafficType == 2) {
          this.airLineSelectChange(item, type);
        }
      },
      getTrafficType2(item, type) {
        item.BackFlightList = [];
        item.BackAirlineId = 0;
        if (item.BackTrafficType == 2) {
          this.airLineSelectChange(item, type);
        }
      },
      getCityList() {
        this.apipost(
          "Destination_get_GetCityListByCountryId", {
            Id: 2
          },
          res => {
            this.cityList = res.data.data;
          },
          err => {}
        );
      },
      getCompanyList() { //获取公司列表
        this.apipost('sellorder_post_GetBranchList', {}, res => {
          if (res.data.resultCode == 1) {
            this.CompanyList = res.data.data;
          } else {}
        }, err => {})
      },
      //点击选中日历日期获取联运数据
      clickedDay(item) {
        var obj = {
          AirTicketId: item.AirTicketId,
          TCID: item.TCID,
          //出团公司
          OutBranchId: item.OutBranchId
        };
        this.getTravelPriceFlight(item.TCID);
        switch (item.checkState) {
          //未选中====>选中
          case this.ShowStatusList.NoChecked:
            if (this.getCheckedCount() > 0 && item.IsUnion) {
              this.Info(this.$t('objFill.v101.gaitqyszlyun'));
            } else {
              if (this.getCheckedAndHaveUnionCount() > 0) {
                this.Info(this.$t('objFill.v101.yiszbunplsz'));
              } else {
                item.checkState = this.ShowStatusList.Checked;
                if (!this.IsInArray(obj.TCID)) {
                  this.ChoosrPriceArray.push(obj);
                }
              }
            }
            break;
            //选中===>未选中
          case this.ShowStatusList.Checked:
            item.checkState = this.ShowStatusList.NoChecked;
            this.RemoveChooseArray(obj);
            break;
        }
        this.ClickItem = item;
        this.GetUnionData();
      },
      //获取联运数据
      GetUnionData() {
        this.UnionList = [];
        if (this.ChoosrPriceArray != null && this.ChoosrPriceArray.length > 0) {
          this.loading = true;
          this.apipost(
            "AirTicket_Get_GetAirticketUnionListByAirticketId", {
              qMag: JSON.stringify(this.ChoosrPriceArray)
            },
            res => {
              if (res.data.resultCode == 1) {
                var array = res.data.data;
                if (array != null && array.length > 0) {
                  array.forEach(item => {
                    this.airLineSelectChange(item, 1);
                    this.airLineSelectChange(item, 2);
                    this.DayList.forEach(subItem => {
                      if (subItem.ID == item.DayNum) {
                        item.DayStr = subItem.Name;
                      }
                      if (subItem.ID == item.BackDayNum) {
                        item.BackDayStr = subItem.Name;
                      }
                    });
                  });
                }
                this.UnionList = array;
              }
              this.loading = false;
            }
          );
        }
      },
      //根据TCID删除联运
      RemoveChooseArray(objItem) {
        var array = [];
        if (this.ChoosrPriceArray != null && this.ChoosrPriceArray.length > 0) {
          this.ChoosrPriceArray.forEach(priceItem => {
            if (priceItem.TCID != objItem.TCID) {
              array.push(priceItem);
            }
          });
        }
        this.ChoosrPriceArray = array;
      },
      //判断数组是否存在
      IsInArray(TCID) {
        this.$tripUtils.isInObjArr(this.ChoosrPriceArray, "TCID", TCID);
      },
      //获取团期数据
      getList() {
        this.apipost(
          "travel_get_GetTravelPriceListByConfigId", {
            ConfigId: this.ConfigId
          },
          res => {
            if (res.data.resultCode == 1) {
              var array = res.data.data;
              if (array != null && array.length > 0) {
                array.forEach(aitem => {
                  aitem.checkState = this.ShowStatusList.NoChecked;
                });
              }
              this.PriceDataList = array;
            }
          }
        );
      },
      //初始化航空公司下拉
      initAirlines() {
        this.apipost(
          "airline_post_GetList", {},
          res => {
            if (res.data.resultCode == 1) {
              this.AirlineList = res.data.data;
            } else {
              this.Warning(res.data.message);
            }
          },
          err => {}
        );
      },
      //航空公司切换
      airLineSelectChange(item, type) {
        let qMsg = {
          AirlineID: 0,
          Arrival_city: 0,
          Departure_city: 0,
          TrafficType: 0
        };
        if (type == 1) {
          qMsg.Departure_city = item.UnionCityId;
          qMsg.Arrival_city = 0;
          qMsg.TrafficType = item.GoTrafficType;
          if (item.GoTrafficType == 1) {
            qMsg.AirlineID = item.AirLineId;
          } else {
            qMsg.AirlineID = 0;
          }
        } else if (type == 2) {
          qMsg.Arrival_city = item.UnionCityId;
          qMsg.Departure_city = 0;
          qMsg.TrafficType = item.BackTrafficType;
          if (item.BackTrafficType == 1) {
            qMsg.AirlineID = item.BackAirlineId;
          } else {
            qMsg.AirlineID = 0;
          }
        }
        this.apipost(
          "flight_post_GetAirportNameList",
          qMsg,
          res => {
            if (res.data.resultCode == 1) {
              var tempArray = [];
              res.data.data.forEach(item => {
                var str =
                  item.Flight_number +
                  "【" +
                  item.dName +
                  "-" +
                  item.aName +
                  "】";
                tempArray.push({
                  ID: item.ID,
                  Flight_number: str
                });
              });
              if (type == 1) {
                item.FlightList = tempArray;
              } else {
                item.BackFlightList = tempArray;
              }
            } else {
              this.Warning(res.data.message);
            }
          },
          err => {}
        );
      },
      //添加新增联运
      AddItem(item, index) {
        this.UnionList.push({
          ID: 0,
          UnionCityId: 0,
          UnionBranchId: -1,
          DayNum: 0,
          AirLineId: 0,
          BackAirlineId: 0,
          FlightId: 0,
          FlightList: [], //航班列表(前台使用)
          BackFlightList: [], //回程航班列表
          IsStay: 0,
          GoEvaluatePrice: 0,
          BackEvaluatePrice: 0,
          GoAddPrice: 0,
          BackAddPrice: 0,
          BackFlightId: 0,
          BackDayNum: 0,
          UnionTicketPriceList: [],
          GatherAddress: "",
          //选中的订单数组
          ArrList: [],
          GoTrafficType: 1, //去程交通类型
          BackTrafficType: 1, //回程交通类型
          NotShowFlightIdsList: [], //不显示航班下拉列表
          NotShowFlightIds: "", //不显示航班
        });
      },
      //保存联运信息数据
      SaveUnion() {
        let msg = {
          SaveData: this.UnionList,
          qMsg: JSON.stringify(this.ChoosrPriceArray)
        };
        this.apipost("travel_post_SetUnion", msg, res => {
          if (res.data.resultCode == 1) {
            this.Success(this.$t('objFill.v101.shezhilycgo'));
            this.ArrList = [];
            this.GetUnionData();
          } else {
            this.Error(res.data.message);
          }
        });
      },
      //保存联运订单
      SavePriceUnionOrder(item) {
        var msg = {
          ID: item.ID,
          qMsg: this.ArrList
        };
        this.apipost("travel_post_SetPriceUnionOrder", msg, res => {
          if (res.data.resultCode == 1) {
            this.Success(this.$t('objFill.v101.shezlyddcg'));
            this.ArrList = [];
            this.GetUnionData();
          } else {
            this.Error(res.data.message);
          }
        });
      },
      //删除联运
      DeleteUnion(item, index) {
        var that = this;
        if (item.ID > 0) {
          that.Confirm(that.$t('objFill.v101.shifsccilyxxi'), function () {
            let msg = {
              SaveData: item,
              qMag: JSON.stringify(that.ChoosrPriceArray)
            };
            that.apipost("travel_post_RemoveUnion", msg, res => {
              if (res.data.resultCode == 1) {
                that.GetUnionData();
                that.ArrList = [];
              } else {
                that.Error(res.data.message);
              }
            });
          });
        } else {
          that.UnionList.splice(index, 1);
          item.DayNum = 0;
          item.BackDayNum = 0;
          item.AirLineId = 0;
          item.BackAirlineId = 0;
          item.FlightId = 0;
          item.BackFlightId = 0;
          item.GoAddPrice = 0;
          item.BackAddPrice = 0;
        }
      },
      //获取选中并且已参加过的联运数量
      getCheckedAndHaveUnionCount() {
        let count = 0;
        this.PriceDataList.forEach(x => {
          if (x.IsUnion > 0 && x.checkState == this.ShowStatusList.Checked) {
            count++;
          }
        });
        return count;
      },
      //获取选中的团期数量
      getCheckedCount() {
        let count = 0;
        this.PriceDataList.forEach(x => {
          if (x.checkState == this.ShowStatusList.Checked) {
            count++;
          }
        });
        return count;
      },
      getOrderList() {
        let msg = {
          TCID: this.ChoosrPriceArray[0].TCID,
          OrderId: 0
        }
        this.apipost(
          "sellorder_get_GetOrderListByTCID",
          msg,
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.OrderDataList = res.data.data;
            }
          },
          err => {}
        );

      }
    },
    mounted() {
      this.initAirlines();
      this.ConfigId = this.$route.query.id;
      this.getList();
      this.getCompanyList();
      this.getCityList()
    }
  };

</script>
