<template>
  <div class="container" v-loading="loading">
    <template v-if="!refresh">
      <div class="left">
        <Anchor @goAnchor="goAnchor" :anchorList="anchorList" />
      </div>
      <div class="right">
        <!-- <Basic name="基础信息" :info="info" /> -->
        <Form
          v-for="(item, index) in anchorList"
          :key="index"
          :itemProps="item"
          :info="info"
        />
        <!-- <Geo :PropInfo="info.geo" />
      <Project />
      <Business /> -->
      </div>
      <div class="bottom">
        <Button type="primary" @click="save">保存</Button>
      </div>
    </template>
  </div>
</template>
<script>
import Anchor from "./components/anchor.vue";
import Basic from "./components/basic.vue";
import Form from "./form/index.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 { IndexLoading } from "meri-design";
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: {
    Basic,
    Anchor,
    Geo,
    Project,
    Business,
    Form,
  },
  data() {
    return {
      anchorList: [],
      info: {},
      refresh: false, // 节点重新渲染
      isSaved: true, // 是否已经保存
      hasChange: false, // 是否有修改
      loading: false,
    };
  },
  computed: {
    ...mapState(["selectProject"]),
    ...mapState("layout", ["projectId"]),
  },
  mounted() {
    // this.getInfo();
    // this.getDict();
    this.initEvent();
    this.loading = true;
    this.refresh = true;
    Promise.all([this.getInfo(), this.getDict()]).then(() => {
      this.refresh = false;
      // IndexLoading.remove(this.loading);
      this.loading = false;
    });
  },
  methods: {
    // 获取参数字典
    async getDict() {
      return 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);
      });
    },
    // 获取数据信息
    async getInfo() {
      return ScanController.getAllProject({
        filters: `projectId=${this.projectId}`,
      }).then((res) => {
        console.log(res);
        if (res.content.length) {
          let info = res.content[0];
          this.info = info;
        }
      });
    },
    // 跳转到锚点
    goAnchor(anchor) {
      let name = anchor;
      let dom = document.querySelector(`.${name}-container`);
      let right = document.querySelector(".right");
      if (dom && right) {
        right.scrollTop = dom.offsetTop - 140;
      }
    },
    // 保存
    save() {
      ScanController.updateProjectInfo({ content: [this.info] }).then((res) => {
        this.$message.success("保存成功");
        this.isSaved = true;
        this.hasChange = false;
      });
      console.log(this.info);
    },
    initEvent() {
      $Bus.$on("formInfoChange", (values) => {
        console.log(
          "%c [ pathArr, value $on ]: ",
          "color: #bf2c9f; background: pink; font-size: 13px;",
          values
        );
        if (Array.isArray(values)) {
          values.forEach((item) => {
            const { pathArr, value } = item;
            if (pathArr.length > 1) {
              if (this.info[pathArr[0]].hasOwnProperty(pathArr[1])) {
                this.$set(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;
            }
          });
        } else {
          const { pathArr, value } = values;
          if (pathArr.length > 1) {
            if (this.info[pathArr[0]].hasOwnProperty(pathArr[1])) {
              this.$set(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;
          }
        }
        this.hasChange = true;
        this.isSaved = false;
        console.log(this.info, "info");
      });
    },
  },
  watch: {
    projectId() {
      // this.loading = IndexLoading();
      this.loading = true;
      this.refresh = true;
      Promise.all([this.getInfo(), this.getDict()]).then(() => {
        this.refresh = false;
        // IndexLoading.remove(this.loading);
        this.loading = false;
      });
    },
  },
  // 二次确认
  beforeRouteLeave(to, from, next) {
    if (this.hasChange && !this.isSaved) {
      next(false);
      this.$confirm("填写内容未保存，确定保存吗？", "提示", {
        confirmButtonText: "保存",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.save();
          // 选择确定
          next();
        })
        .catch(() => {
          next();
        });
    } else {
      next();
    }
  },
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  display: flex;
  background-color: #ffffff;

  .left {
    flex: 0 0 143px;
  }
  .right {
    width: 100%;
    padding: 20px;
    overflow-y: auto;
  }
  .bottom {
    width: 100%;
    height: 72px;
    box-shadow: 0px 2px 10px rgba(31, 36, 41, 0.2);
    // display: flex;
    // align-items: center;
    position: fixed;
    bottom: 0;
    padding: 20px;
    padding-left: 178px;
    background-color: #fff;
    z-index: 999;
  }
}
</style>
