<template>
  <div class="com-menus">
      <div class="menus-out">
          <div class="group-item" v-for="(it,index) in menus" :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 class="menu" @click="onClickMenus(item)">
                    <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="300" custom-class="prod-verify" title="选择公式">
          <Formula @onPicked="onPickedFormula"></Formula>
      </el-dialog>

      <el-dialog  :visible.sync="showVariable" append-to-body v-el-drag-dialog  width="800px" custom-class="prod-verify" :title="insertTitle">
          <Variable :type="type" @onPicked="onPickedVariable"></Variable>
      </el-dialog>


      <el-dialog  :visible.sync="showSourceData" append-to-body v-el-drag-dialog  width="300" custom-class="prod-verify" title="选择源数据">
          <sourceData  @onPicked="onPickedTab"></sourceData>
      </el-dialog>



  </div>
</template>

<script>
  import Formula from "./components/Formula";
  import sourceData from "./components/SourceData";
  import Variable from "./components/Variable"
  import elDragDialog from '@/directive/el-drag-dialog'

  export default{
    name:"menus",
    emits:["onEvents"],
    components:{
      Formula,Variable,sourceData
    },
    directives: { elDragDialog },
    data(){
      return{
        showFormula:false,
        showVariable:false,
        showSourceData:false,
        type:null,
        insertTitle:'插入变量',
        menus:[
          {
            name:'插入',
            subMenus:[
              // {
              //   key:"template",
              //   name:"空白模板",
              //   icon:"insertTemplate",
              // },
              {
                key:"article",
                name:"图文",
                icon:"insertArticle",
              },

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

              {
                key:"variable",
                name:"变量",
                icon:"insertParams",
              },
              // {
              //   key:"constant",
              //   name:"常量",
              //   icon:"constant",
              // },
              {
                key:"attr",
                name:"属性",
                icon:"attr",
              },
              {
                key:"Directory",
                name:"目录",
                icon:"subject",
              },
              // {
              //   key:"pager",
              //   name:"分页",
              //   icon:"insertPage",
              // },
            ]
          },
          // {
          //   name:'设置',
          //   subMenus:[

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

              // {
              //   key:"auth",
              //   name:"权限",
              //   icon:"insertAuth",
              // },
              // {
              //   key:"fav",
              //   name:"收藏",
              //   icon:"insertFav",
              // },
              // {
              //   key:"share",
              //   name:"分享",
              //   icon:"insertShare",
              // },
          //   ]
          // }
        ]
      }
    },

    methods:{
      //选取公式

      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);
        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){
          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{
              this.$emit("onEvents",e);
          }
      }

    }
  }
</script>

<style lang="scss">
@import './menus.scss';
</style>
