<style>
  .PassengerList2 .PT_teamTable.PT_teamTable {
    width: 500px;
    border-collapse: collapse;
  }

  .PT_teamTable td,
  .PT_teamTable th {
    border: 1px solid #dcdcdc;
    padding: 5px;
    height: 30px;
  }

  .PT_teamTable tr th {
    background: #eee;
    height: 30px;
    border: 1px solid #dcdcdc;
  }

  .PT_teamTable tr td {
    background: #fff;
  }

  .travelpassengerlist {
    font-size: 12px;
    background: #dcdcdc;
  }

  .travelpassengerlist tr th {
    height: 30px;
  }

  .travelpassengerlist tr td {
    background: #fff;
    text-align: center;
  }

  /*拒签人员*/
  .travelpassengerlist .redTr td {
    color: #E95252;
  }

  .leader2Btn {
    color: #fff;
    padding: 0 15px;
    height: 30px;
    background: #e95252;
    border: 1px solid #e95252;
    cursor: pointer;
    border-radius: 15px;
  }

  .PassengerList2 input.houseno {
    border: none;
    border-bottom: 1px solid #dcdcdc;
    transition: all linear .5s;
  }

  .PassengerList2 input.houseno:focus {
    border-bottom: 1px solid #e95252;
  }

  .fs-12 {
    font-size: 12px;
    color: #666;
  }

  .color333 {
    color: #333;
  }

  .time-box {
    display: flex;
    margin: 10px 0;
    text-align: center;
    border: 1px solid #dcdcdc;
    border-bottom: 0;
    border-top: 0;
  }

  .time-box .el-col {
    cursor: pointer;
    padding: 10px;
    border-right: 1px solid #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
    border-top: 1px solid #dcdcdc;
    display: flex;
    justify-content: center;
  }
  .time-box .el-col.active {
    color: #e95252;
    border-bottom: 1px solid #e95252;
  }

  .PassengerList3 .travelpassengerlist {
    width: 100%;
  }

  .PassengerList3 .h34 {
    height: 34px;
  }

</style>

<template>
  <div class="flexOne PassengerList PassengerList2 PassengerList3">
    <div class="query-box">
      <ul>
        <li>
          <table class="PT_teamTable">
            <tr>
              <th width="140">团号</th>
              <th width="60">{{$t('admin.admin_personNumber')}}</th>
              <th width="120">领队</th>
              <th width="120">导游</th>
            </tr>
            <tr v-for="item in QueryMsg.TeamInfoData">
              <td><a @click="goUrlTravelControl('团控列表','TravelControlList',item.TCID,item.TCNUM)"
                  style="cursor:pointer;color:blue;">{{item.TCNUM+`(${item.TCID})`}}</a></td>
              <td>{{item.TotalSeat}}人</td>
              <td>{{item.LeaderName}}</td>
              <td>{{item.GuideName}}</td>
            </tr>
          </table>
        </li>
        <li>
          <input type="button" class="normalBtn" value="导出报表" @click="exportExcel()">
        </li>
      </ul>
    </div>
    <el-row class="time-box">
      <el-col :span="2" v-for="(item, index) in HotelList" :key="index" :class="[item.active ? 'active' : '']">
        <div class="fs-12" @click="changeTime(index)">
          <p>{{item.UseTime}}</p>
          <div class="color333">
            <p v-for="(sItem, sIndex) in item.SubHotelList" :key="sIndex">{{sItem.NewHotelName}}</p>
          </div>
        </div>
      </el-col>
    </el-row>
    <div v-loading="loading"></div>
    <table style="margin-bottom: 50px;" class="travelpassengerlist" border="0" cellspacing="1" cellpadding="0"
      v-for="(item, index) in GuestDataList">
      <tr style="background: #E6E6E6;">
        <th colspan="11">{{item.NewHotelName}}</th>
      </tr>
      <tr style="background: #E6E6E6;">
        <th width="50">房间数</th>
        <th width="50">房号</th>
        <th width="130">酒店及房型</th>
        <th width="130">旅客姓名</th>
        <th width="130">旅客占床</th>
        <th width="110">英文姓</th>
        <th width="145">英文名</th>
        <th width="45">性别</th>
        <th width="155">出生日期</th>
        <th width="120">年龄类型</th>
        <th width="60">方式</th>
      </tr>
      <tr v-for="(subItem, subIndex) in item.GuestList" :class="{'redTr':subItem.IsLeaderOrder==1}" class="h34">
        <td>{{subIndex+1}}</td>
        <td width="80">
          <el-select v-model="subItem.HouseNomber" :placeholder="$t('pub.pleaseSel')" @change="changeRmType(subItem, subIndex)"
            v-if="subItem.HouseNo == 1">
            <el-option v-for="(hs, hsIndex) in numberList" :key="hs" :label="hs" :value="hs">
            </el-option>
          </el-select>
          <p v-else>{{subItem.HouseNo}}</p>
        </td>
        <td>
          <el-select v-model="subItem.HouseType" :placeholder="$t('pub.pleaseSel')" @change="changeRmType(subItem, subIndex)"
            v-if="subItem.HouseNo == 1">
            <el-option v-for="(hs, hsIndex) in HouseTypeList" :key="hsIndex" :label="hs.HouseName"
              :value="hs.HouseType">
            </el-option>
          </el-select>
          <p v-else>{{getHouseTypeStr(subItem.HouseType)}}</p>
        </td>
        <td>{{subItem.GuestName}}</td>
        <td>{{'占床'}}</td>
        <td>{{subItem.ESurName}}</td>
        <td>{{subItem.EName}}</td>
        <td>{{getSexStr(subItem)}}</td>
        <td>{{subItem.Birthday.split('T')[0]}}</td>
        <td>{{subItem.PeopleType}}</td>
        <td>{{subItem.GroupTypeStr}}</td>
      </tr>
      <tr>
        <td style="text-align:right" colspan="11"><input type="button" :value="$t('pub.saveBtn')" class="leader2Btn"
            @click="SetTravelChangeHouseService"></td>
      </tr>
      <tr v-if="item.ChangeGuest.length > 0" class="h34">
        <td colspan="11"></td>
      </tr>
      <tr v-for="(subItem, subIndex) in item.ChangeGuest" class="h34">
        <td>{{subIndex+1}}</td>
        <td width="80">
          <el-select v-model="subItem.ChangeHouseNum" :placeholder="$t('pub.pleaseSel')" @change="changeRmType2(subItem, subIndex)">
            <el-option v-for="(hs, hsIndex) in numberList" :key="hs" :label="hs" :value="hs">
            </el-option>
          </el-select>
        </td>
        <td>
          <el-select v-model="subItem.ChangeHouseType" :placeholder="$t('pub.pleaseSel')" @change="changeRmType2(subItem, subIndex)">
            <el-option v-for="(hs, hsIndex) in HouseTypeList" :key="hsIndex" :label="hs.HouseName"
              :value="hs.HouseType">
            </el-option>
          </el-select>
        </td>
        <td>{{subItem.GuestName}}</td>
        <td>{{'占床'}}</td>
        <td>{{subItem.ESurName}}</td>
        <td>{{subItem.EName}}</td>
        <td>{{getSexStr(subItem)}}</td>
        <td>{{subItem.Birthday.split('T')[0]}}</td>
        <td>{{subItem.PeopleType}}</td>
        <td>{{subItem.GroupTypeStr}}</td>
      </tr>
      <!-- </template> -->
      <tr v-if="item.ChangeGuest.length > 0">
        <td style="text-align:right" colspan="11"><input type="button" :value="$t('pub.saveBtn')" class="leader2Btn"
            @click="SetTravelChangeHouseService2"></td>
      </tr>
    </table>
    <div class="noDataNotice" v-if="GuestDataList.length < 1">
      <i class="iconfont icon-kong"></i>
      <p>{{$t("active.ld_noData")}}</p>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        //请求数据
        msg: {
          PageIndex: 1,
          PageSize: 100,
          TCID: 0,
          OrderId: 0,
          currentPage: 1
        },
        IsHaveLeader: 1, //1-有领队,0-无领队
        IsLeaderGuide: 0, //1-领兼导,0-领队
        TCID: 0,
        loading: false,
        QueryMsg: {
          TCID: 0,
          OrderId: 0,
          //团期数据
          TeamInfoData: []
        },
        houseList: [],
        HouseTypeList: [],
        numberList: [],
        HotelList: [],
        GuestDataList: [],
        editList: [],
        editList2: [],
        selectTime: '',
      };
    },
    methods: {
      SetTravelChangeHouseService2: function () {
        if (this.editList2.length < 1) {
          return this.$message.error('请修改房间类型后在保存！')
        }
        this.apipost(
          "travelhouse_post_SetTravelChangeHouseService",
          this.editList2,
          res => {
            if (res.data.resultCode == 1) {
              this.$message.success(this.$t('tips.czchenggong'))
              this.getList(this.selectTime)
            } else {
              this.$message.error('操作失败')
            }
          },
          err => {}
        );
      },
      SetTravelChangeHouseService: function () {
        if (this.editList.length < 1) {
          return this.$message.error('请修改房间类型后在保存！')
        }
        this.editList.forEach((sItem, sIndex) => {
          if (sIndex > 0) {
            sItem.TCID = this.editList[0].TCID;
          }
        });
        this.apipost(
          "travelhouse_post_SetTravelChangeHouseService",
          this.editList,
          res => {
            if (res.data.resultCode == 1) {
              this.$message.success(this.$t('tips.czchenggong'))
              this.getList(this.selectTime)
            } else {
              this.$message.error('操作失败')
            }
          },
          err => {}
        );
      },
      changeTime: function (index) {
        this.HotelList.map((x, i) => {
          x.active = false;
        })
        this.HotelList[index].active = true;
        this.getList(this.HotelList[index].UseTime)
      },
      changeRmType2: function (obj, index) {
        let list = this.editList2
        let msg = {
          CombineNo: '',
          HouseType: obj.ChangeHouseType,
          HouseNum: obj.ChangeHouseNum,
          OldHouseId: obj.HouseId,
          GuestId: obj.Id,
          TravelDate: this.selectTime,
          HotelId: obj.HotelId,
          TCID: obj.TCID,
        }
        if (!list.length) {
          list.push(msg)
        } else {
          let re = false;
          for (let i = 0; i < list.length; i++) {
            if (list[i].GuestId == obj.Id) {
              list[i] = {
                CombineNo: '',
                HouseType: obj.ChangeHouseType,
                HouseNum: obj.ChangeHouseNum,
                OldHouseId: obj.HouseId,
                GuestId: obj.Id,
                TravelDate: this.selectTime,
                HotelId: obj.HotelId,
                TCID: obj.TCID,
              }
              re = true
              break;
            }
          }
          if (!re) {
            list.push({
              CombineNo: '',
              HouseType: obj.ChangeHouseType,
              HouseNum: obj.ChangeHouseNum,
              OldHouseId: obj.HouseId,
              GuestId: obj.Id,
              TravelDate: this.selectTime,
              HotelId: obj.HotelId,
              TCID: list[0].TCID,
            })
          }
        }
        this.editList2 = list
      },
      // 修改类型
      changeRmType: function (obj, index) {
        let list = this.editList
        let msg = {
          CombineNo: '',
          HouseType: obj.HouseType,
          HouseNum: obj.HouseNomber,
          OldHouseId: obj.HouseId,
          GuestId: obj.Id,
          TravelDate: this.selectTime,
          HotelId: obj.HotelId,
          TCID: obj.TCID,
        }
        if (!list.length) {
          list.push(msg)
        } else {
          let re = false;
          for (let i = 0; i < list.length; i++) {
            if (list[i].GuestId == obj.Id) {
              list[i] = {
                CombineNo: '',
                HouseType: obj.HouseType,
                HouseNum: obj.HouseNomber,
                OldHouseId: obj.HouseId,
                GuestId: obj.Id,
                TravelDate: this.selectTime,
                HotelId: obj.HotelId,
                TCID: obj.TCID,
              }
              re = true
              break;
            }
          }
          if (!re) {
            list.push({
              CombineNo: '',
              HouseType: obj.HouseType,
              HouseNum: obj.HouseNomber,
              OldHouseId: obj.HouseId,
              GuestId: obj.Id,
              TravelDate: this.selectTime,
              HotelId: obj.HotelId,
              TCID: list[0].TCID,
            })
          }
        }
        this.editList = list
      },
      compare: function (obj1, obj2) {
        var val1 = Number(obj1.HouseNo);
        var val2 = Number(obj2.HouseNo);
        if (val1 < val2) {
          return -1;
        } else if (val1 > val2) {
          return 1;
        } else {
          return 0;
        }
      },
      // 修改房号
      sortNumberN: function (obj, index) {
        let list = this.GuestDataList;
        // 选择房号后循环数据把房号相同的数据房型修改成一样的
        for (let i = 0; i < list.length; i++) {
          if (obj.HouseNo === list[i].HouseNo && obj.Id !== list[i].Id) {
            obj.HouseType = list[i].HouseType
          }
        }
        list = list.sort(this.compare)
        this.GuestDataList = list;
      },
      //保存分房
      saveOPSetGuestHouse: function () {
        this.apipost(
          "travel_get_OPSetGuestHouse",
          this.GuestDataList,
          res => {
            if (res.data.resultCode == 1) {
              this.$message.success(this.$t('tips.czchenggong'))
            } else {
              this.$message.error('操作失败')
            }
          },
          err => {}
        );
      },
      goUrlTravelControl(name, path, id, tcmun) {
        this.$router.push({
          name: path,
          query: {
            id: id,
            tcmun: tcmun,
            blank: "y",
            tab: name
          }
        });
      },
      //获取性别字符串
      getSexStr(item) {
        var str = "";
        if (item.Sex == 1) {
          str = "男";
        } else {
          str = "女";
        }
        return str;
      },
      //获取房间类型
      getHouseTypeStr(HouseType) {
        var str = "";
        if (HouseType == 1) {
          str = "自然单间";
        } else if (HouseType == 2) {
          str = "标准双人间";
        } else if (HouseType == 3) {
          str = "大床房";
        } else if (HouseType == 4) {
          str = "三人间";
        } else if (HouseType == 5) {
          str = "拼凑双人间";
        } else {
          str = "未分配";
        }
        return str;
      },
      getHouseTypeList: function () {
        this.apipost(
          "travel_get_GetHouseType",
          this.msg,
          res => {
            if (res.data.resultCode == 1) {
              this.HouseTypeList = res.data.data;
            }
          },
          err => {}
        );
      },
      //获取数据
      getList(time) {
        this.selectTime = time
        let msg = {
          TCIDs: this.TCID,
          travelDate: time
        }
        this.loading = true;
        this.apipost(
          "travelhouse_get_GetGuestByTCIDsAndDateService",
          msg,
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.GuestDataList = res.data.data
            }
          },
          err => {}
        );
      },
      exportExcel() {
        //导出报表
        let msg = {
          TCID: this.msg.TCID
        };
        var fileName = "旅客名单.xls";
        if (this.QueryMsg.TeamInfoData != null) {
          fileName =
            "【" + this.QueryMsg.TeamInfoData[0].TCNUM + "】旅客名单.xls";
        }
        this.GetLocalFile("travel_get_GetTravelGuestExport", msg, fileName);
      },
      //获取团期信息
      getTeamInfo() {
        var qmsg = {
          TCIDs: this.TCID
        };
        this.apipost(
          "travelhouse_get_GetCombineBasicAndHotelService",
          qmsg,
          res => {
            if (res.data.resultCode == 1) {
              this.QueryMsg.TeamInfoData = res.data.data.PriceList;
              let HotelList = res.data.data.HotelList;
              for (let i = 0; i < HotelList.length; i++) {
                HotelList[i].active = false;
              }
              this.HotelList = HotelList;
            }
          },
          err => {}
        );
      }
    },
    mounted() {
      let numberList = []
      for (let i = 0; i < 99; i++) {
        numberList.push(`${i+1}`)
      }
      this.numberList = numberList
      this.TCID = this.$route.query.id;
      this.msg.TCID = this.TCID;
      this.msg.OrderId = this.$route.query.OrderId;
      this.getTeamInfo();
      this.getHouseTypeList();
    }
  };

</script>