<!-- ip设置页面 -->
<template>
  <div>
    <el-dialog
      :title="$t('ckipconfig.title')"
      :visible.sync="dialogVisible"
      width="30%"
      v-loading="loading"
      :close-on-click-modal="false"
    >
      <p class="txt" v-if="$i18n.locale==='en'">{{$t('ckipconfig.prompt')}}</p>
      <div class="ip_setting">
        <p class="enTxt" v-if="$i18n.locale==='zh'">{{$t('ckipconfig.prompt')}}</p>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          :label-width="$i18n.locale==='zh'?'190px':'140px'"
          class="demo-ruleForm"
          :label-position="labelPosition"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item :label="$t('ckipconfig.ipMethod')" prop="ippz_ip_hqfs">
                <el-select v-model="ruleForm.ippz_ip_hqfs" style="width: 200px"  :placeholder="$t('select')">
                  <el-option label="Static IP" value="Static IP"></el-option>
                  <el-option label="DHCP" value="DHCP"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item :label="$t('ckipconfig.getDNS')" prop="ippz_dns_hqfs">
                <el-select
                  v-model="ruleForm.ippz_dns_hqfs"
                  style="width: 200px"
                  :placeholder="$t('select')"
                >
                  <el-option :label="$t('ckipconfig.auto')" :value="$t('ckipconfig.auto')"></el-option>
                  <el-option :label="$t('ckipconfig.manual')" :value="$t('ckipconfig.manual')"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item :label="$t('ckipconfig.localIP')" prop="ippz_ip">
                <el-row>
                  <el-col :span="5">
                    <el-input v-model="ippz_ip1"></el-input>
                  </el-col>
                  <el-col :span="1">. </el-col>
                  <el-col :span="5">
                    <el-input v-model="ippz_ip2"></el-input>
                  </el-col>
                  <el-col :span="1">.</el-col>
                  <el-col :span="5">
                    <el-input v-model="ippz_ip3"></el-input>
                  </el-col>
                  <el-col :span="1">.</el-col>
                  <el-col :span="5">
                    <el-input v-model="ippz_ip4"></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item :label="$t('ckipconfig.mask')" prop="ippz_zwym">
                <el-row>
                  <el-col :span="5">
                    <el-input v-model="ippz_zwym1"></el-input>
                  </el-col>
                  <el-col :span="1">. </el-col>
                  <el-col :span="5">
                    <el-input v-model="ippz_zwym2"></el-input>
                  </el-col>
                  <el-col :span="1">.</el-col>
                  <el-col :span="5">
                    <el-input v-model="ippz_zwym3"></el-input>
                  </el-col>
                  <el-col :span="1">.</el-col>
                  <el-col :span="5">
                    <el-input v-model="ippz_zwym4"></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item :label="$t('ckipconfig.gateway')" prop="ippz_mrwg">
                <el-row>
                  <el-col :span="5">
                    <el-input v-model="ippz_mrwg1"></el-input>
                  </el-col>
                  <el-col :span="1">. </el-col>
                  <el-col :span="5">
                    <el-input v-model="ippz_mrwg2"></el-input>
                  </el-col>
                  <el-col :span="1">.</el-col>
                  <el-col :span="5">
                    <el-input v-model="ippz_mrwg3"></el-input>
                  </el-col>
                  <el-col :span="1">.</el-col>
                  <el-col :span="5">
                    <el-input v-model="ippz_mrwg4"></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item :label="$t('ckipconfig.primaryDNS')" prop="ippz_dns_zy">
                <el-row>
                  <el-col :span="5">
                    <el-input v-model="ippz_dns_zy1"></el-input>
                  </el-col>
                  <el-col :span="1">. </el-col>
                  <el-col :span="5">
                    <el-input v-model="ippz_dns_zy2"></el-input>
                  </el-col>
                  <el-col :span="1">.</el-col>
                  <el-col :span="5">
                    <el-input v-model="ippz_dns_zy3"></el-input>
                  </el-col>
                  <el-col :span="1">.</el-col>
                  <el-col :span="5">
                    <el-input v-model="ippz_dns_zy4"></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item :label="$t('ckipconfig.backupDNS')" prop="ippz_dns_by">
                <el-row>
                  <el-col :span="5">
                    <el-input v-model="ippz_dns_by1"></el-input>
                  </el-col>
                  <el-col :span="1">. </el-col>
                  <el-col :span="5">
                    <el-input v-model="ippz_dns_by2"></el-input>
                  </el-col>
                  <el-col :span="1">.</el-col>
                  <el-col :span="5">
                    <el-input v-model="ippz_dns_by3"></el-input>
                  </el-col>
                  <el-col :span="1">.</el-col>
                  <el-col :span="5">
                    <el-input v-model="ippz_dns_by4"></el-input>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">{{ $t('save') }}</el-button>
        <el-button @click="dialogVisible = false">{{ $t('cancel') }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {SaveUserAnswer, GetUserAnswer, getQueryAnswer} from "@/api/user";
export default {
  data() {
    return {
      loading: false,
      //网关地址校验信息
      user_id: "",
      ippz_ip1: "",
      ippz_ip2: "",
      ippz_ip3: "",
      ippz_ip4: "",
      ippz_zwym1: "",
      ippz_zwym2: "",
      ippz_zwym3: "",
      ippz_zwym4: "",
      ippz_mrwg1: "",
      ippz_mrwg2: "",
      ippz_mrwg3: "",
      ippz_mrwg4: "",
      ippz_dns_zy1: "",
      ippz_dns_zy2: "",
      ippz_dns_zy3: "",
      ippz_dns_zy4: "",
      ippz_dns_by1: "",
      ippz_dns_by2: "",
      ippz_dns_by3: "",
      ippz_dns_by4: "",
      dialogVisible: true,
      labelPosition: "left",
      ruleForm: {
        ippz_ip_hqfs: "",
        ippz_dns_hqfs: "",
        ippz_ip: "",
        ippz_zwym: "",
        ippz_mrwg: "",
        ippz_dns_zy: "",
        ippz_dns_by: "",
        dkpz_btl: "",
        dkpz_sjw: "",
        dkpz_jyw: "",
        dkpz_tzw: "",
        dkpz_lkms: "",
        dkpz_dbcd: "",
        dkpz_dbsj: "",
        dkpz_tbbtl: "",
        dkpz_snckxtb: "",
      },
      rules: {
        ippz_ip_hqfs: [
          { required: true, message: this.$t('ckipconfig.rules.ipMethod'), trigger: "blur" },
        ],
        ippz_dns_hqfs: [
          { required: true, message: this.$t('ckipconfig.rules.getDNS'), trigger: "blur" },
        ],
        ippz_ip: [
          {
            required: true,
            validator: this.validateIpAddress,
            trigger: "blur",
            message: "",
          },
        ],
        ippz_zwym: [
          {
            required: true,
            validator: this.validateSubnetMask,
            trigger: "blur",
            message: "",
          },
        ],
        ippz_mrwg: [
          {
            required: true,
            validator: this.validateGateway,
            trigger: "blur",
            message: "",
          },
        ],
        ippz_dns_zy: [
          {
            required: true,
            validator: this.validatePrimaryDNS,
            trigger: "blur",
            message: "",
          },
        ],
        ippz_dns_by: [
          {
            required: true,
            validator: this.validatePrimaryDNS1,
            trigger: "blur",
            message: "",
          },
        ],
      },
    };
  },
  methods: {
    // 保存数据,发送请求
    async saveAll() {
      this.ruleForm.ippz_ip =
        this.ippz_ip1 +
        "." +
        this.ippz_ip2 +
        "." +
        this.ippz_ip3 +
        "." +
        this.ippz_ip4;
      this.ruleForm.ippz_zwym =
        this.ippz_zwym1 +
        "." +
        this.ippz_zwym2 +
        "." +
        this.ippz_zwym3 +
        "." +
        this.ippz_zwym4;

      this.ruleForm.ippz_mrwg =
        this.ippz_mrwg1 +
        "." +
        this.ippz_mrwg2 +
        "." +
        this.ippz_mrwg3 +
        "." +
        this.ippz_mrwg4;
      this.ruleForm.ippz_dns_zy =
        this.ippz_dns_zy1 +
        "." +
        this.ippz_dns_zy2 +
        "." +
        this.ippz_dns_zy3 +
        "." +
        this.ippz_dns_zy4;
      this.ruleForm.ippz_dns_by =
        this.ippz_dns_by1 +
        "." +
        this.ippz_dns_by2 +
        "." +
        this.ippz_dns_by3 +
        "." +
        this.ippz_dns_by4;

      let res = await SaveUserAnswer({
        mark: "CKFWQ_yx",
        user_id: this.user_id,
        // user_id: "USER202311140204340206",
        mark_value: JSON.stringify(this.ruleForm),
      });
      console.log(this.ruleForm);

      if (res.data.state) {
        // alert(JSON.stringify(res.data.data.mark_value));
        this.$message({
          message: res.data.message,
          type: "success",
        });
      } else {
        this.$message.error(res.data.message);
      }
    },
    async GetUserAnswer() {
      this.loading = true;
      let answers = await GetUserAnswer({
        mark: "CKFWQ_yx",
        user_id: this.user_id,
        // user_id: "USER202311140204340206",
      });
      if(!answers.data.state){
        getQueryAnswer({
          mark: "CKFWQ_yx",
          user_id: this.user_id
        }).then(res => {
          let obj = null;
          if (this.$i18n.locale === "zh") {
            obj = JSON.parse(res.data.data.r3_en_default);
          } else {
            obj = JSON.parse(res.data.data.r3);
          }
          console.log(obj)
          if (obj.ippz_ip) {
            this.ippz_ip1 = obj.ippz_ip.split(".")[0];
            this.ippz_ip2 = obj.ippz_ip.split(".")[1];
            this.ippz_ip3 = obj.ippz_ip.split(".")[2];
            this.ippz_ip4 = obj.ippz_ip.split(".")[3];
            this.ippz_zwym1 = obj.ippz_zwym.split(".")[0];
            this.ippz_zwym2 = obj.ippz_zwym.split(".")[1];
            this.ippz_zwym3 = obj.ippz_zwym.split(".")[2];
            this.ippz_zwym4 = obj.ippz_zwym.split(".")[3];
            this.ippz_mrwg1 = obj.ippz_mrwg.split(".")[0];
            this.ippz_mrwg2 = obj.ippz_mrwg.split(".")[1];
            this.ippz_mrwg3 = obj.ippz_mrwg.split(".")[2];
            this.ippz_mrwg4 = obj.ippz_mrwg.split(".")[3];
            this.ippz_dns_zy1 = obj.ippz_dns_zy.split(".")[0];
            this.ippz_dns_zy2 = obj.ippz_dns_zy.split(".")[1];
            this.ippz_dns_zy3 = obj.ippz_dns_zy.split(".")[2];
            this.ippz_dns_zy4 = obj.ippz_dns_zy.split(".")[3];
            this.ippz_dns_by1 = obj.ippz_dns_by.split(".")[0];
            this.ippz_dns_by2 = obj.ippz_dns_by.split(".")[1];
            this.ippz_dns_by3 = obj.ippz_dns_by.split(".")[2];
            this.ippz_dns_by4 = obj.ippz_dns_by.split(".")[3];
            this.ruleForm.ippz_ip_hqfs = obj.ippz_ip_hqfs;
            this.ruleForm.ippz_dns_hqfs = obj.ippz_dns_hqfs;
            this.ruleForm.dkpz_btl = obj.dkpz_btl;
            this.ruleForm.dkpz_sjw = obj.dkpz_sjw;
            this.ruleForm.dkpz_jyw = obj.dkpz_jyw;
            this.ruleForm.dkpz_tzw = obj.dkpz_tzw;
            this.ruleForm.dkpz_lkms = obj.dkpz_lkms;
            this.ruleForm.dkpz_dbcd = obj.dkpz_dbcd;
            this.ruleForm.dkpz_dbsj = obj.dkpz_dbsj;
            this.ruleForm.dkpz_tbbtl = obj.dkpz_tbbtl;
            this.ruleForm.dkpz_snckxtb = obj.dkpz_snckxtb;
          }
        })
      }
      if (answers.data.data && answers.data.state) {
        let obj = JSON.parse(answers.data.data.mark_value);
        console.log(obj.ippz_dns_hqfs);
        if (obj.ippz_ip) {
          this.ippz_ip1 = obj.ippz_ip.split(".")[0];
          this.ippz_ip2 = obj.ippz_ip.split(".")[1];
          this.ippz_ip3 = obj.ippz_ip.split(".")[2];
          this.ippz_ip4 = obj.ippz_ip.split(".")[3];
          this.ippz_zwym1 = obj.ippz_zwym.split(".")[0];
          this.ippz_zwym2 = obj.ippz_zwym.split(".")[1];
          this.ippz_zwym3 = obj.ippz_zwym.split(".")[2];
          this.ippz_zwym4 = obj.ippz_zwym.split(".")[3];
          this.ippz_mrwg1 = obj.ippz_mrwg.split(".")[0];
          this.ippz_mrwg2 = obj.ippz_mrwg.split(".")[1];
          this.ippz_mrwg3 = obj.ippz_mrwg.split(".")[2];
          this.ippz_mrwg4 = obj.ippz_mrwg.split(".")[3];
          this.ippz_dns_zy1 = obj.ippz_dns_zy.split(".")[0];
          this.ippz_dns_zy2 = obj.ippz_dns_zy.split(".")[1];
          this.ippz_dns_zy3 = obj.ippz_dns_zy.split(".")[2];
          this.ippz_dns_zy4 = obj.ippz_dns_zy.split(".")[3];
          this.ippz_dns_by1 = obj.ippz_dns_by.split(".")[0];
          this.ippz_dns_by2 = obj.ippz_dns_by.split(".")[1];
          this.ippz_dns_by3 = obj.ippz_dns_by.split(".")[2];
          this.ippz_dns_by4 = obj.ippz_dns_by.split(".")[3];
          this.ruleForm.ippz_ip_hqfs = obj.ippz_ip_hqfs;
          this.ruleForm.ippz_dns_hqfs = obj.ippz_dns_hqfs;
          this.ruleForm.dkpz_btl = obj.dkpz_btl;
          this.ruleForm.dkpz_sjw = obj.dkpz_sjw;
          this.ruleForm.dkpz_jyw = obj.dkpz_jyw;
          this.ruleForm.dkpz_tzw = obj.dkpz_tzw;
          this.ruleForm.dkpz_lkms = obj.dkpz_lkms;
          this.ruleForm.dkpz_dbcd = obj.dkpz_dbcd;
          this.ruleForm.dkpz_dbsj = obj.dkpz_dbsj;
          this.ruleForm.dkpz_tbbtl = obj.dkpz_tbbtl;
          this.ruleForm.dkpz_snckxtb = obj.dkpz_snckxtb;
        }
        // alert(JSON.stringify(answers.data.data.mark_value));
      }
      this.loading = false;
    },
    submitForm() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.saveAll();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //ip地址验证
    validateIpAddress(rule, value, callback) {
      if (
        this.ippz_ip1 +
          "." +
          this.ippz_ip2 +
          "." +
          this.ippz_ip3 +
          "." +
          this.ippz_ip4 ===
        ""
      ) {
        callback(new Error(this.$t('ckipconfig.rules.localIP')));
      } else if (
        !/^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/.test(
          this.ippz_ip1 +
            "." +
            this.ippz_ip2 +
            "." +
            this.ippz_ip3 +
            "." +
            this.ippz_ip4
        )
      ) {
        callback(new Error(this.$t('ckipconfig.rules.localIP1')));
      } else {
        callback();
      }
    },
    //子网掩码验证
    validateSubnetMask(rule, value, callback) {
      if (
        this.ippz_zwym1 +
          "." +
          this.ippz_zwym2 +
          "." +
          this.ippz_zwym3 +
          "." +
          this.ippz_zwym4 ===
        ""
      ) {
        callback(new Error(this.$t('ckipconfig.rules.mask')));
      } else if (
        !/^(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])$/.test(
          this.ippz_zwym1 +
            "." +
            this.ippz_zwym2 +
            "." +
            this.ippz_zwym3 +
            "." +
            this.ippz_zwym4
        )
      ) {
        callback(new Error(this.$t('ckipconfig.rules.mask1')));
      } else {
        callback();
      }
    },
    //网关地址验证
    validateGateway(rule, value, callback) {
      if (
        this.ippz_mrwg1 +
          "." +
          this.ippz_mrwg2 +
          "." +
          this.ippz_mrwg3 +
          "." +
          this.ippz_mrwg4 ===
        ""
      ) {
        callback(new Error(this.$t('ckipconfig.rules.gateway')));
      } else if (
        !/^(\d{1,3}\.){3}\d{1,3}$/.test(
          this.ippz_mrwg1 +
            "." +
            this.ippz_mrwg2 +
            "." +
            this.ippz_mrwg3 +
            "." +
            this.ippz_mrwg4
        )
      ) {
        callback(new Error(this.$t('ckipconfig.rules.gateway1')));
      } else {
        callback();
      }
    },
    //主dns服务验证
    validatePrimaryDNS(rule, value, callback) {
      if (
        this.ippz_dns_zy1 +
          "." +
          this.ippz_dns_zy2 +
          "." +
          this.ippz_dns_zy3 +
          "." +
          this.ippz_dns_zy4 ===
        ""
      ) {
        callback(new Error(this.$t('ckipconfig.rules.primaryDNS')));
      } else if (
        !this.isValidDNSAddress(
          this.ippz_dns_zy1 +
            "." +
            this.ippz_dns_zy2 +
            "." +
            this.ippz_dns_zy3 +
            "." +
            this.ippz_dns_zy4
        )
      ) {
        callback(new Error(this.$t('ckipconfig.rules.primaryDNS1')));
      } else {
        callback();
      }
    },
    isValidDNSAddress(value) {
      // IPv4地址的正则表达式
      const ipv4Regex = /^(\d{1,3}\.){3}\d{1,3}$/;

      // IPv6地址的正则表达式
      const ipv6Regex = /^(?:[0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}$/;

      // 检查是否是有效的IPv4或IPv6地址
      return ipv4Regex.test(value) || ipv6Regex.test(value);
    },
    //备用dns服务验证
    validatePrimaryDNS1(rule, value, callback) {
      if (
        this.ippz_dns_by1 +
          "." +
          this.ippz_dns_by2 +
          "." +
          this.ippz_dns_by3 +
          "." +
          this.ippz_dns_by4 ===
        ""
      ) {
        callback(new Error(this.$t('ckipconfig.rules.backupDNS')));
      } else if (
        !this.isValidDNSAddress(
          this.ippz_dns_by1 +
            "." +
            this.ippz_dns_by2 +
            "." +
            this.ippz_dns_by3 +
            "." +
            this.ippz_dns_by4
        )
      ) {
        callback(new Error(this.$t('ckipconfig.rules.backupDNS1')));
      } else {
        callback();
      }
    },
  },
  created() {
    this.user_id = window.location.href.split("?")[1];
    this.GetUserAnswer();
  },
};
</script>
<style scoped lang="less">
/deep/ .ip_setting {
  .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-dialog {
  position: relative;
}

.txt {
  position: absolute;
  top: 22px;
  left: 100px;
  font-size: 18px;
  color: red;
}
.enTxt{
  font-size: 18px;
  color: red;
  margin-bottom: 20px;
}
</style>
