<template>
  <view class="add_household">
    <view class="footer">
      <view
        class="btn"
        v-if="useModel?.showData?.value?.house_relation?.house_relation === 'NonOwner'"
        @click="terminatedShow = true"
      >
        解绑该房屋 <image src="/static/svg/terminatedIcon.svg" mode="heightFix" />
      </view>
      <view
        class="btn"
        v-if="useModel?.showData?.value?.house_relation?.house_relation === 'Owner'"
        @click="show = true"
      >
        添加新住户 <uni-icons type="plusempty" color="#999" size="15"></uni-icons>
      </view>
    </view>
    <hs-popup :show="show" mode="bottom" :closeable="true" @close="show = false" :round="20">
      <view class="popup_add_new_content">
        <view class="popup_title"> 添加房屋住户 </view>
        <view class="popup_content">
          <view class="popup_items" @click="add_resident">
            <view class="popup_items_content">
              <view class="popup_items_label"> 自行添加住户 </view>
              <view> 自行填写住户信息，绑定房屋 </view>
            </view>
            <uni-icons type="personadd-filled" size="30" color="#2A7EFB"></uni-icons>
          </view>
          <button open-type="share">
            <view class="popup_items">
              <view class="popup_items_content">
                <view class="popup_items_label"> 邀请他人填写 </view>
                <view> 转发给他人填写，提交后直接绑定该房屋 </view>
              </view>
              <uni-icons type="weixin" size="30" color="#28C445"></uni-icons>
            </view>
          </button>
        </view>
      </view>
    </hs-popup>

    <hs-popup-custom
      :show="terminatedShow"
      mode="center"
      closeable
      title="再次确认"
      @close="terminatedShow = false"
      :round="15"
    >
      <view class="popup_custom_content">
        <view class="popup_custom_des">
          您确定要解绑{{
            useModel?.showData?.value?.house_relation?.asset_house?.full_name || ''
          }}吗？ <br />解绑后 您无法享受该房屋的相关服务
        </view>
        <view class="popup_custom_footer">
          <hs-button label="确定解除" size="md" @click="method?.handleUnbind" type="primary" />
          <view class="return_btn" @click="terminatedShow = false">
            点错了，返回
          </view>
        </view>
      </view>
    </hs-popup-custom>
  </view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import useModel from '../model'
import { onHide } from '@dcloudio/uni-app'
import method from '../method'
const show = ref(false)
const terminatedShow = ref(false)
const add_resident = () => {
  let key = `&id=${useModel?.showData?.value?.house_relation?.asset_houses_id}&houseName=${useModel?.showData?.value?.house_relation?.asset_house?.full_name}`
  uni.navigateTo({
    url: `/INDEX/binding/index?source=house_detail${key}`
  })
}

onHide(() => {
  show.value = false
})
</script>
<style lang="scss" scoped>
.add_household {
  width: 100%;

  .popup_content {
    padding-bottom: 50rpx;
  }
  .popup_items {
    background-color: #f9fafb;
    padding: 30rpx;
    margin: 0 30rpx 30rpx 30rpx;
    border-radius: 15rpx;
    height: 100rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .popup_items_content {
      flex: 1;
      text-align: left;
      font-size: 28rpx;
      .popup_items_label {
        padding-bottom: 5rpx;
        color: #3d3d3d;
        font-size: 32rpx;
        font-weight: 500;
      }
    }
  }
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: 60rpx;
  display: flex;
  justify-content: center;
  z-index: 100;
  .btn {
    background-color: #fff;
    font-size: 28rpx;
    color: #666;
    padding: 20rpx 44rpx;
    border-radius: 100rpx;
    display: flex;
    align-items: center;
    image {
      width: 26rpx;
      height: 26rpx;
      margin-left: 10rpx;
    }
  }
}

.popup_add_new_content {
  overflow: hidden;
  .popup_title {
    font-size: 33rpx;
    font-weight: 550;
    padding: 30rpx;
  }
}
.popup_custom_content {
  text-align: center;
  .popup_custom_des {
    font-size: 28rpx;
    color: #333;
    line-height: 45rpx;
  }
  .popup_custom_footer {
    padding: 50rpx 50rpx 20rpx 30rpx;
  }
  .return_btn{
    padding:30rpx 0;
    text-align: center;
    font-size: 25rpx;
    color: #333;
  }
}

button {
  padding: 0;
  background-color: transparent;
  margin: 0;
  .popup_items_label {
    height: 50rpx;
  }
}
button:after {
  padding: 0 !important;
  margin: 0 !important;
  line-height: 30rpx !important;
  border: none !important; /* 去掉边框 */
}
</style>
