<style>
  .page_addVisa .btmTitle {
    padding: 0 10px;
    margin: 20px 0 20px 0;
    border-left: 3px solid #e95252;
    font-size: 14px;
    color: #000000;
  }

  .page_addVisa .el-date-editor .el-range-separator {
    padding: 0;
  }

  .el-select .el-input {
    height: 34px;
  }

  .h34 .el-range__icon,
  .h34 .el-range-separator {
    line-height: 29px;
  }

  ._flex {
    display: flex;
  }

  ._Apply_item_form {
    padding: 15px 30px;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    min-width: 1420px;
    background-color: white;
    margin-bottom: 15px;
  }

  ._Apply_item>p {
    font-weight: bold;
    font-size: 12px;
  }

  ._Apply_item>p>.icon-guanbi {
    float: right;
    cursor: pointer;
  }

  ._Apply_item ul li {
    float: left;
  }

  ._mar {
    display: flex;
    line-height: 50px;
  }

  ._mar>div {
    margin-right: 5px;
  }

  ._addPp {
    margin-bottom: 20px;
  }

  ._addPp>.normalBtn {
    width: auto;
  }

  ._addPp ._addNum {
    width: 60px;
  }

  .page_addVisa ._scrollbar {
    overflow: auto;
  }

  .page_addVisa ._scrollbar::-webkit-scrollbar {
    width: 4px;
    height: 8px;
  }

  .page_addVisa ._scrollbar::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    background: #ededed;
  }

  .page_addVisa ._scrollbar::-webkit-scrollbar-thumb {
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    background: #c9c9c9;
  }

  ._EconomicCapability {
    line-height: 22px;
    padding-left: 60px;
  }

  ._EconomicCapability span {
    display: inline-block;
    padding: 2px 4px;
    border: 1px solid #c0c4cc;
    margin: 1px;
    cursor: pointer;
    color: #c0c4cc;
    font-size: 12px;
    border-radius: 4px;
  }

  ._Apply_item .el-form-item,
  ._Ec_Box .el-form-item {
    width: 450px;
    float: left;
  }

  ._Apply_item .el-form-item._AddressDetail {
    width: 77%;
  }

  .page_addVisa textarea {
    resize: none;
  }

  .page_addVisa ._EconomicCapability span._active {
    border: 1px solid rgb(123, 194, 245);
    color: rgb(123, 194, 245);
  }

  .page_addVisa .upBtnList {
    margin: 20px 0 30px 0;
  }

  ._trip_details {
    margin-top: 20px;
    background-color: white;
  }

  ._tr_tit {
    font-weight: normal;
    font-size: 18px;
    text-align: center;
    padding: 10px 0px;
  }

  ._trip_details .icon-bianji-smal {
    cursor: pointer;
  }

  ._timeOver input {
    color: red !important;
  }

  .page_addVisa ._trip_details .singeRowTable tr td {
    padding: 0 10px;
  }

  .page_addVisa .travel_daynum .el-input-number__decrease {
    height: 32px;
    line-height: 32px;
  }

  .page_addVisa .travel_daynum .el-input-number__increase {
    height: 32px;
    line-height: 32px;
  }

  .page_addVisa .travel_daynum .el-input__inner {
    height: 34px;
  }

</style>
<template>
  <div class="page_addVisa">
    <el-form :model="addMsg" ref="addMsg" :rules="rules" label-width="150px" class="_form clearfix">
      <p class="btmTitle">出行计划</p>
      <div class="_flex">
        <el-form-item label="航班别称" clearable prop="Name">
          <el-input v-model="addMsg.Name" type="text" size=mini class="w230"></el-input>
        </el-form-item>
        <el-form-item label="行程天数">
          <el-input-number v-model="addMsg.dayNum" @change="numChange" :min="0" size=mini class="w230 travel_daynum">
          </el-input-number>
        </el-form-item>
        <el-form-item label="排序">
          <el-input-number v-model="addMsg.Sort" @change="sortChange" :min="0" size=mini class="w230 travel_daynum">
          </el-input-number>
        </el-form-item>
      </div>
      <div class="_flex">
        <el-form-item label="出发机场" clearable prop="DepartAirport">
          <el-select v-model="addMsg.DepartAirport" filterable size=mini class="w230"
            @change="flightRevert(1);getFilghtForAir(1)">
            <el-option v-for="item in ChinaAirportList" :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入境口岸" prop="EnterCountryPort">
          <el-select v-model="addMsg.EnterCountryPort" filterable size=mini class="w230"
            @change="flightRevert(1);getFilghtForAir(1)">
            <el-option v-for="item in JapanAirportList" :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入境航班" prop="EnterCountryFlight">
          <el-select v-model="addMsg.EnterCountryFlight" filterable size=mini class="w230">
            <el-option v-for="item in FilghtForAirIn" :key="item.ID" :label="item.Flight_number" :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="_flex">
        <el-form-item label="返回机场" prop="GetBackAirport">
          <el-select v-model="addMsg.GetBackAirport" filterable size=mini class="w230"
            @change="flightRevert(2);getFilghtForAir(2)">
            <el-option v-for="item in ChinaAirportList" :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出境口岸" prop="LeaveCountryPort">
          <el-select v-model="addMsg.LeaveCountryPort" filterable size=mini class="w230"
            @change="flightRevert(2);getFilghtForAir(2)">
            <el-option v-for="item in JapanAirportList" :key="item.ID" :label="item.Name" :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="出境航班" prop="LeaveCountryFlight">
          <el-select v-model="addMsg.LeaveCountryFlight" filterable size=mini class="w230">
            <el-option v-for="item in FilghtForAirOut" :key="item.ID" :label="item.Flight_number" :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <el-form-item label="备注">
        <el-input v-model="addMsg.Remarks" type="textarea" maxlength="500" size=mini class="w400"></el-input>
      </el-form-item>
    </el-form>

    <div class="_trip_details" v-if="addMsg.TravelList.length>0">
      <P class="_tr_tit">行程计划（{{addMsg.TravelList.length}}天）</P>
      <table class="singeRowTable" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <th width=250>日期</th>
          <th width=400>行程</th>
          <th width=400>酒店</th>
          <th width=100>操作</th>
        </tr>
        <tbody v-for="(trip,ti) in addMsg.TravelList" :key="ti">
          <tr v-if="showIindex!==ti">
            <td>第{{ti+1}}天</td>
            <td>{{trip.TraveInfo}}</td>
            <td>{{trip.HotelInfo}}</td>
            <td>
              <i @click="showIindex=ti" class="iconfont icon-bianji-smal"></i>
            </td>
          </tr>
          <tr v-if="showIindex===ti">
            <td>第{{ti+1}}天</td>
            <td>
              <el-input v-model="trip.TraveInfo" type="textarea" size=mini class="w230"></el-input>
            </td>
            <td>
              <el-input v-model="trip.HotelInfo" type="textarea" size=mini class="w230"></el-input>
            </td>
            <td>
              <input type="button" class="normalBtn" @click="showIindex=-1" value="确定" />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="upBtnList">
      <input type="button" class="normalBtn" @click="submitForm('addMsg')" value="保存" />
      <button class="hollowFixedBtn" @click="goBack()">取消</button>
    </div>
  </div>
</template>
<script>
  import Vue from "vue";
  import {
    setTimeout
  } from 'timers';
  export default {
    data() {
      return {
        addMsg: {
          Id: 0,
          Name: "",
          Sort: 0,
          Remarks: "",
          DepartAirport: "",
          EnterCountryFlight: "",
          EnterCountryPort: "",
          GetBackAirport: "",
          LeaveCountryFlight: "",
          LeaveCountryPort: "",
          TravelList: [],
          dayNum: 0
        },
        rules: {
          Name: [{
            required: true,
            message: "请输入航班别称",
            trigger: "blur"
          }],
          DepartAirport: [{
            required: true,
            message: "请选择出发机场",
            trigger: "blur"
          }],
          EnterCountryPort: [{
            required: true,
            message: "请选择入境口岸",
            trigger: "blur"
          }],
          EnterCountryFlight: [{
            required: true,
            message: "请选择入境航班",
            trigger: "blur"
          }],
          GetBackAirport: [{
            required: true,
            message: "请选择返回机场",
            trigger: "blur"
          }],
          LeaveCountryPort: [{
            required: true,
            message: "请选择出境口岸",
            trigger: "blur"
          }],
          LeaveCountryFlight: [{
            required: true,
            message: "请选择出境航班",
            trigger: "blur"
          }]
        },
        showIindex: -1,
        JapanAirportList: [],
        ChinaAirportList: [],
        FilghtForAirIn: [],
        FilghtForAirOut: [],
      };
    },
    created: function () {
      let FId = this.$route.query.FId ? this.$route.query.FId : '0'
      if (FId !== '0') {
        this.getDetail(FId)
      }
    },
    mounted() {
      this.getChinaAirportList();
      this.getJapanAirportList();
    },
    methods: {
      sortChange: function (val) {
        if (val === undefined) {
          this.addMsg.Sort = 0
        }
      },
      numChange: function (val) {
        if (val === undefined) {
          this.addMsg.dayNum = 0
        }
        if (this.addMsg.dayNum > this.addMsg.TravelList.length) {
          let num = this.addMsg.dayNum - this.addMsg.TravelList.length;
          for (let i = 0; i < num; i++) {
            this.addMsg.TravelList.push({
              CityName: '',
              Id: 0,
              VisaPlanId: 0,
              Date: '',
              City: '',
              TraveInfo: '',
              HotelInfo: ''
            })
          }
        } else {
          this.addMsg.TravelList.length = this.addMsg.dayNum
        }
      },
      flightRevert: function (type) {
        if (type == 1) {
          this.addMsg.EnterCountryFlight = ''
          this.FilghtForAirIn = []
        } else {
          this.addMsg.LeaveCountryFlight = ''
          this.FilghtForAirOut = []
        }
      },
      getDetail: function (FId) {
        this.apipost("dmc_get_GetVisaCommonFlightt", {
          FId: FId
        }, res => {
          if (res.data.resultCode === 1) {
            let data = res.data.data
            this.addMsg.Id = data.Id
            this.addMsg.Name = data.Name
            this.addMsg.Remarks = data.Remarks
            this.addMsg.Sort = data.Sort
            this.addMsg.DepartAirport = data.DepartAirport
            this.addMsg.EnterCountryFlight = data.EnterCountryFlight
            this.addMsg.EnterCountryPort = data.EnterCountryPort
            this.addMsg.GetBackAirport = data.GetBackAirport
            this.addMsg.LeaveCountryFlight = data.LeaveCountryFlight
            this.addMsg.LeaveCountryPort = data.LeaveCountryPort
            this.addMsg.TravelList = data.TravelList
            this.addMsg.dayNum = data.TravelList.length

            this.getFilghtForAir(1)
            this.getFilghtForAir(2)
          } else {
            this.$message.error(res.data.message);
          }
        }, err => {});
      },
      getFilghtForAir(type) { // 根据机场获取航班号
        let msg = {
          StartAirId: 0,
          EndAirId: 0,
        }
        if (type == 1) {
          if (this.addMsg.DepartAirport && this.addMsg.EnterCountryPort) {
            msg.StartAirId = this.addMsg.DepartAirport
            msg.EndAirId = this.addMsg.EnterCountryPort
            this.FilghtForAir(msg, type)
          }
        } else {
          if (this.addMsg.GetBackAirport && this.addMsg.LeaveCountryPort) {
            msg.StartAirId = this.addMsg.LeaveCountryPort
            msg.EndAirId = this.addMsg.GetBackAirport
            this.FilghtForAir(msg, type)
          }
        }
      },
      // 获取入境航班
      FilghtForAir(data, type) {
        this.apipost(
          "dmc_get_visa_GetFilghtForAir",
          data,
          res => {
            if (res.data.resultCode == 1) {
              if (type == 1) {
                this.FilghtForAirIn = res.data.data;
              } else {
                this.FilghtForAirOut = res.data.data;
              }
            } else {
              this.$message.error(res.data.message);
            }
          },
          err => {}
        );
      },
      getFilghtForAir(type) {
        // 根据机场获取航班号
        let msg = {
          StartAirId: 0,
          EndAirId: 0
        };
        if (type == 1) {
          if (this.addMsg.DepartAirport && this.addMsg.EnterCountryPort) {
            msg.StartAirId = this.addMsg.DepartAirport;
            msg.EndAirId = this.addMsg.EnterCountryPort;
            this.FilghtForAir(msg, type);
          }
        } else {
          if (this.addMsg.GetBackAirport && this.addMsg.LeaveCountryPort) {
            msg.StartAirId = this.addMsg.LeaveCountryPort;
            msg.EndAirId = this.addMsg.GetBackAirport;
            this.FilghtForAir(msg, type);
          }
        }
      },
      goBack(path) {
        this.$router.go(-1);
      },
      submitForm(addMsg) {
        this.$refs[addMsg].validate(valid => {
          if (valid) {
            this.apipost(
              "dmc_post_SetVisaCommonFlight",
              this.addMsg,
              res => {
                if (res.data.resultCode == 1) {
                  this.$message.success('编辑成功')
                  setTimeout(() => {
                    this.$router.go(-1);
                  }, 1000)
                } else {
                  this.$message.error(res.data.message);
                }
              },
              err => {}
            );
          } else {
            return false;
          }
        });
      },
      getChinaAirportList() {
        // 获取国内机场
        let msg = {
          City_id: 0,
          Country_id: 2,
          TrafficType: 1,
        };
        this.apipost(
          "airport_post_GetList",
          msg,
          res => {
            if (res.data.resultCode == 1) {
              this.ChinaAirportList = res.data.data;
            } else {
              this.$message.error(res.data.message);
            }
          },
          err => {}
        );
      },
      getJapanAirportList() {
        // 获取日本机场
        let msg = {
          City_id: 0,
          Country_id: 651,
          TrafficType: 1,
        };
        this.apipost(
          "airport_post_GetList",
          msg,
          res => {
            if (res.data.resultCode == 1) {
              this.JapanAirportList = res.data.data;
            } else {
              this.$message.error(res.data.message);
            }
          },
          err => {}
        );
      }
    }
  };

</script>