<template>
  <div class="container bg">
    <section>
      <div class="order-list refundDiv">
        <div class="order-cell" >
          <div class="order-code"><span>订单编号：252458569845</span></div>
          <div class="order-box">
            <h3><span>三亚蜈支洲岛珊瑚酒店 <br>成人×2</span> <i class="price float-r">￥9308</i></h3>
            <p class="p1">04-21 至 04-23</p>
            <span class="order-tip">机＋酒</span>
            <div class="refund-reason">
              <p class="r_cell flex-box"><label for="">退款理由 <span class="red">*</span></label>
                <span class="flex r-span" :class="{}" @click="popupVisible=true">{{refundReason || '请选择'}} <i class="iconfont icon-arrow-right1 float-r"></i></span>
              </p>
              <p class="r_cell"><label for="">退款金额：</label><span class="price">¥1,138 <i class="iconfont icon-gantanhao"></i></span></p>
              <p class="r_cell flex-box"><label for="">备注:</label> <textarea class="flex"></textarea></p>
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-section">
        <div class="fixed_bottom flex-box">
          <div class="b_left flex">
            总价
            <p>¥9,308<a href="JavaScript:void(0)">明细 <i class="iconfont icon-arrow-up"></i></a></p>
          </div>
          <a href="JavaScript:void(0)" class="btn flex noBorderRadius subBtn">提交</a>
        </div>
      </div>
      <!--退款理由 wx-->
      <mt-popup
        v-model="popupVisible"
        position="bottom" class="popup_reason">
        <i class="iconfont icon-guanbi icon_close" @click="closeReasonPop"></i>
        <ul class="reasonUl">
          <li v-for="r in refundReasonList" @click="chooseReason(r)">{{r.name}}<i class="iconfont icon-weixuanzhongyuanquan float-r" :class="{'icon-gou active':refundReason==r.name}"></i></li>
        </ul>
      </mt-popup>
    </section>
  </div>
</template>
<script>
  export default {
    name: '',
    data () {
      return {
        currId:0,
        popupVisible:false,
        refundReasonList:[
          {name:'飞机航班取消',id:0},
          {name:'临时有事，无法在购买时间出行',id:1},
          {name:'其他',id:2},
        ],
        refundReason:'',
        orderNumber:this.$route.params.orderNumber
      }
    },
    methods: {
      chooseReason(r){
        this.refundReason=r.name;
        this.popupVisible=false;
      },
      closeReasonPop(){
        this.popupVisible=false;
      },
      /**申请退款*/
      applyRefund(){
        this.$router.push({path:'/wx/refundSuccess/'+this.orderNumber})
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  @import "order.styl"
</style>
