<template>
  <div>
    <el-dialog :title="$t('objmanagement.title')" :visible.sync="dialogVisible" width="80%">
      <div class="title">
        <el-button style="margin-bottom: 10px" @click="addObj"
          >{{ $t('objmanagement.createObject') }}</el-button
        >
        <p style="font-size: 18px">{{ $t('objmanagement.conditionalLimitations') }}</p>
      </div>

      <el-table :data="dxgl" style="width: 100%" border>
        <el-table-column :label="$t('objmanagement.num')">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="dx_name" :label="$t('objmanagement.objectName')"> </el-table-column>
        <el-table-column prop="ip" :label="$t('objmanagement.IPAddress')"> </el-table-column>
        <el-table-column fixed="right" :label="$t('objmanagement.Operation')" 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)"
              >{{ $t('del') }}</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog :title="$t('objmanagement.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="$t('objmanagement.ipType')" prop="iplx">
            <el-col :span="10">
              <el-select v-model="ruleForm.iplx" style="width: 200px" :placeholder="$t('select')">
                <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="$t('objmanagement.IPAddress')" prop="dxmc">
            <el-col :span="10">
              <el-select v-model="ruleForm.dxmc" style="width: 200px" :placeholder="$t('select')">
                <!-- <el-option
                  label="有线区交换机"
                  value="有线区交换机"
                ></el-option>
                <el-option
                  label="无线区路由器"
                  value="无线区路由器"
                ></el-option>
                <el-option label="数采服务器" value="数采服务器"></el-option> -->
                <el-option v-for="(item,index) in option" :key="index" :label="item.label" :value="item.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">{{ $t('save') }}</el-button>
        <el-button @click="dialogVisible1 = false">{{ $t('cancel') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {SaveUserAnswer, GetUserAnswer, getQueryAnswer} from "../api/user";
export default {
  data() {
    return {
      option:this.$t('objmanagement.option'),
      dialogVisible: true,
      user_id: "",
      dialogVisible1: false,
      labelPosition: "left",
      ip1: "",
      ip2: "",
      ip3: "",
      ip4: "",
      ruleForm: {
        iplx: "",
        dxmc: "",
        ip: "",
      },
      rules: {
        iplx: [
          { required: true, trigger: "change", message: this.$t('objmanagement.rules.ip_type') },
        ],
        dxmc: [
          { required: true, trigger: "blur", message: this.$t('objmanagement.rules.ip_objName') },
        ],
        ip: [
          {
            required: true,
            validator: this.validateIpAddress,
          },
        ],
      },
      json: {},
      wlgl_nw_name: "",
      wlgl_nw_ip: "",
      wlgl_nw_zwym: "",
      wlgl_ww_name: "",
      wlgl_ww_ip: "",
      wlgl_ww_zwym: "",

      dxgl: [],
      clgl_name: "",
      clgl_xy: "",
      clgl_gzms: "",
      clgl_ydx: "",
      clgl_ydk: "",

      clgl_mddx: "",
      clgl_mddk: "",
      clgl_rkwg: "",
      clgl_rkwk: "",
      clgl_rkip: "",
      clgl_ckwg: "",
      clgl_ckwk: "",
      clgl_ckip: "",
      clgl_wdyml: "",

      cmdlist_ml: "",
      cmdlist_sbid: "",
      cmdlist_qsdz: "",
      cmdlist_dzcd: "",
      cmdlist_ms: "",
      cmdlist_dz: "",
    };
  },
  mounted() {
    this.dialogVisible = true;

    let str = window.location.href.split("?")[1];
    this.user_id = decodeURIComponent(str).split("|")[0];
    let type = decodeURIComponent(str).split("|")[1];
    if (type == 1) {
      this.$store.commit("setType", "GYWZ_yx");
    } else {
      this.$store.commit("setType", "GYWZ_wx");
    }
    // alert(this.user_id, this.$store.state.type);
    console.log(this.user_id, this.$store.state.type);
    this.GetUserAnswer();
  },
  methods: {
    //ip地址验证
    validateIpAddress(rule, value, callback) {
      if (this.ip1 + "." + this.ip2 + "." + this.ip3 + "." + this.ip4 === "") {
        callback(new Error(this.$t('objmanagement.rules.ippz_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(this.$t('objmanagement.rules.ippz_ip1')));
      } 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;
      }
      this.dxgl.push({
        dx_name: this.ruleForm.dxmc,
        iplx: this.ruleForm.iplx,
        ip: this.ip1 + "." + this.ip2 + "." + this.ip3 + "." + this.ip4,
      });

      let obj = {
        wlgl_nw_name: this.wlgl_nw_name,
        wlgl_nw_ip: this.wlgl_nw_ip,
        wlgl_nw_zwym: this.wlgl_nw_zwym,
        wlgl_ww_name: this.wlgl_ww_name,
        wlgl_ww_ip: this.wlgl_ww_ip,
        wlgl_ww_zwym: this.wlgl_ww_zwym,

        dxgl: this.dxgl,
        clgl_name: this.clgl_name,
        clgl_xy: this.clgl_xy,
        clgl_gzms: this.clgl_gzms,
        clgl_ydx: this.clgl_ydk,
        clgl_ydk: this.clgl_ydk,

        clgl_mddx: this.clgl_mddx,
        clgl_mddk: this.clgl_mddk,
        clgl_rkwg: this.clgl_rkwg,
        clgl_rkwk: this.clgl_rkwk,
        clgl_rkip: this.clgl_rkip,
        clgl_ckwg: this.clgl_ckwg,
        clgl_ckwk: this.clgl_ckwk,
        clgl_ckip: this.clgl_ckip,
        clgl_wdyml: this.clgl_wdyml,

        cmdlist_ml: this.cmdlist_ml,
        cmdlist_sbid: this.cmdlist_sbid,
        cmdlist_qsdz: this.cmdlist_qsdz,
        cmdlist_dzcd: this.cmdlist_dzcd,
        cmdlist_ms: this.cmdlist_ms,
        cmdlist_dz: this.cmdlist_dz,
      };

      let { data } = await SaveUserAnswer({
        mark: this.$store.state.type,
        user_id: this.user_id,
        // mark: "GYWZ_wx",
        // user_id: "USER202307301109254198",
        mark_value: JSON.stringify(obj),
      });

      if (data.state) {
        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: this.$t('success'),
          type: "success",
        });
        this.dialogVisible1 = false;
        this.GetUserAnswer();
      } else {
        this.$message.error(this.$t('fail'));
      }
    },
    async GetUserAnswer() {
      let { data } = await GetUserAnswer({
        mark: this.$store.state.type,
        user_id: this.user_id,
        // mark: "GYWZ_wx",
        // user_id: "USER202307301109254198",
      });
      if (data.state && data.data) {
        let res = JSON.parse(data.data.mark_value);

          this.wlgl_nw_name = res.wlgl_nw_name;
          this.wlgl_nw_ip = res.wlgl_nw_ip;
          this.wlgl_nw_zwym = res.wlgl_nw_zwym;
          this.wlgl_ww_name = res.wlgl_ww_name;
          this.wlgl_ww_ip = res.wlgl_ww_ip;
          this.wlgl_ww_zwym = res.wlgl_ww_zwym;
          this.dxgl = res.dxgl;
          this.clgl_name = res.clgl_name;
          this.clgl_xy = res.clgl_xy;
          this.clgl_gzms = res.clgl_gzms;
          this.clgl_ydx = res.clgl_ydx;
          this.clgl_ydk = res.clgl_ydk;
          this.clgl_mddx = res.clgl_mddx;
          this.clgl_mddk = res.clgl_mddk;
          this.clgl_rkwg = res.clgl_rkwg;
          this.clgl_rkwk = res.clgl_rkwk;
          this.clgl_rkip = res.clgl_rkip;
          this.clgl_ckwg = res.clgl_ckwg;
          this.clgl_ckwk = res.clgl_ckwk;
          this.clgl_ckip = res.clgl_ckip;
          this.clgl_wdyml = res.clgl_wdyml;
          this.cmdlist_ml = res.cmdlist_ml;
          this.cmdlist_sbid = res.cmdlist_sbid;
          this.cmdlist_qsdz = res.cmdlist_qsdz;
          this.cmdlist_dzcd = res.cmdlist_dzcd;
          this.cmdlist_ms = res.cmdlist_ms;
          this.cmdlist_dz = res.cmdlist_dz;
      }else{
        getQueryAnswer({
          mark: this.$store.state.type,
          user_id: this.user_id
        }).then(data => {
          let res = JSON.parse(data.data.data.r3);
            this.wlgl_nw_name = res.wlgl_nw_name;
            this.wlgl_nw_ip = res.wlgl_nw_ip;
            this.wlgl_nw_zwym = res.wlgl_nw_zwym;
            this.wlgl_ww_name = res.wlgl_ww_name;
            this.wlgl_ww_ip = res.wlgl_ww_ip;
            this.wlgl_ww_zwym = res.wlgl_ww_zwym;
            this.dxgl = res.dxgl;
            this.clgl_name = res.clgl_name;
            this.clgl_xy = res.clgl_xy;
            this.clgl_gzms = res.clgl_gzms;
            this.clgl_ydx = res.clgl_ydx;
            this.clgl_ydk = res.clgl_ydk;
            this.clgl_mddx = res.clgl_mddx;
            this.clgl_mddk = res.clgl_mddk;
            this.clgl_rkwg = res.clgl_rkwg;
            this.clgl_rkwk = res.clgl_rkwk;
            this.clgl_rkip = res.clgl_rkip;
            this.clgl_ckwg = res.clgl_ckwg;
            this.clgl_ckwk = res.clgl_ckwk;
            this.clgl_ckip = res.clgl_ckip;
            this.clgl_wdyml = res.clgl_wdyml;
            this.cmdlist_ml = res.cmdlist_ml;
            this.cmdlist_sbid = res.cmdlist_sbid;
            this.cmdlist_qsdz = res.cmdlist_qsdz;
            this.cmdlist_dzcd = res.cmdlist_dzcd;
            this.cmdlist_ms = res.cmdlist_ms;
            this.cmdlist_dz = res.cmdlist_dz;
        })
      }
    },
    //删除
    async deleteRow(index, rows) {
      this.dxgl.splice(index, 1);

      let obj = {
        wlgl_nw_name: this.wlgl_nw_name,
        wlgl_nw_ip: this.wlgl_ww_ip,
        wlgl_nw_zwym: this.wlgl_nw_zwym,
        wlgl_ww_name: this.wlgl_ww_name,
        wlgl_ww_ip: this.wlgl_ww_ip,
        wlgl_ww_zwym: this.wlgl_ww_zwym,
        dxgl: this.dxgl,
        clgl_name: this.clgl_name,
        clgl_xy: this.clgl_xy,
        clgl_gzms: this.clgl_gzms,
        clgl_ydx: this.clgl_ydk,
        clgl_ydk: this.clgl_ydk,
        clgl_mddx: this.clgl_mddk,
        clgl_mddk: this.clgl_mddk,
        clgl_rkwg: this.clgl_rkwg,
        clgl_rkwk: this.clgl_ckwk,
        clgl_rkip: this.clgl_rkip,
        clgl_ckwg: this.clgl_ckwg,
        clgl_ckwk: this.clgl_ckwk,
        clgl_ckip: this.clgl_ckip,
        clgl_wdyml: this.clgl_wdyml,
        cmdlist_ml: this.cmdlist_ml,
        cmdlist_sbid: this.cmdlist_sbid,
        cmdlist_qsdz: this.cmdlist_qsdz,
        cmdlist_dzcd: this.cmdlist_dzcd,
        cmdlist_ms: this.cmdlist_ms,
        cmdlist_dz: this.cmdlist_dz,
      };
      let { data } = await SaveUserAnswer({
        mark: this.$store.state.type,
        user_id: this.user_id,
        // mark: "GYWZ_wx",
        // user_id: "USER202307301109254198",
        mark_value: JSON.stringify(obj),
      });
      console.log(data.data);
      if (data.state) {
        this.$message({
          message: "删除成功",
          type: "success",
        });
      } else {
        this.$message.error("删除失败");
      }
    },
    addObj() {
      if(this.dxgl===null){
        this.dxgl = []
      }
      if (this.dxgl.length === 2) {
        return;
      }
      this.dialogVisible1 = true;
    },
  },
};
</script>
<style scoped lang="less">
.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;
    margin-bottom: 10px;
  }
}
.el-col-1 {
  padding: 0px 4px;
  line-height: 62px;
  height: 20px;
  text-align: center;
}

.el-input__inner {
  height: 30px;
}

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