<template>
  <view>
    <view class="type_select">
      <scroll-view scroll-x="true">
        <view
          v-for="(i, index) in tabList"
          :key="`items_${index}`"
          class="type_select_item"
          :style="current === i?.value?{ color: getStyleColorValueInfo(),border: `1px solid ${getStyleColorValueInfo()}` }:''"
          @click="handleSwitchType(i?.value)"
        >
          <hs-enum-tag :value="i?.value" :Enums="ConvenienceServicesTypeEnum" />
        </view>
      </scroll-view>
    </view>
    <!-- <hs-empty v-if="!props?.data?.length" height="20vh" /> -->
    <view
      class="convenience_services_list"
      v-for="(i, index) in props?.data"
      :key="`list_${index}`"
    >
      <view class="convenience_services_list_title"> <text :style="{backgroundColor: getStyleColorValueInfo()}"></text> {{ i?.name }} </view>
      <view
        v-for="(k, idx) in i?.content"
        class="convenience_services_list_cell"
        :key="`list_${index}_${idx}`"
      >
        {{ k?.name }}：{{ k?.phone }}
        <view class="phone_btn" :style="getStyleColorInfo()" @click="handleCopyPhone(k?.phone)">
          拨打
          <!-- <image src="/static/svg/phone.svg" mode="aspectFill" /> -->
        </view>
      </view>
      <!-- <view class="error"> “先关阀门开窗，勿碰电器！” </view> -->
    </view>
  </view>
</template>
<script setup lang="ts">
import { ConvenienceServicesTypeEnum } from '@/gen/Enums'
import { onMounted, ref } from 'vue'
import { getStyleColorValueInfo,getStyleColorInfo } from '@/common/libraries/getPageConfig'
const emit = defineEmits(['change'])
const tabList = ref<any>([])
const list = ref([])
const current = ref('PropertyExclusive')
const props = defineProps(['data','visible'])
const handleSwitchType = (type: string) => {
  current.value = type
  emit('change', type)
  console.log('切换', type)
}

const handleCopyPhone = (phone: string) => {
  if (phone) {
    uni.makePhoneCall({
      phoneNumber: phone //仅为示例，并非真实的电话号码
    })
  }
}
onMounted(() => {
  tabList.value = Object.values(ConvenienceServicesTypeEnum)
})
</script>
<style lang="scss" scoped>
.type_select {
  padding: 30rpx 0 0 0;
  white-space: nowrap;
  .type_select_item {
    color: #333;
    display: inline-block;
    border: 1px solid #909399;
    border-radius: 100rpx;
    background-color: #fff;
    padding: 8rpx 20rpx;
    margin-left: 30rpx;
    font-size: 24rpx;
    &:last-child {
      margin-right: 30rpx;
    }
  }
  .type_select_item_active {
    color: #2a7efb;
    border: 1px solid #2a7efb;
  }
}
.convenience_services_list {
  background-color: #fff;
  border-radius: 15rpx;
  padding: 0 30rpx 30rpx 30rpx;
  margin: 30rpx 30rpx 0 30rpx;
  &_title {
    color: #333333;
    font-size: 28rpx;
    font-weight: 500;
    display: flex;
    align-items: center;
    padding: 30rpx 0 0 0;
    text {
      width: 3px;
      height: 30rpx;
      background-color: #2a7efb;
      border-radius: 100rpx;
      margin-right: 10rpx;
      display: inline-block;
    }
  }
  &_cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #333333;
    font-size: 28rpx;
    padding: 40rpx 30rpx;
    border-radius: 20rpx;
    background-color: #f8f8f8;
    margin-top: 25rpx;
    .phone_btn {
      color: #2a7efb;
      font-size: 26rpx;
      image {
        width: 60rpx;
        height: 60rpx;
      }
    }
  }
  .error {
    padding-top: 16rpx;
    color: #c45656;
    font-size: 24rpx;
  }
}
</style>
