<template>
  <view v-if="useModel.houseKeeperData.value?.name" class="contact_butler_content">
    <view class="atavar">
      <image
        mode="widthFix"
        :src="
          (useModel.houseKeeperData.value?.avatar &&
            useModel.houseKeeperData.value?.avatar[0]?.url) ||
          'https://pay-prod-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01K7GYWP13PR4WWVKEB47EG1KA.png'
        "
      />
    </view>
    <view class="contact_butler_center_content">
      <view class="name">  {{ useModel.houseKeeperData.value?.name || '暂无' }}<!--<text :style="`background-color: ${getStyleColorValueInfo()}; color: #fff;`">联系物业</text>--> </view>
      <view :class="`status status_${checkWorkStatus()?.value}`"> <text>·</text>{{ checkWorkStatus()?.status }} </view>
    </view>

    <view class="right_group_btn">
      <view class="btn_item" @click="callPhone">
        <image
          mode="widthFix"
          src="https://pay-prod-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01K7GZR74YVXAGYNT5VX89CPHQ.png"
        />
      </view>
      <!-- <view class="btn_item">
        <image
          mode="widthFix"
          src="https://pay-prod-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01K7H01RWBGAKQ97TP5EWWGAJ0.png"
        />
      </view> -->
    </view>
  </view>
</template>
<script setup lang="ts">
  import useModel from '../model'
  import { getStyleColorValueInfo } from '@/common/libraries/getPageConfig'
  import { checkWorkStatus } from '@/common/libraries/day'
  const callPhone = () => {
    if(checkWorkStatus()?.value !== 'Online'){
      return uni.showToast({
        title: '当前物业不在线',
        icon: 'none'
      })
    }
  if (useModel.houseKeeperData.value?.phone) {
    uni.makePhoneCall({
      phoneNumber: useModel.houseKeeperData.value?.phone || ''
    })
  } else {
    uni.showToast({
      title: '暂无联系电话',
      icon: 'none'
    })
  }
}
</script>
<style lang="scss" scoped>
.contact_butler_content {
  margin: 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 20rpx 30rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .atavar {
    width: 90rpx;
    height: 90rpx;
    border-radius: 100%;
    image {
      width: 100%;
      height: 100%;
    }
  }
  .contact_butler_center_content {
    flex: 1;
    padding: 0 20rpx;
    .name {
      color: #3d3d3d;
      font-size: 28rpx;
      font-weight: 500;
      display: flex;
      align-items: center;
      text {
        color: #2a7efb;
        background-color: #dae9ff;
        padding: 4rpx 8rpx;
        font-size: 20rpx;
        margin-left: 10rpx;
        border-radius: 4rpx;
      }
    }
    .status {
      font-size: 24rpx;
      color: #666666;
      display: flex;
      align-items: center;
      text {
        font-size: 40rpx;
      }
    }
    .status_Online {
      color: #52c41a;
    }
    .status_Offline {
      color: #666666;
    }
  }
  .right_group_btn {
    display: flex;
    align-items: center;
    .btn_item {
      width: 38rpx;
      height: 38rpx;
      // &:nth-child(1) {
      //   border-right: 1rpx solid #d8d8d8;
      //   padding-right: 40rpx;
      //   margin-right: 40rpx;
      // }
    }
    image {
      width: 38rpx;
      height: 38rpx;
    }
  }
}
</style>
