<template>
    <view>
      <view class="avatar">
        <image
          @tap="
            previewImage(
              'http://image.jxc4.com/image/70143fcf48aefe74537533f35a0a8153.jpg'
            )
          "
          src="http://image.jxc4.com/image/70143fcf48aefe74537533f35a0a8153.jpg"
          mode="scaleToFill"
        />
      </view>
  
      <!-- 收款人姓名 -->
      <view class="item">
        <text class="title">收款人姓名：</text>
        <text class="number">{{hideText(storeInfo.payeeName,'part')}}</text>
      </view>
  
      <!-- 开户银行 -->
      <view class="item">
        <text class="title">开户银行：</text>
        <text class="number">{{hideText(storeInfo.payeeBankCode,'all')}}</text>
      </view>
  
      <!-- 开户支行 -->
      <view class="item">
        <text class="title">开户支行：</text>
        <text class="number">{{hideText(storeInfo.payeeBankBranchName,'all')}}</text>
      </view>
  
      <!-- 收款账号 -->
      <view class="item">
        <text class="title">收款账号：</text>
        <text class="number">{{hideText(storeInfo.payeeAccountNo,'all')}}</text>
      </view>

      <view class="btn" @tap="popup.open()">查看详细信息</view>
    </view>

    <!-- 收款信息 -->
    <uni-popup ref="popup" type="center">
      <view class="jx-popup-update">
        <text class="text">{{currentValue === storeInfo.payeeName ? '收款信息':'验证收款人信息'}}</text>
        <input class="ipt" v-if="currentValue !== storeInfo.payeeName" v-model="currentValue" placeholder="请输入完整的姓名"/>

        <view class="tip" v-else>
          <!-- 收款人姓名 -->
          <view class="item">
            <text class="title">收款人姓名：</text>
            <text class="number">{{ storeInfo.payeeName }}</text>
          </view>
      
          <!-- 开户银行 -->
          <view class="item">
            <text class="title">开户银行：</text>
            <text class="number">{{storeInfo.payeeBankCode}}</text>
          </view>
      
          <!-- 开户支行 -->
          <view class="item">
            <text class="title">开户支行：</text>
            <text class="number">{{storeInfo.payeeBankBranchName}}</text>
          </view>
      
          <!-- 收款账号 -->
          <view class="item">
            <text class="title">收款账号：</text>
            <text class="number">{{storeInfo.payeeAccountNo}}</text>
          </view>
        </view>

        <view class="btn-root" v-if="currentValue === storeInfo.payeeName">
          <view class="btn-ok" @tap="copyInfoAllText">复制</view>
        </view>
      </view>
    </uni-popup>
  </template>
  
  <script lang="ts" setup >
  import useGlobalFunc from '@/composables/useGlobalFunc'
  import { store } from '@/store'
  import toast from '@/utils/toast'
  import { ref } from 'vue'
  const { copyInfo, previewImage } = useGlobalFunc()
  
  const storeInfo = store.state.storeInfo.allStoreInfo

  const popup = ref()
  const currentValue = ref('')

  /**
   * 复制所有信息
   */
  function  copyInfoAllText() {
    copyInfo(`收款人姓名：${storeInfo.payeeName}\n开户银行：${storeInfo.payeeBankCode}\n开户支行：${storeInfo.payeeBankBranchName}\n收款账号：${storeInfo.payeeAccountNo}`)
    toast('复制成功')
    popup.value.close()
  }

  /**
   * 隐藏收款人信息
   */
  function hideText(text:string,type:string){
    const  regex = new RegExp(".", "g");
    return  type === 'part' ? text.substring(0,1) + '*' +  text.substring(text.length-1,text.length):text.replace(regex,'*')
  }
  </script>
  
  <style lang="scss" scoped>
  .avatar {
    width: 100%;
    text-align: center;
    border-bottom: 1rpx solid rgb(208, 208, 208);
  
    image {
      box-sizing: border-box;
      width: 140rpx;
      height: 140rpx;
      border-radius: 50%;
      margin: 20rpx 0;
    }
  }
  
  .item {
    display: flex;
    align-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 10rpx 20rpx;
    border-bottom: 1rpx solid rgb(208, 208, 208);
    line-height: 70rpx;

    .title{
        width: 200rpx;
        text-align: justify;
        text-align-last: justify;
    }


    .number {
      color: #aaa;
    }
  
    .input {
      width: 100%;
    }
  }
  
  .btn {
    border-radius: 8rpx;
    padding: 20rpx 0;
    background-color: $jx-primary;
    color: #fff;
    box-sizing: border-box;
    margin: 50rpx 20rpx 0 20rpx;
    text-align: center;
  }


  .jx-popup-update {
    box-sizing: border-box;
    padding: 20rpx;
    background-color: #fff;
    // border-radius: 0 0 15rpx 15rpx;
    border-radius: 15rpx;

    .text {
        display: block;
        width: 100%;
        text-align: center;
        margin-bottom: 25rpx;
        padding-bottom: 10rpx;
        border-bottom: 2rpx solid rgb(209, 209, 209);
    }

    .tip {
        padding: 10rpx 0;
    }

    .ipt {
        border: 2rpx solid rgb(209, 209, 209);
        text-align: center;
        height: 80rpx;
        border-radius: 5rpx;
    }

    .btn-root {
        display: flex;
        justify-content: space-between;
        margin: 40rpx 0 0rpx 0;

        .btn-ok {
            text-align: center;
            width: 100%;
            padding: 15rpx 0;
            border-radius: 10rpx;
            border: 2rpx solid $jx-primary;
            color: $jx-primary;
            background-color: $jx-primary;
            color: #fff;
            margin-left: 10rpx;
        }
    }
}
  </style>