<template>
  <div id="tablecontainer">
    <el-tabs v-model="activeName">
      <el-tab-pane label="定位方式" name="first"></el-tab-pane>
      <el-main>
        <el-checkbox-group
          v-model="checkList"
          style="margin-top: 30px"
          @change="changePosition"
        >
          <ul>
            <el-checkbox label="gps" border style="width: 160px"
              >GPS定位</el-checkbox
            >
          </ul>
          <ul>
            <el-checkbox
              label="network"
              border
              style="margin-top: 10px; width: 160px"
              >网络</el-checkbox
            >
          </ul>
          <ul>
            <el-checkbox
              label="bluetooth"
              border
              style="margin-top: 10px; width: 160px"
              >蓝牙</el-checkbox
            >
          </ul>
          <ul>
            <el-checkbox
              label="baidu"
              border
              style="margin-top: 10px; width: 160px"
              >百度</el-checkbox
            >
          </ul>
          <ul>
            <el-checkbox
              label="auto"
              border
              style="margin-top: 10px; width: 160px"
              >自动</el-checkbox
            >
          </ul>
        </el-checkbox-group>
        <el-button
          id="buttonStyle"
          size="small"
          style="margin-top: 30px; margin-left: 40px"
          v-if="getInfo == '1'"
          @click="backUploadData(checkList)"
          >上一步</el-button
        >
        <el-button
          id="buttonStyle"
          size="small"
          style="margin-top: 30px"
          v-if="getInfo == '1'"
          @click="UploadData(checkList)"
          >保存并下一步</el-button
        >
      </el-main>
    </el-tabs>
  </div>
</template>

<script>
import { store } from "@/components/vuex/store.js";
export default {
  data() {
    return {
      getInfo: sessionStorage.getItem("getInfo"),
      activeName: "first",
      checkList: [],
      checkList1: [],

      position: [],
      id: "",
      name: "",
      key: "",
    };
  },
  methods: {
    init() {
      let that = this;
      let config = sessionStorage["Data"];
      if (config) {
        config = JSON.parse(config);
        this.position = config.meta.position;
      } else {
        if (that.$store.state.config.meta.position)
          this.position = that.$store.state.config.meta.position;
      }
      if (this.position.length > 0) {
        for (var i = 0; i < this.position.length; i++) {
          var select = this.position[i].name;
          this.checkList.push(select);
          this.checkList1.push(select);
        }
      }
    },
    backUploadData(checkList) {
      let that = this;
      //传入position
      that.position = [];
      for (var j = 0; j < that.checkList.length; j++) {
        var name1 = that.checkList[j];
        var draw = {
          name: name1,
        };
        that.position.push(draw);
      }
      that.$store.dispatch("updatePosition1", { position: that.position });
      that.$notify.success({
        title: "提示",
        message: "保存成功",
      });
      this.$router.push({
        path:
          "/home/" + this.name + "/" + this.key + "/" + this.id + "/drawtool",
      });
    },
    UploadData(checkList) {
      let that = this;
      //传入position
      that.position = [];
      for (var j = 0; j < that.checkList.length; j++) {
        var name1 = that.checkList[j];
        var draw = {
          name: name1,
        };
        that.position.push(draw);
      }
      that.$store.dispatch("updatePosition1", { position: that.position });
      that.$notify.success({
        title: "提示",
        message: "保存成功",
      });
      this.$router.push({
        path:
          "/home/" + this.name + "/" + this.key + "/" + this.id + "/basemap",
      });
    },
    changePosition() {
      if (this.getInfo != 1) {
        this.checkList = this.checkList1;
      }
    },
  },
  watch: {
    //用watch监听变化
    $route: {
      handler(to, from) {
        this.id = to.params.id;
        this.key = to.params.key;
        this.name = to.params.name;
      },
      immediate: true,
    },
  },
  store,
  mounted: function () {
    this.init();
  },
};
</script>
<style scoped>
@media screen and (min-height: 800px) {
  #checkcontainer {
    height: 500px !important;
  }
}
@media screen and (min-height: 700px) and (max-height: 800px) {
  #checkcontainer {
    height: 400px !important;
  }
}
@media screen and (min-height: 600px) and (max-height: 700px) {
  #checkcontainer {
    height: 350px !important;
  }
}
@media screen and (min-height: 500px) and (max-height: 600px) {
  #checkcontainer {
    height: 300px !important;
  }
}
@media screen and (max-height: 500px) {
  #checkcontainer {
    height: 250px !important;
  }
}
</style>

