<template>
  <div>
    <el-dialog
      :title="$t('cknet.title')"
      :visible.sync="dialogVisible"
      width="30%"
      v-loading="loading"
    >
      <h3>{{ $t('cknet.Ethernet') }}</h3>
      <el-divider></el-divider>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="230px"
        class="demo-ruleForm"
        :label-position="labelPosition"
      >
        <el-form-item :label="$t('cknet.openNetworkPort')" prop="ytwgn_kqwk">
          <el-select v-model="ruleForm.ytwgn_kqwk" :placeholder="$t('select')">
            <el-option :label="$t('open')" :value="$t('open')"></el-option>
            <el-option :label="$t('close')" value="$t('close')"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('cknet.workingMode')" prop="ytwgn_wkgzfs">
          <el-select v-model="ruleForm.ytwgn_wkgzfs" :placeholder="$t('select')">
            <el-option :label="$t('lan')" :value="$t('lan')"></el-option>
            <el-option :label="$t('wan')" :value="$t('wan')"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <h3>{{ $t('cknet.networkModeSetting') }}</h3>
      <el-divider></el-divider>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="170px"
        class="demo-ruleForm"
        :label-position="labelPosition"
      >
        <el-form-item :label="$t('cknet.networkMode')" prop="wkmssz_wkms">
          <el-select v-model="ruleForm.wkmssz_wkms" :placeholder="$t('select')">
            <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">{{ $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,
      labelPosition: "left",
      user_id: "",
      loading: false,
      ruleForm: {
        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: "",
        wxpz_gzms: "",
        wxpz_wlmc: "",
        wxpz_jmms: "",
        wxpz_jmsf: "",
        wxpz_mm: "",
      },

      rules: {
        ytwgn_kqwk: [{ required: true, trigger: "blur", message: this.$t('required') }],
        ytwgn_wkgzfs: [
          { required: true, trigger: "blur", message: this.$t('required') },
        ],
        wkmssz_wkms: [{ 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,
        mark_value: JSON.stringify(this.ruleForm),
      });
      console.log(res);
      if (res.data.state) {
        this.$message({
          message: this.$t('success'),
          type: "success",
        });
      } else {
        this.$message.error(this.$t('fail'));
      }
    },
    // 拿缓存
    async GetUserAnswer() {
      let res = await GetUserAnswer({
        mark: "CKFWQ_wx",
        user_id: this.user_id,
        // user_id: "USER202307301109254198",
      });
      if (res.data.state) {
        var obj = JSON.parse(res.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_zcblx;
        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_zcblx;
          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>
