<template>
  <div class="formula-menu">
    <div class="menu-tabs">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="公式模板" name="formula"></el-tab-pane>
        <el-tab-pane label="快捷工具" name="tool"></el-tab-pane>
      </el-tabs>
    </div>
    <div v-if="activeName === 'formula'" class="menu-body">
      <div v-for="menu in menuData" :key="menu.code" class="menu-item">
        <el-popover
          popper-class="menu-popper"
          placement="bottom"
          width="480"
          trigger="hover"
          :open-delay="200"
        >
          <div class="menu-item-body" slot="reference">
            <div
              :class="`menu-item-icon menu-item-formula-${menu.source}-${menu.source}`"
            ></div>
            <p>{{ menu.name }}</p>
            <i class="el-icon-caret-bottom"></i>
          </div>
          <div
            :class="['submenu', 'submenu-formula', `submenu-${menu.source}`]"
          >
            <ul>
              <li v-for="(menuItem, mindex) in menu.children" :key="mindex">
                <div
                  :class="['submenu-cont', `submenu-cont-${menuItem.source}`]"
                  @click="selectMenu(menuItem, menu)"
                >
                  <div
                    :class="`menu-item-icon menu-item-formula-${menu.source}-${menuItem.source}`"
                  ></div>
                </div>
              </li>
            </ul>
          </div>
        </el-popover>
      </div>
    </div>
    <div v-if="activeName === 'tool'" class="menu-body">
      <div v-for="menu in menuData" :key="menu.code" class="menu-item">
        <el-popover
          popper-class="menu-popper"
          placement="bottom"
          width="480"
          trigger="hover"
          :open-delay="200"
        >
          <div class="menu-item-body" slot="reference">
            <div
              :class="`menu-item-icon menu-item-tool-${menu.source}-${menu.source}`"
            ></div>
            <p>{{ menu.name }}</p>
            <i class="el-icon-caret-bottom"></i>
          </div>

          <div :class="['submenu', 'submenu-tool', `submenu-${menu.source}`]">
            <div
              v-for="(submenu, sindex) in menu.children"
              :key="sindex"
              :class="['submenu-part', `submenu-part-${submenu.source}`]"
            >
              <h3>{{ submenu.name }}</h3>
              <ul>
                <li
                  v-for="(menuItem, mindex) in submenu.children"
                  :key="mindex"
                >
                  <div
                    :class="['submenu-cont', `submenu-cont-${menuItem.source}`]"
                    @click="selectMenu(menuItem, menu)"
                  >
                    <div
                      :class="`menu-item-icon menu-item-tool-${menu.source}-${submenu.source}-${menuItem.source}`"
                    ></div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </el-popover>
      </div>
    </div>

    <!-- MatrixSetDialog -->
    <MatrixSetDialog ref="MatrixSetDialog" @confirm="matrixSetConfirm" />
  </div>
</template>

<script>
import menu from "./menu";
import MatrixSetDialog from "./MatrixSetDialog.vue";

export default {
  name: "formula-menu",
  components: { MatrixSetDialog },
  data() {
    return {
      activeName: "formula",
      menuData: [],
      curFormula: {},
    };
  },
  mounted() {
    this.handleClick({ name: "tool" });
  },
  methods: {
    handleClick(tab) {
      this.activeName = tab.name;
      this.menuData = menu[this.activeName];
    },
    selectMenu(data, menu) {
      if (menu.source === "matrix") {
        this.curFormula = data;
        this.$refs.MatrixSetDialog.open();
        return;
      }

      this.$emit("select-menu", data);
    },
    matrixSetConfirm(val) {
      const outputs = [this.curFormula.output[0]];
      for (let i = 0; i < val.rowCount; i++) {
        const cont = "#"
          .repeat(val.columnCount)
          .split("")
          .map(() => `  `)
          .join("&");
        if (i < val.rowCount - 1) {
          outputs.push(`${cont}  \\\\`);
        } else {
          outputs.push(`${cont}`);
        }
      }
      outputs.push(this.curFormula.output[1]);

      const data = {
        ...this.curFormula,
        output: outputs.join("\n"),
      };
      this.$emit("select-menu", data);
    },
  },
};
</script>
