<template>
  <uni-popup type='bottom' ref='popupRef' :mask-click='false' @touchmove.stop.prevent=''>
    <view class='popup-content c-flex-column'>
      <view class='c-flex-row'>
        <image :src='assetsUrl("ic_back.png")' @click.stop='close()' />
        <text>选择支付方式</text>
      </view>

      <view class='c-flex-row' @click.stop='doPayment(PAYMENT_TYPE_WECHAT)'>
        <image :src='assetsUrl("ic_wechat.png")' />
        <text>微信支付</text>
        <image :src='assetsUrl(currentType===PAYMENT_TYPE_WECHAT?"ic_checkbox_active.png":"ic_checkbox_normal.png")' />
      </view>
      <view class='divider' style='margin: 40rpx 0' />
      <view class='c-flex-row' @click.stop='doPayment(PAYMENT_TYPE_BALANCE)'>
        <image :src='assetsUrl("ic_balance.png")' />
        <text>余额（剩余￥{{ userInfo.balance }}）</text>
        <image :src='assetsUrl(currentType===PAYMENT_TYPE_BALANCE?"ic_checkbox_active.png":"ic_checkbox_normal.png")' />
      </view>
    </view>
  </uni-popup>
</template>

<script lang='ts' setup>
import { assetsUrl } from '@/utils/assets';
import { useUserStore } from '@/store';

const popupRef = ref();
const PAYMENT_TYPE_WECHAT = ref(0);
const PAYMENT_TYPE_BALANCE = ref(1);
const currentType = ref(PAYMENT_TYPE_WECHAT.value);

const userStore = useUserStore();

const { userInfo } = storeToRefs(userStore);

const emits = defineEmits(['change']);
const show = () => {
  popupRef.value.open();
};

const close = () => {
  popupRef.value.close();
};

const doPayment = (paymentType: number) => {
  emits('change', paymentType);
  currentType.value = paymentType;
  switch (paymentType) {
    case PAYMENT_TYPE_WECHAT.value:
      console.log('PAYMENT_TYPE_WECHAT');
      break;
    case PAYMENT_TYPE_BALANCE.value:
      console.log('PAYMENT_TYPE_BALANCE');
      break;
  }
  close();
};

defineExpose({
  show
});
</script>

<style lang='scss' scoped>
.popup-content {
  background: #FFFFFF;
  border-radius: 20rpx 20rpx 0 0;
  padding: 38rpx 45rpx 140rpx 45rpx;

  view:nth-of-type(1) {
    display: flex;
    margin-bottom: 70rpx;
    position: relative;

    image {
      width: 35rpx;
      height: 35rpx;
      align-self: flex-start;
    }

    text {
      font-weight: bold;
      font-size: 30rpx;
      color: #333333;
      position: absolute;
      left: 0;
      right: 0;
      text-align: center;
    }
  }

  view:nth-of-type(n+2) {
    image:nth-of-type(1) {
      width: 47rpx;
      height: 47rpx;
    }

    text {
      align-self: center;
      flex: 1;
      font-weight: 400;
      font-size: 30rpx;
      color: #333333;
      margin-left: 23rpx;
    }

    image:nth-of-type(2) {
      width: 35rpx;
      height: 35rpx;
    }
  }
}
</style>
