<template>
  <div >

  <div class="paybox">
      <div class="typebox">
         <div :class="{'line':true, 'actline':actIndex == index,'lineShop':item.buyType==0}" 
         @click="actClick(index)" v-for="(item,index) in userInfo.packages" :key="index">
            <div class="left">
               {{item.packageTimeDesc}}
            </div>
            <div class="right">
               <div class="d0"> 
                     <span class="rm">¥</span><span class="s1">{{item.money}}</span>
               </div>

                  <!-- <div class="d0"> 
                     <span class="rm">¥</span><span class="s1">{{item.params.payAmount}}</span>
                     <span class="s2">¥{{item.params.price}}</span></div>
                  <div class="d1">(立省{{item.params.discount}})</div> -->
               </div>
                <img v-if="actIndex==index" class="gou" src="@/assets/img/gou.png" alt="">
                <img v-if="item.type=='铂金品牌'" class="te" src="@/assets/img/vp1.png" alt="">
                <img v-if="item.type=='普通品牌'" class="te" src="@/assets/img/vp0.png" alt="">
                <!-- <img v-if="item.buyType==0" class="noSale" src="@/assets/img/noSale.png" alt=""> -->
         </div>

      </div>
      <!-- <div class="inputBox">
          自定义金额：<el-input v-model="input" placeholder="请输入金额"></el-input>
      </div> -->
      <div class="showinfo">
         <div class="linep">
            <span class="s1">品牌信息：</span>
            <span class="s2">{{userInfo.brandName}}</span>
         </div>
         <div class="linep">
               <span class="s1">开通套餐：</span>
               <span class="s2">{{payName}}</span>
            </div>
         <div class="linep">
               <span class="s1">支付方式：</span>
               <span class="s2">
                     <img class="icon" src="@/assets/img/xuan.png" alt="">
                     <img class="icon" src="@/assets/img/pay.png" alt="">
                  支付宝
               </span>
            </div>
         <div class="linep">
               <span class="s1">支付金额：</span>
               <span class="s2"><span class="smoney">{{payAmount}}</span></span><span>元</span>
            </div>
         <div class="linep">
            <span class="s1">有效期限：</span>
            <span class="s2"><span class="">{{endDate}}</span></span>
         </div>
         <div class="tips">注：如有减免抵扣，请线上付全款后咨询客服线下返账</div>
      </div>
      <div class="btnpay" @click="getorder">
        <el-button type="primary" size="medium"> {{shengji?'确认升级':'确认续费'}}</el-button>
        </div>
  </div>
  </div>
</template>

<script>
// 导入组件
// import * as getHttp from '../api/demo/app'
import { _getStorage } from '@/utils/utils'
export default {
  name: 'vippay',
  data () {
    return {
      payList:[ {
            "seqid": "16601001", 
            "dictid": "166", 
            "parentid": "16601", 
            "name": "包年", 
            "sort": "0", 
            "extend1": null, 
            "extend2": "", 
            "extend3": "", 
            "extend4": null, 
            "required": null, 
            "lgmDictContentList": null, 
            "params": {
                "price": 9999, 
                "payAmount": 3650, 
                "discount": 6349, 
                "title": "包年", 
                "count": 12, 
                "sptitle": "特惠", 
                "endDate": "2021-04-11", 
                "canBuy": 1
            }, 
            "remarkList": null
        }],
      actIndex:0,
      payAmount:0,
      payName:'包年',
      userInfo:'',
      packageId:'',
      userId:'',
      endDate:'',
      input:'',
      brandId:'',
      shengji:false
    }
  },
  props:{
    //接收参数
  },
  mounted() {
    // 时间钩子
    // this.init()
   let { brandId } = _getStorage('info');
   this.brandId = brandId;
   this.getpayInfo();
   this.shengji = this.$route.query.shengji;
   // if(this.$route.query.shengji){
   //    this.open()
   // }
  },
  methods:{
     
    // 执行方法
     open() {
         this.$message({
          message: '支付成功，正在审核请等待1~3个工作日，审核结果将会以短信方式告知！',
          type: 'success'
        });
      },
    
         getpayInfo(){
            this.$axios.get('/annualfee/payInfo',{
               params:{
                  brandId:this.brandId
               }
            }).then((res)=>{
               let {data,code} = res.data;
               if(code == 200){

                  this.userInfo = data;
                  if(data.packages.length>0){
                     this.packageId = data.packages[0]['packageId'];
                     this.payName =data.packages[0]['packageName'];
                     this.payAmount=data.packages[0]['money'];
                     this.endDate = data.packages[0]['expire'];
                  }
                  
               }
            }).catch(()=>{})
         },
          actClick(index){
            this.actIndex = index;
            let data = this.userInfo;
            this.packageId = data.packages[index]['packageId'];
            this.payName =data.packages[index]['packageName'];
            this.payAmount=data.packages[index]['money'];
            this.endDate = data.packages[index]['expire'];
          },
          //创建订单
          getorder(){
             this.$axios.post('/annualfee/order',{
               brandId: this.brandId,
               packageId: this.packageId
             }).then(res=>{
                let {code,data} =res.data;
                if(code ==200){
                   this.orderId =data.orderId;
                   this.getPay()
                }
             })
          },
         //  支付
           getPay(){

              this.$axios.get('/annualfee/pay',{
               params:{
                  orderId:this.orderId
               }
             }).then((res)=>{
                let { code,data } = res.data;

               document.querySelector('body').innerHTML = res.data.data;  
               document.forms[0].submit()

            }).catch(()=>{})
          },

  },
  components:{
    // 传入组件
  }
}
</script>

<style lang="scss" scoped>
/deep/ .inputBox{
  width: 300px;
  .el-input{
      display: inline-block;
      width: 200px;
  }
}
.paybox{
    padding: 50px 50px;
    width: 100%;
    margin: 0 auto;
    background: #fff;
    min-height: 700px;
    box-sizing: border-box;
 }
.typebox{
   overflow: hidden;
   margin: 30px 0;
   padding: 30px 0;
   .line{
      float: left;
      width: 220px;
      height: 88px;
      /* border:1px solid red; */
      margin-left: 30px;
      // overflow: hidden;
      border:2px solid #dddddd;
      border-radius: 4px;
      position: relative;
      cursor: pointer;
      margin-bottom: 20px;
    }
}

.typebox .line:nth-child(4n+1){
   margin-left: 0;
}
.typebox .line .te{
   display: block;
    position: absolute;
    top: -10px;
    left: -2px;
    width: 109px;
    height: 25px;
    background-size: 100% 100%;
}
.typebox .line.actline {
   border:2px solid #bb8b51;
}
.typebox .line.actline .gou{
   display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 33px;
  height: 32px;
  background-size: 100% 100%;
}
.typebox .line.lineShop {
   position: relative;
   border:2px solid rgba(0,0,0,0.5);

   &:after{
      display: block;
      content: "";
      width: 100%;
      height: 100%;
      position:absolute;
      left: 0;
      top: 0;
      background-color: rgba(0,0,0,0.5);
      z-index: 10;
               color: #fff;

   }
   .noSale{
      width: 90px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      z-index: 11;

   }
}
.typebox .line .left{
   background-color: #EDEDED;
   width: 25px;
   padding: 0 11px;
   height: 100%;
   text-align: center;
   float: left;
   color: #727272;
   font-size: 16px;
   display: flex;
    align-items: center;
}
.typebox .line .right{
   background-color: #fff;
   width: 151px;
   // margin-top: 14px;
   // margin-left: 15px;
   box-sizing: border-box;
   float: left;
   text-align: center;
}
.line .right .d0{
   color: #E2534E;
   line-height: 82px;
}
.line .right .d0 span{
   display: inline-block;
}
.line .right .d0 .rm{
 font-size: 16px;
 font-weight: 800;
}
.line .right .d0 .s1{
   font-size: 26px;
   font-weight: bold;
   padding-right: 4px;
}
.line .right .d0 .s2{
   color: #727272;
   font-size: 14px;
   text-decoration:line-through;
}
.line .right .d1{
   color: #E2534E;
   font-size: 16px;
}
.showinfo .linep{
   color: #3A3c53;
   font-size: 14px;
   padding: 10px 0;
   font-weight: bold;
}
.linep span{
   display: inline-block;
   vertical-align: middle;
}
.tips{color: #999; 
padding: 10px 0;
font-size: 12px;
padding-left: 11px;}
.linep .s2{

}
.linep .s1{
   min-width: 80px;
   text-align: right;
   padding-right: 10px;
}
.linep .icon{
   width: 18px;
}
.smoney{
   color: #E2534E;
   font-size: 16px;
}

.paybox .btnpay{
  //  width:127px;
  //  height:36px;
  //  text-align: center;
  //  line-height: 36px;
  //  background:rgba(226,83,78,1);
  //  border-radius:4px;
   // margin-left: 80px;
  //  color: #fff;
   margin-top: 30px;
   margin-left: 11px;
   cursor: pointer;
   font-size: 16px;
}
</style>
