<template>
  <up-popup :show="visible" mode="right" closeable @close="handleClose" @open="handleOpen">
    <uni-section titleFontSize="20px" type="line" title="设备使用记录"> </uni-section>
    <scroll-view scroll-y="true" class="content">
      <up-row>
        <up-col span="4"
          >开始使用人：
          <text class="value">{{ detailInfo.userName }}</text>
        </up-col>
        <up-col span="4"
          >开始时间：
          <text class="value">{{ nx.$helper.formateToDateTime(detailInfo.useTimeStart) }}</text>
        </up-col>
		<up-col span="4"
		  >结束时间：
		  <text class="value">{{ nx.$helper.formateToDateTime(detailInfo.useTimeEnd) }}</text>
		</up-col>
      </up-row>
      <up-row>
        <up-col span="4"
          >使用前状态：
          <text class="value">{{ detailInfo.stateBefore }}</text>
        </up-col>
        <up-col span="4"
          >使用中状态：
          <text class="value">{{ detailInfo.stateRun }}</text>
        </up-col>
       <up-col span="4"
         >使用后状态：
         <text class="value">{{ detailInfo.stateAfter }}</text>
       </up-col>
      </up-row>
      <up-row>
		  <up-col span="4"
		    >温度(℃)：
		    <text class="value">{{ detailInfo.temperature }}</text>
		  </up-col>
        <up-col span="4"
          >湿度(%RH)：
          <text class="value">{{ detailInfo.humidity }}</text>
        </up-col>
        <up-col span="4"
          >检测项目：
          <text class="value">{{ detailInfo.useItem }}</text>
        </up-col>
      </up-row>
      <u-table2 class="mt8" height="300px" :data="tableData" :columns="columns" stripe border> </u-table2>
    </scroll-view>
  </up-popup>
</template>

<script setup>
import { ref, reactive, onMounted, watch, computed } from 'vue'
import nx from '@/nx'
import { getDetailList } from './useRecord.api'

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  checkInfo: {
    type: Object
  }
})
const visible = ref(props.show)
// 监听外部传入的show属性变化
watch(
  () => props.show,
  newVal => {
    visible.value = newVal
  }
)
let detailInfo = ref({})

const emit = defineEmits(['close', 'open'])
function handleClose() {
  emit('close')
}

const columns = ref([
  { title: '样品名称', key: 'sampleName', align: 'center' },
  { title: '样品编号', key: 'sampleCode', align: 'center' }
])
const tableData = ref([])
async function getUseRecordDetailList(id) {
  const res = await getDetailList({ parentId: id })
  tableData.value = res
}
function handleOpen() {
  detailInfo.value = props.checkInfo
  getUseRecordDetailList(props.checkInfo.id)
}
</script>

<style lang="scss" scoped>
.content {
  font-size: 18px;
  height: 80vh;
  width: 80vw;
  padding: 10px 20px;
  .u-row {
    border-bottom: 1px solid #eee;
    padding: 10px 0;
  }

  .value {
    color: #666;
    font-size: 16px;
  }
}
:deep(.uicon-close) {
  font-size: 22px !important;
}
:deep(.u-popup__content__close--top-right) {
  top: 30px;
}
</style>
