<template>
  <hs-button
    label="联系住户"
    icon="phone-filled"
    type="primary"
    iconColor="#fff"
    @click="handleOpenShow"
    size="md"
  />
  <hs-popup :show="show" mode="bottom" closeable @close="show = false">
    <view>
      <view class="popup_header"> 请选择联系对象 </view>
      <view class="popup_user_content">
        <view class="popup_user_item" v-for="(i, index) in listData" :key="`item_${index}`">
          <view class="user_info">
            <view class="name">
              {{ i?.name || '' }} <text> {{ formatPhoneNumber(i?.phone || '') }} </text>
            </view>
            <view class="role">
              <text v-if="i?.house_relation === 'Owner'"> 产权人 </text>
              <hs-enum-tag
                v-else
                :value="i?.residential_relation"
                :Enums="HouseOccupantsHouseRelationEnum"
              />
              <text v-if="i?.is_contact" class="is_contact"> 常用联系人 </text>
            </view>
          </view>
          <view class="phone_btn" @click="handleCopyPhone(i?.phone)">
            <uni-icons type="phone-filled" size="17" color="#0082FA"></uni-icons>
          </view>
        </view>
      </view>
    </view>
  </hs-popup>
</template>

<script lang="ts" setup>
import { formatPhoneNumber } from '@/common/libraries/public'
import { getApiLoading } from '@/common/libraries/apiLoading'
import { HouseOccupantsHouseRelationEnum } from '@/gen/Enums'
import { Apis } from '@/gen/Apis'
import useModel from '../model'
import { ref } from 'vue'
const listData = ref<any>([])
const show = ref(false)
const handleOpenShow = () => {
  show.value = true
  getHouseOccupants()
}

const handleCopyPhone = (phone: string) => {
  if (phone) {
    uni.makePhoneCall({
      phoneNumber: phone //仅为示例，并非真实的电话号码
    })
  }
}

const getHouseOccupants = () => {
  getApiLoading(Apis.Archive.HouseOccupants.List, {
    asset_houses_id: useModel?.showData?.value?.id
  }).then(res => {
    listData.value = res.data
  })
}
</script>

<style lang="scss" scoped>
.popup_header {
  text-align: center;
  padding: 30rpx 0;
}
.popup_user_content {
  padding: 0 30rpx 30rpx 30rpx;
  .popup_user_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f9fafb;
    border-radius: 20rpx;
    padding: 20rpx 20rpx 30rpx 20rpx;
    margin-bottom: 20rpx;
    .user_info {
      flex: 1;
      .name {
        color: #3d3d3d;
        font-size: 28rpx;
        font-weight: 500;
        text {
          padding-left: 10rpx;
        }
      }
      .role {
        color: #0082fa;
        font-size: 24rpx;
        padding-top: 10rpx;
        display: flex;
        align-items: center;
        text {
          display: inline-block;
          height: 20rpx;
          line-height: 20rpx;
        }
        .is_contact {
          border-left: 1rpx solid #d8d8d8;
          padding-left: 15rpx;
          margin-left: 15rpx;
        }
      }
    }
    .phone_btn {
      width: 60rpx;
      height: 60rpx;
      border-radius: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #d9ecff;
    }
  }
}
</style>
