<template>
  <view>
    <view class="topbox flexJ">
      <view class="flexA">
        <image src="/static/images/v.png" class="topimg" mode="aspectFill" />
        <view>实名认证</view>
      </view>
      <!-- <view class="graytext">编号 1101******21</view> -->
    </view>
    <view class="infocard Zindex">
      <image src="/static/images/imcardbg.png" class="infocard-bg" mode="aspectFill" />
      <!-- <view class="flexA" style="margin-bottom: 10rpx">
        <image :src="proxy.$h.downFile(props.detailData?.user?.avatar)" class="imtopinfo-avatar" mode="aspectFill" @click="proxy.$h.previewImage(proxy.$h.downFile(props.detailData?.user?.avatar))" />
        <view class="imtopinfo-username">{{ props.detailData?.user?.nickname }}</view>
      </view> -->
      <view class="flexA" style="margin-bottom: 50rpx">
        <!-- <image src="/static/images/v.png" class="infocard-avatar" mode="aspectFill" /> -->

        <view class="infocard-username">问诊信息</view>
        <view class="blueTag1">{{ proxy.$h.optObjectValue('consultationWay', props.detailData.consultationWay) || '未设置' }}</view>
      </view>
      <view class="infocard-infoitem Zindex">
        <text class="gray">宠物信息：</text>
        {{ props.detailData?.petName }}/{{ props.detailData?.petClass || '品种未知' }}/{{ props.detailData?.age || '年龄未知' }}/ {{ proxy.$h.optObjectValue('petSex', props.detailData?.petSex) || '性别未知' }} /
        {{ proxy.$h.optObjectValue('isSterilization', props.detailData?.isSterilization) || '未知' }}/{{ props.detailData?.weight + 'kg' || '体重未知' }}/{{ proxy.$h.optObjectValue('immuneStatus', props.detailData?.immuneStatus, 4) }}/
        {{ proxy.$h.optObjectValue('batheFrequency', props.detailData?.batheFrequency, 2) }}/
        {{ proxy.$h.optObjectValue('feedType', props.detailData?.feedType, 1) }}
      </view>
      <view class="infocard-infoitem Zindex">
        <text class="gray">症状类型：</text>
        <template v-if="![null, '', undefined].includes(props.detailData?.symptom)">
          <template v-for="(_, index) in props.detailData?.symptom.split(',')">{{ proxy.$h.optObjectValue('symptom', _) || '' }}{{ index !== (props.detailData?.symptom.split(',').length as number) - 1 ? '，' : '' }}</template>
        </template>
        <template v-else>暂无症状</template>
      </view>
      <view class="infocard-infoitem Zindex">
        <text class="gray">症状描述：</text>
        {{ props.detailData.supplement }}
      </view>
      <view class="infocard-infoitem flexA Zindex">
        <view class="gray">症状照片:</view>
        <view class="flexW" v-if="props.detailData?.image?.length">
          <image v-for="_ in props.detailData.image?.split(',')" :src="proxy.$h.downFile(_)" class="infocard-itemimg" mode="aspectFill" @click="proxy.$h.previewImage(proxy.$h.downFile(_))" />
        </view>
        <view v-else>暂无症状照片</view>
      </view>
      <u-line margin="0 0 24rpx 0"></u-line>
      <view class="flexD">
        <up-button color="#05B8D2" shape="circle" text="查看详情" throttleTime="1500" plain @click="showUserCardDetailState = true" :customStyle="{ width: '146rpx', height: '66rpx', marginRight: '0rpx' }"></up-button>
      </view>
    </view>
  </view>
  <u-modal :show="showUserCardDetailState" :title="``" :showConfirmButton="false" closeOnClickOverlay @close="showUserCardDetailState = false">
    <view class="slot-content" @click="showUserCardDetailState = false">
      <view class="text mb24">问诊类型：{{ proxy.$h.optObjectValue('consultationWay', props.detailData.consultationWay) || '未设置' }}</view>
      <view class="text mb24">宠物品种：{{ detailData?.petClass }}</view>
      <view class="text mb24">年龄：{{ detailData?.age }}</view>
      <view class="text mb24">性别：{{ proxy.$h.optObjectValue('petSex', props.detailData?.petSex) || '性别未知' }}</view>
      <view class="text mb24">是否绝育：{{ proxy.$h.optObjectValue('isSterilization', props.detailData?.isSterilization) || '未知' }}</view>
      <view class="text mb24">体重：{{ props.detailData?.weight + 'kg' || '体重未知' }}</view>
      <view class="text mb24">免疫情况：{{ proxy.$h.optObjectValue('immuneStatus', props.detailData?.immuneStatus, 4) }}</view>
      <view class="text mb24">洗澡频率：{{ proxy.$h.optObjectValue('batheFrequency', props.detailData?.batheFrequency, 2) }}</view>
      <view class="text mb24">饲料类型：{{ proxy.$h.optObjectValue('feedType', props.detailData?.feedType, 1) }}</view>
      <view class="text mb24">
        症状类型：
        <template v-if="![null, '', undefined].includes(props.detailData?.symptom)">
          <template v-for="(_, index) in props.detailData?.symptom.split(',')">{{ proxy.$h.optObjectValue('symptom', _) || '' }}{{ index !== (props.detailData?.symptom.split(',').length as number) - 1 ? '，' : '' }}</template>
        </template>
      </view>
      <view class="text mb24">症状描述： {{ props.detailData.supplement }}</view>
      <view class="text mb24">
        症状照片：
        <view class="flexW" v-if="props.detailData?.image?.length">
          <image v-for="_ in props.detailData.image?.split(',')" :src="proxy.$h.downFile(_)" class="infocard-itemimg" mode="aspectFill" @click.stop="proxy.$h.previewImage(proxy.$h.downFile(_))" />
        </view>
      </view>
    </view>
  </u-modal>
</template>

<script setup lang="ts">
import { getCurrentInstance, ComponentPublicInstance, ref } from 'vue'
import type { Consultation_information_detailType } from '../types'

const { proxy } = getCurrentInstance() as { proxy: ComponentPublicInstance }

const props = defineProps<{ detailData: Consultation_information_detailType }>()

const showUserCardDetailState = ref<boolean>(false)
</script>

<style lang="scss" scoped>
.imtopinfo-avatar {
  width: 75rpx;
  height: 75rpx;
  border-radius: 50%;
  margin-right: 14rpx;
}
.imtopinfo-username {
  font-weight: 700;
  font-size: 28rpx;
}
.graytext {
  color: #999999;
  font-size: 26rpx;
}
.topbox {
  box-sizing: border-box;
  background: #ecfcfb;
  padding: 12rpx 30rpx;
  border-radius: 24rpx 24rpx 0 0;
  width: 94%;
  margin: 180rpx auto 0;

  image {
    width: 36rpx;
    height: 36rpx;
    margin-right: 12rpx;
  }
  color: #05b8d2;
  font-size: 26rpx;
  font-weight: 700;
}
.infocard {
  margin: 0 auto;
  box-sizing: border-box;
  padding: 28rpx 24rpx 38rpx;
  width: 94%;
  background: #fff;
  border-radius: 0 0 24rpx 24rpx;
  position: relative;
  &-itemimg {
    width: 120rpx;
    height: 120rpx;
    margin-right: 12rpx;
    border-radius: 12rpx;
  }
  &-infoitem {
    margin-bottom: 16rpx;
    color: #323233;
    font-size: 26rpx;
    font-weight: 700;
    align-items: flex-start;
    .gray {
      color: #666666;
      font-size: 26rpx;
      font-weight: 700;
    }
  }
  .blueTag1 {
    padding: 2rpx 12rpx;
    box-sizing: border-box;
    border-radius: 8rpx;
    border: 1rpx solid #05b8d2;
    color: #05b8d2;
    font-size: 22rpx;
    font-weight: 700;
  }
  &-bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 448rpx;
  }
  &-avatar {
    width: 92rpx;
    height: 92rpx;
    margin-right: 16rpx;
    border-radius: 50%;
  }
  &-username {
    color: #323233;
    font-size: 30rpx;
    font-weight: 700;
    margin-right: 16rpx;
  }
}

.mb24 {
  margin-bottom: 24rpx;
}
.text {
  color: #323233;
  font-size: 28rpx;
  font-weight: 700;
}
.blacktext {
  color: #323233;
  font-size: 30rpx;
  font-weight: 700;
}
.graytext {
  color: #999999;
  font-size: 24rpx;
  font-weight: 700;
}
.list {
  width: 460rpx;
  box-sizing: border-box;
  padding: 34rpx 28rpx;
  background: #f8f8fa;
  margin-bottom: 32rpx;
}
.zmimg {
  width: 210rpx;
  height: 210rpx;
  border-radius: 24rpx;
  margin-right: 16rpx;
}
</style>