<template>
  <div>
    <!-- <el-button @click="dialogVisible = true">串口及网络协议设置</el-button> -->
    <el-dialog title="串口及网络协议设置" :visible.sync="dialogVisible" :before-close="handleClose">
      <h3>串口参数设置</h3>
      <el-divider></el-divider>
      <div class="formOne">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm"
          :label-position="labelPosition">
          <el-form-item label="波特率(bps):" prop="ckcssz_btl">
            <el-select v-model="ruleForm.ckcssz_btl" placeholder="请选择波特率">
              <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="检验位:" prop="ckcssz_jyw">
            <el-select v-model="ruleForm.ckcssz_jyw" placeholder="请选择检验位">
              <el-option label="无校验（none）" value="无校验（none）"></el-option>
              <el-option label="无校验（none）" value="无校验（none）"></el-option>
              <el-option label="无校验（none）" value="无校验（none）"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="流控:" prop="ckcssz_lk">
            <el-select v-model="ruleForm.ckcssz_lkms" placeholder="请选择流控">
              <el-option label="关闭" value="关闭"></el-option>
              <el-option label="硬件流控" value="硬件流控"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="自适应波特率(类RFC2117):" prop="ckcssz_zdybtl">
            <el-select v-model="ruleForm.ckcssz_zdybtl" placeholder="请选择自适应波特率">
              <el-option label="开启" value="开启"></el-option>
              <el-option label="关闭" value="关闭"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm"
          :label-position="labelPosition">
          <el-form-item label="数据位(bit):" prop="ckcssz_sjw">
            <el-select v-model="ruleForm.ckcssz_sjw" placeholder="请选择数据位">
              <el-option label="8" value="8"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="停止位:" prop="ckcssz_tzw">
            <el-select v-model="ruleForm.ckcssz_tzw" placeholder="请选择停止位">
              <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="485功能:" prop="ckcssz_485">
            <el-select v-model="ruleForm.ckcssz_485" placeholder="请选择485功能">
              <el-option label="开启" value="开启"></el-option>
              <el-option label="关闭" value="关闭"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <h3>其他设置</h3>
      <el-divider></el-divider>
      <div class="formOne">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px" class="demo-ruleForm"
          :label-position="labelPosition">
          <el-form-item label="串口自动成频:" prop="qtsz_ckzdcz">
            <el-select v-model="ruleForm.qtsz_ckzdcz">
              <el-option label="关闭" value="关闭"></el-option>
              <el-option label="开启" value="开启"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="注册包类型:" prop="qtsz_zcblx">
            <el-select v-model="ruleForm.qtsz_zcblx">
              <el-option label="关闭" value="关闭"></el-option>
              <el-option label="开启" value="开启"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="自定义心跳包:" prop="qtsz_zdyxtb">
            <el-select v-model="ruleForm.qtsz_zdyxtb">
              <el-option label="关闭" value="关闭"></el-option>
              <el-option label="开启" value="开启"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="套接字分发功能:" prop="qtsz_tjzffgn">
            <el-select v-model="ruleForm.qtsz_tjzffgn">
              <el-option label="关闭" value="关闭"></el-option>
              <el-option label="开启" value="开启"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div>
          <p>
            注意：开启后，模块主动向服务器发送注册包，此功能用于辨识设备。
            first:模块建议时发送注册包,every:每次发送数据时发送注册包
          </p>
        </div>
      </div>
      <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";
import { Loading } from "element-ui";
export default {
  data() {
    return {
      dialogVisible: true,
      labelPosition: "left",
      ruleForm: {
        ckcssz_btl: "9600",
        ckcssz_jyw: "无校验（none）",
        ckcssz_lk: "关闭",
        ckcssz_zdybtl: "开启",
        ckcssz_sjw: "8",
        ckcssz_tzw: "1",
        ckcssz_485: "关闭",
        ckcssz_ckzdcz: "关闭",
        ckcssz_zcblx: "关闭",
        ckcssz_zdyxtb: "关闭",
        ckcssz_tjzffgn: "关闭",
      },
      rules: {
        ckcssz_btl: [{ required: true, trigger: "change" }],
        ckcssz_jyw: [{ required: true, trigger: "change" }],
        ckcssz_lk: [{ required: true, trigger: "change" }],
        ckcssz_zdybtl: [{ required: true, trigger: "change" }],
        ckcssz_sjw: [{ required: true, trigger: "change" }],
        ckcssz_tzw: [{ required: true, trigger: "change" }],
        ckcssz_485: [{ required: true, trigger: "change" }],
        ckcssz_ckzdcz: [{ required: true, trigger: "change" }],
        ckcssz_zcblx: [{ required: true, trigger: "change" }],
        ckcssz_zdyxtb: [{ required: true, trigger: "change" }],
        ckcssz_tjzffgn: [{ required: true, trigger: "change" }],
      },
    };
  },
  methods: {
    async saveDatas() {
      let datas = sessionStorage.getItem("CKFWQ_wx");
      datas = { ...JSON.parse(datas), ...this.ruleForm };
      let res = await SaveUserAnswer({
        mark: "CKFWQ_wx",
        user_id: "USER202307301109254198",
        mark_value: JSON.stringify(datas),
      });
      console.log(res);
      sessionStorage.setItem("CKFWQ_wx", JSON.stringify(datas));
    },
    async GetUserAnswer() {
      let answers = await GetUserAnswer({
        mark: "CKFWQ_wx",
        user_id: "USER202307301109254198"
      })
      let obj = JSON.parse(answers.data.data.mark_value);
      console.log(obj);
      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.ckcssz_ckzdcz = obj.ckcssz_ckzdcz;
      this.ruleForm.ckcssz_zcblx = obj.ckcssz_zcblx;
      this.ruleForm.ckcssz_zdyxtb = obj.ckcssz_zdyxtb;
      this.ruleForm.ckcssz_tjzffgn = obj.ckcssz_tjzffgn;
      // this.ruleForm
      console.log(this.ruleForm,obj)
    },
  },
  created() {
    this.Loading = true;
    this.GetUserAnswer();
    this.Loading = false;
  },
};
</script>
<style scoped lang="less">
.formOne {
  display: flex;
  justify-content: space-around;

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

    p {
      width: 70%;
    }
  }
}

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