<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>日期</th>
          <td colspan="11">{{ base_info.start_time }}</td>
        </tr>
        <tr>
          <th>产品名称</th>
          <td colspan="11">{{ base_info.material_name }}</td>
        </tr>
        <tr>
          <th>净容量（g）</th>
          <td colspan="2">{{ info.capacity }}</td>
          <th v-for="(col, index) in info.columns" :key="index" colspan="3">{{ col }}</th>
        </tr>
        <tr>
          <th>喷雾剂距离（cm）</th>
          <th colspan="2">试验</th>
          <td v-for="num of 3">{{ num }}</td>
          <td v-for="num of 3">{{ num }}</td>
          <td v-for="num of 3">{{ num }}</td>
        </tr>
        <tr>
          <th>{{ 15 }}</th>
          <th colspan="2">点火？是与否</th>
          <td v-for="d of data['15']">{{ d }}</td>
        </tr>
        <tr>
          <th>{{ 30 }}</th>
          <th colspan="2">点火？是与否</th>
          <td v-for="d of data['30']">{{ d }}</td>
        </tr>
        <tr>
          <th>{{ 45 }}</th>
          <th colspan="2">点火？是与否</th>
          <td v-for="d of data['45']">{{ d }}</td>
        </tr>
        <tr>
          <th>{{ 60 }}</th>
          <th colspan="2">点火？是与否</th>
          <td v-for="d of data['60']">{{ d }}</td>
        </tr>
        <tr>
          <th>{{ 75 }}</th>
          <th colspan="2">点火？是与否</th>
          <td v-for="d of data['75']">{{ d }}</td>
        </tr>
        <tr>
          <th>{{ 90 }}</th>
          <th colspan="2">点火？是与否</th>
          <td v-for="d of data['90']">{{ d }}</td>
        </tr>
        <tr>
          <th colspan="3">试验状态</th>
          <td colspan="3" v-for="s of exp_status">{{ s }}</td>
        </tr>
      </thead>
    </table>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue';
let props = defineProps({
  data: {
    type: Object,
    default: {}
  },
  exp_status: {
    type: Array,
    default: ['', '', '']
  },
  base_info: {
    type: Object,
    default: {}
  }
});
let info = ref({
  date: '2024/06/25 19:20:22',
  productName: '试样',
  capacity: 5,
  columns: ['罐1', '罐2', '罐3'],
  nums: [1, 2, 3],
  distance_list: [15, 30, 45, 60, 75, 90]
});
watchEffect(() => {
  console.log(props.base_info, '////');
});
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}
th,
td {
  border: 1px solid #dcdcdc;
  padding: 8px;
  text-align: center;
}
th {
  background-color: #f2f2f2;
}
</style>
