<!-- 查看样品详情 -->
<template>
  <view>
    <u-popup :show="showPopup" @close="close" @open="open" mode="left">
      <view class="detail_title">
        {{ taskDetail.sampleName }}
        {{ taskDetail.sampleAssayCode }}
      </view>
      <view>
        <scroll-view scroll-y style="height: 100vh; width: 30vw">
          <view style="padding: 10px">
            <view class="form-item-my" v-for="(field, index) in fields" :key="index">
              <view class="label-my">{{ field.title }}</view>
              <view class="value-my">{{ field.value }}</view>
            </view>
          </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
  },
  detailId: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:showPopup'])
// Data
const fields = ref([])
const taskDetail = ref({})

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

const close = () => {
  emit('update:showPopup', false)
}

const getSampleData = () => {
  const businessAssayTaskDataId = props.detailId
  nx.$api.assayTask.getSampleAnalysisDataByTaskDataId({ businessAssayTaskDataId }).then(res => {
    taskDetail.value = res
    fields.value = res.columns
  })
}
const open = () => {
  getSampleData()
}
</script>

<style scoped lang="scss">
.form-item-my {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee;
  padding: 4px 0;
}
.label-my {
  color: #606266;
}

.detail_title {
  text-align: center;
  font-size: 18px;
  font-weight: 400;
  padding: 10px;
  background-color: $uni-color-primary;
  color: #fff;
}
</style>
