<template>
    <view class="container" style="paddingBottom:1rpx;">
  
      <view class="detail-card">
        <view class="card-header">
          <view class="header-icon">
            <uni-icons type="plusempty" size="24" color="#ffffff"></uni-icons>
          </view>
          <view class="header-info">
            <text class="card-name">{{ detailInfo.name }}-{{ detailInfo.brand }}({{ detailInfo.packaging }})</text>
          </view>
        </view>
        
        <view class="card-body">
          <view class="info-section">
            <view class="section-title">
              <view class="title-icon"></view>
              <text>基本信息</text>
            </view>
            <view class="info-list">
              <view class="list-item">
                <text class="item-label">药品简称</text>
                <text class="item-value">{{ detailInfo.shortName || '-' }}</text>
              </view>
              <view class="list-item">
                <text class="item-label">药品编码</text>
                <text class="item-value">{{ detailInfo.code || '-' }}</text>
              </view>
              <view class="list-item">
                <text class="item-label">药品剂型</text>
                <text class="item-value">{{ detailInfo.dosageForm || '-' }}</text>
              </view>
              <view class="list-item">
                <text class="item-label">治疗类型</text>
                <text class="item-value">{{ detailInfo.treatmentType || '-' }}</text>
              </view>
              <view class="list-item">
                <text class="item-label">药品分类</text>
                <text class="item-value">{{ detailInfo.classification || '-' }}</text>
              </view>
              <view class="list-item">
                <text class="item-label">类别</text>
                <text class="item-value">{{ detailInfo.category || '-' }}</text>
              </view>
            </view>
          </view>
          
          <view class="info-section">
            <view class="section-title">
              <view class="title-icon"></view>
              <text>产品信息</text>
            </view>
            <view class="info-list">
              <view class="list-item">
                <text class="item-label">品牌</text>
                <text class="item-value">{{ detailInfo.brand || '-' }}</text>
              </view>
              <view class="list-item">
                <text class="item-label">药品包装</text>
                <text class="item-value">{{ detailInfo.packaging || '-' }}</text>
              </view>
              <view class="list-item">
                <text class="item-label">包装单位</text>
                <text class="item-value">{{ detailInfo.packageUnit || '-' }}</text>
              </view>
              <view class="list-item">
                <text class="item-label">生产厂家</text>
                <text class="item-value">{{ detailInfo.manufacturers || '-' }}</text>
              </view>
              <view class="list-item">
                <text class="item-label">是否进口</text>
                <text class="item-value">{{ detailInfo.isImport || '-' }}</text>
              </view>
              <view class="list-item">
                <text class="item-label">生产地址</text>
                <text class="item-value">{{ detailInfo.address || '-' }}</text>
              </view>
            </view>
          </view>
          
          <view class="info-section">
            <view class="section-title">
              <view class="title-icon"></view>
              <text>规格信息</text>
            </view>
            <view class="info-list">
              <view class="list-item">
                <text class="item-label">规格</text>
                <text class="item-value">{{ detailInfo.specifications || '-' }}</text>
              </view>
              <view class="list-item">
                <text class="item-label">规格单位</text>
                <text class="item-value">{{ detailInfo.unit || '-' }}</text>
              </view>
              <view class="list-item">
                <text class="item-label">单个含量</text>
                <text class="item-value">{{ detailInfo.content || '-' }}</text>
              </view>
              <view class="list-item">
                <text class="item-label">含量单位</text>
                <text class="item-value">{{ detailInfo.contentUnit || '-' }}</text>
              </view>
            </view>
          </view>
          
          <view class="info-section" v-if="detailInfo.indications">
            <view class="section-title">
              <view class="title-icon"></view>
              <text>功能主治</text>
            </view>
            <view class="remark-content">
              <text>{{ detailInfo.indications }}</text>
            </view>
          </view>
          
          <view class="info-section" v-if="detailInfo.storage">
            <view class="section-title">
              <view class="title-icon"></view>
              <text>贮藏</text>
            </view>
            <view class="remark-content">
              <text>{{ detailInfo.storage }}</text>
            </view>
          </view>
          
          <view class="info-section" v-if="detailInfo.ingredients">
            <view class="section-title">
              <view class="title-icon"></view>
              <text>药品成分</text>
            </view>
            <view class="remark-content">
              <text>{{ detailInfo.ingredients }}</text>
            </view>
          </view>
          
          <view class="info-section" v-if="detailInfo.usage">
            <view class="section-title">
              <view class="title-icon"></view>
              <text>用法用量</text>
            </view>
            <view class="remark-content">
              <text>{{ detailInfo.usage }}</text>
            </view>
          </view>
          
          <view class="info-section" v-if="detailInfo.character">
            <view class="section-title">
              <view class="title-icon"></view>
              <text>性状</text>
            </view>
            <view class="remark-content">
              <text>{{ detailInfo.character }}</text>
            </view>
          </view>
          
          <view class="info-section" v-if="detailInfo.adverseReaction">
            <view class="section-title">
              <view class="title-icon"></view>
              <text>不良反应</text>
            </view>
            <view class="remark-content">
              <text>{{ detailInfo.adverseReaction }}</text>
            </view>
          </view>
          
          <view class="info-section" v-if="detailInfo.remark">
            <view class="section-title">
              <view class="title-icon"></view>
              <text>备注</text>
            </view>
            <view class="remark-content">
              <text>{{ detailInfo.remark }}</text>
            </view>
          </view>
        </view>
      </view>
      <u-toast ref="uToast"></u-toast>
    </view>
  </template>
  
  <script setup>
import { getMedicineBasic } from '@/api/health/medicineBasic'
import { getDicts } from '@/api/system/dict/data.js'
import { onLoad } from "@dcloudio/uni-app"
import { ref, getCurrentInstance } from "vue"

const { proxy } = getCurrentInstance()
const detailInfo = ref({})
const typeList = ref([])
const classificationList = ref([])
const categoryList = ref([])
const dosageFormList = ref([])
const packageUnitList = ref([])
const isImportList = ref([])
const unitList = ref([])
const contentUnitList = ref([])

onLoad((option) => {
  if (option.id) {
    // 先加载字典，再加载详情
    getDict().then(() => {
      getDetail(option.id)
    })
  }
})

function getDict() {
  // 使用 Promise.all 确保所有字典都加载完成
  return Promise.all([
    getDicts('mar_type').then(res => {
      typeList.value = res.data
    }),
    getDicts('medicine_classification').then(res => {
      classificationList.value = res.data
    }),
    getDicts('medicine_category').then(res => {
      categoryList.value = res.data
    }),
    getDicts('dosage_form').then(res => {
      dosageFormList.value = res.data
    }),
    getDicts('package_unit').then(res => {
      packageUnitList.value = res.data
    }),
    getDicts('is_import').then(res => {
      isImportList.value = res.data
    }),
    getDicts('medical_unit').then(res => {
      unitList.value = res.data
    }),
    getDicts('content_unit').then(res => {
      contentUnitList.value = res.data
    })
  ])
}

function dictStr(val, arr) {
  if (!val || !arr || arr.length === 0) {
    return ''
  }
  let str = ''
  arr.forEach(item => {
    // 支持字符串和数字类型的匹配
    if (String(item.dictValue) === String(val)) {
      str = item.dictLabel
    }
  })
  return str
}

function getDetail(id) {
  getMedicineBasic(id).then(res => {
    const data = res.data
    // 先将原始数据赋值
    detailInfo.value = { ...data }
    
    // 使用已加载的字典数据进行转换，将字典值转换为标签显示
    if (data.treatmentType) {
      detailInfo.value.treatmentType = dictStr(data.treatmentType, typeList.value) || data.treatmentType
    }
    if (data.classification) {
      detailInfo.value.classification = dictStr(data.classification, classificationList.value) || data.classification
    }
    if (data.category) {
      detailInfo.value.category = dictStr(data.category, categoryList.value) || data.category
    }
    if (data.dosageForm) {
      detailInfo.value.dosageForm = dictStr(data.dosageForm, dosageFormList.value) || data.dosageForm
    }
    if (data.packageUnit) {
      detailInfo.value.packageUnit = dictStr(data.packageUnit, packageUnitList.value) || data.packageUnit
    }
    if (data.isImport !== null && data.isImport !== undefined) {
      detailInfo.value.isImport = dictStr(String(data.isImport), isImportList.value) || data.isImport
    }
    if (data.unit) {
      detailInfo.value.unit = dictStr(data.unit, unitList.value) || data.unit
    }
    if (data.contentUnit) {
      detailInfo.value.contentUnit = dictStr(data.contentUnit, contentUnitList.value) || data.contentUnit
    }
  })
}
</script>
  
  <style lang="scss" scoped>
.container {
  background: #f5f7fa;
  padding-bottom: 24rpx;
}

.detail-card {
  margin: 24rpx;
  background: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16rpx 20rpx;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  
  .header-icon {
    width: 48rpx;
    height: 48rpx;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12rpx;
    backdrop-filter: blur(10rpx);
  }
  
  .header-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    
    .card-name {
      color: #ffffff;
      font-size: 28rpx;
      font-weight: 600;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.card-body {
  padding: 24rpx;
}

.info-section {
  margin-bottom: 32rpx;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  .section-title {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    
    .title-icon {
      width: 6rpx;
      height: 28rpx;
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border-radius: 3rpx;
      margin-right: 12rpx;
    }
    
    text {
      color: #2c3e50;
      font-size: 28rpx;
      font-weight: 600;
    }
  }
  
  .info-list {
    .list-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx;
      background: #f8f9fa;
      border-radius: 8rpx;
      margin-bottom: 12rpx;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .item-label {
        color: #7f8c8d;
        font-size: 26rpx;
      }
      
      .item-value {
        color: #2c3e50;
        font-size: 28rpx;
        font-weight: 500;
        text-align: right;
      }
    }
  }
  
  .remark-content {
    padding: 20rpx;
    background: #f8f9fa;
    border-radius: 8rpx;
    
    text {
      color: #2c3e50;
      font-size: 26rpx;
      line-height: 1.6;
    }
  }
}
  </style>