<template>
  <sail-page type="loading-view" title="预存电费">
    <div slot="content" class="bill-wrapper">
      <van-nav-bar
        :title="currentTitle"
        left-arrow
        @click-left="back"
      /> 
      <div class="save_infomation">
        <p class="table_title">{{currentCodeName}}</p>
        <p class="code_number">{{currentCodeName === '电表编号'?waterElectricityInfo.ammeterCode:waterElectricityInfo.watermeterCode}}</p>
        <p class="pay_project_info">
          <span class="project_info_name">缴费单位</span>
          <span class="project_info_data">赛嶺公寓</span>
        </p>
        <p class="pay_project_info">
          <span class="project_info_name">租户姓名</span>
          <span class="project_info_data">{{waterElectricityInfo.applicantName}}</span>
        </p>
        <p class="pay_project_info">
          <span class="project_info_name">地址信息</span>
          <span class="project_info_data">{{waterElectricityInfo.regionName}} {{waterElectricityInfo.buildingNum}}栋{{waterElectricityInfo.unit}}单元{{waterElectricityInfo.floor}}{{waterElectricityInfo.roomNum}}</span>
        </p>
      </div>
      <div class="choose_cost">
          <span @click="choose_cost(cost)" v-for="(cost,index) in costItem" :key="index" class="cost" :class="cost.selected ? 'active': ''">
            {{cost.name}}元
            <svg class="icon selected_icon" aria-hidden="true" :class="cost.selected ? 'active_icon': ''">
                 <use xlink:href="#icon-chenggong"/>
            </svg>
          </span>
         <!--  <span @click="choose_cost('200')" class="cost">200元</span>
          <span @click="choose_cost('300')" class="cost" style="margin:0;">300元</span>
          <span @click="choose_cost('400')" class="cost">400元</span>
          <span @click="choose_cost('500')" class="cost">500元</span>
          <span @click="choose_cost('600')" class="cost" style="margin:0;">600元</span> -->
      </div>
       <div class="full-bill">         
          <div class="full-bill_content">
            <div class="activity-pay">
               <p class="activity-pay_txt">付款方式：</p>
               <cube-radio-group v-model="payMethod" :options="payOptions" :hollow-style="true" />
            </div>
          </div>
        </div>


        <van-submit-bar class="gradient-green" 
              :price="price*100"
              label="金额:"
              :loading="loading"
              button-text="立即缴费"
              @submit="onSubmit"
            />
    </div>
  </sail-page>
</template>

<script>
import sailPage from "@/components/sail-page.vue";
import { mapState } from "vuex";
import { Toast } from "vant";
import store from "@/utils/store";
export default {
  components: {
    sailPage,
  },
  computed:{
    ...mapState({
      storeInfo:state => state.serviceModule.waterElectricityInfo, //获取水电信息
      payForm:state => state.serviceModule.payForm     
    }),
    currentTitle:{       
      get(){
        let type = this.$route.params.type; 
        if(type === "electricity"){
          return "预存电费";
        }
        return "预存水费";
           
      },
      set() {

      }
    },
    currentCodeName:{
      get(){
        let type = this.$route.params.type; 
        if(type === "electricity"){
          return "电表编号";
        }
        return "水表编号";
           
      },
      set() {

      }
    }
  },
  mounted(){
    
    this.$store.commit("serviceModule/CLEAR_PAY_FORM");     
  },
  data: function(){
    return {
      message: "",
      value: 1,
      payMethod: "wePay",
      loading:false,
      selected:false,
      price:50,
      payOptions: [
        {
          label: "微信",
          value: "wePay"
        },
        // {
        //   label: '支付宝',
        //   value: 'aliPay'
        // }
      ],
      costItem:[
        {
          name:50,
          selected: true
        },
        {
          name:100,
          selected: false
        },
        {
          name:200,
          selected: false
        },
        {
          name:300,
          selected: false
        },
        {
          name:400,
          selected: false
        },
        {
          name:500,
          selected: false
        },
        {
          name:600,
          selected: false
        },

      ],
      waterElectricityInfo:store("payForm")
        
    }; 
  },
  methods: {
    back() {
      this.$router.push({path:"/lifePayManage"});
    },
    choose_cost(value){
      this.costItem.map(t => {
        t.selected = false;
      });
      value.selected = true;
      this.price = value.name;
    },
    onSubmit() {
      let type = this.$route.params.type; 
      if(type === "electricity") { //电表支付
        this.payForm.billType = 2;
        this.payForm.billTypeName =  "电表";          
        this.payForm.meterCode =  this.waterElectricityInfo.ammeterCode;
      }else {
        this.payForm.billType = 1;
        this.payForm.billTypeName =  "水表";
        this.payForm.meterCode =  this.waterElectricityInfo.watermeterCode;
      }
         
      this.payForm.houseId =  this.waterElectricityInfo.houseId;
      this.payForm.payMoney =  this.price;
      //this.payForm.payMoney = 0.01   // 测试价格
      this.payForm.payStatus =  1;
      this.payForm.payWay =  0;
      this.payForm.regionId =  this.waterElectricityInfo.regionId;
      this.payForm.regionName =  this.waterElectricityInfo.regionName;         
      // 
      // return
      this.loading = true;               
      this.$store.dispatch("serviceModule/payAddMoneyForMeter",this.payForm).then(res => {
        this.loading = false;
        if(res.data.code === 10000){
          //location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxbc03a72497d53424&redirect_uri=http%3a%2f%2fc.sailapartment.com%2fwx%2fwxuser.html&response_type=code&scope=snsapi_base&state=${res.data.data}&connect_redirect=1#wechat_redirect`
          location.href = res.data.data.ccbPay;
        }else {
          res.Toast.fail(res.data.code); 
          return;
        }
           
      });
                            
    }
  }
};
</script>
<style lang="less">
   @nice-bold: #222222;
   @nice-red: #FF2929;
   @nice-gray: #747474;
   .bill-wrapper {
      .van-submit-bar__price span {
        font-weight: bold;
      }
      .van-submit-bar__price {
        color: @nice-gray;
        text-align: left;
        font-size: 15px;
        margin-left: 18%;
      }
      .van-submit-bar .van-button {
        width: 140px;
      }
      .van-submit-bar__price-integer, .van-submit-bar__price-decimal {
        color: @nice-red;
        font-weight: bold;
      }
      .van-submit-bar__price-integer {
        padding-left: 15px;
      }
      
   }
</style>
<style lang="less" scoped>
  .bill-wrapper {
    padding-bottom: 10vh;
    .save_infomation {
      width: 100vw;
      height: 183px;
      margin:15px 0;
      background: #FFFFFF;
      .table_title {
        width: 310px;
        height: 20px;
        padding-top: 16px;
        margin: 16px 24px 0;
        text-align:left;
        font-size:14px;
        color:#585858;
        line-height: 20px;
        
      }
      .code_number {
        width: 310px;
        height:36px;
        margin:0 0 15.5px 24px;
        font-size:30px;
        color:#585858;
        font-weight:600;
        text-align:left;
      }
      .pay_project_info {             
          width: 310px;
          margin:7px 24px;
          height: 20px;
          font-size:14px;
          color:rgba(88,88,88,.63);
          line-height: 20px;
          .project_info_name {
            float: left;
            display: inline-block;
            width: 60px;
          }
          .project_info_data {
            float: left; 
            margin-left: 15px;
          }
        }
    }

    .choose_cost {
      width: 360px;
      height:240px;
      margin: 7px 14px;
      .cost {
        width: 109px;
        height: 72px;
        text-align:center;
        line-height: 72px;
        font-size:26px;
        float: left;
        color:#868686;
        display: inline-block;
        margin:5px 5px 5px 3px;
        background: #FFFFFF;
        box-shadow: 0 0 3px rgba(175,175,175,.18);
        border-radius: 5px;
        position: relative;
        .selected_icon {
          font-size:16px;
          color:#E58E45;
          position: absolute;
          bottom: 0;
          right: 0;
          opacity: 0;
        }
        .active_icon {
           opacity: 1;
        }
      }
      .active {
        color: #E58E45;
        background: rgba(95,206,161,.13);
      }
      

    }
    .full-bill {
      min-height: 150px;
      .full-bill_header {
        margin-top: 40px;
      }
      .header_words {
        font-size: 12px;
        color: red;
        text-align: left;
        margin: 15px;
      }
      .activity-pay {
        padding-bottom: 30.63px;
      }
      .activity-pay_txt {
        color: #222222;
        margin-top: 14.5px;
        margin-bottom: 11.5px;
        margin-left: 18px;
        text-align: left;
      }
      .full-bill_footer {
        position: relative;
        margin-top: 15px;
      }
   }
  }
  
</style>