<template>
  <div class="container">
    <modal class="detail-modal wx-modal" @close="closeModal">
      <div class="m-body" slot="body" >
        <section v-if="type==1">
          <div v-show="showType!='order'">
            <h3 class="m-head border-bottom"><i class="iconfont icon-shanchu" @click="closeModal"></i>费用明细</h3>
            <div class="item flex-box">
              <label for="">套餐价格</label>
              <p class="flex text-r">人均：￥{{Math.ceil(price.perPersonAmount)}}</p>
            </div>
            <div class="item flex-box">
              <label for="">成人</label>
              <p class="flex text-r">×{{adultNum}}</p>
            </div>
            <div class="item flex-box" v-show="childNum>0">
              <label for="">儿童</label>
              <p class="flex text-r">×{{childNum}}</p>
            </div>
            <div class="item price-item" v-if="parseInt(price.voucherAmount)>0 && discountCoupon">
              <p class="old-price">￥{{Math.ceil(price.originalAmount)}}</p>
              <p class="price-tip"><span>已减￥{{price.voucherAmount}}</span></p>
              <p class="text-r">总价：<b class="mColor">￥{{Math.ceil(price.amount)}}</b></p>
            </div>
            <div class="item flex-box" v-else>
              <label for="">总价</label>
              <p class="flex text-r mColor"><b >¥{{Math.ceil(price.amount)}}</b></p>
            </div>

          </div>
          <h3 class="m-head"><i class="iconfont icon-shanchu" @click="closeModal"  v-show="showType=='order'"></i>套餐退改签说明</h3>
          <div class="policy-item flex-box">
            <span class="refundText" v-html="refundText">
            </span>
          </div>
        </section>

        <section v-if="type==2">
          <h3 class="m-head border-bottom"><i class="iconfont icon-shanchu" @click="closeModal"></i>托运行李额</h3>
          <div class="p1" v-html="specialRuleText">
          </div>
        </section>

        <section v-if="type==3">
          <h3 class="m-head border-bottom"><i class="iconfont icon-shanchu" @click="closeModal"></i></h3>
          <bookingsInfo class="h5-bookingsInfo"></bookingsInfo>
        </section>

        <section v-if="type==4">
          <!--<h3 class="m-head border-bottom"><i class="iconfont icon-shanchu" @click="closeModal"></i>酒店详细信息</h3>-->
          <section class="head hotel-navBar-fixed">
              <div class="flex-box head-bar border-bottom">
                <i class="iconfont icon-shanchu icon_back f-l" @click="closeModal"></i>
                <p class="flex text-c textOneLine">{{hotelDetail.name}}</p>
              </div>
              <div class="hotel-navbar flex-box border-bottom">
                <a class="tab-item" v-for="(nav,index) in navbarList" @click="toTab(nav.val)" :class="{active:currNavIndex==nav.val}"><div class="tab-item-label">{{nav.label}}</div></a>
              </div>
          </section>
          <div class="hotel-navbar-wrap" id="hotelInfoWrap">
            <div class="tab-container">
              <div class="tab-container-item" id="tab1">
                <label>酒店简介</label>
                <p class="hotel-p" v-html="hotelDetail.des"></p>
              </div>
              <hr>
              <div class="tab-container-item" id="tab2">
                <label>交通及周边</label>
                <div class="item-cell" v-for="trans in hotelDetail.transportsInfo">
                  <label>{{trans.name}}</label>
                  <div v-for="t in trans.value">
                    <label class="l2">{{t.name}}</label>
                    <p class="gray" style="margin-bottom: 10px">{{t.value}}</p>
                  </div>
                </div>
              </div>
              <hr>
              <div class="tab-container-item" id="tab3">
                <label>政策</label>
                <div class="item-cell" v-for="policy in hotelDetail.policies">
                  <label>{{policy.code | policyName}}</label>
                  <p v-html="policy.value"></p>
                </div>
              </div>
              <hr>
              <div class="tab-container-item" id="tab4">
                <label>设施</label>
                <div class="" v-show="!hotelDetail.featuresNew">
                  <label>通用设施</label>
                  <p class="h-setting"><span v-for="fa in hotelDetail.features"><i class="iconfont icon-gou5"></i>{{fa.name}}</span></p>
                </div>
                <div class="" v-show="hotelDetail.featuresNew">
                  <div v-for="fa in hotelDetail.featuresNew" style="margin-bottom: 20px">
                    <label>{{fa.name}}</label>
                    <p class="h-setting"><span v-for="f in fa.value"><i class="iconfont icon-gou5"></i>{{f}}</span></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section v-if="type==5">
          <h3 class="m-head border-bottom">
            <i class="iconfont icon-shanchu" @click="closeModal"></i>
            {{flightList[0].depCity}}-{{flightList[flightList.length-1].arrCity}}
          </h3>
          <flightInfo :flightInfo="flightList"></flightInfo>
        </section>
      </div>
    </modal>
  </div>
</template>
<script>
  import modal from '../../components/common/modal.vue'
  import flightInfo from './flightInfo.vue'
  import bookingsInfo from '@/components/common/bookingsInfo.vue'
  export default {
    name: '',
    props:{
      modalWidth:'100%',
      modalHeight:'100%',
      type:'',//1明细（退改政策），2行李额 ,3预订须知,4酒店更多信息,5中转航班信息
      showType:''
    },
    data () {
      return {
        discountCoupon:discountCoupon,
        refundText:refundText,
        isLoading:false,
        price:{},
        refundPolicy:[],
        specialRuleText:'',
        adultNum:0,
        childNum:0,
        currNavIndex:0,
        navbarList:'',
        hotelDetail:'',
        scrollPosition:0,
        flightList:[],
      }
    },
    methods: {
      /**关闭模态框*/
      closeModal(){
        this.isLoading=false;
        this.$emit("close");
      },
      menu() {
        if(this.type==4){
          this.scrollPosition = document.getElementById("hotelInfoWrap").scrollTop ;
          if(this.scrollPosition<document.getElementById("tab2").offsetTop){
            this.currNavIndex=0;
          }else if(this.scrollPosition>=(document.getElementById("tab2").offsetTop) && this.scrollPosition<(document.getElementById("tab3").offsetTop)){
            this.currNavIndex=1;
          }else if(this.scrollPosition>=(document.getElementById("tab3").offsetTop) && this.scrollPosition<(document.getElementById("tab4").offsetTop)){
            this.currNavIndex=2;
          }else if(this.scrollPosition>=(document.getElementById("tab4").offsetTop-100)){
            this.currNavIndex=3;
          }
        }
      },
      /*tab到指定位置*/
      toTab(index){
        this.currNavIndex=index;
        var t;
        if(index==0){
          t =0;
        }else if(index==1){
          t=document.getElementById("tab2").offsetTop;
        }else if(index==2){
          t=document.getElementById("tab3").offsetTop;
        }else{
          t=document.getElementById("tab4").offsetTop;
        }
        document.getElementById("hotelInfoWrap").scrollTop=t;
      },
      init(){
        document.getElementById("hotelInfoWrap").addEventListener('scroll', this.menu);
      }
    },
    components:{
      modal,bookingsInfo,flightInfo
    },
    mounted(){

    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  @import "product.styl"
  .wx-modal .modal-body{
    background #f7f7f7
  }
  .m-body{
    .m-head{
      i{
        left auto
        right 20px
      }
    }
    .p1{
      padding 20px
      line-height 24px
      background #ffffff
      font-size 13px
    }
    .item{
      line-height 34px
      padding 0 20px
      box-sizing border-box
      background #fff
      font-size 14px
      label{
        float left
        font-size 14px
      }
      p{
        b{
          font-size 18px
        }
      }
      &.price-item{
        padding-bottom 10px
        line-height 1.6
        .old-price{
          text-align right
          text-decoration line-through
          color #666
        }
        .price-tip {
          text-align right
          span{
            display inline-block
            line-height 1
            padding 2px 3px
            background tipColor
            color #ffffff
            font-size 12px
          }
        }
      }
    }

    .hotel-navBar-fixed{
      width 100%
      height 90px
      .fixedTop{
        height 90px
        padding 0
      }
      .head-bar{
        height 50px
        line-height 50px
        padding 0 20px
      }
      .hotel-navbar{
        width 100%
        height 40px
        line-height 40px
        margin 0
        padding 0 20px
        box-sizing border-box
        background #f7f7f7
      }
    }
    .hotel-navbar-wrap{
      &#hotelInfoWrap{
        position absolute
        width 100%
        height calc(100% - 90px)
        overflow-y auto
        -webkit-overflow-scrolling touch
        background #fff
      }
      .tab-container{
        max-height inherit
        overflow inherit
        .tab-container-item{
          position relative
          padding 10px 20px 0
          label{
            margin 10px 0 15px
          }
          .hotel-p{
            margin-bottom 20px
          }
        }
        hr{
          display block
          width 100%
          height 10px
          margin 0px
          background #f2f6fc
          border none
        }
      }
    }
  }


</style>
