<template>
  <el-dialog
    v-model="dialogFormVisible"
    :title="title"
    width="1000px"
    @close="close"
  >
    <el-table :data="tableData" stripe border style="width: 100%">
      <el-table-column
        fixed
        property="deviceName"
        label="站点名称"
        width="200"
        align="center"
      ></el-table-column>
      <el-table-column
        property="sampleQuantity"
        label="样品数量"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        property="sampleBack.dataValue"
        label="样品取回"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        property="sampleType.dataValue"
        label="样品类型"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        property="detectionItems"
        label="检测项目"
        width="100"
        align="center"
      >
        <template #default="{ row }">
          <span v-for="(item, index) in row.detectionItems" :key="index">
            {{ item.dataValue }}
            <br />
          </span>
        </template>
      </el-table-column>
      <el-table-column
        property="detectionReport.dataValue"
        label="检测报告"
        width="150"
        align="center"
      ></el-table-column>
      <el-table-column
        property="reportIssued.dataValue"
        label="报告出具"
        width="150"
        align="center"
      ></el-table-column>
      <el-table-column
        property="reportUse.dataValue"
        label="报告用途"
        width="150"
        align="center"
      ></el-table-column>
      <el-table-column
        property="asOfTime"
        label="截止时间"
        width="200"
        align="center"
      ></el-table-column>
      <el-table-column
        property="remark"
        label="备注"
        width="200"
        align="center"
      ></el-table-column>
    </el-table>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      title: '',
      tableData: [],
    };
  },
  methods: {
    showDetail(row) {
      this.title = '水质申请';
      this.tableData[0] = row;
      this.dialogFormVisible = true;
    },
  },
  close() {
    this.$refs['form'].resetFields();
    this.form = this.$options.data().form;
    this.dialogFormVisible = false;
    this.$emit('fetch-data');
  },
};
</script>
