<!-- 查看样品详情 -->
<template>
  <view>
    <u-popup :show="showPopup" @close="close" @open="open" mode="left">
      <view class="detail_title">
        {{ taskDetail.sampleCode }}
      </view>
      <view>
        <scroll-view scroll-y style="height: 100vh; width: 30vw">
          <view style="padding: 10px">
            <up-collapse :value="getAllIndexes(fieldGroup)" :accordion="false">
              <up-collapse-item
                v-for="(fields, groupIndex) in fieldGroup"
                :title="fields.title"
                :key="groupIndex"
                v-if="curParameterKey === '' || curParameterKey === fields.title"
              >
                <view
                  class="form-item-my"
                  v-for="(field, fieldIndex) in fields.fields"
                  :key="groupIndex + '-' + fieldIndex"
                >
                  <view
                    class="label-my"
                    v-html="
                      field.name +
                      (typeof field.unit !== 'undefined' && field.unit !== null ? '(' + field.unit + ')' : '')
                    "
                  ></view>
                  <view class="content-my">
                    <view class="content-my-text" v-if="field.type !== 'select'">
                      <text class="content-my-text-value">{{ field.value }}</text>
                    </view>
                    <view class="content-my-text" v-else>
                      <text class="content-my-text-value">{{ field.valueText }}</text>
                    </view>
                  </view>
                </view>
              </up-collapse-item>
            </up-collapse>
          </view>
          <view class="p30"></view>
        </scroll-view>
      </view>
    </u-popup>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import nx from '@/nx'

// Props
const props = defineProps({
  showPopup: {
    type: Boolean,
    default: false
  },
  detailPopupParam: {
    type: Object,
    default: () => ({
      taskDetailId: ''
    })
  }
})

// Data
const curSample = ref({})
const curParameterKey = ref('')
const fieldGroup = ref([])
const taskDetail = ref({})
const optionParameterClassify = ref([])
const conAssayTaskId = ref('')
const busSubCSampleId = ref('')

// Methods
const getAllIndexes = arr => {
  return arr.map((_, index) => index)
}

const close = () => {
  uni.$emit('sample-detail-popup_close')
}

const getSampleData = () => {
  const taskDetailId = props.detailPopupParam.taskDetailId
  nx.$api.assayTask.queryFieldsByTaskDetail({ taskDetailId }).then(res => {
    fieldGroup.value = res.result

    const arr = [{ label: '全部', value: '' }]
    for (const g of fieldGroup.value) {
      const title = g.title
      arr.push({
        label: title,
        value: title
      })
    }
    optionParameterClassify.value = arr // 字段分类
    conAssayTaskId.value = res.additionalProperties.conAssayTaskId
    busSubCSampleId.value = res.additionalProperties.busSubCSampleId
    taskDetail.value = res.additionalProperties.taskDetail
  })
}

const open = () => {
  getSampleData()
}
</script>

<style scoped lang="scss">
.form-item-my {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.label-my {
  width: 180px; /* 标签宽度 */
  display: flex;
  align-items: center;
}

.label-my sub {
  font-size: 0.6em; /* 调整下标字体大小 */
  vertical-align: sub; /* 调整下标垂直对齐 */
}

.content-my {
  flex: 1;
  padding-left: 7px;
}

.content-my-text {
  height: 35px;
  display: flex;
  align-items: center;
}
.content-my-text-value {
  color: rgb(48, 49, 51);
}

.detail_title {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  font-size: 18px;
  font-weight: 400;
  padding-top: 30px;
  padding-bottom: 10px;
  background-color: $uni-color-primary;
  color: #fff;
}
</style>
