<template>
  <div class="container bg">
    <section class="">
      <div class="order_head colorBar">
        <headBar class="mine"></headBar>
      </div>
      <div class="w12">
        <p class="w_t">我的订单 > 申请退款</p>
        <div class="order_status">
          <h2 class="w_status">申请退款
            <span class="">总金额：<font>¥2,218</font></span>
            <div class="refundDetail policyBox">明细
              <div class="refundBox">
                <p class="title">价格明细</p>
                <p class="p1">成人：<span class="float-r">¥642×2</span></p>
                <p class="p1">儿童：<span class="float-r">¥442×1</span></p>
              </div>
            </div>
          </h2>
        </div>
        <div class="order_info">
          <p class="o_t pSize">
            <span class="time">2018-04-08  23:13:05</span>
            <span class="o_code">订单号：<i>{{orderNumber}}</i></span>
          </p>
          <div class="o_cell flex-box">
            <span class="o_img"></span>
            <div class="o_hotel">
              <h4>三亚蜈支洲岛珊瑚酒店</h4>
              <p>成人×2 </p>
            </div>
            <div class="o_tip">机+酒</div>
            <div class="o_date">
              <p>出行日期：2018-04-21</p>
              <p>返程日期：2018-04-23</p>
            </div>
            <div class="o_price">退款金额：<font>¥2,218</font></div>
            <div class="o_status policyBox">退款政策
              <div class="refundBox">
                <p class="title">机票退改签政策</p>
                <table class="refundTable" border="0" cellpadding="0" cellspacing="0" >
                  <tr>
                    <td class="line1" rowspan="4">成人</td>
                    <td class="b-bottom"></td>
                    <td class="b-left b-bottom">起飞前<font class="black">2</font>小时前</td>
                    <td class="b-left b-bottom">起飞前<font class="black">2</font>小时后</td>
                  </tr>
                  <tr>
                    <td class="b-right b-bottom">退票费</td>
                    <td class="b-right b-bottom"><font class="red">¥642</font>/人</td>
                    <td class="b-bottom"><font class="red">¥642</font>/人</td>
                  </tr>
                  <tr>
                    <td class="b-right b-bottom">同舱改期费</td>
                    <td class="b-bottom"  colspan="2">不支持</td>
                  </tr>
                  <tr>
                    <td class="b-right">签转条件</td>
                    <td colspan="2">不支持</td>
                  </tr>
                </table>
                <p class="title mtop">酒店退改签政策</p>
                <p class="p2">2018年5月17日23:59之前免费取消  取消费用：<font class="red">¥350</font>/人</p>
              </div>
            </div>
            <div class="o_operation float-r">
              <router-link class="def_btn" :to="'/orderDetail/orderNumber='+orderNumber">查看订单</router-link>
            </div>
          </div>
        </div>
        <div class="refund_info">
          <div class="refund_cell refund_reason flex-box">
            <label for=""><span class="red">*</span>退款理由：</label>
            <p class="tips">
              <span v-for="(r,index) in refundReasonList" :class="{active : index==currId}" @click="currId=r.id">{{r.name}}</span>
            </p>
          </div>
          <div class="refund_cell refund_des flex-box">
            <label for="">备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：</label>
            <p class="">
              <textarea name="" id="" cols="30" rows="10"></textarea>
            </p>
          </div>
          <div class="refund_cell refund_des flex-box">
            <label for=""></label>
            <p class="flex-box">
              <a href="JavaScript:void(0)" @click="applyRefund" class="refund_btn">申请退款</a>
              <span class="r_tip">提交申请后，退款将在1-7个工作日退回到您的支付账户。</span>
            </p>
          </div>
        </div>

      </div>
      <footB style="margin-top: 60px"></footB>
    </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:'/refundSuccess/'+this.orderNumber})
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  /*@import "order.styl"*/
  @import "orderList.styl"
  bg=-webkit-gradient(linear, 0% 25%, 75% 100%, from(#ff825b), to(#ff7065))
  IEbg=-ms-linear-gradient(left,#ff825b 0%,#ff7065 100%)
  Cbg=linear-gradient(left, #ff825b, #ff7065);
  .pSize{
    font-size 12px
    color #999
  }
  .order_head{
    height 62px
    background IEbg
    background bg
    .head_wrap{
      padding 12px 0px 11px
    }
  }
  .w_t{
    margin 38px 0 32px
    font-size 14px
    color: #666
  }
  .order_status{
    margin-bottom 60px
    h2{
      font-size 30px
      color #333
      span{
        margin-left 46px
        font-size 14px
        color #999
        font{
          font-size 24px
          color #fe7065
        }
      }
    }
  }
  .order_info{
    border 1px solid #ebebeb
    margin-bottom 30px
    font-size 14px
    .o_t{
      height 36px
      line-height 36px
      padding-left 20px
      background #f5f5f5
      font-size 12px
      color #999999
      .o_code{
        margin 0 50px
        i{
          font-style normal
          color #484848
        }
      }
      .warning{
        color #fe7065
      }
    }
    .o_cell{
      width 100%
      height 114px
      padding 18px 20px
      box-sizing border-box
      align-items center
      .o_img{
        float left
        display inline-block
        width 78px
        height 78px
        margin-right 12px
        background #e5e5e5
      }
      .o_hotel{
        float left
        width 250px
        align-self flex-start
        h4{
          margin-top 2px
          margin-bottom 12px
          color #333333
        }
        p{
          color #999999
        }
      }
      .o_tip{
        float left
        width 120px
        color #333333
      }
      .o_date{
        float left
        width 226px
        color #999
        p:first-child{
          margin-bottom 16px
        }
      }
      .o_price{
        float left
        width 240px
        color #333
        font{
          font-size 16px
          color #fe7065
        }
      }
      .o_status{
        float left
        width 176px
        color #248afd
      }
      .o_operation{
        width 60px
        a{
          display block
          text-align center
          color #666666
          &:hover{
            color #fe7065;
          }
        }
      }
    }
  }
  .refund_info{
    border 1px solid #fe7065
    padding 30px 20px
    font-size 14px
    .refund_cell{
      margin-bottom 34px
      label{
        width 89px
        line-height 34px
        color #333
        .red{
          color #fe7065
        }
      }
      .tips{
        span{
          display inline-block
          height 34px
          line-height 34px
          margin-right 20px
          padding 0 18px
          border 1px solid #eeeeee
          color #666666
          cursor pointer
          &.active{
            border 2px solid #f23556
            &:hover{
              border 2px solid #f23556
            }
          }
          &:hover{
            border 1px solid #ccc
          }
        }
      }

    }
    .refund_des{
      textarea{
        width 500px
        height 120px
        resize none
        border 1px solid #eeeeee
        box-sizing border-box
        padding 10px
      }
      .refund_btn{
        display inline-block
        width 120px
        height 40px
        line-height 40px
        text-align center
        background #f23556
        color #fff
        border-radius 4px
        &:hover{
          background #f14b68
        }
      }
      .r_tip{
        align-self flex-end
        margin-left 10px
        font-size 12px
        color #999
      }
    }
  }

  .refundDetail{
    position relative
    display inline-block
    padding-bottom 10px
    font-size 14px
    color #248afd
    cursor pointer
    .refundBox{
      width 199px
      height 110px
      left -100px
      top 25px
    }
  }
  .o_status{
    line-height 30px
    position relative
    padding-bottom 0px
    cursor pointer
  }
</style>
