<style>
</style>
<template>
  <div class="clearfix">
    <el-table :data="orderUnionList" stripe style="width:550px;">
      <el-table-column prop="GuestNameInfo" label="旅客信息" width="120px">
      </el-table-column>
      <el-table-column prop="FlightName" label="去程" width="160px">
        <template slot-scope="scope">
          <template v-if="scope.row.FlightName">
            {{scope.row.FlightName.GoDate}}
            <br />
            {{scope.row.FlightName.Flight_number}}
            {{scope.row.FlightName.Departure_time}}-{{scope.row.FlightName.Arrival_time}}
            <br />
            {{scope.row.FlightName.DepartureCityName}}({{scope.row.FlightName.DIATA}})
            -{{scope.row.FlightName.ArrivalCityName}}({{scope.row.FlightName.AIATA}})
          </template>
          <template v-else>
            <span style="color:red;">未配置</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="BackFlightName" label="回程" width="160px">
        <template slot-scope="scope">
          <template v-if="scope.row.BackFlightName">
            {{scope.row.BackFlightName.BackDate}}
            <br />
            {{scope.row.BackFlightName.Flight_number}}
            {{scope.row.BackFlightName.Departure_time}}-{{scope.row.BackFlightName.Arrival_time}}
            <br />
            {{scope.row.BackFlightName.DepartureCityName}}({{scope.row.BackFlightName.DIATA}})
            -{{scope.row.BackFlightName.ArrivalCityName}}({{scope.row.BackFlightName.AIATA}})
          </template>
          <template v-else>
            <span style="color:red;">未配置</span>
          </template>
        </template>
      </el-table-column>
      <el-table-column>
        <template slot-scope="scope">
          <template v-if="scope.row.TicketUnionId>0">
            <a style="color:blue;cursor:pointer" @click="editOrderUnion(scope.row)">修改</a>
            <a style="color:blue;cursor:pointer" @click="deleteOrderUnion(scope.row)">删除</a>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <br />
    <el-form label-width="100px">
      <el-row :gutter="20">
        <el-col :span="10">
          <el-form-item label="订单编号">
            {{orderInfo.OrderId}}
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="团期编号">
            {{orderInfo.TCID}}
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="20">
          <el-form-item label="方式">
            <el-radio v-model="postMsg.OperateType" :label="1">命令导入</el-radio>
            <el-radio v-model="postMsg.OperateType" :label="2">手动填写</el-radio>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="10">
          <el-form-item label="适用旅客">
            <el-select v-model="postMsg.GuestList" placeholder="请选择" multiple>
              <el-option v-for="(item,index) in orderGuestList" :key="index" :label="item.Name" :value="item.Id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="状态">
            <el-select filterable v-model='postMsg.IsSure' class="">
              <el-option label="暂定" :value='0' :key='0'></el-option>
              <el-option label="确定" :value='1' :key='1'></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <!--命令模式-->
      <el-row v-if="postMsg.OperateType==1">
        <el-col :span="20">
          <el-form-item label="机票命令">
            <el-input type="textarea" v-model="postMsg.TicketOrder" :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="SS CA8210 Y  09Aug  PEKWUH  2"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!--手动模式-->
      <el-row v-if="postMsg.OperateType==2">
        <el-col :span="10">
          <el-form-item label="去程日期">
            <el-date-picker v-model="postMsg.GoDate" style="width:150px" value-format="yyyy-MM-dd" type="date"
              placeholder="去程日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="去程航班">
            <el-input v-model="postMsg.GoFlightNum" type="text" maxlength="20" placeholder="去程航班">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="postMsg.OperateType==2">
        <el-col :span="10">
          <el-form-item label="回程日期">
            <el-date-picker v-model="postMsg.BackDate" style="width:150px" value-format="yyyy-MM-dd" type="date"
              placeholder="回程日期">
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="回程航班">
            <el-input v-model="postMsg.BackFlightNum" type="text" maxlength="20" placeholder="回程航班"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item label="备注">
            <el-input type="textarea" v-model="postMsg.Notes"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20">
          <el-form-item>
            <input type="button" class="normalBtn Rs_leaderSearch" @click="saveTicketUnion" value="确定" />
            <input type="button" class="normalBtn Rs_leaderSearch" @click="closeDialog()" value="关闭" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
  export default {
    props: ["orderInfo"],
    data() {
      return {
        postMsg: {
          TCID: 0, //团期编号
          OrderId: 0, //订单编号
          TicketOrder: "", //机票导入命令
          TicketUnionId: 0, //判断新增还是修改
          IsSure: 0, //0-暂定，1-确定
          selectFlight: 1, //查询航班
          GuestList: [], //选择的旅客
          OperateType: 1, //1-SS命令模式,2-手动填写模式
          GoDate: "", //去程日期
          BackDate: "", //回程日期
          GoFlightNum: "", //去程航班
          BackFlightNum: "", //回程航班
          Notes: "", //备注
        },
        orderUnionList: [], //订单联运信息
        orderGuestList: [], //订单旅客信息
      }
    },
    mounted() {

    },
    methods: {
      //修改联运
      editOrderUnion(item) {
        if (item.TicketUnionId) {
          this.postMsg.TicketUnionId = item.TicketUnionId;
        }
        if (item.GuestList && item.GuestList.length > 0) {
          this.postMsg.GuestList = item.GuestList;
        }
        if (item.IsSure) {
          this.postMsg.IsSure = item.IsSure;
        }
        if (item.GoDate) {
          this.postMsg.GoDate = item.GoDate;
        }
        if (item.GoFlightNum) {
          this.postMsg.GoFlightNum = item.GoFlightNum;
        }
        if (item.BackDate) {
          this.postMsg.BackDate = item.BackDate;
        }
        if (item.BackFlightNum) {
          this.postMsg.BackFlightNum = item.BackFlightNum;
        }
      },
      //删除联运
      deleteOrderUnion(item) {
        var that = this;
        that.Confirm("是否要删除此订单的联运信息?", function () {
          var msg = {
            TicketUnionId: item.TicketUnionId
          };
          that.apipost("AirTicket_post_DeleteUnionOrderFlight", msg,
            res => {
              if (res.data.resultCode == 1) {
                that.Success('删除联运成功!');
                that.getOrderUnionList();
              } else {
                that.Error(res.data.data);
              }
            }, null);
        });
      },
      //获取订单设置联运信息
      getOrderUnionList() {
        this.apipost("AirTicket_get_GetUnionTicketListByTCIDNew", this.postMsg,
          (res) => {
            if (res.data.resultCode == 1) {
              this.orderUnionList = res.data.data;
            }
          }
        );
      },
      //设置联运
      saveTicketUnion() {
        this.apipost("AirTicket_post_ImportUnionOrderFlight", this.postMsg,
          (res) => {
            if (res.data.resultCode == 1) {
              this.clearMsg();
              this.Success(res.data.message);
              this.closeDialog();
              //调用父页面刷新方法
              this.$emit("success");
            } else {
              this.Error(res.data.message);
            }
          }
        );
      },
      //清空表单
      clearMsg() {
        this.postMsg.TCID = this.orderInfo.TCID;
        this.postMsg.OrderId = this.orderInfo.OrderId;
        this.postMsg.TicketOrder = "";
        this.postMsg.TicketUnionId = 0;
        this.postMsg.IsSure = 0;
        this.postMsg.GuestList = [];
      },
      //关闭弹窗
      closeDialog() {
        this.$emit("success");
        this.$emit("close");
      },
      //获取订单旅客信息
      getOrderGuestList() {
        var guestMsg = {
          OrderId: this.postMsg.OrderId
        }
        this.apipost("sellorder_get_GetTravelGuestList", guestMsg, res => {
          if (res.data.resultCode == 1) {
            this.orderGuestList = res.data.data.list;
          }
        })
      },
    },
    watch: {
      //监听订单属性编号
      orderInfo: {
        handler(newVal, oldVal) {
          this.orderGuestList = [];
          this.orderUnionList = [];
          this.postMsg.TCID = this.orderInfo.TCID;
          this.postMsg.OrderId = this.orderInfo.OrderId;
          this.getOrderUnionList();
          this.getOrderGuestList();
        },
        deep: true,
        immediate: true,
      },
    },
  };

</script>