<template>
  <div class="com-menus">
    <div class="menus-out">
      <div
        class="group-item"
        v-for="(it, index) in filteredMenus"
        :key="index"
        :class="'group-item' + index"
      >
        <div class="items-name">{{ it.name }}</div>
        <div class="menus">
          <template v-for="(item, itemIndex) in it.subMenus">
            <div
              :key="itemIndex"
              class="menu"
              @click="onClickMenus(item)"
              :class="{
                disabled:
                  (type === 'document' && item.key !== 'ai') ||
                  (item.key === 'article' && type === 'module'),
              }"
            >
              <div class="icon">
                <svg-icon
                  v-if="item.icon != ''"
                  className="svg-style"
                  size="120"
                  :icon-class="item.icon"
                />
              </div>
              <div class="menu-name">{{ item.name }}</div>
            </div>
          </template>
        </div>
      </div>
    </div>

    <el-dialog
      :visible.sync="showFormula"
      append-to-body
      v-el-drag-dialog
      width="60%"
      :close-on-click-modal="false"
      custom-class="prod-verify"
      top="20px"
      title="选择公式"
    >
      <Formula @onPicked="onPickedFormula" :comList="comArr"></Formula>
    </el-dialog>

    <el-dialog
      :visible.sync="showVariable"
      append-to-body
      v-el-drag-dialog
      width="800px"
      :close-on-click-modal="false"
      custom-class="prod-verify"
      top="20px"
      :title="insertTitle"
    >
      <Variable
        :type="type"
        @onPicked="onPickedVariable"
        @onData="btnbianl"
      ></Variable>
    </el-dialog>

    <el-dialog
      :visible.sync="showSourceData"
      append-to-body
      v-el-drag-dialog
      width="300"
      :close-on-click-modal="false"
      top="20px"
      custom-class="prod-verify"
      title="选择源数据"
    >
      <sourceData @onPicked="onPickedTab"></sourceData>
    </el-dialog>
    <!-- 插入ai -->
    <el-dialog
      :visible.sync="showSourceAi"
      append-to-body
      v-el-drag-dialog
      width="300"
      :close-on-click-modal="false"
      top="20px"
      custom-class="prod-verify"
      title="AI"
    >
      <!-- <sourceAi @onPicked="onPickedAi"></sourceAi> -->
      <ChatBox />
    </el-dialog>

    <!-- ai -->
    <el-dialog
      :visible.sync="showSourceEs"
      append-to-body
      v-el-drag-dialog
      width="300"
      :close-on-click-modal="false"
      custom-class="prod-verify"
      title="AI随笔"
    >
      <sourceEs @onPicked="onPickedAi"></sourceEs>
    </el-dialog>
  </div>
</template>

<script>
import Formula from "./components/Formula";
import sourceData from "./components/SourceData";
import sourceAi from "./components/sourceAi/index.vue";
import sourceEs from "./components/sourceEs/index.vue";
import Variable from "./components/Variable";
import elDragDialog from "@/directive/el-drag-dialog";
import ChatBox from "@/components/webAi/index.vue";
export default {
  name: "menus",
  emits: ["onEvents", "onVariable"],
  components: {
    Formula,
    Variable,
    sourceData,
    sourceAi,
    sourceEs,
    ChatBox
  },
  directives: { elDragDialog },
  props: {
    comArr: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      showFormula: false,
      showVariable: false,
      showSourceData: false,
      showSourceAi: false,
      showSourceEs: false,
      type: null,
      insertTitle: "插入变量",
      menus: [
        {
          name: "插入",
          subMenus: [
            // {
            //   key:"template",
            //   name:"空白模板",
            //   icon:"insertTemplate",
            // },
            {
              key: "article",
              name: "图文",
              icon: "图文",
              disabled: () => this.type === "module",
            },

            /* {
                key:"SourceData",
                name:"源数据",
                icon:"sourceData",
              }, */
            {
              key: "formual",
              name: "公式",
              icon: "公式",
            },

            {
              key: "variable",
              name: "变量",
              icon: "变量",
            },
            {
              key: "constant",
              name: "常量",
              icon: "常量",
            },
            {
              key: "attr",
              name: "属性",
              icon: "属性",
            },
            {
              key: "Directory",
              name: "目录",
              icon: "目录",
            },
            {
              key: "InsertNull",
              name: "插入空值",
              icon: "插入空值",
            },
            /* {
                key:"pager",
                name:"分页",
                icon:"insertPage",
              }, */
            {
              key: "ai",
              name: "AI模块",
              icon: "AI模块",
            },
            /*  {
                key:"aiEs",
                name:"AI随笔",
                icon:"form",
              }, */
          ],
        },
        // {
        //   name:'设置',
        //   subMenus:[

        //     {
        //       key:"headerAndTop",
        //       name:"页眉页脚",
        //       icon:"insertPager",
        //     },

        // {
        //   key:"auth",
        //   name:"权限",
        //   icon:"insertAuth",
        // },
        // {
        //   key:"fav",
        //   name:"收藏",
        //   icon:"insertFav",
        // },
        // {
        //   key:"share",
        //   name:"分享",
        //   icon:"insertShare",
        // },
        //   ]
        // }
      ],
    };
  },
  computed: {
    filteredMenus() {
      /* if (this.type === "document") { */
      this.menus
        .map((group) => ({
          ...group,
          subMenus: group.subMenus.filter((item) => item.key === "ai"),
        }))
        .filter((group) => group.subMenus.length > 0);
      /* } */
      return this.menus;
    },
  },
  mounted() {
    this.type = this.$route.query.type;
  },
  methods: {
    /* 变量变动 */
    btnbianl(e) {
      this.$emit("onVariable", e);
    },

    /* 插入ai */
    onPickedAi(e) {
      let _this = this;
      let item = {
        type: "insert",
        key: "ai",
        content: e,
      };
      this.$emit("onEvents", item);
      this.showSourceAi = false;
    },
    //选取公式

    onPickedTab(e) {
      let _this = this;
      let item = {
        type: "insert",
        key: "sourceData",
        content: e,
      };
      this.$emit("onEvents", item);
      this.showSourceData = false;
    },
    onPickedFormula(e) {
      let _this = this;
      let item = {
        type: "insert",
        key: "formual",
        content: e,
      };
      this.$emit("onEvents", item);
      console.log(item);
      this.showFormula = false;
    },
    onPickedVariable(e) {
      let _this = this;
      let item = {
        type: "insert",
        key: e.type == 2 ? "constant" : "variable",
        content: e,
      };
      this.$emit("onEvents", item);
      this.showVariable = false;
    },
    onClickMenus(e) {
      if (
        (this.type === "document" && e.key !== "ai") ||
        (e.key === "article" && this.type === "module")
      ) {
        return; // Exit the method if the item is disabled
      }
      /* e.type = "insert"; */
      if (e.key == "formual") {
        this.showFormula = true;
      } else if (e.key == "SourceData") {
        this.showSourceData = true;
      } else if (e.key == "variable" || e.key == "constant") {
        if (e.key == "variable") {
          this.type = 1;
          this.insertTitle = "插入变量";
        } else {
          this.type = 2;
          this.insertTitle = "插入常量";
        }
        this.showVariable = true;
      } else if (e.key == "ai") {
        this.showSourceAi = true;
      } else if (e.key == "aiEs") {
        this.showSourceEs = true;
      } else {
        this.$emit("onEvents", e);
      }
    },
  },
};
</script>

<style lang="scss">
@import "./menus.scss";
.menu.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>
