<template>
  <div>
    <el-dialog
      :title="$t('toWifi.title')"
      :visible.sync="dialogVisible"
      v-loading="loading"
    >
      <h3>{{ $t("toWifi.parameter") }}</h3>
      <el-divider></el-divider>
      <div class="formOne">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="180px"
          class="demo-ruleForm"
          :label-position="labelPosition"
        >
          <el-form-item :label="$t('toWifi.baudRate')" prop="ckcssz_btl">
            <el-select v-model="ruleForm.ckcssz_btl" :placeholder="$t('select')">
              <el-option label="9600" value="9600"></el-option>
              <el-option label="19200" value="19200"></el-option>
              <el-option label="28800" value="28800"></el-option>
              <el-option label="38400" value="38400"></el-option>
              <el-option label="48000" value="48000"></el-option>
              <el-option label="57600" value="57600"></el-option>
              <el-option label="67200" value="67200"></el-option>
              <el-option label="76800" value="76800"></el-option>
              <el-option label="86400" value="86400"></el-option>
              <el-option label="96000" value="96000"></el-option>
              <el-option label="105600" value="105600"></el-option>
              <el-option label="115200" value="115200"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('toWifi.checkBit')" prop="ckcssz_jyw">
            <el-select v-model="ruleForm.ckcssz_jyw" :placeholder="$t('select')">
              <el-option
                :label="item.label"
                :value="item.value"
                :key="index"
                v-for="(item, index) in checkBitList"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('toWifi.controlMode')" prop="ckcssz_lk">
            <el-select v-model="ruleForm.ckcssz_lk" :placeholder="$t('select')">
              <el-option :label="$t('close')" :value="$t('close')"></el-option>
              <el-option
                :label="$t('toWifi.hardware')"
                :value="$t('toWifi.hardware')"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('toWifi.adaptiveBaudRate')" prop="ckcssz_zdybtl">
            <el-select v-model="ruleForm.ckcssz_zdybtl" :placeholder="$t('select')">
              <el-option :label="$t('close')" :value="$t('close')"></el-option>
              <el-option :label="$t('open')" :value="$t('open')"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="250px"
          class="demo-ruleForm"
          :label-position="labelPosition"
        >
          <el-form-item :label="$t('toWifi.dataBit')" prop="ckcssz_sjw">
            <el-select v-model="ruleForm.ckcssz_sjw" :placeholder="$t('select')">
              <el-option label="8" value="8"></el-option>
              <el-option label="7" value="7"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('toWifi.stopBit')" prop="ckcssz_tzw">
            <el-select v-model="ruleForm.ckcssz_tzw" :placeholder="$t('select')">
              <el-option label="1" value="1"></el-option>
              <el-option label="2" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('toWifi.function')" prop="ckcssz_485">
            <el-select v-model="ruleForm.ckcssz_485" :placeholder="$t('select')">
              <el-option :label="$t('close')" :value="$t('close')"></el-option>
              <el-option :label="$t('open')" :value="$t('open')"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <h3>{{ $t("toWifi.other") }}</h3>
      <el-divider></el-divider>
      <div class="formOne">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm1"
          label-width="200px"
          class="demo-ruleForm1"
          :label-position="labelPosition"
        >
          <el-form-item :label="$t('toWifi.portAuto')" prop="qtsz_ckzdcz">
            <el-select v-model="ruleForm.qtsz_ckzdcz">
              <el-option :label="$t('close')" :value="$t('close')"></el-option>
              <el-option :label="$t('open')" :value="$t('open')"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('toWifi.packageType')" prop="qtsz_zcblx">
            <el-select v-model="ruleForm.qtsz_zcblx">
              <el-option :label="$t('close')" :value="$t('close')"></el-option>
              <el-option :label="$t('open')" :value="$t('open')"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('toWifi.customPacket')" prop="qtsz_zdyxtb">
            <el-select v-model="ruleForm.qtsz_zdyxtb">
              <el-option :label="$t('close')" :value="$t('close')"></el-option>
              <el-option :label="$t('open')" :value="$t('open')"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('toWifi.socketFunction')" prop="qtsz_tjzffgn">
            <el-select v-model="ruleForm.qtsz_tjzffgn">
              <el-option :label="$t('close')" :value="$t('close')"></el-option>
              <el-option :label="$t('open')" :value="$t('open')"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <section style="width: 50%; align-items: center; display: flex">
          {{ $t("toWifi.Note") }}
        </section>
      </div>

      <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 {
      checkBitList: this.$t("ckportconfig.checkBitList"),
      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: {
        ckcssz_btl: [{ required: true, trigger: "change", message: this.$t("required") }],
        ckcssz_jyw: [{ required: true, trigger: "change", message: this.$t("required") }],
        ckcssz_lk: [{ required: true, trigger: "change", message: this.$t("required") }],
        ckcssz_zdybtl: [
          { required: true, trigger: "change", message: this.$t("required") },
        ],
        ckcssz_sjw: [{ required: true, trigger: "change", message: this.$t("required") }],
        ckcssz_tzw: [{ required: true, trigger: "change", message: this.$t("required") }],
        ckcssz_485: [{ required: true, trigger: "change", message: this.$t("required") }],
        qtsz_ckzdcz: [
          { required: true, trigger: "change", message: this.$t("required") },
        ],
        qtsz_zcblx: [{ required: true, trigger: "change", message: this.$t("required") }],
        qtsz_zdyxtb: [
          { required: true, trigger: "change", message: this.$t("required") },
        ],
        qtsz_tjzffgn: [
          { required: true, trigger: "change", message: this.$t("required") },
        ],
      },
    };
  },
  methods: {
    //保存
    async saveDatas() {
      this.Loading = true;
      let res = await SaveUserAnswer({
        mark: "CKFWQ_wx",
        user_id: this.user_id,
        // user_id: "USER202307301109254198",
        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 answers = await GetUserAnswer({
        mark: "CKFWQ_wx",
        user_id: this.user_id,
        // user_id: "USER202307301109254198",
      });
      if (answers.data.data && answers.data.state) {
        let obj = JSON.parse(answers.data.data.mark_value);
        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.ytwgn_kqwk = obj.ytwgn_kqwk;
        this.ruleForm.ytwgn_wkgzfs = obj.ytwgn_wkgzfs;
        this.ruleForm.wkmssz_wkms = obj.wkmssz_wkms;
        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) => {
          // let 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.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.ytwgn_kqwk = obj.ytwgn_kqwk;
          this.ruleForm.ytwgn_wkgzfs = obj.ytwgn_wkgzfs;
          this.ruleForm.wkmssz_wkms = obj.wkmssz_wkms;
          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;
        }
      });
    },
  },
  created() {
    this.user_id = window.location.href.split("?")[1];
    this.GetUserAnswer();
  },
};
</script>
<style scoped lang="less">
::v-deep .el-form-item__content {
  margin-left: 0 !important;
}
.formOne {
  display: flex;
  //justify-content: space-around;

  div {
    display: flex;
    //align-items: center;
    justify-content: center;

    p {
      width: 50%;
    }
  }
}

.demo-ruleForm,
.demo-ruleForm1 {
  width: 50%;
}
</style>
