<template>
  <view>
    <view class="search_box">
      <up-search placeholder="搜索房号/手机号/姓名" v-model="useModel.formData.value.keyword" :showAction="false"
        @search="method?.handleSearch" />
    </view>
    <view class="user_contents">
      <cc-scroll-loading :meta="useModel?.metaData?.value" @load="method?.handleLoad">
        <view class="customer_content" v-for="i in useModel?.listData?.value" :key="`customer_${i?.index}`">
          <view class="customer_title"> {{ i?.house_name }} </view>
          <view class="customer_list">
            <view class="customer_item" v-for="k in i?.occupants" :key="i?.index" @click="toDetailePage(k)">
              <view class="avatar">
                <up-avatar />
              </view>
              <view class="user_info">
                <view class="name">
                  {{ k?.name }} <text> {{ k?.phone }} </text>
                </view>
                <view class="tabs_group">
                  <view class="item" v-if="k?.house_relation === 'Owner'"> 产权人 </view>
                  <view class="item" v-if="i?.is_contact">常用联系人</view>
                  <view class="item" v-if="k?.house_relation === 'NonOwner' && k?.residential_relation">
                    <hs-enum-tag :Enums="HouseOccupantsResidentialRelationEnum" :value="k?.residential_relation" />
                  </view>
                  <!-- <view class="item not_added"> 未添加客户微信 </view> -->
                </view>
              </view>
              <uni-icons type="right" size="13" color="#999"></uni-icons>
            </view>
          </view>
        </view>
      </cc-scroll-loading>
    </view>
  </view>
</template>
<script setup lang="ts">
import { HouseOccupantsResidentialRelationEnum } from '@/gen/Enums'
import { onLoad, onUnload } from '@dcloudio/uni-app'
import method from './method'
import useModel from './model'
const toDetailePage = (e: { id: number }) => {
  uni.navigateTo({
    url: `/CUSTOMER/show/index?id=${e?.id}`
  })
}

onLoad(() => {
  method?.getList()
})

onUnload(() => {
  useModel.listData.value = []
})
</script>

<style lang="scss">
@import './style.scss';
</style>
