<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: item.key === 'article' && typeMenu === 'module',
              }" -->
              <div class="icon">
                <img
                  v-if="item.icon"
                  :src="getIconPath(item.icon)"
                  class="menu-icon"
                  alt=""
                />
              </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="80%"
      :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=""
    >
      <sourceEs @onPicked="onPickedAi" :TemList="comArr"></sourceEs>
    </el-dialog>
    <!-- 插入目录 -->
    <el-dialog
      :visible.sync="showDirectoryLevelDialog"
      append-to-body
      v-el-drag-dialog
      width="300px"
      :close-on-click-modal="false"
      custom-class="prod-verify"
      title="选择目录等级"
    >
      <el-form :model="directoryForm" label-width="100px">
        <el-form-item label="目录等级">
          <el-select v-model="directoryForm.level" placeholder="请选择目录等级">
            <el-option label="一级目录" :value="1"></el-option>
            <el-option label="二级目录" :value="2"></el-option>
            <el-option label="三级目录" :value="3"></el-option>
            <el-option label="四级目录" :value="4"></el-option>
            <el-option label="五级目录" :value="5"></el-option>
            <el-option label="六级目录" :value="6"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDirectoryLevelDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirmDirectoryLevel"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 选择 codeJson -->
    <el-dialog
      :visible.sync="codeJsonData"
      append-to-body
      v-el-drag-dialog
      width="300"
      :close-on-click-modal="false"
      top="20px"
      custom-class="prod-verify"
      title="选择"
    >
      <CodeJson @onPicked="onPickedProduct" />
    </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 CodeJson from "./components/codeJson";
import elDragDialog from "@/directive/el-drag-dialog";
/* import ChatBox from "@/components/ai.vue"; */
import TemList from "../temList/temList.vue";
export default {
  name: "menus",
  emits: ["onEvents", "onVariable"],
  components: {
    Formula,
    Variable,
    sourceData,
    sourceAi,
    sourceEs,
    CodeJson,
    /*  ChatBox, */
  },
  directives: { elDragDialog },
  props: {
    comArr: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      showDirectoryLevelDialog: false,
      directoryForm: {
        level: 1,
      },
      codeJsonData: false,
      showFormula: false,
      showVariable: false,
      showSourceData: false,
      showSourceAi: false,
      showSourceEs: false,
      type: null,
      typeMenu: null,
      insertTitle: "插入变量",
      menus: [
        {
          name: "插入",
          subMenus: [
            // {
            //   key:"template",
            //   name:"空白模板",
            //   icon:"insertTemplate",
            // },
            {
              key: "article",
              name: "图文",
              icon: "图文",
              disabled: () =>
                this.typeMenu === "module" || this.typeMenu === undefined,
            },

            /*  {
                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:"searchEs",
                name:"检索",
                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.typeMenu = 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;
    } /* (this.typeMenu === "module" || this.typeMenu === undefined) */,
    onClickMenus(e) {
      /*   if (e.key !== "ai" || e.key === "article") {
        return;
      } */

      if (e.key == "attr") {
        this.codeJsonData = true;
      } else 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 == "searchEs") {
        //aiEs
        this.showSourceEs = true;
      } else if (e.key === "Directory") {
        this.showDirectoryLevelDialog = true;
      } else {
        this.$emit("onEvents", e);
      }
    },
    confirmDirectoryLevel() {
      this.showDirectoryLevelDialog = false;
      this.$emit("onEvents", {
        type: "insert",
        key: "Directory",
        content: { level: this.directoryForm.level },
      });
    },
    getIconPath(iconName) {
      return require(`@/icons/svg/${iconName}.svg`);
    },
    onPickedProduct(productData) {
      // 添加数据验证
      if (!productData || !productData.id) {
        this.$message.error("商品信息不完整");
        return;
      }

      let item = {
        type: "insert",
        key: "attr",
        content: productData,
      };

      try {
        this.$emit("onEvents", item);
        this.codeJsonData = false;
      } catch (error) {
        console.error("插入商品信息失败:", error);
        this.$message.error("插入商品信息失败，请重试");
      }
    },
  },
};
</script>

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

.menu-icon {
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

.icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
