<template>
  <div>
    <!-- <el-button @click="dialogVisible = true">无线设置</el-button> -->
    <el-dialog title="无线设置" :visible.sync="dialogVisible" width="30%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="150px"
        class="demo-ruleForm"
        :label-position="labelPosition"
      >
        <el-form-item label="工作模式:" prop="wxpz_gzms">
          <el-col :span="10">
            <el-select v-model="ruleForm.wxpz_gzms">
              <el-option label="STA模式" value="STA模式"></el-option>
              <el-option label="AP模式" value="AP模式"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="网络名称:" prop="wxpz_wlmc">
          <el-col :span="10">
            <el-select v-model="ruleForm.wxpz_wlmc" placeholder="无线网名称">
              <el-option label="无线区无限网" value="shanghai"></el-option>
              <!-- <el-option label="区域二" value="beijing"></el-option> -->
            </el-select>
          </el-col>
        </el-form-item>
        <!-- <el-form-item label="MAC地址:" prop="wxpz_mac">
          <el-col :span="10">
            <el-input v-model="ruleForm.wxpz_mac"> </el-input>
          </el-col>
        </el-form-item> -->
        <el-form-item label="加密模式:" prop="wxpz_jmms">
          <el-col :span="10">
            <el-select v-model="ruleForm.wxpz_jmms">
              <el-option label="WPA2PSK" value="WPA2PSK"></el-option>
              <el-option label="SHARED" value="SHARED"></el-option>
              <el-option label="WPAPSK" value="WPAPSK"></el-option>
              <el-option label="WPA2PSK" value="WPA2PSK"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="加密算法:" prop="wxpz_jmsf">
          <el-col :span="10">
            <el-select v-model="ruleForm.wxpz_jmsf">
              <el-option label="AES" value="AES"></el-option>
              <el-option label="TKIP" value="TKIP"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="密码:" prop="wxpz_mm">
          <el-col :span="10">
            <el-input v-model="ruleForm.wxpz_mm"> </el-input>
          </el-col>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveDatas">保存</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { SaveUserAnswer, GetUserAnswer } from "@/api/user";
export default {
  data() {
    return {
      dialogVisible: true,
      user_id: "",
      labelPosition: "left",
      ruleForm: {
        wxpz_gzms: "STA模式",
        wxpz_wlmc: "无线区无限网",
        // wxpz_mac: "",
        wxpz_jmms: "WPA2PSK",
        wxpz_jmsf: "AES",
        wxpz_mm: "",
      },
      rules: {
        wxpz_gzms: [{ required: true, trigger: "change", message: "必填" }],
        wxpz_wlmc: [{ required: true, trigger: "change", message: "必填" }],
        // wxpz_mac: [{ trigger: "blur", message: "必填" }],
        wxpz_jmms: [{ required: true, trigger: "blur", message: "必填" }],
        wxpz_jmsf: [{ required: true, trigger: "blur", message: "必填" }],
        wxpz_mm: [{ required: true, trigger: "blur", message: "必填" }],
      },
    };
  },
  created() {
    let that = this;
    window.getParameter = that.getParameter;
    this.GetUserAnswer();
  },
  methods: {
    getParameter(data) {
      this.user_id = data;
    },
    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),
      });
      if (res.status == 200) {
        sessionStorage.setItem(
          "CKFWQ_wx",
          JSON.stringify({ ...datas, ...this.ruleForm })
        );
        this.$message({
          message: "保存成功",
          type: "success",
        });
        this.dialogVisible = false;
      } else {
        this.$message.error("保存失败");
      }
    },
    async GetUserAnswer() {
      let { data } = await GetUserAnswer({
        mark: "CKFWQ_wx",
        user_id: `${this.user_id}`,
      });
      console.log(obj);
      if (data.data && data.state) {
        var obj = JSON.parse(data.data.mark_value);
        this.ruleForm.wxpz_gzms = obj.wxpz_gzms;
        this.ruleForm.wxpz_wlmc = obj.wxpz_wlmc;
        // this.ruleForm.wxpz_mac = obj.wxpz_mac;
        this.ruleForm.wxpz_jmms = obj.wxpz_jmms;
        this.ruleForm.wxpz_jmsf = obj.wxpz_jmsf;
        this.ruleForm.wxpz_mm = obj.wxpz_mm;
        console.log(this.ruleForm, "取");
      }
    },
  },
};
</script>
