<template>
  <div>
    <el-dialog
      title="网口设置"
      :visible.sync="dialogVisible"
      width="30%"
      v-loading="loading"
    >
      <h3>以太网功能</h3>
      <el-divider></el-divider>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="150px"
        class="demo-ruleForm"
        :label-position="labelPosition"
      >
        <el-form-item label="开启网口:" prop="kqwk">
          <el-select v-model="ruleForm.kqwk">
            <el-option label="开启" value="开启"></el-option>
            <el-option label="关闭" value="关闭"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="网口工作方式:" prop="wkgzfs">
          <el-select v-model="ruleForm.wkgzfs">
            <el-option label="LAN口" value="LAN口"></el-option>
            <el-option label="WAN口" value="WAN口"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <h3>网口模式设置</h3>
      <el-divider></el-divider>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="150px"
        class="demo-ruleForm"
        :label-position="labelPosition"
      >
        <el-form-item label="网口模式:" prop="wkms">
          <el-select v-model="ruleForm.wkms">
            <el-option label="n" value="n"></el-option>
            <el-option label="z" value="z"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <!-- <el-button @click="change">改变</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
export default {
  data() {
    return {
      dialogVisible: true,
      labelPosition: "left",
      user_id: "",
      loading: false,
      ruleForm: {
        kqwk: "开启",
        wkgzfs: "LAN口",
        wkms: "n",
      },
      // $answerObj: {
      //   kqwk: "",
      //   wkgzfs: "",
      //   wkms: "",
      // },
      rules: {
        kqwk: [{ required: true, trigger: "change", message: "必填项" }],
        wkgzfs: [{ required: true, trigger: "change", message: "必填项" }],
        wkms: [{ required: true, trigger: "change", message: "必填项" }],
      },
    };
  },
  created() {
    // this.$answerObj.kqwk = "你好";

    // console.log(this.$answerObj);
    let that = this;
    window.getParameter = that;
    this.GetUserAnswer();
  },
  methods: {
    getParameter(data) {
      console.log(data);
      this.user_id = data;
    },
    change() {
      console.log(this.$answerObj);
    },
    async saveDatas() {
      let datas = JSON.parse(sessionStorage.getItem("CKFWQ_wx"));
      let res = await SaveUserAnswer({
        mark: "CKFWQ_wx",
        user_id: `${this.user_id}`,
        mark_value: JSON.stringify(datas),
      });
      console.log(res);
      if (res.data.state) {
        sessionStorage.setItem(
          "CKFWQ_wx",
          JSON.stringify({ ...datas, ...this.ruleForm })
        );
        this.$message({
          message: "保存成功",
          type: "success",
        });
        this.dialogVisible = false;
        console.log({ ...datas, ...this.ruleForm }, "存储");
      } else {
        this.$message.error(res.data.message);
      }
    },
    // 拿缓存
    async GetUserAnswer() {
      let res = await GetUserAnswer({
        mark: "CKFWQ_wx",
        user_id: `${this.user_id}`,
      });
      console.log(obj);
      if (res.data.data && res.data.state) {
        var obj = JSON.parse(res.data.data.mark_value);
        this.ruleForm.kqwk = obj.kqwk;
        this.ruleForm.wkgzfs = obj.wkgzfs;
        this.ruleForm.wkms = obj.wkms;
      }
    },
    submitForm(formName) {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.saveDatas();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
