<template>
  <div>
    <el-button type="text" @click="refresh">刷新</el-button>
    <el-button type="text" @click="dialogFormVisible = true">添加</el-button>
    <!-- 绑定设备 -->
    <el-table :data="gridData">
      <el-table-column property="date" label="设备编号" width="150" />
      <el-table-column property="name" label="型号" width="150" />
      <el-table-column property="address" label="供应商" />
      <el-table-column property="address" label="额定功率" />
      <el-table-column property="address" label="注册时间" />
      <el-table-column property="address" label="操作" />
      <!--放置分页 -->
    </el-table>
    <!-- 添加按钮 内层-->
    <el-dialog title="Add" :visible.sync="dialogFormVisible" append-to-body>
      <el-form ref="form" :model="form">
        <div style="">
          <el-form-item label="选择设备">
            <el-select
              v-model="form.region"
              placeholder="选择需要应用计费模板的设备"
            >
              <el-option label="区域一" value="shanghai" />
              <el-option label="区域二" value="beijing" />
            </el-select>
          </el-form-item>
        </div>
        <el-form-item>
          <div style="margin-left: 60%">
            <el-button type="primary" @click="submitForm('form')"
              >提交</el-button
            >
            <el-button @click="resetForm('form')">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gridData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      form: {
        region: "",
      },
      formLabelWidth: "120px",
      // 添加
      dialogFormVisible: false,
    };
  },
  methods: {
    // 刷新
    refresh() {
      alert("刷新成功");
    },
    // 添加 弹框 按钮
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("提交成功");
        } else {
          console.log("提交失败,请重新提交");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.form = "";
    },
  },
};
</script>

<style lang="scss" scoped></style>
