<template>
  <view v-if="data" class="symptom-detail">
    <view class="symptom-row">
      <text class="label-text">患者：</text>
      <text class="content-text">{{ data.patient }}</text>
    </view>
    <view class="symptom-row">
      <text class="label-text">病情描述：</text>
      <text class="content-text">{{ data.description }}</text>
    </view>
    <view v-if="data.diseases" class="symptom-row">
      <text class="label-text">线下确诊疾病：</text>
      <text class="content-text">{{ data.diseases }}</text>
    </view>
    <view v-if="data.images && data.images.length" class="symptom-row" @click="previewImage()">
      <text class="label-text">附件：</text>
      <text class="preview-btn">{{ data.images.length }}张 点击查看</text>
    </view>
  </view>
</template>
<script setup>
import { computed } from 'vue';
const props = defineProps({
  payload: {
    type: Object,
    default: () => ({})
  }
});

const data = computed(() => {
  try {
    const extension = JSON.parse(props.payload.extension);
    return {
      patient: typeof extension.patient === 'string' ? extension.patient : '',
      description: typeof extension.description === 'string' ? extension.description : '',
      hasVisitedHospital: typeof extension.hasVisitedHospital === 'boolean' ? extension.hasVisitedHospital : false,
      diseases: typeof extension.diseases === 'string' ? extension.diseases : '',
      images: Array.isArray(extension.images) ? extension.images : [],
    }
  } catch (e) { }
  return null
})


function previewImage() {
  console.log('预览图片')
  uni.previewImage({
    urls: data.value.images
  })
}


</script>
<style scpoed>
/* 病情描述样式 */
.symptom-detail {
  min-width: 360rpx;
  max-width: 600rpx;
}

.symptom-row {
  padding: 4rpx 0;
  line-height: 42rpx;
}

.label-text {
  color: #999;
  font-size: 28rpx;
}

.content-text {
  color: #333;
  font-size: 28rpx;
}

.preview-btn {
  display: inline-block;
  border: 1px solid;
  color: #0074ff;
  line-height: 36rpx;
  font-size: 24rpx;
  padding: 0 12rpx;
  border-radius: 22rpx;
}
</style>