<style>
.TS_Zanwu {
  font-size: 12px;
  color: #c9c9c9;
  margin: 20px 0;
}
.TS_TickList {
  margin: 0 0 20px 0;
  min-height: 220px;
  font-size: 12px;
  border: 1px solid #d1d1d1;
  border-radius: 4px;
  background: #157bee;
  color: #fff;
  position: relative;
}
.TS_TickList.default {
  background: #d1d1d1;
}
.TS_CityName {
  width: 100%;
  text-align: center;
  margin-top: 20px;
  font-size: 18px;
  color: #f1f1f1;
  font-family: PingFangSc-Fine;
}
.TS_TickList.default .TS_CityName {
  color: #666;
}
.TS_CityList {
  float: left;
  text-align: center;
}
.TS_CityList:first-child {
  margin-left: 10px;
}
.TS_Line {
  float: left;
  width: 60px;
  border-bottom: 1px dashed #fff;
  padding-bottom: 5px;
  margin-top: -10px;
  text-align: center;
}
.TS_LodgInfo {
  margin: 20px 0;
}
.TS_LodgInfo span {
  display: inline-block;
}
.TS_LodgInfo span:first-child {
  margin-left: 18px;
  display: inline-block;
  min-width: 100px;
}
.TS_LodgInfo span:last-child {
  margin-left: 60px;
}
.TS_AddTitle {
  font-size: 12px;
  line-height: 60px;
  text-align: center;
  color: #f1f1f1;
}
.TS_TickList.default .TS_AddTitle {
  color: #999;
}
.TS_Price {
  font-size: 16px;
}
.TS_PlatForm span {
  display: inline-block;
}
.TS_PlatForm {
  color: #cfd0fb;
  padding: 0 20px;
  margin-bottom: 10px;
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
}
.TS_PlatForm span:first-child {
  display: inline-block;
  min-width: 100px;
}
.TS_PlatForm span:last-child {
  margin-left: 40px;
}
.TS_addDiv {
  float: left;
  width: 260px;
  height: 137px;
  background-color: #e4e4e4;
  border-radius: 4px;
  cursor: pointer;
  line-height: 137px;
}
.TS_addDiv i {
  font-size: 80px;
  color: #bcbcbc;
  text-align: center;
  display: inherit;
}
.TS_Btmlist {
  right: 0;
  /* height: 280px; */
  background-color: #fff;
  border-top: 3px solid #38425d;
  position: fixed;
  bottom: 0;
  left: 50px;
  padding: 10px;
}
.btmTitle {
  padding-left: 10px;
  border-left: 3px solid #e95252;
  color: #333;
  font-size: 16px;
  font-family: "PingFangSC-Fine";
  height: 30px;
  line-height: 30px;
  margin-bottom: 20px;
}
.TS_departName {
  width: 90px;
  height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  margin-bottom: 5px;
}
.TS_CityName .icon-bianji-smal {
  color: #9ab0f8;
  font-size: 14px;
  margin-left: 10px;
  cursor: pointer;
}
.TS_TickList.default .TS_CityName .icon-bianji-smal {
  color: #777;
}
.TS_FlightInfo {
  height: 24px;
  /* background: rgba(0, 0, 0, 0.2); */
  color: #fff;
  /* margin: 20px auto; */
  line-height: 24px;
  font-size: 12px;
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  padding-top: 10px;
  border-top: 1px dashed #f1f1f1;
}
.TS_FloghtCode {
  float: left;
  margin-left: 5px;
  font-size: 16px;
  font-family: PingFangSc-Fine;
}
.TS_StartDate {
  float: right;
  margin-right: 5px;
  text-align: right;
  font-size: 18px;
  font-family: PingFangSc-Fine;
}
.TS_StartDate i,
.TS_FloghtCode i {
  font-size: 42px;
  vertical-align: middle;
}
.TS_Line i {
  font-size: 12px;
}
.TS_COMCir {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #f5f5f5;
  top: 57px;
}
.TS_JianLeft {
  left: -5px;
}
.TS_JiaRight {
  right: -5px;
}
.TS_Time {
  height: 16px;
}
.TS_delScien {
  position: absolute;
  right: 10px;
  top: 10px;
  display: none;
}
.TS_delScien:hover {
  color: #f76f6f;
  cursor: pointer;
}
.TS_TickList:hover .TS_delScien {
  display: block;
}
.split-line {
  height: 0;
  border-top: 1px dashed #f1f1f1;
  position: absolute;
  top: 62px;
  left: 5px;
  right: 5px;
}
.TS_TickList.default .split-line {
  display: none;
}
.TS_TickList .through-p-cnt-box {
  top: 73px;
  bottom: 45px;
  left: 10px;
  right: 10px;
  position: absolute;
}
.through-p-cnt-box .through-p-cnt-item {
  width: 80px;
  height: 80px;
  border: 3px solid rgba(255, 255, 255, 0.4);
  text-align: center;
  border-radius: 100%;
  margin: 0 auto;
  padding-top: 17px;
  color: #f1f1f1;
}
.through-p-cnt-box .through-p-cnt-item label {
  font-size: 12px;
  display: inline-block;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.through-p-cnt-box .through-p-cnt-item .cnt {
  font-size: 24px;
  display: block;
  font-family: "PingFangSc-Fine";
  cursor: pointer;
}
.through-add-box {
  text-align: center;
  line-height: 200px;
  cursor: pointer;
}
.through-add-box i {
  font-size: 48px;
  color: #bbb;
}
.through-add-box:hover i {
  color: #999;
}
.top-btn {
  text-align: right;
  position: absolute;
  top: 10px;
  right: 10px;
}
</style>

<template>
  <div>
    <div class="query-box" style="border-bottom:none;padding:0;">
      <ul>
        <li>
          <button class="normalBtn" type="button" @click="goUrl()">{{$t('objFill.v101.chakanlyundd')}}</button>
        </li>
      </ul>
    </div>
    <!-- <div class="TS_Zanwu">{{$t('ground.weishezhi')}}联运信息，点击修改进行设置</div> -->
    <div class="TS_Content clearfix">
      <el-row :gutter="20">
        <el-col :span="4" v-for="item in commonData.dataList" :key="item.subCode">
          <div class="TS_TickList" :class="{'default':item.ID==0}">
            <div class="TS_COMCir TS_JianLeft"></div>
            <div class="TS_COMCir TS_JiaRight"></div>
            <div class="split-line"></div>
            <div class="TS_delScien" v-if="item.ID>0" @click="delThrough(item)">
              <i class="iconfont icon-xingzhuang"></i>
            </div>
            <div class="TS_CityName">{{item.CityName}}<i class="iconfont icon-bianji-smal" @click="updateTransport(item)"></i></div>
            <el-row :gutter="10" class="through-p-cnt-box"  v-if="item.ID>0">
              <el-col :span="12">
                <div class="through-p-cnt-item">
                  <label>{{$t('salesModule.goUnion')}}</label>
                  <span class="cnt">{{item.ReturnCount==null?0:item.ReturnCount}}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="through-p-cnt-item">
                  <label>{{$t('objFill.v101.fanchenglyun')}}</label>
                  <span class="cnt">{{item.IsReturnCount==null?0:item.IsReturnCount}}</span>
                </div>
              </el-col>
            </el-row>
            <div class="TS_FlightInfo clearfix" v-if="item.ID>0">
              <div class="TS_FloghtCode">
                <i class="iconfont icon-11"></i>
                {{item.AddGoCostPrice}}
              </div>
              <div class="TS_StartDate">
                <i class="iconfont icon-2"></i>
                {{item.AddBackCostPrice}}
              </div>
            </div>
            <div class="TS_AddTitle" v-else>{{$t('objFill.v101.traveltrip.weipeizhi')}}</div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="TS_TickList default" @click="addTransport">
            <div class="through-add-box">
              <i class="iconfont icon-img_jiahao_big"></i>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="noData" v-show="commonData.noData">
      {{$t('system.content_noData')}}
    </div>
    <el-pagination background @current-change="handleCurrentChange" :current-page.sync="commonData.currentPage" layout="total,prev, pager, next, jumper"
      :page-size="queryMsg.pageSize" :total="commonData.total">
    </el-pagination>
    <div class="TS_Btmlist" v-if="commonData.isShow">
      <div class="btmTitle">{{commonData.title}}{{$t('visa.v_lycity')}}</div>
      <div>
        <el-form :model="addMsg" :rules="rules" ref="addMsg" label-width="100px">
          <el-col :span="4">
            <el-form-item :label="$t('objFill.v101.hote.shengfen')" prop="Province">
              <el-select :placeholder="$t('visaT.qxzshengfeng')" filterable v-model="addMsg.Province" @change="getCityList">
                <el-option v-for='item in commonData.Province' :key="item.ID" :label="item.Name" :value="item.ID">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('system.table_city')" prop="City">
              <el-select :placeholder="$t('pub.pleaseSel')" filterable v-model="addMsg.City">
                <el-option v-for='item in commonData.CityList' :key="item.ID" :label="item.Name" :value="item.ID">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('objFill.v101.quchenggujia')" prop="AddGoCostPrice">
              <el-input v-model="addMsg.AddGoCostPrice" maxlength="10" @keyup.native="checkPrice(addMsg,'AddGoCostPrice')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('objFill.v101.huichenggujia')" prop="AddBackCostPrice">
              <el-input v-model="addMsg.AddBackCostPrice" maxlength="10" @keyup.native="checkPrice(addMsg,'AddBackCostPrice')"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item :label="$t('salesModule.YPBNum')">
              <el-input v-model="addMsg.ConfigNum" maxlength="10" @keyup.native="checkInteger(addMsg,'ConfigNum')"></el-input>
            </el-form-item>
          </el-col>
          <div class="top-btn">
            <input type="button" class="normalBtn" @click="submitForm('addMsg')" :value="$t('pub.sureBtn')" />
            <input type="button" class="cancelBtn" @click="commonData.isShow=false,resetForm('addMsg')" :value="$t('pub.cancelBtn')" />
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      queryMsg: {
        AirticketId: "",
        PageIndex: 1,
        pageSize: 20
      },
      addMsg: {
        ID: 0,
        AirticketId: "",
        Province: "",
        City: "",
        AddGoCostPrice: "",
        AddBackCostPrice: "",
        AddSalePrice: "",
        AddB2BPrice: "",
        AddB2CPrice: "",
        //已配联运数量
        ConfigNum:0
      },
      commonData: {
        title: "",
        //是否显示
        isShow: false,
        noData: false,
        //公用下拉默认值
        commonDefaultSelect: 0,
        total: 0,
        currentPage: 1,
        Province: [],
        CityList: [],
        dataList: [],
        getReturnCount: []
      },
      //团期编号
      TCIDS:"",
      rules: {
        Province: [
          {
            required: true,
            message: this.$t('visaT.qxzshengfeng'),
            trigger: "change"
          }
        ],
        City: [
          {
            required: true,
            message: this.$t('objFill.v101.qingxzchens'),
            trigger: "change"
          }
        ],
        AddGoCostPrice: [
          {
            required: true,
            message: this.$t('objFill.v101.qingtxqcyugj'),
            trigger: "change"
          }
        ],
        AddBackCostPrice: [
          {
            required: true,
            message: this.$t('objFill.v101.qingtxhcyugj'),
            trigger: "change"
          }
        ]
      }
    };
  },
  methods: {
    //获取机票联运分页列表
    getList() {
      this.apipost(
        "AirTicket_Get_GetAirticketUnionPageList",
        this.queryMsg,
        res => {
          if (res.data.resultCode == 1) {
            this.commonData.dataList = res.data.data.pageData;
            this.commonData.noData = !res.data.data.count > 0;
            this.commonData.total = res.data.data.count;
          } else {
            this.Error(res.data.message);
          }
        },
        err => {}
      );
    },
    //翻页功能按钮
    handleCurrentChange(val) {
      this.queryMsg.pageIndex = val;
      this.getList();
    },
    //获取城市列表
    getProvince() {
      let msg = {
        Id: 2
      };
      this.apipost(
        "dict_post_Destination_GetChildList",
        msg,
        res => {
          this.commonData.Province = res.data.data;
        },
        err => {}
      );
    },
    //根据省份选择获取城市
    getCityList() {
      this.CityList = [];
      let msg = {
        Id: this.addMsg.Province
      };
      this.apipost(
        "dict_post_Destination_GetChildList",
        msg,
        res => {
          this.commonData.CityList = res.data.data;
        },
        err => {}
      );
    },
    //提交创建、修改表单
    submitForm(addMsg) {
      this.$refs[addMsg].validate(valid => {
        if (valid) {
          this.saveData();
        } else {
          return false;
        }
      });
    },
    //弹出框取消 初始化谈框内表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    saveData() {
      this.addMsg.AirticketId = this.$route.query.id;
      this.apipost(
        "AirTicket_Post_SetAirticketUnion",
        this.addMsg,
        res => {
          if (res.data.resultCode == 1) {
            this.Success(this.$t('tips.saveYes'));
            this.getList();
            this.resetForm("addMsg");
            this.commonData.isShow = false;
          } else {
            this.Error(res.data.message);
          }
        },
        err => {}
      );
    },
    //修改联运信息
    updateTransport(item) {
      this.commonData.title = this.$t('objFill.v101.xiugaily');
      this.commonData.isShow = true;
      this.addMsg = item;
      this.getCityList();
    },
    addTransport() {
      this.commonData.title = this.$t('objFill.v101.xinzengly');
      this.commonData.isShow = true;
      this.commonData.CityList = [];
      this.addMsg = {
        ID: 0,
        AirticketId: "",
        Province: "",
        City: "",
        AddGoCostPrice: "0",
        AddBackCostPrice: "0",
        AddSalePrice: "0",
        AddB2BPrice: "0",
        AddB2CPrice: "0",
        ConfigNum:0
      };
    },
    //删除
    delThrough(item) {
      var that = this;
      this.Confirm(that.$t('objFill.v101.shifsccilyxxi'), function() {
        that.delTsetting(item);
      });
    },
    delTsetting(item) {
      let msg = {
        ID: item.ID,
        AirticketId: item.AirticketId
      };
      this.apipost(
        "AirTicket_Post_RemoveAirticketUnion",
        msg,
        res => {
          if (res.data.resultCode == 1) {
            this.Success(this.$t('tips.shanchuchenggong'));
            this.getList();
          } else {
            this.Error(res.data.message);
          }
        },
        err => {}
      );
    },
    //根据团ids获取联运城市的人数信息
    getCombinedPeopleNum() {
      let msg = {
        ticds: this.queryMsg.AirticketId
      };
      this.apipost(
        "sellorder_post_GetCityByTICD",
        msg,
        res => {
          if (res.data.resultCode == 1) {
            this.TCIDS=res.data.data[0].ticds;
            this.commonData.getReturnCount = res.data.data;
            this.commonData.getReturnCount.forEach(x => {
              this.commonData.dataList.forEach(y => {
                if (x.DepartureCityId == y.City) {
                  y.ReturnCount = x.ReturnCount;
                  y.IsReturnCount = x.IsReturnCount;
                }
              });
            });
          } else {
          }
        },
        err => {}
      );
    },
    goUrl(path) {
      this.$router.push({ name: "CombinedOrderList", query: { id: this.TCIDS } });
    }
  },
  mounted() {
    this.queryMsg.AirticketId = this.$route.query.id;
    this.getCombinedPeopleNum();
    this.getList();
    this.getProvince();
  }
};
</script>