<template>
  <div>
    <div>
      <el-dialog
        :title="$t('dbcollectiongate.title')"
        :visible.sync="outerVisible"
        width="382px"
        v-loading="loading"
      >
        <el-form
          :model="formData"
          :rules="rules"
          ref="formData"
          :label-width="$i18n.locale === 'zh'?'130px':'85px'"
          class="demo-ruleForm"
        >
          <el-form-item :label="$t('dbcollectiongate.name')" prop="wgpz_wgmc">
            <el-select
              v-model="formData.wgpz_wgmc"
              :placeholder="$t('select')"
              style="width: 200px"
            >
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('dbcollectiongate.ID')" prop="wgpz_wgid">
            <el-select
              v-model="formData.wgpz_wgid"
              :placeholder="$t('select')"
              style="width: 200px"
            >
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('dbcollectiongate.type')" prop="wgpz_wglx">
            <el-select
              v-model="formData.wgpz_wglx"
              :placeholder="$t('select')"
              style="width: 200px"
            >
              <el-option
                v-for="item in options3"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-dialog
          width="382px"
          :title="$t('dbcollectiongate.dialogTitle')"
          :visible.sync="innerVisible"
          append-to-body
        >
          <p class="inner_content" style="color: #fff !important">
            {{ $t('dbcollectiongate.dialogContent') }}
          </p>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="innerConfirm">{{ $t('confirm') }}</el-button>
            <el-button @click="innerVisible = false">{{ $t('cancel') }}</el-button>
          </div>
        </el-dialog>
        <div slot="footer" class="dialog-footer-outer">
          <el-button type="primary" @click="saveInfo('formData')"
            >{{ $t('save') }}</el-button
          >
          <el-button @click="outerVisible = false">{{ $t('cancel') }}</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {SaveUserAnswer, GetUserAnswer, GetTree, SendTree, getQueryAnswer} from "@/api/user";
export default {
  name: "DataAcquire",

  data() {
    return {
      loading: false,
      user_id: "",
      options1: this.$t('dbcollectiongate.options1'),
      options2: [
        {
          value: "LAN-BOX1",
          label: "LAN-BOX1",
        },
        {
          value: "WLAN-BOX1",
          label: "WLAN-BOX1",
        },
      ],
      options3:this.$t('dbcollectiongate.options3'),
      value: "",
      formData: {
        // ippz_wangkou:"",
        ippz_lwfs: "",
        ippz_zwym: "",
        ippz_mrwg: "",
        ippz_dns_sx: "",
        ippz_dns_by: "",
        ippz_ip: "",
        ippz_mac: "",
        ippz_wifi_ssid: "",
        ippz_wifi_mm: "",
        wgpz_wgmc: "",
        wgpz_wgid: "",
        wgpz_wglx: "",
        tdpz_tdmc: "",
        tdpz_td: "",
        tdpz_qdmc: "",
        tdpz_chuankou: "",
        tdpz_btl: "",
        tdpz_sjw: "",
        tdpz_tzw: "",
        tdpz_jojy: "",
        tdpz_cgsj: "",
        tdpz_jgsj: "",
        tdpz_lxsj: "",
        tdpz_cfcs: "",
        tdpz_watchtime: "",
        tdpz_cjsylxdz: "",
        tdpz_dxzkb: "",
        tdpz_050F: "",
        tdpz_0610: "",
        sbpz_sbid: "",
        sbpz_sbmc: "",
        sbpz_sbdz: "",
        sbpz_jysb: "",
        sbpz_jdzxz: "",
        cjdpz_tagid: "",
        cjdpz_mc: "",
        cjdpz_sjq: "",
        cjdpz_jcqdz: "",
        cjdpz_cjsjlx: "",
        cjdpz_zjx: "",
        cjdpz_dxsx: "",
        cjdpz_beilv: "",
        mqtt_qiyong: "",
        mqtt_ip: "",
        mqtt_port: "",
        mqtt_wgsn: "",
        mqtt_sssjfbzt: "",
        mqtt_qos: "",
        mqtt_scms: "",
        mqtt_sczq: "",
        mqtt_sjgl: "",
        mqtt_cjd_sbmc: "",
        mqtt_cjd_tagid: "",
        mqtt_retained: "",
      },
      rules: {
        wgpz_wgmc: [
          { required: true, message: "请选择网关名称", trigger: "blur" },
        ],
        wgpz_wgid: [
          { required: true, message: "请选择网关id", trigger: "blur" },
        ],
        wgpz_wglx: [
          { required: true, message: "请选择网关类型", trigger: "blur" },
        ],
      },
      outerVisible: true,
      innerVisible: false,
    };
  },
  methods: {
    saveInfo(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log('submit!');
          this.innerVisible = true;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    async innerConfirm() {
      this.outerVisible = false;
      this.innerVisible = false;
      // let datas = sessionStorage.getItem("DB-IotLite_wx");
      // console.log(JSON.parse(datas));
      // this.formdata = { ...JSON.parse(datas), ...this.formdata };
      // console.log(this.formdata);
      let res = await SaveUserAnswer({
        mark: "DB-IotLite_wx",
        user_id: this.user_id,
        // user_id: "USER202307301114011710",
        mark_value: JSON.stringify(this.formData),
        step: "1",
      });
      console.log(res);
      if (res.data.state) {
        this.$message({
          message: this.$t('success'),
          type: "success",
        });
        this.trees[0].label = this.formData.wgpz_wgid;
        this.sendTree();
        // sessionStorage.setItem("DB-IotLite_wx", JSON.stringify(this.formData));
        // this.$router.replace(`/dbcollectserial?user_id=${this.user_id}`);
        this.$router.replace(`/dbcollectserial?user_id=${this.user_id}`);
      } else {
        this.$message({
          message: `保存失败,原因是${res.data.message}`,
          type: "error",
        });
      }
      // console.log(res);
      // console.log(JSON.parse(res.data.data.mark_value));
    },
    async getUserAnswer() {
      this.loading = true;
      let res2 = await GetUserAnswer({
        mark: "DB-IotLite_wx",
        user_id: this.user_id,
        // user_id: "USER202307301114011710",
      });
      console.log(res2);
      this.loading = false;
      if(!res2.data.state){
        getQueryAnswer({
          mark: "DB-IotLite_wx",
          user_id: this.user_id
        }).then(res => {
          let res3 = JSON.parse(res.data.data.r3);
          if (res3.wgpz_wgid) {
            this.formData.wgpz_wgid = res3.wgpz_wgid;
            this.formData.wgpz_wgmc = res3.wgpz_wgmc;
            this.formData.wgpz_wglx = res3.wgpz_wglx;
          }
        })
      }
      if (res2.data.data && res2.data.state) {
        if (res2.data.data.step) {
          if (res2.data.data.step == 1) {
            this.$router.push(`/dbcollectserial?user_id=${this.user_id}`);
          } else if (res2.data.data.step == 2) {
            this.$router.push(`/dbserialdevice?user_id=${this.user_id}`);
          } else if (res2.data.data.step == 3) {
            this.$router.push(`/dbwificollect?user_id=${this.user_id}`);
          }
        } else {
          let res3 = JSON.parse(res2.data.data.mark_value);
          if (res3.wgpz_wgid) {
            this.formData.wgpz_wgid = res3.wgpz_wgid;
            console.log(this.formData.wgpz_wgid);
            this.formData.wgpz_wgmc = res3.wgpz_wgmc;
            this.formData.wgpz_wglx = res3.wgpz_wglx;
          }
          // this.formData.ippz_wangkou = res3.ippz_wangkou;
          this.formData.ippz_lwfs = res3.ippz_lwfs;
          this.formData.ippz_ip = res3.ippz_ip;
          this.formData.ippz_zwym = res3.ippz_zwym;
          this.formData.ippz_mrwg = res3.ippz_mrwg;
          this.formData.ippz_dns_sx = res3.ippz_dns_sx;
          this.formData.ippz_dns_by = res3.ippz_dns_by;
          this.formData.ippz_mac = res3.ippz_mac;
          this.formData.ippz_wifi_ssid = res3.ippz_wifi_ssid;
          this.formData.ippz_wifi_mm = res3.ippz_wifi_mm;
          this.formData.tdpz_tdmc = res3.tdpz_tdmc;
          this.formData.tdpz_td = res3.tdpz_td;
          this.formData.tdpz_qdmc = res3.tdpz_qdmc;
          this.formData.tdpz_chuankou = res3.tdpz_chuankou;
          this.formData.tdpz_btl = res3.tdpz_btl;
          this.formData.tdpz_sjw = res3.tdpz_sjw;
          this.formData.tdpz_tzw = res3.tdpz_tzw;
          this.formData.tdpz_jojy = res3.tdpz_jojy;
          this.formData.tdpz_cgsj = res3.tdpz_cgsj;
          this.formData.tdpz_jgsj = res3.tdpz_jgsj;
          this.formData.tdpz_lxsj = res3.tdpz_lxsj;
          this.formData.tdpz_cfcs = res3.tdpz_cfcs;
          this.formData.tdpz_watchtime = res3.tdpz_watchtime;
          this.formData.tdpz_cjsylxdz = res3.tdpz_cjsylxdz;
          this.formData.tdpz_dxzkb = res3.tdpz_dxzkb;
          this.formData.tdpz_050F = res3.tdpz_050F;
          this.formData.tdpz_0610 = res3.tdpz_0610;

          this.formData.sbpz_sbid = res3.sbpz_sbid;
          this.formData.sbpz_sbmc = res3.sbpz_sbmc;
          this.formData.sbpz_sbdz = res3.sbpz_sbdz;
          this.formData.sbpz_jysb = res3.sbpz_jysb;
          this.formData.sbpz_jdzxz = res3.sbpz_jdzxz;

          this.formData.cjdpz_tagid = res3.cjdpz_tagid;
          this.formData.cjdpz_mc = res3.cjdpz_mc;
          this.formData.cjdpz_sjq = res3.cjdpz_sjq;
          this.formData.cjdpz_jcqdz = res3.cjdpz_jcqdz;
          this.formData.cjdpz_cjsjlx = res3.cjdpz_cjsjlx;
          this.formData.cjdpz_zjx = res3.cjdpz_zjx;
          this.formData.cjdpz_dxsx = res3.cjdpz_dxsx;
          this.formData.cjdpz_beilv = res3.cjdpz_beilv;

          this.formData.mqtt_qiyong = res3.mqtt_qiyong;
          this.formData.mqtt_ip = res3.mqtt_ip;
          this.formData.mqtt_port = res3.mqtt_port;
          this.formData.mqtt_wgsn = res3.mqtt_wgsn;
          this.formData.mqtt_sssjfbzt = res3.mqtt_sssjfbzt;
          this.formData.mqtt_qos = res3.mqtt_qos;
          this.formData.mqtt_scms = res3.mqtt_scms;
          this.formData.mqtt_sczq = res3.mqtt_sczq;
          this.formData.mqtt_sjgl = res3.mqtt_sjgl;
          this.mqtt_retained = res3.mqtt_retained;
          this.formData.mqtt_cjd_sbmc = res3.mqtt_cjd_sbmc;
          this.formData.mqtt_cjd_tagid = res3.mqtt_cjd_tagid;
        }
      }
    },
    async sendTree() {
      let result = await SendTree({
        user_id: this.user_id,
        // user_id: "USER202307301114011710",
        data: JSON.stringify(this.trees),
        type: "2",
      });
      console.log(result);
    },
  },
  created() {
    this.user_id = window.location.href.split("?")[1];
    this.getUserAnswer();
    if (this.user_id != "undefined") {
      GetTree({
        user_id: this.user_id,
        type: "2",
      }).then((res) => {
        console.log(res);
        // this.trees = JSON.parse(res.data.data.data);
        if(this.$i18n.locale==='zh'){
        this.trees = JSON.parse(res.data.data.r2);
      }else{
        this.trees = JSON.parse(res.data.data.data);
      }
      });
    }
  },
};
</script>

<style lang="less" scoped>
.data_acquire {
  font-size: 14px;
}

.inner_content {
  margin-left: 30px;
  width: 280px;

  // color: rgba(255, 255, 255, 0);
  font-size: 14px;
  text-align: left;
  font-family: "SourceHanSansSC-regular";
}
</style>
