<template>
  <div>
    <el-dialog title="网关配置" :visible.sync="dialogVisible">
      <el-dialog title="详情" :visible.sync="xqFlag" width="30%">
        <div class="xqbox">
          <p>
            <span class="s1">网关编号:</span> <span>{{ rowDate.wgbh }}</span>
          </p>
          <p>
            <span class="s1">网关id:</span> <span>{{ rowDate.wgid }}</span>
          </p>
          <p>
            <span class="s1">网关类型:</span> <span>{{ rowDate.wglx }}</span>
          </p>
          <p>
            <span class="s1">网关名称:</span> <span>{{ rowDate.wgmc }}</span>
          </p>
        </div>
      </el-dialog>

      <div class="title">
        <div class="left">
          <el-button @click="flag = true">新建网关</el-button>
          <el-button @click="deleteSelectedRows">删除</el-button>
        </div>
        <!-- <div class="right">
          <el-input type="search" v-model="search"></el-input>
          <el-button @click="select">筛选</el-button>
        </div> -->
      </div>
      <el-table
        ref="multipleTable"
        :data="wgpz"
        border
        style="margin-top: 10px; width: 100%"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column label="序号">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template></el-table-column
        >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="wgid" label="网关ID"> </el-table-column>
        <el-table-column prop="wgbh" label="网关编号"> </el-table-column>
        <el-table-column prop="wgmc" label="网关名称"> </el-table-column>
        <el-table-column prop="wglx" label="网关类型"> </el-table-column>
        <el-table-column prop="whr" label="维护人"> </el-table-column>
        <el-table-column prop="whsj" label="维护时间"> </el-table-column>
        <el-table-column label="修改">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template></el-table-column
        >
        <el-table-column label="详细">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="chakan(scope.$index, scope.row)"
              >查看</el-button
            >
          </template></el-table-column
        >
        <el-table-column label="参数配置">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="$router.push('/ntmaintenance?' + scope.row.wgbh)"
              >参数配置</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="新建网关" :visible.sync="flag" width="30%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="150px"
        class="demo-ruleForm"
        :label-position="labelPosition"
      >
        <el-form-item label="网关类型:" prop="wglx">
          <el-col :span="12">
            <el-select v-model="ruleForm.wglx">
              <el-option label="box" value="box"></el-option>
              <el-option label="server port" value="server port"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="网关编号:" prop="wgbh">
          <el-col :span="12">
            <el-select v-model="ruleForm.wgbh">
              <el-option label="2000808010" value="2000808010"></el-option>
              <el-option label="2000808011" value="2000808011"></el-option>
              <el-option label="2000808012" value="2000808012"></el-option>
              <el-option label="2000808013" value="2000808013"></el-option>
              <!-- <el-option label="2000808014" value="2000808014"></el-option>
              <el-option label="2000808015" value="2000808015"></el-option> -->
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="网关ID:" prop="wgid">
          <el-col :span="12">
            <el-select v-model="ruleForm.wgid">
              <el-option label="lan-box1" value="lan-box1"></el-option>
              <el-option label="lan-box2" value="lan-box2"></el-option>
              <el-option label="wlan-box1" value="wlan-box1"></el-option>
              <el-option label="wlan-box2" value="wlan-box2"></el-option>
              <!-- <el-option
                label="lan- server port"
                value="lan- server port"
              ></el-option>
              <el-option
                label="wlan- server port"
                value="wlan- server port"
              ></el-option> -->
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="网关名称:" prop="wgmc">
          <el-col :span="12">
            <el-select v-model="ruleForm.wgmc">
              <el-option label="有线区网关1" value="有线区网关1"></el-option>
              <el-option label="有线区网关2" value="有线区网关2"></el-option>
              <el-option label="无线区网关1" value="无线区网关1"></el-option>
              <el-option label="无线区网关2" value="无线区网关2"></el-option>
              <!-- <el-option
                label="有线区串口服务器"
                value="有线区串口服务器"
              ></el-option>
              <el-option
                label="无线区串口服务器"
                value="无线区串口服务器"
              ></el-option> -->
            </el-select>
          </el-col>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveinfo">保存</el-button>
        <el-button @click="flag = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: true,
      xqFlag: false,
      flag: false,
      labelPosition: "left",
      wgpz: [],
      FormData: [],
      search: "",
      rowDate: {},
      ruleForm: {
        wglx: "",
        wgid: "",
        wgbh: "",
        wgmc: "",
      },
      rules: {
        wglx: [
          { required: true, trigger: "change", message: "请选择一个选项" },
        ],
        wgid: [
          { required: true, trigger: "change", message: "请选择一个选项" },
        ],
        wgbh: [
          { required: true, trigger: "change", message: "请选择一个选项" },
        ],
        wgmc: [
          { required: true, trigger: "change", message: "请选择一个选项" },
        ],
      },
    };
  },
  created() {
    this.wgpz = JSON.parse(localStorage.getItem("wgpz")) || [];
  },
  methods: {
    handleSelectionChange() {},
    //新建网关保存
    saveinfo() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          if (this.wgpz.length < 4) {
            this.wgpz.push(this.ruleForm);
            localStorage.setItem("wgpz", JSON.stringify(this.wgpz));
            this.$message({
              message: "添加成功",
              type: "success",
            });
            this.flag = false;
          } else {
            this.$message({
              message: "抱歉，只能添加四条数据",
              type: "error",
            });
            return false;
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //删除
    handleDelete(a, b) {
      this.wgpz.splice(a, 1);
      localStorage.setItem("wgpz", JSON.stringify(this.wgpz));
      this.$message({
        message: "删除成功",
        type: "success",
      });
    },
    //多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //多选删除
    deleteSelectedRows() {
      this.wgpz = this.wgpz.filter(
        (row) => !this.multipleSelection.includes(row)
      );
      this.multipleSelection = [];
      localStorage.setItem("wgpz", JSON.stringify(this.wgpz));
      this.$message({
        message: "删除成功",
        type: "success",
      });
    },
    chakan(a, b) {
      this.rowDate = b;
      this.xqFlag = true;
    },
  },
};
</script>
<style scoped lang="less">
.title {
  display: flex;
  justify-content: space-between;

  div {
    display: flex;
  }
}

.el-table {
  margin-top: 10px;
}
.xqbox {
  p {
    margin: 5px;
    display: flex;
    .s1 {
      width: 70px;
      color: #0275ff;
    }
  }
}
</style>
