<template>
  <div class="pd10">
    <!-- 前置 -->
    <el-row>
      <el-col :span="12">
        <el-form :inline="true" :model="formInline"  class="demo-form-inline">
          <el-form-item label="前置等级:">
            <el-select
              v-model="formInline.nodeGrade"
              placeholder="请选择终端型号"
            >
              <el-option
                v-for="item in fontdveoption"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态:">
            <el-select
              v-model="formInline.searchState"
              placeholder="请选择终端状态"
            >
              <el-option
                v-for="item in statusoption"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="query"
              >查询</el-button
            >
          </el-form-item>
        </el-form></el-col
      >
      <el-col :span="12">
        <!-- <el-button
          style="float: right; margin-right: 20px;"
          type="primary"
          icon="el-icon-check"
          >导出</el-button
        > -->
        <el-button
          style="float: right; margin-right: 20px"
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="add"
          >新增
        </el-button>
      </el-col>
    </el-row>

    <el-table
      stripe
      :data="tableData"
      border
      :row-config="{ isCurrent: true, isHover: true }"
      highlight-current-row
      :height="vh + 'px'"
      style="width: 100%"
      v-loading="loading"
      header-cell-class-name="table_header"
    >
      <el-table-column
        align="center"
        prop="name"
        label="名称"
      ></el-table-column>
      <el-table-column align="center" prop="ip" label="IP"></el-table-column>
      <el-table-column align="center" prop="nodeGrade" label="等级">
        <template slot-scope="scope">
          <el-tag type="primary" v-if="scope.row.nodeGrade === 1">普通</el-tag>
          <el-tag type="primary" v-if="scope.row.nodeGrade === 0"
            >极重要</el-tag
          >
          <el-tag type="primary" v-if="scope.row.nodeGrade === 2">备用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="nodeDevNum"
        label="最大监测点数量"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="sort"
        label="排序"
      ></el-table-column>
      <el-table-column align="center" prop="state" label="状态">
        <template slot-scope="scope">
          <el-tag type="primary" v-if="scope.row.state === 1">启用</el-tag>
          <el-tag type="primary" v-if="scope.row.state === 0">未启用</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="remark"
        label="描述"
      ></el-table-column>
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="edit(scope.row)" icon="el-icon-edit"
            >修改</el-button
          >
          <el-button type="danger" size="mini" @click="Delete(scope.row)" icon="el-icon-delete"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      class="mt10"
      align="right"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="formInline.pageNum"
      :page-sizes="[20, 30, 40, 50, 100]"
      :page-size="formInline.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!--新增-->
    <el-dialog :close-on-click-modal="false"
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      
    >
      <el-form ref="form" :model="formData" :rules="rules" label-width="110px">
        <el-form-item label="名称:" prop="name">
          <el-input
            v-model="formData.name"
            
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="IP:" prop="ip" class="top">
          <el-input
            v-model="formData.ip"
            
            placeholder="请输入Ip"
          ></el-input>
        </el-form-item>
        <el-form-item label="等级:" prop="nodeGrade" class="top">
          <el-select
            v-model="formData.nodeGrade"
            placeholder="请选择等级"
            style="width: 100%;"
          >
            <el-option
              v-for="item in fontdveoptionForm"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="最大装置数:" prop="nodeDevNum" class="top">
          <el-input
            v-model="formData.nodeDevNum"
            
            onkeyup="value = value.replace(/[^0-9]/g,'')"
            maxlength="5"
            placeholder="请输入最大装置数"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序:" prop="sort" class="top">
          <el-input
            v-model="formData.sort"
            
            placeholder="请输入排序"
          ></el-input>
        </el-form-item>
        <el-form-item label="描述:" prop="remark" class="top">
          <el-input
            v-model="formData.remark"
            
            placeholder="请输入描述"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import node from "@/api/device/node";
export default {
  name: "premage",
  data() {
    return {
      dialogVisible: false,
      loading: true,
      vh: undefined,
      formInline: {
        nodeGrade: "",
        searchState: "",
        pageNum: 1,
        pageSize: 20,
      },
      title: "",
      total: 2,
      fontdve: "",
      fontdveoption: [
        { id: "", name: "全部" },
        { id: 0, name: "极重要" },
        { id: 1, name: "普通" },
        { id: 2, name: "备用" },
      ],
      fontdveoptionForm: [
        { id: 0, name: "极重要" },
        { id: 1, name: "普通" },
        { id: 2, name: "备用" },
      ],
      status: "",
      statusoption: [
        { id: "", name: "全部" },
        { id: 0, name: "未启用" },
        { id: 1, name: "启用" },
      ],
      // //分页
      // pageData: {
      //   currentPage: 1,
      //   pagesize: 20,
      //   total: 0,
      // },
      operaType: 0, //0新增 1 修改 2 查看
      formData: {},
      //列表
      tableData: [],
      rules:{
        name:[{ required: true, message: "名称不可为空", trigger: "blur" }],
        ip:[{ required: true, message: "ip不可为空", trigger: "blur" }],
        nodeGrade:[{ required: true, message: "等级不可为空", trigger: "blur" }],
        nodeDevNum:[{ required: true, message: "最大装置数不可为空", trigger: "blur" }],
        sort:[{ required: true, message: "排序不可为空", trigger: "blur" }],
        remark:[{ required: true, message: "描述不可为空", trigger: "blur" }],
      }
    };
  },
  created() {},
  mounted() {
    this.setHeight()
        window.addEventListener('resize', this.setHeight)
    this.query();
   
   
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
          this.vh = window.sessionStorage.getItem("appheight") - 96;
          
        },
     // 表单重置
     resetForm() {
     
     if (this.$refs["form"]) {
       this.$refs["form"].resetFields();
     }
   },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.formInline.pageSize = val;
      this.query();
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.formInline.pageNum = val;
      this.query();
    },

    //新增
    add() {
      this.formData = {};
      this.dialogVisible = true;
      this.operaType = 0;
      this.title = "新增前置机";
    },
    //关闭
    handleClose() {
      this.dialogVisible = false;
      this.resetForm()
    },
    //修改
    edit(row) {
      this.dialogVisible = true;
      this.operaType = 1;
      this.title = row.name + "修改";
      this.getOne(row.id);
    },
    //删除
    Delete(row) {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          node.delete(row.id).then((response) => {
            if (response.code === "A0000") {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.query();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //获取主界面列表
    query() {
      this.loading = true;
      node.getList(this.formInline).then((response) => {
        if (response.code === "A0000") {
          let res = response.data;
          this.formInline.currentPage = res.current;
          this.formInline.pagesize = res.size;
          this.total = res.total;
          this.tableData = res.records;
        }
      });
      this.loading = false;
    },
    //获取单个前置机详情
    getOne(id) {
      node.getOne(id).then((response) => {
        if (response.code === "A0000") {
          this.formData = response.data;
        }
      });
    },
    //提交
    submit() {
      this.$confirm("是否确认操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if (this.operaType === 0) {
          node.add(this.formData).then((response) => {
            if (response.code === "A0000") {
              this.$message({
                type: "success",
                message: "新增成功!",
              });
              this.dialogVisible = false;
              this.query();
            }
          });
        } else {
          //修改
          node.update(this.formData).then((response) => {
            if (response.code === "A0000") {
              this.$message({
                type: "success",
                message: "修改成功!",
              });
              this.dialogVisible = false;
              this.query();
            }
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../../styles/comStyle.less");
// /deep/.el-form-item--small .el-form-item__content,
// .el-form-item--small .el-form-item__label {
//   height: 32px;
// }
</style>
