<template>
  <div class="mode-manage">
    <new-card cardTitle="监测模式管理">
      <el-table :data="dataList">
        <el-table-column label="监测模式" align="center" prop="monType">
        </el-table-column>
        <el-table-column label="监测周期" align="center" prop="mode">
          <template slot-scope="scope"> {{ scope.row.mode }}(min) </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              >{{ "修改" }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </new-card>
    <el-dialog :title="title" :visible.sync="modeVisible">
      <el-form :model="form" ref="form" label-width="120px">
        <el-form-item
          label="监测周期(min)"
          prop="mode"
          :rules="[
            { required: true, message: '监测周期不能为空' },
            { type: 'number', message: '监测周期必须为数字值' },
          ]"
        >
          <el-input v-model="form.mode"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modeVisible = false">取 消</el-button>
        <el-button type="primary" @click="modeVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { pointmonList } from "@/api/lclApi/lclapi";
import cardLcl from "@/components/lclCard/index.vue";
export default {
  name: "mode-manage",
  dicts: ["slope_mon_eq"],
  components: { "new-card": cardLcl },
  props: [],
  data() {
    return {
      dataList: [],
      form: {},
      modeVisible: false,
    };
  },
  watch: {},
  created() {
    this.$nextTick(function () {});
  },
  mounted() {
    this.$nextTick(function () {
      this.getList();
    });
  },
  methods: {
    reset() {
      this.form = {
        id: null,
        monType: null,
        mode: null,
      };
    },
    getList() {
      this.dataList = [
        {
          id: 1,
          monType: "日常模式",
          mode: 30,
        },
        {
          id: 2,
          monType: "紧急模式",
          mode: 5,
        },
      ];
    },
    handleUpdate(row) {
      console.log(row);
      this.form = row;
      this.title = row.monType;
      this.modeVisible = true;
    },
  },
};
</script>
<style lang="scss" scoped>
.mode-manage {
  width: 100%;
}
</style>