<template>
  <div class="container">
    <div class="left">
      <Anchor @goAnchor="goAnchor" :anchorList="anchorList" />
    </div>
    <div class="right">
      <Basic
        v-for="(item, index) in anchorList"
        :key="index"
        :itemProps="item"
        :info="info"
      />
      <!-- <Geo :PropInfo="info.geo" />
      <Project />
      <Business /> -->
      <div class="bottom">
        <Button type="primary" @click="save">保存</Button>
      </div>
    </div>
  </div>
</template>
<script>
import Anchor from "./components/anchor.vue";
import Basic from "./components/basic.vue";
import Geo from "./components/geo.vue";
import Project from "./components/project.vue";
import Business from "./components/business.vue";
import { mapState } from "vuex";
import ScanController from "@/controller/old-adm/ScanController";
import Dic from "@/controller/old-adm/dicController";
import Form from "./form/index.vue";
import { $Bus } from "@/utils/Bus";
export const dataTypeEnum = {
  INTEGER: "input",
  DOUBLE: "input",
  BOOLEAN: "BOOLEAN",
  STRING: "input",
  DATETIME: "DATETIME",
  ENUM: "select",
  MENUM: "select",
  ATTACHMENT: "upload",
  OBJECT: "OBJECT",
};
export default {
  components: {
    Anchor,
    Basic,
    Geo,
    Project,
    Business,
    Form,
  },
  data() {
    return {
      anchorList: [],
      info: {},
    };
  },
  computed: {
    ...mapState(["selectProject"]),
    ...mapState("layout", ["projectId"]),
  },
  mounted() {
    this.getInfo();
    this.getDict();
    this.initEvent();
  },
  methods: {
    getDict() {
      Dic.getDataDictionary({
        type: "project",
        filters: `projectId=${this.projectId}`,
      }).then((res) => {
        let keys = [];
        res.content
          .filter((i) => i.visible)
          .forEach((i) => {
            const index = keys.findIndex((i2) => i2.label === i.firstTag);
            const obj = {
              label: i.firstTag,
              value: `a-${encodeURI(i.firstTag)}`,
              child: [i],
            };
            if (index === -1) {
              keys.push(obj);
            } else {
              keys[index].child.push(i);
            }
          });
        this.anchorList = keys;
        console.log(
          "%c [ res ]: ",
          "color: #bf2c9f; background: pink; font-size: 13px;",
          res
        );
        console.log(keys);
      });
    },
    getInfo() {
      ScanController.getAllProject({
        filters: `projectId=${this.projectId}`,
      }).then((res) => {
        console.log(res);
        if (res.content.length) {
          let info = res.content[0];
          // const { id, localName, infos } = info;
          // this.info.basic.id = id;
          // this.info.basic.localName = localName;

          // this.info.geo.lng = infos.longitude;
          // this.info.geo.lat = infos.latitude;
          this.info = info;
        }
      });
    },
    goAnchor(anchor) {
      let name = anchor;
      let dom = document.querySelector(`.${name}`);
      let right = document.querySelector(".right");
      if (dom && right) {
        right.scrollTop = dom.offsetTop - 120;
      }
    },
    save() {
      ScanController.updateProjectInfo({ content: [this.info] }).then((res) => {
        console.log(res);
      });
      console.log(this.info);
    },
    initEvent() {
      $Bus.$on("formInfoChange", ({ pathArr, value }) => {
        if (pathArr.length > 1) {
          if (this.info[pathArr[0]].hasOwnProperty(pathArr[1])) {
            this.info[pathArr[0]][pathArr[1]] = value;
          } else {
            this.$set(this.info[pathArr[0]], pathArr[1], value);
          }
        } else if (pathArr.length === 1) {
          this.info[pathArr[0]] = value;
        }
      });
    },
  },
  watch: {
    projectId() {
      this.getInfo();
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  display: flex;
  background-color: #ffffff;

  .left {
    flex: 0 0 143px;
  }
  .right {
    width: 100%;

    overflow-y: auto;
    .basic-container,
    .geo-container,
    .project-container,
    .business-container {
      padding: 20px;
    }
    .bottom {
      width: 100%;
      height: 72px;
      box-shadow: 0px 2px 10px rgba(31, 36, 41, 0.2);
      // display: flex;
      // align-items: center;
      padding: 20px;
    }
  }
}
</style>
