<template>
  <div>
    <el-dialog title="对象管理" :visible.sync="dialogVisible" width="80%">
      <div class="title">
        <el-button style="margin-bottom: 10px" @click="addObj"
          >新增对象</el-button
        >
        <p>只能添加两条数据</p>
      </div>

      <el-table :data="dxgl" style="width: 100%" border>
        <el-table-column label="序号">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="dx_name" label="对象名称"> </el-table-column>
        <el-table-column prop="ip" label="IP地址信息"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="deleteRow(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="新增对象" :visible.sync="dialogVisible1" width="30%">
      <div class="ip_address">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="150px"
          class="demo-ruleForm"
          :label-position="labelPosition"
        >
          <el-form-item label="IP类型:" prop="iplx">
            <el-col :span="10">
              <el-select v-model="ruleForm.iplx" style="width: 200px">
                <el-option label="IPV4" value="IPV4"></el-option>
                <el-option label="IPV6" value="IPV6"></el-option>
              </el-select>
            </el-col>
          </el-form-item>

          <el-form-item label="对象名称:" prop="dxmc">
            <el-col :span="10">
              <el-select v-model="ruleForm.dxmc" style="width: 200px">
                <el-option
                  label="有线区交换机"
                  value="有线区交换机"
                ></el-option>
                <el-option
                  label="无线区路由器"
                  value="无线区路由器"
                ></el-option>
                <el-option label="数采服务器" value="数采服务器"></el-option>
              </el-select>
            </el-col>
          </el-form-item>

          <el-form-item label="IP" prop="ip">
            <el-row>
              <el-col :span="5">
                <el-input v-model="ip1"></el-input>
              </el-col>
              <el-col :span="1">. </el-col>
              <el-col :span="5">
                <el-input v-model="ip2"></el-input>
              </el-col>
              <el-col :span="1">.</el-col>
              <el-col :span="5">
                <el-input v-model="ip3"></el-input>
              </el-col>
              <el-col :span="1">.</el-col>
              <el-col :span="5">
                <el-input v-model="ip4"></el-input>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button @click="dialogVisible1 = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { SaveUserAnswer, GetUserAnswer } from "../api/user";
export default {
  data() {
    return {
      dialogVisible: true,
      user_id: "",
      dialogVisible1: false,
      labelPosition: "left",
      dxgl: [],
      ip1: "",
      ip2: "",
      ip3: "",
      ip4: "",
      ruleForm: {
        iplx: "",
        dxmc: "",
        ip: "",
      },
      rules: {
        iplx: [
          { required: true, trigger: "change", message: "选择一个ip类型" },
        ],
        dxmc: [
          { required: true, trigger: "blur", message: "选择一个对象名称" },
        ],
        ip: [
          {
            required: true,
            validator: this.validateIpAddress,
          },
        ],
      },
      json: {},
    };
  },
  created() {
    let that = this;
    window.getParameter = that.getParameter;
    this.GetUserAnswer();
  },
  methods: {
    getParameter(data) {
      console.log(data);
      this.user_id = data.split("|")[0];
      if (data.split("|")[1] == 1) {
        this.$store.commit("setType", "GYWZ_yx");
      } else {
        this.$store.commit("setType", "GYWZ_wx");
      }
    },
    //ip地址验证
    validateIpAddress(rule, value, callback) {
      if (this.ip1 + "." + this.ip2 + "." + this.ip3 + "." + this.ip4 === "") {
        callback(new Error("请输入IP地址"));
      } else if (
        !/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(
          this.ip1 + "." + this.ip2 + "." + this.ip3 + "." + this.ip4
        )
      ) {
        callback(new Error("请输入有效的IP地址"));
      } else {
        callback();
      }
    },
    submitForm(formName) {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.SaveUserAnswer();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async SaveUserAnswer() {
      //拿本地存的数据
      if (this.dxgl.length == 2) {
        return false;
      }
      var json = JSON.parse(sessionStorage.getItem(this.$store.state.type));

      // console.log(this.dxgl);
      let { data } = await SaveUserAnswer({
        mark: `${this.$store.state.type}`,
        user_id: this.user_id,
        mark_value: JSON.stringify({ ...json, ...{ dxgl: this.dxgl } }),
      });
      console.log(data.state);
      if (data.state) {
        console.log(data.data.mark_value);
        this.dxgl.push({
          dx_name: this.ruleForm.dxmc,
          iplx: this.ruleForm.iplx,
          ip: this.ip1 + "." + this.ip2 + "." + this.ip3 + "." + this.ip4,
        });
        this.ruleForm.dxmc = "";
        this.ruleForm.iplx = "";
        this.ip1 = "";
        this.ip2 = "";
        this.ip3 = "";
        this.ip4 = "";
        this.$message({
          message: "保存成功",
          type: "success",
        });
        this.dialogVisible1 = false;
        this.GetUserAnswer();
      } else {
        this.$message.error(data.message);
      }
    },
    async GetUserAnswer() {
      let { data } = await GetUserAnswer({
        mark: `${this.$store.state.type}`,
        user_id: this.user_id,
      });
      if (data.state && data.data) {
        console.log(JSON.parse(data.data.mark_value).dxgl);
        if (JSON.parse(data.data.mark_value).dxgl) {
          this.dxgl = JSON.parse(data.data.mark_value).dxgl;
        }
      }
    },
    //删除
    async deleteRow(index, rows) {
      var json = JSON.parse(sessionStorage.getItem(this.$store.state.type));
      this.dxgl.splice(index, 1);
      let { data } = await SaveUserAnswer({
        mark: `${this.$store.state.type}`,
        user_id: this.user_id,
        mark_value: JSON.stringify({ ...json, ...{ dxgl: this.dxgl } }),
      });
      console.log(data.data);
      if (data.state) {
        this.$message({
          message: "删除成功",
          type: "success",
        });
      } else {
        this.$message.error("删除失败");
      }
    },
    addObj() {
      if (this.dxgl.length == 2) {
        return;
      }
      this.dialogVisible1 = true;
    },
  },
};
</script>
<style scoped lang="less">
// /deep/ .ip_address {
//   .el-input__inner {
//     height: 30px;
//     text-align: center;
//     padding: 0;
//   }

//   .el-row {
//     display: flex;
//     align-items: flex-end;

//     .el-col-1 {
//       padding: 0px 2px;
//       color: black;
//       text-align: left;
//       line-height: 32px;
//       height: 20px;
//     }

//     .el-col-5 {
//       width: 43px;
//       height: 30px;
//     }

//     .el-col-24 {
//       padding-right: 152px;
//     }
//   }
// }
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: transparent !important;
}
.title {
  display: flex;
  align-items: center;
  p {
    margin-left: 20px;
    color: red;
  }
}
.el-col-1 {
  padding: 0px 4px;
  line-height: 62px;
  height: 20px;
  text-align: center;
}

.el-input__inner {
  height: 30px;
}

.el-col-5 {
  width: 43px;
  height: 30px;
}
.el-table {
  height: 400px;
}
</style>
