<!-- 斥候有线网关页面 -->
<template>
  <div>
    <!-- <el-button type="info" plain @click="getShow">斥候有线网关</el-button> -->
    <div class="gateway" v-show="isShow">
      <div class="title">
        <p class="title_l">IP配置</p>
        <p class="title_center">本页面涉及排错，请检查修改默认值</p>
        <i class="el-icon-close title_r" @click="isShow = false"></i>
      </div>
      <el-divider></el-divider>
      <div class="content">
        <div class="lan">
          <el-form v-loading="loading" :model="formData" :label-position="labelPosition" :rules="rules" ref="ruleForm">
            <el-row>
              <el-col :span="24">
                <el-form-item label="网络类型:" :label-width="formLabelWidth" prop="type">
                  <el-select v-model="formData.ippz_wllx" placeholder="静态IP" style="width: 200px">
                    <el-option label="静态IP" value="静态IP"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="IP地址:" :label-width="formLabelWidth" prop="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="子网掩码:" :label-width="formLabelWidth">
                  <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="网关:" :label-width="formLabelWidth" prop="ip">
                  <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="DNS:" :label-width="formLabelWidth">
                  <el-row>
                    <el-col :span="5">
                      <el-input v-model="ippz_dns_sx1"></el-input>
                    </el-col>
                    <el-col :span="1">. </el-col>
                    <el-col :span="5">
                      <el-input v-model="ippz_dns_sx2"></el-input>
                    </el-col>
                    <el-col :span="1">.</el-col>
                    <el-col :span="5">
                      <el-input v-model="ippz_dns_sx3"></el-input>
                    </el-col>
                    <el-col :span="1">.</el-col>
                    <el-col :span="5">
                      <el-input v-model="ippz_dns_sx4"></el-input>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="footer">
          <el-button type="primary" @click="saveAll">保 存</el-button>
          <el-button @click="isShow = false">取 消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
export default {
  name: "TestChiGate",

  data() {
    return {
      loading: false,
      user_id: "",
      formData: {
        ippz_wllx: "静态IP",
        ippz_ip: "",
        ippz_zwym: "",
        ippz_mrwg: "",
        ippz_dns_sx: "",
        ippz_dns_by: "",
      },
      ippz_ip1: "192",
      ippz_ip2: "168",
      ippz_ip3: "1",
      ippz_ip4: "1",
      ippz_zwym1: "255",
      ippz_zwym2: "255",
      ippz_zwym3: "255",
      ippz_zwym4: "0",
      ippz_mrwg1: "192",
      ippz_mrwg2: "168",
      ippz_mrwg3: "1",
      ippz_mrwg4: "1",
      ippz_dns_sx1: "8",
      ippz_dns_sx2: "8",
      ippz_dns_sx3: "8",
      ippz_dns_sx4: "8",

      ippz_dns_by1: "8",
      ippz_dns_by2: "8",
      ippz_dns_by3: "8",
      ippz_dns_by4: "8",
      radio: "1",
      labelPosition: "left",
      formLabelWidth: "116px",
      count: 0,
      isShow: true,
      rules: {
        ip: [{ required: true, message: "请输入IP地址", trigger: "blur" }],
        mask: [{ required: true, message: "请输入子网掩码", trigger: "blur" }],
        type: [{ required: true, message: "请输入网络类型", trigger: "blur" }],
        // client_id: [
        //     { required: true, message: '请输入客户端SSID', trigger: 'blur' },
        // ],
        // passage: [
        //     { required: true, message: '请输入通道', trigger: 'blur' },
        // ],
      },
    };
  },
  created() {
    this.GetUserAnswer();
    let that = this;
    window.getParameter = that.getParameter;
  },
  mounted() { },

  methods: {
    getParameter(data) {
      this.user_id = data;
    },
    Merge(value, value1, value2, value3, value4) {
      value = value1 + "." + value2 + "." + value3 + "." + value4;
      return value;
    },
    SliceData(value) {
      let res = value.split(".");
      // console.log(res);
      return res;
    },
    // 保存数据,发送请求
    async saveAll() {
      // this.dialogFormVisible = false;
      this.isShow = false;
      this.formData.ippz_ip = this.Merge(
        this.formData.ippz_ip,
        this.ippz_ip1,
        this.ippz_ip2,
        this.ippz_ip3,
        this.ippz_ip4
      );
      this.formData.ippz_zwym = this.Merge(
        this.formData.ippz_zwym,
        this.ippz_zwym1,
        this.ippz_zwym2,
        this.ippz_zwym3,
        this.ippz_zwym4
      );
      this.formData.ippz_mrwg = this.Merge(
        this.formData.ippz_mrwg,
        this.ippz_mrwg1,
        this.ippz_mrwg2,
        this.ippz_mrwg3,
        this.ippz_mrwg4
      );
      this.formData.ippz_dns_sx = this.Merge(
        this.formData.ippz_dns_sx,
        this.ippz_dns_sx1,
        this.ippz_dns_sx2,
        this.ippz_dns_sx3,
        this.ippz_dns_sx4
      );
      this.formData.ippz_dns_by = this.Merge(
        this.formData.ippz_dns_by,
        this.ippz_dns_by1,
        this.ippz_dns_by2,
        this.ippz_dns_by3,
        this.ippz_dns_by4
      );
      let res = await SaveUserAnswer({
        mark: "CHGYWG_yx",
        user_id: "USER202307301114011710",
        mark_value: JSON.stringify(this.formData),
      });
      if (res.status == 200) {
        this.$message({
          message: "保存成功",
          type: "success",
        });
      }
      console.log(res);
      sessionStorage.setItem("CHGYWG_yx", JSON.stringify(this.formData));
    },
    //读取缓存
    async GetUserAnswer() {
      this.loading = true;
      let { data } = await GetUserAnswer({
        mark: "CHGYWG_yx",
        user_id: "USER202307301114011710",
      });
      this.loading = false;
      console.log(data);
      if (data.data && data.state) {
        var obj = JSON.parse(data.data.mark_value);
        this.formData.ippz_wllx = obj.ippz_wllx;
        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_sx1 = obj.ippz_dns_sx.split(".")[0];
          this.ippz_dns_sx2 = obj.ippz_dns_sx.split(".")[1];
          this.ippz_dns_sx3 = obj.ippz_dns_sx.split(".")[2];
          this.ippz_dns_sx4 = obj.ippz_dns_sx.split(".")[3];
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.gateway {
  position: absolute;
  top: 145px;
  left: 50%;
  transform: translateX(-50%);
  width: 470px;
  // height:358px;
  height: 458px;
  // height: 725px;
  line-height: 20px;
  // background-color: rgba(255, 255, 255, 1);
  // text-align: center;
  background: url(../assets/image/bg.png);
  background-size: 100% 100%;
  border: 1px solid rgba(187, 187, 187, 1);

  .title {
    margin: 13px 6px 0px 25px;
    display: flex;
    justify-content: space-between;

    .title_l {
      width: 53px;
      height: 26px;
      color: rgba(16, 16, 16, 1);
      font-size: 18px;
      text-align: left;
    }

    .title_center {
      width: 288px;
      height: 26px;
      line-height: 26px;
      color: rgba(189, 49, 36, 1);
      font-size: 18px;
      text-align: left;
    }

    .title_r {
      width: 24px;
      height: 24px;
      cursor: pointer;
      // color: rgba(111, 103, 103, 1);
      color: rgb(255, 255, 255);
    }
  }

  .content {
    margin: 0px 53px 0px 56px;

    /deep/.lan {
      .el-input__inner {
        height: 30px;
        text-align: center;
        padding: 0;
      }

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

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

        .el-col-24 {
          padding-right: 32px;
        }
      }
    }
  }

  /deep/ .footer {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    .el-button {
      width: 80px;
      height: 30px;
      line-height: 0.5;
    }
  }
}
</style>
