<template>
  <div class="payment-type">
    <p :class="{'active': order_pay_type === 2}"
       @click="onChange(2)">
      <img
        v-show="order_pay_type === 2"
        alt=""
        class="icon"
        src="./image/ic_select@2x.png">
      <img
        v-show="order_pay_type === 2"
        alt=""
        class="alipay" src="./image/ic_Alipay_sel@2x.png">
      <img
        v-show="order_pay_type !== 2"
        alt=""
        class="alipay" src="./image/ic_Alipay_nor@2x.png">
      <span>支付宝支付</span>
    </p>
    <p :class="{'active': order_pay_type === 1}"
       @click="onChange(1)">
      <img
        v-show="order_pay_type === 1"
        alt=""
        class="icon"
        src="./image/ic_select@2x.png">
      <img
        v-show="order_pay_type === 1"
        alt=""
        class="wechat"
        src="./image/ic_WeChat_sel@2x.png">
      <img
        v-show="order_pay_type !== 1"
        alt=""
        class="wechat"
        src="./image/ic_WeChat_nor@2x.png">
      <span>微信支付</span>
    </p>
  </div>
</template>

<script>
import { platform } from '../../../utils/platform'

export default {
  name: 'index',
  data () {
    return {
      order_pay_type: 2 // 支付方式(1微信2支付宝)
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      if (platform.isWeixin) {
        this.order_pay_type = 1
      } else if (platform.isAlipay) {
        this.order_pay_type = 2
      }
      this.$emit('onChange', this.order_pay_type)
    },
    onChange (val) {
      this.$emit('onChange', val)
      this.order_pay_type = val
    }
  }
}
</script>

<style lang="scss" scoped>
.payment-type {
  display: flex;
  justify-content: center;
  align-items: center;

  p {
    position: relative;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    width: 164px;
    height: 60px;
    border-radius: 4px;
    border: 1px solid #F2F2F2;
    padding-left: 25px;
    background: #fff;

    &:nth-of-type(2) {
      margin-left: 7px;
    }

    &.active {
      background: linear-gradient(90deg, #000000 0%, #525050 100%);

      span {
        color: #FFFFFF;
      }
    }

    .alipay {
      width: 28px;
      height: 28px;
    }

    span {
      margin-left: 8px;
      font-size: 14px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #231916;
      line-height: 20px;
    }

    .wechat {
      width: 26px;
      height: 25px;
    }

    .icon {
      position: absolute;
      right: 0;
      top: 0;
      z-index: 1;
      width: 20px;
      height: 19px;
    }
  }
}
</style>
