<template>
  <div>
    <el-dialog :title="$t('ckwireless.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="$t('ckwireless.workingMode')" prop="wxpz_gzms">
          <el-col :span="10">
            <el-select v-model="ruleForm.wxpz_gzms">
              <el-option :label="'STA'+$t('ckwireless.mode')" :value="'STA'+$t('ckwireless.mode')"></el-option>
              <el-option :label="'AP'+$t('ckwireless.mode')" :value="'AP'+$t('ckwireless.mode')"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item :label="$t('ckwireless.networkName')" prop="wxpz_wlmc">
          <el-col :span="10">
            <el-select v-model="ruleForm.wxpz_wlmc" :placeholder="$t('ckwireless.WirelessName')">
              <el-option :label="$t('ckwireless.Wireless')" :value="$t('ckwireless.Wireless')"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item :label="$t('ckwireless.encryptionMode')" 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="$t('ckwireless.encryptionAlgorithm')" 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="$t('ckwireless.password')" 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="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 {
      dialogVisible: true,
      user_id: "",
      labelPosition: "left",
      ruleForm: {
        wxpz_gzms: "",
        wxpz_wlmc: "",
        wxpz_jmms: "",
        wxpz_jmsf: "",
        wxpz_mm: "",
        ckcssz_btl: "",
        ckcssz_jyw: "",
        ckcssz_lk: "",
        ckcssz_zdybtl: "",
        ckcssz_sjw: "",
        ckcssz_tzw: "",
        ckcssz_485: "",
        qtsz_ckzdcz: "",
        qtsz_zcblx: "",
        qtsz_zdyxtb: "",
        qtsz_tjzffgn: "",
        ytwgn_kqwk: "",
        ytwgn_wkgzfs: "",
        wkmssz_wkms: "",
      },
      rules: {
        wxpz_gzms: [{ required: true, trigger: "change", message: this.$t('required') }],
        wxpz_wlmc: [{ required: true, trigger: "change", message: this.$t('required') }],
        wxpz_jmms: [{ required: true, trigger: "blur", message: this.$t('required') }],
        wxpz_jmsf: [{ required: true, trigger: "blur", message: this.$t('required') }],
        wxpz_mm: [{ required: true, trigger: "blur", message: this.$t('required') }],
      },
    };
  },
  created() {
    this.user_id = window.location.href.split("?")[1];
    this.GetUserAnswer();
  },
  methods: {
    async saveDatas() {
      let res = await SaveUserAnswer({
        mark: "CKFWQ_wx",
        user_id: this.user_id,
        // user_id: "USER202307301109254198",
        mark_value: JSON.stringify(this.ruleForm),
      });
      if (res.data.state) {
        this.$message({
          message: this.$t('success'),
          type: "success",
        });
      } else {
        this.$message.error(this.$t('fail'));
      }
    },
    async GetUserAnswer() {
      let { data } = await GetUserAnswer({
        mark: "CKFWQ_wx",
        user_id: this.user_id,
        // user_id: "USER202307301109254198",
      });
      if (data.state) {
        var obj = JSON.parse(data.data.mark_value);
        this.ruleForm.ytwgn_kqwk = obj.ytwgn_kqwk;
        this.ruleForm.ytwgn_wkgzfs = obj.ytwgn_wkgzfs;
        this.ruleForm.wkmssz_wkms = obj.wkmssz_wkms;
        this.ruleForm.ckcssz_btl = obj.ckcssz_btl;
        this.ruleForm.ckcssz_jyw = obj.ckcssz_jyw;
        this.ruleForm.ckcssz_lk = obj.ckcssz_lk;
        this.ruleForm.ckcssz_zdybtl = obj.ckcssz_zdybtl;
        this.ruleForm.ckcssz_sjw = obj.ckcssz_sjw;
        this.ruleForm.ckcssz_tzw = obj.ckcssz_tzw;
        this.ruleForm.ckcssz_485 = obj.ckcssz_485;
        this.ruleForm.qtsz_ckzdcz = obj.qtsz_ckzdcz;
        this.ruleForm.qtsz_zcblx = obj.qtsz_zdyxtb;
        this.ruleForm.qtsz_zdyxtb = obj.qtsz_zdyxtb;
        this.ruleForm.qtsz_tjzffgn = obj.qtsz_tjzffgn;
        this.ruleForm.wxpz_gzms = obj.wxpz_gzms;
        this.ruleForm.wxpz_wlmc = obj.wxpz_wlmc;
        this.ruleForm.wxpz_jmms = obj.wxpz_jmms;
        this.ruleForm.wxpz_jmsf = obj.wxpz_jmsf;
        this.ruleForm.wxpz_mm = obj.wxpz_mm;
      }else{
        getQueryAnswer({
          mark: "CKFWQ_wx",
          user_id: this.user_id
        }).then(res => {
          // var obj = JSON.parse(res.data.data.r3);
          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);
          }
          this.ruleForm.ytwgn_kqwk = obj.ytwgn_kqwk;
          this.ruleForm.ytwgn_wkgzfs = obj.ytwgn_wkgzfs;
          this.ruleForm.wkmssz_wkms = obj.wkmssz_wkms;
          this.ruleForm.ckcssz_btl = obj.ckcssz_btl;
          this.ruleForm.ckcssz_jyw = obj.ckcssz_jyw;
          this.ruleForm.ckcssz_lk = obj.ckcssz_lk;
          this.ruleForm.ckcssz_zdybtl = obj.ckcssz_zdybtl;
          this.ruleForm.ckcssz_sjw = obj.ckcssz_sjw;
          this.ruleForm.ckcssz_tzw = obj.ckcssz_tzw;
          this.ruleForm.ckcssz_485 = obj.ckcssz_485;
          this.ruleForm.qtsz_ckzdcz = obj.qtsz_ckzdcz;
          this.ruleForm.qtsz_zcblx = obj.qtsz_zdyxtb;
          this.ruleForm.qtsz_zdyxtb = obj.qtsz_zdyxtb;
          this.ruleForm.qtsz_tjzffgn = obj.qtsz_tjzffgn;
          this.ruleForm.wxpz_gzms = obj.wxpz_gzms;
          this.ruleForm.wxpz_wlmc = obj.wxpz_wlmc;
          this.ruleForm.wxpz_jmms = obj.wxpz_jmms;
          this.ruleForm.wxpz_jmsf = obj.wxpz_jmsf;
          this.ruleForm.wxpz_mm = obj.wxpz_mm;
        })
      }
    },
    submitForm(formName) {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.saveDatas();
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>
