<template>
  <div class="pay-wrap">
    <div class="title">订单支付</div>
    <div class="tipstext">{{ title }}</div>
    <div class="money">{{ money }}</div>
    <div class="choosetext">选择支付方式</div>
    <ul class="pay-way">
      <li v-for="(item, index) in payArr" :key="index" :class="{checkedClass : index===currentId}" @click="currentId = index">
        <span></span>
        {{ item }}
      </li>
    </ul>
    <div class="commit-btn" @click="commitsure">确认支付</div>
  </div>
</template>

<script>
export default {
  name: 'Pay',
  props: {
    title: {
      type: String,
      default: ''
    },
    money: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      payArr: ['支付宝支付', '微信支付'],
      currentId: 0
    }
  },
  methods: {
    commitsure() {
      alert(this.currentId)
    }
  }
}
</script>

<style lang="scss" scoped>
  .pay-wrap {
    width: 100%;
    height: 100%;
    background-color: #eff4f5;
    text-align: center;
    .title {
      height: 42px;
      line-height: 42px;
      background-color: rgba(255, 255, 255, .9);
      font-size: 17px;
      color: #4A4A4A;
      font-weight: 500;
    }
    .tipstext {
      margin: 35px auto 35px;
      font-size: 18px;
      font-weight: bold;
      color: rgba(255, 7, 7, 1);
    }
    .money {
      height: 48px;
      line-height: 48px;
      font-size: 48px;
      font-weight: 400;
      color: rgba(74, 74, 74, 1);
    }
    .choosetext {
      padding-left: 10px;
      margin: 60px 0 10px;
      text-align: left;
      font-size: 17px;
      font-weight: 400;
      color: rgba(74, 74, 74, 1);
    }
    .pay-way {
      padding-left: 10px;
      padding-right: 18px;
      background-color: #fff;
      text-align: left;
      cursor: pointer;
      li {
        height: 43px;
        line-height: 43px;
        font-size: 14px;
        font-weight: 400;
        color: rgba(74, 74, 74, 1);
        background-image: url("../assets/unchecked-icon.png");
        background-repeat: no-repeat ;
        background-position: right center ;
        background-size: 18px 18px;
        span {
          width: 24px;
          height: 24px;
          display: inline-block;
          margin-right: 11px;
          vertical-align: middle;
        }
        &:nth-of-type(1) {
          border-bottom: 1px solid rgba(240, 244, 245, 1);
          span {
            background: url("../assets/ali-icon.png") no-repeat;
            background-size: 100% 100%;
          }
        }
        &:nth-of-type(2) {
          span {
            background: url("../assets/wechat-icon.png") no-repeat;
            background-size: 100% 100%;
          }
        }
      }
      .checkedClass{
        background-image: url("../assets/checked-icon.png");
      }
    }
    .commit-btn {
      width: 80%;
      height: 42px;
      line-height: 42px;
      margin: 120px auto 0;
      border-radius: 21px;
      background-color: #75CBBE;
      font-size: 18px;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
    }
  }
</style>
