<template>
  <view>
    <uni-popup ref="popup" @change="popChange">
      <view class="pop-cards">
        <view class="pop-cards-title">{{ title }}<image class="pop-close" src="/static/images/wallet/close.png" @click="close"></image></view>
        <view class="pop-btn" @click="goAdd">{{ btnText }}</view>
        
      </view>
    </uni-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  watch: {
    value: {
      immediate: true,
      handler(newVal) {
        this.$nextTick(() => {
            if(newVal){
              this.$refs.popup.open("bottom");
            }else{
              this.$refs.popup.close();
            }
            
          });
      },
    },
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "支付宝账号管理",
    },
    btnText:{
        type: String,
      default: "+ 添加支付宝账号",
    }
  },
  methods: {
    popChange(e) {
      this.$emit("input", e.show);
    },
    close() {
      this.$refs.popup.close();
    },
	goAdd(){
		this.$emit("goAdd");
	}
  },
};
</script>

<style lang="less" scoped>
.pop-cards {
  padding: 40rpx;
  background: #fff;
  border-radius: 30rpx 30rpx 0rpx 0rpx;
  .pop-cards-title {
    font-weight: 500;
    font-size: 36rpx;
    color: #333333;
    line-height: 50rpx;
    text-align: center;
    font-style: normal;
    position: relative;
  }
  .pop-btn {
    margin-top: 258rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 666rpx;
    height: 84rpx;
    border-radius: 69rpx;
    border: 2rpx solid #e8101e;
    font-weight: 500;
    font-size: 32rpx;
    color: #e8101e;
    line-height: 45rpx;
    text-align: left;
    font-style: normal;
  }
  .pop-close{
    width: 28rpx;
    height: 28rpx;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
