<template>
  <el-drawer
    title="详情"
    :visible.sync="visible"
    direction="rtl"
    :size="drawerWidth"
    :before-close="handleClose"
  >
    <div class="info-form">
      <el-form ref="ruleForm" :model="ruleForm" size="small" label-width="80px">
        <el-form-item label="河湖名称" prop="inspectNo">
          <el-input :disabled="true" clearable v-model="ruleForm.driverName" size="small"/>
        </el-form-item>
        <el-form-item label="巡检时间" prop="driverName">
          <el-input :disabled="true" clearable v-model="ruleForm.inspectTime" size="small"/>
        </el-form-item>
        <el-form-item label="水质标准" prop="alarmStandard">
          <el-input :disabled="true" clearable v-model="ruleForm.alarmStandard" size="small"/>
        </el-form-item>
      </el-form>
      <el-table
        stripe
        ref="table"
        :data="ruleForm.infoList"
        border
        size="small"
        row-key="id"
      >
        <el-table-column :index="indexMethod" label="序号" type="index" width="80" align="center"/>
        <el-table-column
          min-width="100"
          show-overflow-tooltip
          prop="name"
          label="参数名称"
          align="center"
        ></el-table-column>
        <el-table-column min-width="100" show-overflow-tooltip prop="standardValue" label="标准值" align="center"/>
        <el-table-column min-width="100" show-overflow-tooltip prop="measuredValue" label="实测值" align="center"/>
        <el-table-column show-overflow-tooltip prop="measuredStandard" label="实测标准" align="center" min-width="100"/>
        <el-table-column show-overflow-tooltip prop="exceedStandard" label="超标情况" align="center" min-width="160">
        </el-table-column>
      </el-table>
      <div style="text-align: center;margin-top: 15px">
        <el-button
          icon="el-icon-back"
          style="margin-left: 15px"
          size="medium"
          @click="handleClose"
        >返回
        </el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
  import api from '@/api/water/waterData'

  export default {
    name: "info-form",
    data() {
      return {
        drawerWidth: document.body.clientWidth - 190 + "px",
        ruleForm: {},
      };
    },
    props: {
      visible: {
        type: Boolean,
        default() {
          return false;
        }
      },
      data: {
        type: Object,
        default() {
          return {};
        }
      }
    },
    components: {},
    created() {
      this.ruleForm = JSON.parse(JSON.stringify(this.data));
    },
    mounted() {
    },
    methods: {
      handleClose() {
        this.$emit("handleClose");
      }
    }
  };
</script>
