<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="$t('dataEnquiry.zdmc')"
        width="200"
        align="center"
      ></el-table-column>
      <el-table-column
        property="sampleQuantity"
        :label="$t('apply.ypsl')"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        property="sampleBack.dataValue"
        :label="$t('apply.ypqh')"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        property="sampleType.dataValue"
        :label="$t('apply.yplx')"
        width="100"
        align="center"
      ></el-table-column>
      <el-table-column
        property="detectionItems"
        :label="$t('apply.jcxm')"
        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="$t('apply.jcbg')"
        width="150"
        align="center"
      ></el-table-column>
      <el-table-column
        property="reportIssued.dataValue"
        :label="$t('apply.bgcj')"
        width="150"
        align="center"
      ></el-table-column>
      <el-table-column
        property="reportUse.dataValue"
        :label="$t('apply.bgyt')"
        width="150"
        align="center"
      ></el-table-column>
      <el-table-column
        property="asOfTime"
        :label="$t('apply.jzsj')"
        width="200"
        align="center"
      ></el-table-column>
      <el-table-column
        property="remark"
        :label="$t('alarm.bz')"
        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>
