<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">{{ $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: "TestDataAcquisition",

  data() {
    return {
      loading: false,
      user_id: "",
      trees: [],
      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_zwym: "",
        ippz_mrwg: "",
        ippz_dns_sx: "",
        ippz_dns_by: "",
        ippz_ip: "",
        ippz_mac: "3C:2D:50:20:30:3D",
        wgpz_wgmc: "",
        wgpz_wgid: "",
        wgpz_wglx: "",
        tdpz_tdmc: "",
        tdpz_td: "",
        tdpz_qdmc: "",
        tdpz_ip: "",
        tdpz_port: "",
        tdpz_cssj: "",
        tdpz_jgsj: "",
        tdpz_lxsj: "",
        tdpz_cfcs: "",
        tdpz_watchtime: "",
        tdpz_cjsylxdz: "",
        tdpz_dxzkb: "",
        tdpz_050F: "",
        tdpz_0610: "",
        sbpz_sbid: "",
        sbpz_sbmc: "",
        sbpz_mac: "",
        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: "",
      },
      rules: {
        wgpz_wgmc: [
          {
            required: true,
            message: this.$t("dbcollectiongate.rules.wgpz_wgmc"),
            trigger: "blur",
          },
        ],
        wgpz_wgid: [
          {
            required: true,
            message: this.$t("dbcollectiongate.rules.wgpz_wgid"),
            trigger: "blur",
          },
        ],
        wgpz_wglx: [
          {
            required: true,
            message: this.$t("dbcollectiongate.rules.wgpz_wglx"),
            trigger: "blur",
          },
        ],
      },
      outerVisible: true,
      innerVisible: false,
    };
  },
  methods: {
    saveInfo() {
      this.$refs["formData"].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_yx");
      // console.log(JSON.parse(datas));
      // datas = { ...JSON.parse(datas), ...this.formData };
      // console.log(datas);
      // alert(JSON.stringify(this.formData),'保存传值')
      let res = await SaveUserAnswer({
        mark: "DB-IotLite_yx",
        user_id: this.user_id,
        // user_id: "USER202307301114011710",
        mark_value: JSON.stringify(this.formData),
        step: "1",
      });
      if (res.data.state) {
        this.$message({
          message: this.$t('success'),
          type: "success",
        });
        this.trees[0].label = this.formData.wgpz_wgid;
        this.sendTree();
        this.$router.push(`/channelconfig?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_yx",
        user_id: this.user_id,
        // user_id: "USER202307301114011710",
      });
      this.loading = false;
      if (!res2.data.state) {
        getQueryAnswer({
          mark: "DB-IotLite_yx",
          user_id: this.user_id,
        }).then((res) => {
          let data = null;
          if (this.$i18n.locale === "zh") {
            data = JSON.parse(res.data.data.r3_en_default);
          } else {
            data = JSON.parse(res.data.data.r3);
          }
          this.formData.wgpz_wgid = data.wgpz_wgid;
          // console.log(this.formData.wgpz_wgid);
          this.formData.wgpz_wgmc = data.wgpz_wgmc;
          this.formData.wgpz_wglx = data.wgpz_wglx;
          this.formData.ippz_wangkou = data.ippz_wangkou;
          this.formData.ippz_mrwg = data.ippz_mrwg;
          this.formData.ippz_ip = data.ippz_ip;
          this.formData.ippz_zwym = data.ippz_zwym;
          this.formData.ippz_dns_sx = data.ippz_dns_sx;
          this.formData.ippz_dns_by = data.ippz_dns_by;
          this.formData.ippz_mac = data.ippz_mac;
          this.formData.tdpz_tdmc = data.tdpz_tdmc;
          this.formData.tdpz_td = data.tdpz_td;
          this.formData.tdpz_qdmc = data.tdpz_qdmc;
          this.formData.tdpz_ip = data.tdpz_ip;
          this.formData.tdpz_port = data.tdpz_port;
          this.formData.tdpz_cssj = data.tdpz_cssj;
          this.formData.tdpz_jgsj = data.tdpz_jgsj;
          this.formData.tdpz_lxsj = data.tdpz_lxsj;
          this.formData.tdpz_cfcs = data.tdpz_cfcs;
          this.formData.tdpz_watchtime = data.tdpz_watchtime;
          this.formData.tdpz_cjsylxdz = data.tdpz_cjsylxdz;
          this.formData.tdpz_dxzkb = data.tdpz_dxzkb;
          this.formData.tdpz_050F = data.tdpz_050F;
          this.formData.tdpz_0610 = data.tdpz_0610;
          this.formData.sbpz_sbid = data.sbpz_sbid;
          this.formData.sbpz_sbmc = data.sbpz_sbmc;
          this.formData.sbpz_mac = data.sbpz_mac;
          this.formData.sbpz_jysb = data.sbpz_jysb;
          this.formData.sbpz_jdzxz = data.sbpz_jdzxz;

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

          this.formData.mqtt_qiyong = data.mqtt_qiyong;
          this.formData.mqtt_ip = data.mqtt_ip;
          this.formData.mqtt_port = data.mqtt_port;
          this.formData.mqtt_wgsn = data.mqtt_wgsn;
          this.formData.mqtt_sssjfbzt = data.mqtt_sssjfbzt;
          this.formData.mqtt_qos = data.mqtt_qos;
          this.formData.mqtt_scms = data.mqtt_scms;
          this.formData.mqtt_sczq = data.mqtt_sczq;
          this.formData.mqtt_sjgl = data.mqtt_sjgl;
          this.formData.mqtt_cjd_sbmc = data.mqtt_cjd_sbmc;
          this.formData.mqtt_cjd_tagid = data.mqtt_cjd_tagid;
        });
        return;
      }
      console.log(res2.data.data.step, "xxxx");
      // console.log(res2.data.data.step);
      if (res2.data.data && res2.data.state) {
        if (res2.data.data.step) {
          if (res2.data.data.step == 1) {
            this.$router.push(`/channelconfig?user_id=${this.user_id}`);
          } else if (res2.data.data.step == 2) {
            this.$router.push(`/dbcollectdevice?user_id=${this.user_id}`);
          } else if (res2.data.data.step == 3) {
            this.$router.push(`/dbcollect?user_id=${this.user_id}`);
          }
        } else {
          console.log(res2.data.data.mark_value);
          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_mrwg = res3.ippz_mrwg;
          this.formData.ippz_ip = res3.ippz_ip;
          this.formData.ippz_zwym = res3.ippz_zwym;
          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.tdpz_tdmc = res3.tdpz_tdmc;
          this.formData.tdpz_td = res3.tdpz_td;
          this.formData.tdpz_qdmc = res3.tdpz_qdmc;
          this.formData.tdpz_ip = res3.tdpz_ip;
          this.formData.tdpz_port = res3.tdpz_port;
          this.formData.tdpz_cssj = res3.tdpz_cssj;
          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_mac = res3.sbpz_mac;
          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.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: "1",
      });
      console.log(result);
    },
  },
  mounted(){
    let that = this
    //  window.setTimeout(()=>{
    //   that.options1 = that.$t("dbcollectiongate.options1");
    //   that.options3 = that.$t("dbcollectiongate.options3");
    //  },800)
  },
  created() {
    this.user_id = window.location.href.split("?")[1];
    this.getUserAnswer();
    if (this.user_id != "undefined") {
      GetTree({
        user_id: this.user_id,
        type: "1",
      }).then((res) => {
        console.log(res);
        // alert(JSON.stringify(res.data.data.data));
        // 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>
