<template>
  <view class="userInfo-container">
    <view class="user-avatar">
      <u--image
        class="user-avatar-img"
        :src="userInfo.user_avatar || '../../static/user-img.png'"
        shape="circle"
        width="110"
        height="110"
      ></u--image>
      <view class="user-avatar-text">更换用户头像</view>
    </view>
    <u-form :model="userInfo" ref="uForm" class="form" label-width="100">
      <u-form-item label="用户编号" prop="id">
        <u-input
          class="form-input"
          disabled
          disabledColor="#fff"
          inputAlign="right"
          v-model="userInfo.id"
          placeholder=""
        />
      </u-form-item>
      <u-form-item
        label="用户账号"
        prop="user_account"
        class="user-account-item"
      >
        <u-input
          class="form-input"
          disabled
          disabledColor="#fff"
          inputAlign="right"
          v-model="userInfo.user_account"
          placeholder=""
        />
        <view slot="right" class="copy" @click="copy"> 复制 </view>
      </u-form-item>
      <u-form-item label="用户姓名" prop="name">
        <u-input
          class="form-input"
          disabled
          disabledColor="#fff"
          inputAlign="right"
          v-model="name"
          placeholder=""
        />
      </u-form-item>
      <u-form-item label="手机号" prop="name">
        <u-input
          class="form-input"
          disabled
          disabledColor="#fff"
          inputAlign="right"
          v-model="phone"
          placeholder=""
        />
      </u-form-item>
    </u-form>
    <u-form :model="userInfo" ref="uForm" class="form" label-width="100">
      <u-form-item label="注册时间" prop="time">
        <u-input
          class="form-input"
          disabled
          disabledColor="#fff"
          inputAlign="right"
          v-model="registerTime"
          placeholder=""
        />
      </u-form-item>
    </u-form>
  </view>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      name: "",
      phone: "",
      registerTime: "",
    };
  },
  computed: {
    ...mapState("user", ["userInfo"]),
  },
  onShow() {
    let auditInfo = uni.getStorageSync("auditInfo");
    this.name = this.nameHide(auditInfo.contact_name);
    this.phone = this.phoneHide(auditInfo.login_mobile);
    this.registerTime = auditInfo.created_at;
  },
  methods: {
    copy() {
      uni.setClipboardData({
        data: this.userInfo.user_account,
        success: function () {
          uni.showToast({
            title: "复制成功",
            icon: "none",
          });
        },
      });
    },
    nameHide(name) {
      if (name.length == 2) {
        name = name.substring(0, 1) + "*"; // 截取name 字符串截取第一个字符，
        return name; // 张三显示为张*
      } else if (name.length == 3) {
        name = name.substring(0, 1) + "*" + name.substring(2, 3); // 截取第一个和第三个字符
        return name; // 李思思显示为李*思
      } else if (name.length > 3) {
        name =
          name.substring(0, 1) + "*" + "*" + name.substring(3, name.length); // 截取第一个和大于第4个字符
        return name; // 王五哈哈显示为王**哈
      }
    },
    phoneHide(phone) {
      let reg = /^(1[3-9][0-9])\d{4}(\d{4}$)/; // 定义手机号正则表达式
      phone = phone.replace(reg, "$1****$2");
      return phone; // 185****6696
    },
  },
};
</script>

<style lang="scss">
.userInfo-container {
  height: calc(100vh - 88rpx);
  background: #f6f6f6;

  .user-avatar {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    padding: 60rpx 0;
    background: #fff;

    .user-avatar-img {
      margin-bottom: 20rpx;
    }

    .user-avatar-text {
      color: #ec5d29;
    }
  }

  .form {
    padding: 40rpx 0;

    .u-form-item {
      padding: 0 32rpx;
      border-top: 1px solid #f4f4f4;
      background: #fff;

      .form-input {
        background: #fff;
      }

      .form-input-time {
        outline: none;
      }

      .shop-description {
        display: flex;
        flex-flow: column;

        .title {
          margin-bottom: 40rpx;
        }

        .textarea {
          border: 1px solid #f4f4f4;
          width: 100%;
        }
      }
    }
  }

  .copy {
    padding: 8rpx 20px;
    border-radius: 12rpx;
    background: #aaaaaa;
    color: #fff;
  }
}
</style>