<template>
  <div class="code-gen-preview-templates">
    <div class="toolbar">
      <pro-action
        icon="el-icon-plus"
        :splitButton="true"
        type="primary"
        @handler="handlerAdd"
        text="添加要素"
        ui-type="dropdown"
      >
        <template slot="subActions">
          <pro-sub-action icon="el-icon-plus" @handler="handlerAddDetailForm"
            >添加明细表单要素</pro-sub-action
          >
        </template>
      </pro-action>
    </div>
    <el-tabs type="card">
      <el-tab-pane label="预览">
        <pro-online-render
          :vjson="vjson"
          style="width: 1024px"
          :createElementProxy="createElementProxy"
        ></pro-online-render>
      </el-tab-pane>
      <el-tab-pane label="Vjson">
        <pro-full-height :decrease="-150">
          <template slot-scope="{ height }">
            <CodeEdit :code="vjsonStr" :style="{ height }" />
          </template>
        </pro-full-height>
      </el-tab-pane>
      <el-tab-pane label="Vue"> </el-tab-pane>
    </el-tabs>
    <transition name="el-zoom-in-top">
      <div
        class="popup-vjson-node-action"
        v-show="showVnodeAction"
        ref="popupVjsonVnodeAction"
      >
        <div
          style="
            height: 40px;
            line-height: 40px;
            background: #1e1e1b;
            padding: 0px 10px;
          "
        >
          <pro-action
            size="mini"
            icon="el-icon-delete"
            @handler="() => {}"
            type="text"
            helpText="删除当前元素"
          />
          <pro-action
            size="mini"
            icon="el-icon-setting"
            @handler="() => {}"
            type="text"
            helpText="配置当前要素"
          />
          <pro-action
            size="mini"
            icon="el-icon-back"
            @handler="() => {}"
            type="text"
            helpText="向前"
          />
          <pro-action
            size="mini"
            icon="el-icon-right"
            @handler="() => {}"
            type="text"
            helpText="向后"
          />
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import SingleFormGenerateVjson from "./single-form-generate-vjson";
import CodeEdit from "../../modals/components/code-edit";
import { post } from "mars-pro/src/pro/request";
import createElementProxy from "mars-pro/src/pro/vjson/createElementProxy";
import Popper from "mars-pro/src/utils/vue-popper";
import { on, off, hasClass } from "mars-pro/src/utils/dom";
import debounce from "throttle-debounce/debounce";

let uid = 0;
function genUid() {
  return uid++;
}
export default {
  mixins: [Popper],
  title: "简单表单模板",
  templateName: "singleform",
  components: { CodeEdit },
  offset: {
    type: Number,
    default: 0,
  },
  data() {
    //创建协议生成器
    this.generateVjson = new SingleFormGenerateVjson();
    return {
      vjson: {},
      vjsonStr: "",
      showVnodeAction: false,
    };
  },
  created() {
    this.createElementProxy = createElementProxy({
      createSetting: this.createSetting,
    });
    this.debouncedHandlerUserMousemove = debounce(100, (e) => {
      this.handlerUserMousemove(e);
    });
  },
  methods: {
    getSelectFactor() {
      const selectfactor =
        this.$store.selectfactor.$refs.formlist.$refs.tables.$refs.proDataTable
          .$refs.eltable.store.states.selection || [];
      if (!selectfactor || selectfactor.length === 0) {
        this.$message.warning("请选择要素!!!");
        return null;
      }
      return selectfactor;
    },
    handlerAdd() {
      const selectfactor = this.getSelectFactor();
      if (!selectfactor) {
        return;
      }
      this.generateVjson.appendDatas(selectfactor);
      this.generateVjson.options.columnCount = 3;
      this.vjson = this.generateVjson.generate();
      this.handleFormatVjson();
    },

    // 生成明细表单
    handlerAddDetailForm() {
      const selectfactor = this.getSelectFactor();
      if (!selectfactor) {
        return;
      }
      this.generateVjson.appendDatas([
        {
          tag: "pro-form-list",
          props: {
            ":span": 24,
            emptyText: "数据为空",
            // table row key
            dataKey: "id",
            // form model prop
            prop: "list" + genUid(),
            // 明细类型为 tables
            type: "tables",
          },
          //表单元素
          children: selectfactor.map((r) => ({
            ...r,
            props: {
              ...r,
              ":is-edit": true,
            },
          })),
        },
      ]);
      this.generateVjson.options.columnCount = 3;
      this.vjson = this.generateVjson.generate();
      this.handleFormatVjson();
    },
    handlerAddGroupForm() {},
    async handleFormatVjson() {
      const { response } = await post(
        "/mock/api/code-gen/user-mock/formatCode",
        {
          code: JSON.stringify(this.vjson || {}),
        }
      ).done();
      this.vjsonStr = response.data.formatCode;
    },
    createSetting({ tag, data, children }) {
      const attrs = data.attrs || {};
      if (attrs["data-vsetting"]) {
        return {
          key: "code-gen",
        };
      }
      return;
    },
    handlerUserMousemove(event) {
      if (!event.path) {
        return;
      }
      const pathList = event.path;
      let referenceElm = null;
      for (let i = 0; i < pathList.length; i++) {
        const dom = pathList[i];
        if (hasClass(dom, "data-vsetting")) {
          referenceElm = dom;
          break;
        }
      }
      if (referenceElm) {
        this.referenceElm = referenceElm;
        this.showVnodeAction = true;
        this.doDestroy();
        this.updatePopper();
        return;
      }
      this.showVnodeAction = false;
      this.doDestroy();
      this.referenceElm = null;
    },
  },
  mounted() {
    this.currentPlacement = "bottom-start";
    this.popperElm = this.$refs.popupVjsonVnodeAction;
    on(this.$el, "mousemove", this.debouncedHandlerUserMousemove);
  },
  beforeDestroy() {
    off(this.$el, "mousemove", this.debouncedHandlerUserMousemove);
  },
};
</script>

<style  lang="scss">
.code-gen-preview-templates {
  .vue-codemirror,
  .CodeMirror {
    height: 100%;
  }
}
</style>