<template>
  <view>
    <view v-for="(i, index) in useModel.listData.value" :key="`item_${index}`" class="personnel_list">
      <view v-if="i?.list?.length">
        <view class="title"> {{ i?.label }} </view>
        <view class="personnel_item" v-for="(j, index) in i?.list" :key="`personnel_${index}`">
          <view class="personnel_item_header">
            <view class="personnel_item_header_left">
              <view>
                {{ j?.name }}<text>{{ j?.phone }}</text></view>
              <view class="personnel_item_type" v-if="j?.house_relation === 'Owner'"> 产权人 </view>
              <view class="personnel_item_type" v-else>
                <hs-enum-tag :Enums="HouseOccupantsResidentialRelationEnum" :value="j?.residential_relation" />
              </view>
            </view>
            <view class="personnel_item_header_right" @click="method?.handleSetContact(j)">
              <uni-icons type="star-filled" size="20" :color="j?.is_contact ? '#FFD666' : '#DCDFE6'"></uni-icons>
              <view class="label"> {{ j?.is_contact ? '常用联系人' : '设为常用' }}</view>
            </view>
          </view>
          <view class="personnel_item_footer">
            <view class="btn" @click="handleCopyPhone(j?.phone)"> 拨打电话 </view>
            <view class="btn" @click="handleNavigateToAddCustomer(j?.phone)"> +微信 </view>
            <view class="btn" @click="handleNavigateToDetail(j?.id)"> 查看详情 </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { HouseOccupantsResidentialRelationEnum } from '@/gen/Enums'
import method from '../method'
import useModel from '../model'

const handleCopyPhone = (phone: string) => {
  if (phone) {
    uni.makePhoneCall({
      phoneNumber: phone //仅为示例，并非真实的电话号码
    })
  }
}
const handleNavigateToDetail = (id: number) => {
  uni.navigateTo({
    url: `/CUSTOMER/show/index?id=${id}`
  })
}
const handleNavigateToAddCustomer = (phone: string) => {
  uni.setClipboardData({
    data: phone,
    success(res) {
      setTimeout(() => {
        uni.qy.navigateToAddCustomer({
          success: function () {
            // 回调
          }
        })
      }, 1000)
    }
  })
}
</script>

<style lang="scss" scoped>
.personnel_list {
  padding: 0 30rpx;

  .title {
    font-size: 28rpx;
    font-weight: 500;
    color: #333;
    padding: 30rpx 0 0 0;
  }

  .personnel_item {
    background-color: #f9fafb;
    border-radius: 20rpx;
    margin-top: 30rpx;

    .personnel_item_type {
      color: #606266;
      font-size: 24rpx;
      border: 1px solid #c3c3c3;
      border-radius: 100rpx;
      padding: 5rpx 22rpx;
      background-color: #fff;
      display: inline-block;
      margin-top: 5rpx;
    }

    &_header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx 30rpx 20rpx 30rpx;

      &_left {
        color: #3d3d3d;
        font-size: 28rpx;
        font-weight: 500;
        flex: 1;

        text {
          font-weight: 400;
          padding-left: 6rpx;
        }
      }

      &_right {
        font-size: 24rpx;
        text-align: center;
        color: #b1b3b8;

        .label {
          padding-top: 7rpx;
        }
      }
    }

    &_footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-align: center;
      padding: 20rpx 0;
      border-top: 1rpx solid #ededed;

      .btn {
        flex: 1;
        color: #333;
        font-size: 28rpx;
        padding: 10rpx 0;

        &:first-child {
          color: #0082fa;
        }

        &:nth-child(2) {
          border-left: 1rpx solid #ededed;
          border-right: 1rpx solid #ededed;
        }
      }
    }
  }
}
</style>
