<template>
  <view class="card-wrapper">
    <view class="card-wrapper__text">{{ title }}</view>
    <view class="card-wrapper__address">
      {{ address }}
    </view>

    <view class="card-wrapper__user">
      <view class="card-wrapper__user--info">
        <view class="">
          {{ userInfo }}
        </view>
        <text class="user_phone">
          {{ phone_user }}
        </text>
      </view>
      <view class="card-wrapper__user--btn" @click="handleLooks">
        <!-- <image src="/static/images/new_ui/look.png" ></image> -->
        <uni-icons
          :type="!showPhone ? 'eye-slash' : 'eye-slash-filled'"
          size="30"
          :color="showPhone ? '#007aff' : '#333'"
        ></uni-icons>
      </view>
    </view>
  </view>
</template>

<script>
import { MaskRules } from "@/utils/index.js";
export default {
  props: {
    title: {
      type: String,
      default: "发货商品",
    },
    items: {
      type: Object,
      default: () => {
        return {
          user_phone: "",
          user_address: "",
          real_name: "",
        };
      },
    },
  },
  watch: {
    items: {
      handler(newVal, oldVal) {
        if (newVal) {
          this.items = newVal;
        }
      },
    },
  },
  data() {
    return {
      showPhone: false,
    };
  },
  methods: {
    handleLooks() {
      this.showPhone = !this.showPhone;
    },
  },
  computed: {
    phone_user() {
      if (this.showPhone) {
        return this.phone;
      } else {
        return MaskRules.mobile(this.phone);
      }
    },
    phone() {
      return this.items.user_phone || "";
    },
    userInfo() {
      return this.items.real_name || "";
    },
    address() {
      return this.items.user_address || "";
    },
  },
};
</script>

<style lang="scss">
.card-wrapper {
  background: #ffffff;
  border-radius: 16rpx;
  padding: 26rpx 21rpx 10rpx 32rpx;
  display: flex;
  flex-direction: column;
  &__text {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin: 0 0 26rpx;
  }
  &__address {
    font-weight: 400;
    font-size: 26rpx;
    color: #333333;
    line-height: 37rpx;
    text-align: left;
  }

  .card-wrapper__user {
    display: flex;
    justify-content: space-around;
    align-items: center;
    &--info {
      width: 100%;
      padding: 10rpx 10rpx 10rpx 0;
      font-size: 28rpx;
      font-weight: 400;
      color: #999999;
      display: flex;
      align-items: center;
      word-break: break-all;
      box-sizing: border-box;
      min-height: 28rpx;
      gap: 32rpx;
      flex: 1;
      .user_phone {
        padding-top: 6rpx;
      }
    }
    &--btn {
      width: 45rpx;
      flex-shrink: 0;
      image {
        width: 41rpx;
        height: 27rpx;
      }
    }
  }
}
</style>
