<template>
  <div class="roomQuery" ref="wrap">
    <div class="query-box" style="border-bottom: none;">
      <ul style="position:relative;">
        <li>
          <span>
            <!-- 月份 -->
            <em>月</em>
            <el-date-picker v-model="msg.QMonthStr" type="month" value-format="yyyy-MM" placeholder="選択月">
            </el-date-picker>
          </span>
        </li>
        <li style="position:absolute;right:10px;top:0;">
          <!-- 查询 -->
          <input type="button" class="normalBtn" value="問い合わせ" @click="getList()" />
          <!-- 下载 -->
          <input type="button" class="normalBtn" value="ダウンロードする" style="display:none;" @click="DownLoadHotel()" />
        </li>
      </ul>
    </div>
    <div style="width: 100%;  overflow-x: auto;padding-bottom: 10px; " class="ownScrollbarStyle">
      <div style="font-size:12px;padding:2px 4px 3px 20px;">
        <!-- 每次导出数据最好不要超过一个月 -->
        <div style="display:inline-block;color:red;display:none">注意事項:データをエクスポートするたびに1か月を超えないことをお勧めします。</div>
        <!-- 颜色说明 -->
        <div class="rq_comSpan" style="display:inline-block;">色の説明:
          <!-- 新增团体 --> <!-- 取消团体 -->  <!-- 酒店提醒 -->
          <span class="rq_span1">グループを追加</span><span class="rq_span2">グループをキャンセル</span>
          <span class="rq_span3">ホテルリマインダー</span>
        </div>
      </div><br />
      <table border="0" cellspacing="1" cellpadding="0" class="roomQuery_SupplierTable" v-loading='loading'>
        <tr>
          <!-- 订团号 -->
          <th width="100">グループ番号</th>
          <!-- 公司团号 -->
          <th width="100">会社グループ番号</th>
          <!-- 航班 -->
          <th width="100">フライト</th>
          <!-- 机位总数 -->
          <th width="120">総座席数</th>
          <!-- 当前人数 -->
          <th width="100">現在の番号</th>
          <!-- 导游 -->
          <th width="100">ガイド</th>
          <!-- 领队 -->
          <th width="100">リーダー</th>
          <!-- 酒店详情 -->
          <th width="150">ホテルの詳細</th>
        </tr>
        <tbody v-for="(item,index) in dataList">
          <tr>
            <td style="position:relative;">
              {{item.NewCombinationNum}}
              <div class="Add_triangle" v-if="item.IsBookTeam==1&&todayDate==getDateYear(item.HotelBookTimeStr)"></div>
              <div class="minus_triangle" v-if="item.IsBookTeam==2"></div>
            </td>
            <td>
              {{item.TCNUMS}}({{item.TCID}})
            </td>
            <td>
              <template v-for="(subItem,subIndex) in item.FlightList2">
                <span class="roomNowrap"><span class="roomFlightNumber">{{subItem.Flight_number}}</span>
                  {{subItem.TicketDepartureTime}} {{subItem.DepartureName}}({{subItem.DIATA}})
                  <i class="iconfont icon-weibiaoti40 rq_Arrow"></i>
                  {{subItem.TicketArrivalTime}} {{subItem.ArrivalCityName}}({{subItem.AIATA}})</span>
              </template>
            </td>
            <td>
              {{item.TotalSeat}}
            </td>
            <td>
              {{item.RealNum}}
            </td>
            <td>
              {{item.GuideName}} <template v-if="item.GuideTel">(电话: {{item.GuideTel}})</template>
            </td>
            <td>
              {{item.LeaderName}} <template v-if="item.LeaderTel">(电话: {{item.LeaderTel}})</template>
            </td>
            <td>
              <!-- 酒店使用情况 -->
              <a class="hotelLink" slot="reference" @click="getHotelList(item.TCID,item.NewCombinationNum),hotelUseDetail=true">ホテル利用</a>
              <!-- 备注 -->
              <a class="hotelLink" slot="reference" @click="getClickItem(item),dijieDialog=true">備考</a>
            </td>
          </tr>
          <tr>
            <td colspan="8" style="text-align:left;padding-left:5px;">
              <div class="rq_remark" v-if="item.IsBookTeam==2&&item.Numbers>=0">
                <span class="rq_reSpan">取消团体提醒</span>
                <span class="rQ_HtList">
                  <span v-for="subItem in item.Numbers"></span>
                </span>
              </div>
              <div class="rq_remark" v-if="item.SupplierHotelStatus==1||item.SupplierHotelStatus==2&&item.Numbers>=0">
                <span class="rq_reSpan">酒店提醒</span>
                <span class="rQ_HTremark">
                  <span v-for="subItem in item.Numbers"></span>
                </span>
              </div>
              <!-- 注意事项 -->
              <div><span class="rq_reSpan">注意事項</span> {{item.SupplierRemarks}}</div>
            </td>
          </tr>
          <tr>
            <!-- 对地接备注 -->
            <td colspan="8" style="text-align:left;padding-left:5px;">
              地上での発言： {{item.SupplierToDmcRemarks}}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <transition name="el-zoom-in-top">
      <div class="page-component-up" v-show="top>100" @click="goTop">
        <i class="el-icon-arrow-up"></i>
      </div>
    </transition>

    <el-dialog custom-class='w1006' :title='"【"+NewCombinationNum+"】"+"酒店信息"' :visible.sync="hotelUseDetail" center>
          <table class="rq_HotelTable" v-loading="hotelLoading">
              <tr>
                <!-- 时间 -->
                <th width="120">
                  時間
                </th>
                <!-- 酒店 -->
                <th width="150">
                  ホテル
                </th>
                <th width="300">
                  価格
                </th>
                <th width="100">
                  税入/税别
                </th>
                <th width="100">リマインダー</th>
                <th width="150">備考</th>
                <th width="50">ログ</th>
              </tr>
              <template v-for="(subItem,subIndex) in HotelList">
                <tbody>
                  <template v-for="(childItem,childIndex) in subItem.HotelOrderList">
                    <tr>
                      <td style="text-align:center;" :rowspan="2">
                        第{{subIndex+1}}天 <br />
                        {{subItem.UseTimeStr}}
                      </td>
                      <td>
                        <template v-if="(childItem.DMCState==1 || childItem.OPState==1) && childItem.SupplierId!=UserInfo.SupplierId">业者自理</template>
                        <template v-else>
                          {{childItem.HotelName}}<br/>
                          <div class="rq_changeName">{{childItem.NewHotelName!=childItem.HotelName?'更换为:'+childItem.NewHotelName:""}}</div>
                        </template>
                      </td>
                      <td>
                        <template v-if="(childItem.DMCState==1 || childItem.OPState==1) && childItem.SupplierId!=UserInfo.SupplierId"></template>
                        <template v-else>
                          <template v-for="(detailsItem,detailsIndex) in childItem.OrderDetailsList"
                            v-if="detailsItem.HouseTypeCount>0">
                            <template v-if="detailsItem.HouseType==1">单间</template>
                            <template v-if="detailsItem.HouseType==2">标准双人间</template>
                            <template v-if="detailsItem.HouseType==3">大床房</template>
                            <template v-if="detailsItem.HouseType==4">三人间</template>
                            <template v-if="detailsItem.HouseType==4">司导间</template>
                            {{detailsItem.HouseTypeCount}} 间
                            价格: {{detailsItem.UnitPrice}}
                            返佣: {{detailsItem.RebateRatio}}
                            <br />
                          </template>
                        </template>
                      </td>
                      <td>
                        <template v-if="(childItem.DMCState==1 || childItem.OPState==1) && childItem.SupplierId!=UserInfo.SupplierId"></template>
                        <template v-else>
                          <template v-if="childItem.TaxType==1">税入</template>
                          <template v-if="childItem.TaxType==2">税别</template>
                        </template>
                      </td>
                      <td>
                        <template v-if="(childItem.DMCState==1 || childItem.OPState==1) && childItem.SupplierId!=UserInfo.SupplierId"></template>
                        <template v-else>
                          <select class="rq_status" v-model='childItem.SupplierToDmcHotelStatus'
                            :placeholder="$t('pub.pleaseSel')">
                            <option label='请选择' :value='0'></option>
                            <option label='一般提醒' :value='1'></option>
                            <option label='重要提醒' :value='2'></option>
                          </select>
                        </template>
                      </td>
                      <td>
                        <template v-if="(childItem.DMCState==1 || childItem.OPState==1) && childItem.SupplierId!=UserInfo.SupplierId"></template>
                        <template v-else>
                          <textarea class="w135" cols="25" rows="3" v-model='childItem.SupplierToDmcRemarks'></textarea>
                        </template>
                      </td>
                      <td style="text-align:center;">
                        <el-tooltip effect="dark" content="日志" placement="top-start">
                          <el-popover width='260' trigger="click">
                            <div class="priceContentDiv">
                              <div class="AuditLog">日志</div>
                              <div class="logContact" style="background:#f9f9f9; padding:20px 10px 0;">
                                <div v-if='LogsList.length>0' v-for="(item,index) in LogsList" :key="index">
                                  <div class="clearfix">
                                    <div class="Auditcircle" style="left: 6px!important;"></div>
                                    <div class="operateName" style="color:#005CAA;font-size:12px;">{{item.CreateByName}} {{item.CreateTimeStr}}</div>
                                    <!-- <div class="operateDate fz12 color666">{{item.x}}</div> -->
                                  </div>
                                  <div class="fz12 color333">{{item.Remarks}}</div>
                                </div>
                                <div v-if='LogsList.length==0'>暂无数据</div>
                              </div>
                            </div>
                          <template v-if="(childItem.DMCState==1 || childItem.OPState==1) && childItem.SupplierId!=UserInfo.SupplierId"></template>
                            <template v-else>
                              <el-button slot="reference"  @click='getLogsList(childItem.TCID,childItem.HotelId,subItem.UseTimeStr)' type="primary"
                                style='background:#47BF8C; border-color:#47BF8C;padding:5px;' icon="iconfont icon-rizhi1"></el-button>
                            </template>
                          </el-popover>
                        </el-tooltip>
                      </td>
                    </tr>
                    <tr>
                      <td colspan="6">
                        <template v-if="(childItem.DMCState==1 || childItem.OPState==1) && childItem.SupplierId!=UserInfo.SupplierId">
                          <div style="height:15px;"></div>
                        </template>
                        <template v-else>
                          <span style="display:inline-block;width:60px;vertical-align:top;">提示信息：</span>
                          <span style="display:inline-block;width:87%;"
                            :class="{'rq_disImNote':childItem.SupplierHotelStatus==1&&DateMinus(getDateStr(childItem.SupplierHotelStatusTime))<=5,'rq_importNote':childItem.SupplierHotelStatus==2&&DateMinus(getDateStr(childItem.SupplierHotelStatusTime))<=5}">{{childItem.Remarks}}</span>
                        </template>
                      </td>
                    </tr>
                  </template>
                </tbody>
              </template>
          </table>
          <div slot="footer" class="dialog-footer">
            <button class="hollowFixedBtn"
              @click="hotelUseDetail = false">{{$t('pub.cancelBtn')}}</button> &nbsp;
            <input type="button" value="保存" @click="saveSupplierjourneyorder(HotelList)" class="normalBtn" />
          </div>
    </el-dialog>
    <el-dialog custom-class='w500' style="margin-top:18vh" :title='"【"+NewCombinationNum+"】"+"对地接备注"' :visible.sync="dijieDialog" center>
        <table>
          <tr>
            <td class="SP_RemarkTitle">
              对地接备注：
            </td>
            <td>
              <el-input class='w320 SupplierRemarks' v-model='RemarkObj.SupplierToDmcRemarks' type='textarea'>
              </el-input>
            </td>
          </tr>
        </table>
        <div slot="footer" class="dialog-footer">
          <button class="hollowFixedBtn"
            @click="dijieDialog = false">{{$t('pub.cancelBtn')}}</button> &nbsp;
          <input type="button" value="保存" @click="saveSupplierToDmcRemarks" class="normalBtn" />
        </div>
    </el-dialog>
  </div>
</template>
<script>
  import moment from 'moment'
  export default {
    data() {
      return {
        loading: false,
        hotelLoading: false,
        hotelUseDetail:false,
        dijieDialog:false,
        NewCombinationNum:'',
        total: 0,
        top:0,
        msg: {
          pageIndex: 1,
          pageSize: 5,
          SelectType: 1,
          StartDate: '',
          EndDate: '',
          //酒店编号
          HotelId: 0,
          //日期
          DateStr: "",
          //出团公司
          OutBranchIds: [],
          LineId: 14,
          PlaceID: 0,
          LineteamId: 0,
          //航空公司
          AirLineId: 0,
          CreateBy: 0,
          TCNUM: '',
          PriceStatus: 0,
          CombinationNum: '',
          QMonthStr: new Date().Format("yyyy-MM") //月份字符串
        },
        UserInfo: {}, //用户信息
        dataList: [], //数据列表
        HotelList: [], //酒店列表
        //供应商对地接备注
        RemarkObj: {
          TCID: 0,
          SupplierToDmcRemarks: ""
        },
        //日志信息
        LogsList: [],
        queryLogMsg: {
          pageIndex: 1,
          pageSize: 15,
          currentPage: 1,
          total: 0,
          HotelId: 0,
          TCID: 0,
          UseTime:''
        },
        //是否为今天
        isToday: false,
        todayDate: '',
        showNum: 0,
      }
    },
    methods: {
      //获取日志
      getLogsList(TCID,HotelId,timeStr) {
        if (TCID) {
          this.queryLogMsg.TCID = TCID;
        }
        if(HotelId){
          this.queryLogMsg.HotelId = HotelId;
        }
        if(timeStr)
        {
           this.queryLogMsg.UseTime = timeStr;
        }
        this.ApiPost2('DmcInfoChangeLog_get_GetHotelLogList', this.queryLogMsg, res => {
          if (res.data.resultCode == 1) {
            this.LogsList = res.data.data.pageData;
            this.queryLogMsg.total = res.data.data.count;
          }
        }, err => {})
      },
      //保存信息
      saveSupplierjourneyorder(HotelList) {
        this.hotelLoading = true;
        this.ApiPost2('dmcstatistics_post_SetSupplierjourneyorderService', HotelList, res => {
          this.hotelLoading = false;
          if (res.data.resultCode == 1) {
            this.Success(res.data.message)
            this.hotelUseDetail=false;
            this.getList();
          } else {
            this.Error(res.data.message)
          }
        }, err => {})
      },
      getList() {
        this.loading = true;
        this.ApiPost2('dmcstatistics_post_GetUniteCombinationNumService_Supplier_V2', this.msg, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.dataList = res.data.data;
            if (this.dataList && this.dataList.length > 0) {
              this.dataList.forEach(x => {
                if (x.HotelBookTimeStr) {
                  x.Numbers = 5 - this.DateMinus(x.HotelBookTimeStr.split(' ')[0]);
                }
              })
            }
          } else {
            this.Error(res.data.message)
          }
        }, err => {})
      },
      DateMinus(sDate) {
        var sdate = new Date(sDate.replace(/-/g, "/"));
        var now = new Date();
        var days = now.getTime() - sdate.getTime();
        var day = Math.abs(parseInt(days / (1000 * 60 * 60 * 24)));
        return day;
      },
      //获取酒店列表
      getHotelList(TCID, NewCombinationNum) {
        this.NewCombinationNum = NewCombinationNum;
        this.hotelLoading = true;
        this.HotelList = [];
        var qMsg = {
          TCID: TCID,
          NewCombinationNum: NewCombinationNum
        };
        this.ApiPost2('dmcstatistics_post_GetSupplierHotelListService', qMsg, res => {
          this.hotelLoading = false;
          if (res.data.resultCode == 1) {
            this.HotelList = res.data.data;
          } else {
            this.Error(res.data.message);
          }
        }, err => {})
      },
      //获取点击备注
      getClickItem(item) {
        this.NewCombinationNum = item.NewCombinationNum;
        this.RemarkObj.TCID = item.TCID;
        this.RemarkObj.SupplierToDmcRemarks = item.SupplierToDmcRemarks;
      },
      //保存供应商对地接备注
      saveSupplierToDmcRemarks() {
        this.loading=true
        this.ApiPost2('dmcstatistics_post_SetSupplierToDmcRemarksService', this.RemarkObj, res => {
          this.loading = false;
          if (res.data.resultCode == 1) {
            this.Success(res.data.message);
            this.dijieDialog=false;
            this.getList();
          } else {
            this.Error(res.data.message);
          }
        }, err => {})
      },
      //下载Excel
      DownLoadHotel() {
        this.loading = true;
        let qMsg = {
          queryMsg: this.msg,
          uid: this.UserInfo.SupplierAccountId,
          OPType: 1
        };
        let fileName = "订房查询" + this.$commonUtils.getCurrentDate() + ".xls";
        this.GetLocalFile("hotel_get_downloadHotel", qMsg, fileName,
          res => {
            this.loading = false;
          });
      },
      timeAdd0(str) {
        if (str.length <= 1) {
          str = '0' + str;
        }
        return str
      },
      //提取年月日
      getDateYear(date) {
        return date.split(' ')[0];
      },
      goTop(){
        document.documentElement.scrollTop = 0
        this.top=0
      },
      handleScroll(){
        this.top=document.documentElement.scrollTop
      },
      getDateStr(date){
          return moment(date).format("YYYY-MM-DD HH:mm:ss").split(' ')[0];
      }
    },
    mounted() {
      this.UserInfo = this.getLocalStorageSupplier();
      //获取当前日期
      var nowMonth = (new Date().getMonth() + 1).toString()
      var nowDay = new Date().getDate().toString();
      this.todayDate = new Date().getFullYear() + '-' + this.timeAdd0(nowMonth) + '-' + this.timeAdd0(nowDay);
      document.addEventListener('scroll', this.handleScroll);
      this.getList();
    },
  }

</script>
<style>
  .roomQuerySplitTrCss td {
    background: #eee !important;
  }

  .roomQuery_SupplierTable {
    width: 98%;
    font-size: 12px;
    color: #333;
    margin: auto;
    border-collapse: collapse;
    background-color: #fff;
    border: 1px solid #d1d1d1;
  }

  .roomQuery_SupplierTable tbody:nth-child(2n+2) {
    background: #fafafa;
  }

  .roomQuery_SupplierTable tbody tr:last-child {
    border-bottom: 2px solid #333;
  }

  .roomQuery_SupplierTable tr th {
    background: #E6E6E6;
    height: 40px;
    font-size: 12px;
    color: #333;
  }

  .roomQuery_SupplierTable tr td {
    border: 1px solid #d1d1d1;
    text-align: center;
    padding: 5px 0;
  }

  .roomQuery_SupplierTable .tdLeft {
    text-align: left;
    padding-left: 5px;
  }

  .roomQuery_SupplierTable .redTip {
    text-align: left;
    color: red;
    padding-left: 5px;
  }

  .roomQuery .rq_comSpan {
    font-size: 14px;
    margin-left: 20px;
  }

  .roomQuery .rq_comSpan>span {
    display: inline-block;
    padding: 2px 4px;
    color: #fff;
    border-radius: 5px;
    margin-right: 10px;
  }


  .roomQuery .rq_span1 {
    background-color: #7abd53;
  }

  .roomQuery .rq_span2 {
    background-color: red;
  }
  .roomQuery .rq_span3 {
    background-color: #fb5f7a;
  }
  .roomQuery .hotelLink {
    color: blue;
    text-decoration: underline;
    cursor: pointer;
  }

  .roomQuery .roomNowrap {
    white-space: nowrap;
    display: block;
    text-align: left;
    padding-left: 20px;
  }

  .roomQuery .roomFlightNumber {
    color: #FF0066;
    font-weight: bold;
  }

  .rq_HotelTable {
    padding: 10px 0 0 20px;
    background-color: #ededed;
    border-collapse: collapse;
    border: 1px solid #d2d2d2;
    font-size: 12px;
  }

  .rq_HotelTable th {
    background-color: #ededed;
    padding: 5px 10px;
    text-align: center;
  }

  .rq_HotelTable td {
    background-color: #ffffff;
    padding: 9px 10px;
    color: #333333;
    border: 1px solid #d2d2d2;
  }

  .rq_HotelDetails {
    max-height: 400px;
    overflow: auto;
  }

  .roomQuery .rq_Arrow {
    position: relative;
    top: 3px;
  }

  .SupplierRemarks .el-textarea__inner {
    height: 75px;
  }

  .SP_RemarkTitle {
    vertical-align: top;
    padding-top: 5px;
  }

  .SaveR_Btn {
    margin: 10px 0 0 45%;
  }

  .Add_triangle {
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    border-style: solid;
    border-width: 45px 45px 0 0;
    border-color: #7abd53 transparent transparent
  }

  .Add_triangle::after {
    content: '新增';
    position: absolute;
    top: -42px;
    right: -27px;
    white-space: nowrap;
    color: #FFFFFF;
    font-size: 12px;
  }

  .minus_triangle {
    width: 0;
    height: 0;
    position: absolute;
    left: 0;
    top: 0;
    border-style: solid;
    border-width: 45px 45px 0 0;
    border-color: red transparent transparent
  }

  .minus_triangle::after {
    content: '取消';
    position: absolute;
    top: -42px;
    right: -27px;
    white-space: nowrap;
    color: #FFFFFF;
    font-size: 12px;
  }

  .rQ_HtList,.rQ_HTremark {
    position: relative;
    top:3px;
  }
  .rQ_HTremark span{
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 5px;
    background-color: #fb5f7a;
  }
  .rQ_HtList span {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 5px;
    background-color: red;
  }

  .rq_importNote {
    color: red;
  }

  .rq_disImNote {
    color: #ea6d6d;
  }
  .rq_status{
    height:25px;
  }
  .rq_changeName{
    margin-top:10px;
    color:red;
  }
  .roomQuery_SupplierTable .rq_remark{
    margin-bottom:5px;
  }
  .roomQuery_SupplierTable .rq_reSpan{
    display:inline-block;
    width:75px;
    text-align: right;
  }
  .roomQuery .page-component-up {
    background-color: #fff;
    position: fixed;
    right: calc(8.3% - 60px);
    bottom: 150px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: .3s;
    z-index: 5;
    border:1px solid #ddd;
    box-sizing: border-box;
    line-height: 40px;
    text-align: center;
}
  .roomQuery .page-component-up i{font-size: 36px;color: #bbb;}
  .roomQuery .page-component-up:hover{
    background-color: #EF4455;
    border:1px solid #ec3346;
  }
  .roomQuery .page-component-up:hover i{
    color: #F1f1f1;
  }
  .priceContentDiv {
    overflow: auto;
    max-height: 200px;
  }
  .priceContentDiv>div:first-child {
    margin-bottom:10px;
  }
  .priceContentDiv::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 4px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }
  .priceContentDiv::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 4px;
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    background: #c9c9c9;
  }
  .priceContentDiv::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    background: #ededed;
  }

  .logContact {
    width:90%;
    height:auto;
    margin-top: 20px;
    padding-left:20px;
    position: relative;
  }
  .logContact>div {
    padding:0 0 20px 20px;
    border-left:1px solid #d1d1d1;
  }
  .logContact>div:last-child {
    border:none;
  }
  .AuditLog {
    margin-left:15px;
  }
  .Auditcircle {
      position: absolute;
      width: 10px;
      height: 10px;
      left: 16px;
      background-color: #e95252;
      border-radius: 50%;
  }
</style>
