<style scoped>
  .ModifyHotelOrder-OrderId {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-radius: 5px;
    background: #ffffff;
    font-size: 12px;
    margin-top: 15px;
  }

  .ModifyHotelOrder-OrderId>div {
    display: flex;
    align-items: center;
  }

  .ModifyHotelOrder-OrderId>div:first-child {
    color: #9E9E9E;
  }

  .ModifyHotelOrder-OrderId>div:nth-child(2) {
    color: #E76A42;
  }

  .ModifyHotelOrder-OrderId>div:nth-child(2)>span {
    font-weight: bold;
    color: #009EF7;
  }

  .ModifyHotelOrder-OrderId>div:nth-child(2)>span:first-child {
    color: #E65152;
  }

  .ModifyHotelOrder-OrderId>div:nth-child(3) {
    color: #F25971;
  }

  .ModifyHotelOrder-OrderId>div:nth-child(3)>span:first-child {
    font-size: 16px;
  }

  .ModifyHotelOrder-OrderId>div:nth-child(3)>b {
    font-size: 20px;
  }

  .ModifyHotelOrder-OrderId>div:last-child {
    display: flex;
    font-size: 16px;
  }

  .ModifyHotelOrder-OrderInfor {
    padding: 10px 15px;
    border-radius: 5px;
    background: #ffffff;
    margin-top: 15px;
  }

  .ModifyHotelOrder-OrderInfor p {
    color: #C1C1C1;
    font-size: 14px;
  }

  .ModifyHotelOrder-content {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    margin-top: 15px;
  }

  .content-box {
    width: 320px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 5px;
    margin: 0 10px 10px 0;
    overflow: hidden;
  }

  .content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10px;
  }

  .content-header span {
    font-size: 17px;
  }

  .content-header i {
    color: #009EF7;
    cursor: pointer;
  }

  .content-header i:last-child {
    color: #F1416C;
    margin-left: 15px;
  }

  .content-Car {
    background: #ECEFF1;
    border-radius: 5px;
    padding: 10px 5px;
    margin: 0 10px;
    margin-bottom: 10px;
    font-size: 12px;
  }

  .content-Car-title {
    font-size: 14px;
    font-weight: 400;
    color: #009EF7;
    padding: 0 5px 5px 5px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px dashed rgba(96, 125, 139, 0.2);
  }

  .content-Car-title span {
    width: 80%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .content-Car-title i {
    color: #F1416C;
    cursor: pointer;
    display: none;
  }

  .content-Car-title:hover i {
    display: block;
  }

  .content-Car-num {
    padding: 7px 5px;
    align-items: center;
  }

  .content-Car-num>div:last-child .num-roomtype {
    padding: 0;
  }

  .num-roomtype {
    padding: 0 0 15px 0;
    color: #181C32;
  }

  .num-roomtype span {
    color: #6F8A96;
    display: block;
    padding: 3px 0 0 0;
  }

  .num-roomnum {
    color: #9E9E9E;
  }

  .num-roomnum span {
    color: #F5831E;
    font-weight: bold;
  }

  .noroomtype {
    padding: 10px 5px;
    color: #6F8A96;
    font-size: 12px;
  }

  .content-Car-shui {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #6F8A96;
    border-top: 1px dashed rgba(96, 125, 139, 0.2);
    border-bottom: 1px dashed rgba(96, 125, 139, 0.2);
    padding: 7px 0;
    margin: 0 5px;
  }

  .content-Car-heji {
    padding: 7px 5px 0 0;
    display: flex;
    justify-content: end;
    font-size: 14px;
    color: #1CA8F6;
  }

  .content-Car-heji span span {
    font-size: 15px;
    font-weight: bold;
  }

  .content-picker-text {
    height: 192px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 14px;
  }

  .content-picker-text>div:first-child span {
    border: 1px solid #47B6F5;
    padding: 5px 15px;
    border-radius: 3px;
    cursor: pointer;
    color: #47B6F5;
  }

  .content-picker-text>div:last-child {
    margin-top: 20px;
  }

  .content-picker-text>div:last-child span {
    color: #A5B5BE;
  }

  /deep/.content-Car .el-input-number .el-input__inner {
    height: 30px;
  }

  /deep/.content-Car .el-input-number {
    width: 100%;
    line-height: 30px;
  }

  /deep/.content-Car .el-input-number__increase {
    width: 25px !important;
    height: 28px !important;
  }

  /deep/.content-Car .el-input-number__decrease {
    width: 25px !important;
    height: 28px !important;
  }

  /deep/.content-Car .el-input-number .el-input__inner {
    padding-left: 20px;
    padding-right: 20px;
  }

</style>

<template>
  <div>
    <div class="ModifyHotelOrder-OrderId" v-if="order">
      <div>
        {{$t('fnc.ddbianhao')}} {{ order.OrderNo }}
      </div>
      <div>{{$t('objFill.bencixingcheng')}}<span
          v-if="order.DetailList">{{ order.DetailList.length }}</span>{{$t('objFill.tianruzhu')}}<span>{{ order.HotelCount }}</span>{{$t('objFill.gejiudianm')}}</div>
      <div>{{$t('objFill.dindianfukuan')}}：<span>
          {{order.CurrencyCode}}</span><b v-if="order.Money">{{ moneyFormat(order.Money) }}</b></div>
      <div>
        <button class="hollowFixedBtn" @click="cancelOrder">{{$t('sm.exitOrder')}}</button>
        <button class="normalBtn" @click="saveOrderHandler">{{$t('objFill.v101.hote.baocundind')}}</button>
      </div>
    </div>
    <div class="ModifyHotelOrder-OrderInfor">
      <p>{{$t('sm.dingdanxinxi')}}</p>
      <div>
        <el-form label-width="60px" :model="order" :rules="rules" ref="order">
          <el-row :gutter="20">
            <el-col :span="4">
              <el-form-item :label="$t('system.query_type')" prop="OrderType">
                <el-select v-model="order.OrderType">
                  <el-option v-for="item in cacheHotels" :key="item.ID" :label="item.Name" :value="item.ID"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <template v-if="order.OrderType==1">
              <el-col :span="4">
                <el-form-item :label="$t('system.query_name')" prop="ContactName">
                  <el-input v-model="order.ContactName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-form-item :label="$t('hotel.table_tel')" prop="ContactNumber">
                  <el-input v-model="order.ContactNumber"></el-input>
                </el-form-item>
              </el-col>
            </template>
            <el-col :span="4" v-else>
              <el-form-item :label="$t('visa.v_tuanhao')" prop="TCNum">
                <el-input v-model="order.TCNum"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('pub.pubRemark')" prop="">
                <el-input :placeholder="$t('rule.EnterMark')" v-model="order.Remark"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="ModifyHotelOrder-content">
      <div style="display: flex;flex-wrap: wrap;align-items: flex-start;">
        <div class="content-box" v-for="(x, xi) in order.DetailList">
          <div class="content-header">
            <span>{{ x.key }}</span>
            <div>
              <i class="el-icon-plus" @click="chosenNewHotel(x.key)"></i>
              <i class="el-icon-delete-solid" @click="removeHotelHandler(xi, -1)"></i>
            </div>
          </div>
          <div>
            <div class="content-Car" v-for="(y, yi) in x.data">
              <p class="content-Car-title">
                <span>{{ y.HotelName }}</span>
                <i class="el-icon-delete-solid" @click="removeHotelHandler(xi, yi)"></i>
              </p>
              <div class="content-Car-num">
                <div v-for="(z, i) in y.RoomList">
                  <el-row :gutter="20" style="display: flex;align-items: center;justify-content: space-between;">
                    <el-col :span="8">
                      <div class="num-roomtype">
                        <p>{{ z.RoomInfo.TypeName }}</p>
                        <span>{{ moneyFormat(z.Unit_Price) }}/{{$t('hotel.hotel_people')}}</span>
                      </div>
                    </el-col>
                    <el-col :span="7">
                      <p class="num-roomnum">{{$t('hotel.hotel_expect')}}<span>{{ z.Number }}</span>{{$t('hotel.hotel_roomList')}}</p>
                    </el-col>
                    <el-col :span="9">
                      <el-input-number v-model="z.PeopleNumber" :min="0" :step="1" step-strictly @change="calcPeople">
                      </el-input-number>
                    </el-col>
                  </el-row>
                </div>
              </div>
              <div class="noroomtype">
                <template v-if="!y.HaveOtherRoom">
                  {{$t('objFill.wuqitkyfx')}}
                </template>
                <template v-else>
                  {{$t('objFill.shiyqtfx')}}
                </template>
              </div>
              <div class="content-Car-shui">
                <span>{{$t('objFill.chengsshui')}}： {{ moneyFormat(y.TaxesPrice) }}/{{$t('hotel.hotel_people')}}</span>
                <span>{{$t('objFill.rutangshui')}}： {{ moneyFormat(y.PriceInTangTax) }}/{{$t('hotel.hotel_people')}}</span>
              </div>
              <div class="content-Car-heji">
                <span>{{$t('fnc.a_heji')}}：<span>{{y.CurrencyCode}}
                     {{ moneyFormat(y.HotelMoeny) }}</span></span>
              </div>
            </div>
          </div>
        </div>
      </div>


      <div class="content-box" style="margin: 0;">
        <div class="content-header" style="padding: 9px 10px;">
          <span>{{$t('objFill.xiingrqyd')}}</span>
          <div>
            <!--:picker-options="beforeCheck"-->
            <el-date-picker class="w150" v-model="newDate" type="date" value-format="yyyy-MM-dd" :placeholder="$t('objFill.qingxuanzherq')"
              ></el-date-picker>
          </div>
        </div>
        <div class="content-Car content-picker-text">
          <div>
            <span @click="chosenNewHotel('')">{{$t('objFill.xuanjiudian')}}</span>
          </div>
          <div v-show="!newDate">
            <span>*<span>{{$t('objFill.qingxxxyyddrq')}}</span></span>
          </div>
        </div>
      </div>

    </div>
    <el-dialog v-show="showChosenHotel" custom-class="w800" :title="$t('objFill.jiudianjs')" :visible.sync="showChosenHotel" center>
      <ChosenHotel :newDate="newDate" @finish="finishHanler"></ChosenHotel>
    </el-dialog>
    <el-dialog custom-class="w600" :title="$t('sm.exitOrder')" :visible.sync="cancelOrderDialog">
      <div style="padding-bottom:20px">
        <el-input type="textarea" autofocus rows="5" :placeholder="$t('objFill.quxiaodindanyy')" clear="w300" v-model="cancelRemark">
        </el-input>
        <el-row :gutter="20" style="margin-top: 20px;">
          <el-col :span="24" style="text-align: right;">
            <input type="button" class="normalBtn" :value="$t('sm.exitOrder')" @click="cancelOrderHandler" />
            <input type="button" class="hollowFixedBtn" :value="$t('pub.closeSel')" @click="cancelOrderDialog = false" />
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import ChosenHotel from './components/ChosenHotel.vue';
  export default {
    components: {
      ChosenHotel
    },
    data() {
      return {
        newDate: this.getBeforeDate(0, new Date().Format("yyyy-MM-dd")),
        orderId: 0,
        order: {}, //下单信息
        loading: false,
        status: this.getHotelOrderStatus(), //状态
        rooms: this.getHotelRoomType(), //房型
        limitGuestNum: [2, 1, 1, 3, 1],
        showChosenHotel: false,
        tempHotels: {
          key: '',
          data: []
        },
        cacheHotels: [{
            Name: this.$t('objFill.shanke'),
            ID: 1
          },
          {
            Name: this.$t('active.cl_team'),
            ID: 2
          }
        ],
        rules: {
          OrderType: [{
            required: true,
            message: this.$t('system.ph_type'),
            trigger: 'change'
          }],
          ContactName: [{
            required: true,
            message: this.$t('objFill.qingshuruskxm'),
            trigger: 'blur'
          }],
          ContactNumber: [{
              required: true,
              message: this.$t('rule.EnterPNum'),
              trigger: "blur"
            },
            {
              pattern: this.$commonUtils.Regex.el_ISphone,
              message: this.$t('rule.EnterRightNum')
            }
          ],
          TCNum: [{
            required: true,
            message: this.$t('objFill.v101.activity.rul2.t9'),
            trigger: 'blur'
          }],
        },
        beforeCheck: {
          disabledDate: time => {
            let endTime = new Date(this.getBeforeDate(-19, new Date().Format("yyyy-MM-dd")));
            return time && endTime.getTime() >= time.getTime();
          }
        },
        pagesTitle: '',
        cancelRemark: '',
        cancelOrderDialog: false
      };
    },

    methods: {
      // 确定下单
      submit() {
        this.$refs['order'].validate((valid) => {
          if (valid) {
            this.saveOrderHandler()
          } else {
            return false;
          }
        });
      },
      // 保存订单
      saveOrderHandler() {
        if (this.loading) return
        let detailList = []
        this.order.DetailList.forEach((x) => {
          detailList.push(...x.data)
        })
        detailList.forEach((x) => {
          x.RoomList = x.RoomList.filter((y) => y.Number > 0)
        })
        detailList = detailList.filter((x) => x.RoomList.length > 0)
        let parameter = JSON.parse(JSON.stringify(this.order))
        parameter.DetailList = detailList
        this.loading = true
        this.apipost("dict_post_SetSaleCustomerOrder", parameter,
          res => {
            this.loading = false;
            if (res.data.resultCode == 1) {
              this.Success(this.$t('tips.baocunchenggong'));
              let path = ''
              if (this.pagesTitle == '销售') {
                path = 'singleProductHotelOrder'
              }
              if (this.pagesTitle == 'OP') {
                path = 'singleProductHotelOrderOP'
              }
              if (!this.pagesTitle) return
              this.$router.push({
                name: path
              });
            } else {
              this.Error(`${this.$t('sm.xiadan')}${this.$t('objFill.shibai')}`)
            }
          },
          err => {
            this.Error(err.message)
            this.loading = false
          }
        );
      },
      removeHotelHandler(x, y) {
        let cando = false
        if (y > -1) {
          cando = this.order.DetailList.length > 1 || this.order.DetailList[0].data.length > 1
        } else {
          cando = this.order.DetailList.length > 1
        }

        if (cando) {
          this.deleteHotelsHandler(x, y)
        } else {
          this.cancelOrder()
        }
      },
      // OP取消订单
      cancelOrderHandler() {
        if (this.loading) return;
        if (this.cancelRemark == "") {
          this.Error(this.$t('objFill.quxiaodindanyy'));
          return;
        }
        this.loading = true
        let that = this
        that.$confirm(this.$t('objFill.shifouquxiaodd'), this.$t('tips.tips'), {
          confirmButtonText: this.$t('pub.sureBtn'),
          cancelButtonText: this.$t('pub.cancelBtn'),
          type: 'warning'
        }).then(() => {
          this.apipost(
            "dict_post_CancelAdminCustomerOrder", {
              OrderId: this.orderId,
              CancelRemark: this.cancelRemark
            }, res => {
              if (res.data.resultCode == 1) {
                this.Success(res.data.message);
                let path = 'singleProductHotelOrderOP'
                if (!this.pagesTitle) return
                this.$router.push({
                  name: path
                });
              } else {
                this.Error(res.data.message);
              }
              this.loading = false;
            },
            err => {
              this.loading = false;
            });

        }).catch(() => {
          this.loading = false
        })
      },
      // 取消订单
      cancelOrder() {
        if (this.pagesTitle != '销售') {
          this.cancelOrderDialog = true
        } else {
          if (this.loading) return;
          this.loading = true
          let that = this
          that.$confirm(this.$t('objFill.shifouquxiaodd'), this.$t('tips.tips'), {
            confirmButtonText: this.$t('pub.sureBtn'),
            cancelButtonText: this.$t('pub.cancelBtn'),
            type: 'warning'
          }).then(() => {
            this.apipost("dict_post_CancelSaleCustomerOrder", {
              OrderId: this.orderId
            }, res => {
              this.loading = false
              if (res.data.resultCode == 1) {
                this.Success(res.data.message);
                let path = 'singleProductHotelOrder'
                if (!this.pagesTitle) return
                this.$router.push({
                  name: path
                });
              } else {
                this.Error(res.data.message);
              }
            }).catch(err => {
              this.Error(err.message)
              this.loading = false
            })
          }).catch(() => {
            this.loading = false
          })
        }
      },
      //删除酒店
      deleteHotelsHandler(x, y) {
        let that = this
        that.$confirm(
          `${this.$t('objFill.shifouquedinsc')}${this.order.DetailList[x].key}${y > -1 ? this.order.DetailList[x].data[y].HotelName : ''}？`, this.$t('tips.tips'), {
            confirmButtonText: this.$t('pub.sureBtn'),
            cancelButtonText: this.$t('pub.cancelBtn'),
            type: 'warning'
          }).then(() => {
          if (y > -1) {
            this.order.DetailList[x].data.splice(y, 1)
            if (this.order.DetailList[x].data.length == 0) {
              this.order.DetailList.splice(x, 1)
            }
          } else {
            this.order.DetailList.splice(x, 1)
          }
          this.cancelHotelCount()
        }).catch(() => {

        });
      },

      finishHanler(h) {
        this.showChosenHotel = false
        let hp = h.subList[0].PriceList[0]
        //#region 組裝對象
        let hotel = {
          ContractUrl: null,
          CurrencyId: hp.CurrencyId,
          CurrencyName: '日元',
          CustomerPayType: 0,
          Date: h.subList[0].DateStr.replace(/-/g, '/'),
          Destription: null,
          HaveOtherRoom: false,
          HotelId: h.HotelId,
          HotelMoeny: 0.0,
          HotelName: h.HotelName,
          HotelStatus: 1,
          HotelStatusName: '暂定',
          Id: 0,
          ImageList: h.ImageList,
          PeopleNum: 0,
          PriceInTangTax: hp.PriceInTangTax,
          ReserveRoomNo: null,
          RoomList: [],
          TaxesPrice: hp.TaxesPrice
        }
        this.rooms.forEach((x) => {
          if (hp[x.Field ? x.Field : ''] > 0) {
            hotel.RoomList.push({
              Destription: '',
              IsSelf: true,
              Money: 0,
              PeopleNumber: 0,
              Number: 0,
              RoomInfo: x,
              RoomType: x.TypeId,
              RoomName: x.TypeName,
              Unit_Price: hp[x.Field ? x.Field : '']
            })
          }
        })
        //#endregion
        let i = this.order.DetailList.findIndex((x) => x.key == hotel.Date)
        if (i == -1) {
          this.order.DetailList.push({
            key: hotel.Date,
            data: [hotel]
          })
          this.order.DetailList.sort((x, y) => {
            return new Date(x.key).getTime() - new Date(y.key).getTime()
          })
        } else {
          let y = this.order.DetailList[i].data.findIndex((x) => x.HotelId == hotel.HotelId)
          if (y == -1) this.order.DetailList[i].data.push(hotel)
        }

        if (hotel.Date == this.tempHotels.key) {
          this.tempHotels.key = ''
          this.tempHotels.data = []
        }
        this.cancelHotelCount()
      },
      chosenNewHotel(key) {
        if (key) {
          this.newDate = key
        }
        if (!this.newDate) return this.Error(this.$t('objFill.qingxxzrq'))
        this.showChosenHotel = true
      },
      // 计算房间
      calcPeople(hotel) {
        this.order.DetailList.forEach(x => {
          x.data.forEach(y => {
            y.RoomList.forEach(z => {
              let t = z
              t.Number = Math.ceil(t.PeopleNumber / this.limitGuestNum[t.RoomType - 1])
              t.Money = t.PeopleNumber * t.Number
              this.calcMoney(y)
            })
          })
        })

      },
      calcMoney(hotel) {
        let money = 0.0
        let peoples = 0
        hotel.RoomList.forEach((x) => {
          money += x.Unit_Price * x.PeopleNumber
          peoples += x.PeopleNumber
        })
        money += peoples * (hotel.TaxesPrice + hotel.PriceInTangTax)
        hotel.PeopleNum = peoples
        hotel.HotelMoeny = money
        this.cancelHotelCount()
      },
      cancelHotelCount() {
        this.order.HotelCount = 0
        this.order.Money = 0
        this.order.DetailList.forEach((x) => {
          this.order.HotelCount += x.data.length
          x.data.forEach((y) => {
            this.order.Money += y.HotelMoeny
          })
        })
      },
      initOrderDetails() {
        this.apipost("dict_post_GetMySaleCustomerOrderInfo", {
            OrderId: this.orderId
          },
          r => {
            this.loading = false;
            if (r.data.resultCode == 1) {
              this.order = r.data.data
              this.order.typeInfo = this.status.find(y => y.StatusId == this.order.OrderStatus) ? this.status[1] : {}
              this.order.DetailList.forEach((y) => {
                let PeopleNum = 0
                y.RoomList.forEach((z) => {
                  z.RoomInfo = this.rooms.find(r => r.TypeId == z.RoomType) ? this.rooms[0] : {}
                  PeopleNum += z.PeopleNumber
                  z.IsSelf = true
                })
                y.PeopleNum = PeopleNum
                // this.loadOtherRoom(y)
              })
              this.order.HotelCount = this.order.DetailList.length

              this.order.DetailList = this.groupBy(this.order.DetailList, (x) => {
                return x.Date
              })

            } else {
              this.Error(r.data.message);
            }
          },
          err => {}
        );
      },
      groupBy(array, f) {
        const groups = {}
        array.forEach((item) => {
          const group = JSON.stringify(f(item));
          groups[group] = groups[group] || [];
          groups[group].push(item);
        });
        return Object.keys(groups).map((group) => {
          return {
            key: group.replace(/\"/g, ""),
            data: groups[group]
          };
        });
      },
      loadOtherRoom(hotel) {
        let searchObj = {
          HotelChooseArray: [hotel.HotelId],
          StartDate: hotel.Date,
          EndDate: hotel.Date,
          Country: '651',
          Province: 0,
          City: 0,
          OutBranchId: -1,
          Star: 0,
          PriceLevel: 0,
          Supplier: 0,
          MaxPrice: 0,
          MinPrice: 0,
          pageIndex: 1,
          pageSize: 10,
          pageCount: 0
        }
        this.apipost("dict_post_HotelOffer_GetClientHotelStatics", searchObj,
          r => {
            if (r.data.resultCode == 1) {
              if (r.data.data.pageData.length > 0) {
                let temp = r.data.data.pageData[0].subList[0].PriceList[0]
                this.rooms.forEach((x) => {
                  if (hotel.RoomList.findIndex((y) => y.RoomType == x.TypeId) == -1 && temp[x.Field ? x.Field :
                      ''] > 0) {
                    hotel.RoomList.push({
                      Description: '',
                      Money: 0,
                      PeopleNumber: 0,
                      RoomType: x.TypeId,
                      RoomTypeName: x.TypeName,
                      Unit_Price: temp[x.Field ? x.Field : ''],
                      RoomInfo: x,
                      IsSelf: false
                    })
                    hotel.HaveOtherRoom = true
                  }
                })
              }
            } else {
              this.Error(r.data.message);
            }
          })
      },
      // 房型
      getHotelRoomType(getNormal) {
        let rooms = []
        if (getNormal) {
          rooms.push({
            TypeId: 0,
            TypeName: this.$t('OrderList.rooms.default')
          })
        }
        let roomLangs = [this.$t('Operation.Op_standard'), this.$t('salesModule.BigRoomNum'), this.$t('OrderList.rooms.sing'), this.$t('OrderList.rooms.three'), this.$t('OrderList.rooms.driver')]
        let fileds = ['CostPrice', 'BidroomPrice', 'SingleroomPrice', 'AddBedPrice', 'GuideRoomPrice']
        roomLangs.forEach((x, i) => {
          rooms.push({
            TypeId: (i + 1),
            TypeName: x,
            Field: fileds[i]
          })
        })
        return rooms
      },
      // 状态
      getHotelOrderStatus() {
        let status = []
        let text = [this.$t('OrderList.orderStatus.normal'), this.$t('OrderList.orderStatus.apply'), this.$t('OrderList.orderStatu.check'), this.$t('OrderList.orderStatu.cancel'), this.$t('OrderList.orderStatu.sun')]
        let color = ['', 'positive', 'dark', 'orange', 'negative']
        let icons = ['', 'update', 'done', 'offline_bolt', 'cached']
        text.forEach((x, i) => {
          status.push({
            StatusId: i,
            StatusName: x,
            Icon: icons[i],
            Color: `text-${color[i]}`
          })
        })
        return status
      },


    },
    mounted() {
      this.pagesTitle = this.$route.query.pagesTitle
      this.orderId = this.$route.query.id
      this.initOrderDetails()
    },
  };

</script>

<style>

</style>
