<template>
  <view  class="info">
    <view class="user">
      <view class="user-address">
        <view class="user-address__detail">
          {{ addressSubstring }}
        </view>
        <view class="user-address__area">
          {{ infoData.houseNumberAddress }}
        </view>
      </view>
    </view>
    <!-- <button
      v-if="bindStatus !== DOOR_BIND_STATUS.BINDED.VALUE"
      class="btn-mine"
      type="primary"
      @tap="goToBind"
    >
      码户绑定
    </button> -->
    <view class="door">
      <view class="door-code" @tap="handleQr">
        <image src="/static/images/common/icon_qr.png" />
        <text>门牌二维码</text>
      </view>
      <view class="door-detail" @tap="handleDoor">
        <image src="/static/images/common/icon_door.png" />
        <text>门牌详情</text>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props:{
    infoData:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  computed: {
    addressSubstring() {
      if (!this.infoData.houseNumberAddress) {
        return '';
      }
      let index = this.infoData.houseNumberAddress.indexOf("区") + 1;
      return this.infoData.houseNumberAddress.substring(index);
    }
  },
  methods:{
    handleQr(){
      //新接口里面没有doorId,这里换成id
      this.infoData.doorId = this.infoData.id
      uni.navigateTo({
        url: `/pages/my/doorQr?doorId=${this.infoData.doorId}`
      });
    },
    handleDoor(){
      //新接口里面没有doorId,这里换成id
      this.infoData.doorId = this.infoData.id
      //项目里面没有这个路径
//      uni.navigateTo({
//        url: `/pages/my/doorDetail?doorId=${this.infoData.doorId}`
//      });
      //更改为跳转到门牌详情
      uni.navigateTo({
        url: "/subPages/pages/door/submitDetail?id=" + this.infoData.doorId,
      });
    }
  }
}
</script>
<style lang="scss" scoped>
.info {
  position: relative;
  margin-top: 10rpx;
  padding: 40rpx 28rpx 32rpx 28rpx;
  /* height: 280rpx; */
  border-radius: 16rpx;
  box-sizing: border-box;
  background: url(data:image/png;base64,[encoded data, 27976 characters]);
  background-repeat: no-repeat;
  background-size: 100% 104%;
  color: #fff;
  background-color: rgba(0, 0, 0, 0);
}
.user {
  /* display: flex; */
  padding-bottom: 40rpx;
  border-bottom: 1rpx dashed #dee0e6;
  z-index: 1000;
}

.user-avatar {
  margin-right: 22rpx;
}
.user-avatar image {
  border-radius: 50%;
  width: 98rpx;
  height: 98rpx;
}

.user-address {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 52px;
}
.user-address .user-address__detail {
  font-size: 36rpx;
  line-height: 56rpx;
  font-weight: bold;
  text-align: center;
  /*    white-space: nowrap;
     text-overflow:ellipsis;
     overflow: hidden; */
}
.user-address .user-address__area {
  font-size: 22rpx;
  line-height: 48rpx;
  text-align: center;
}

.door {
  display: flex;
  justify-content: space-around;
  line-height: 86rpx;
}
.door-code,
.door-detail {
  display: flex;
  align-items: center;
}
.door text {
  margin-left: 16rpx;
}
.door image {
  width: 30rpx;
  height: 30rpx;
}
</style>