<template>
  <el-dialog
    title="添加到菜单"
    :visible.sync="dialogVisible"
    width="45%"
    appendToBody
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <el-form v-model="menu" data-vv-scope="TemplateMenuForm">
      <ht-form-item label-width="180px" prop="parentMenu" >
        <template slot="label">
          <span class="is-required">父节点</span>
        </template>
        <Treeselect
          v-model="menu.parentMenuName"
          :normalizer="normalizer"
          @select="handleNodeClick"
          :multiple="false"
          :options="menuTreeData"
          noOptionsText=""
          noResultsText="无对应节点"
          noChildrenText=" "
          placeholder="请选择父节点"
          style="width:80%;"
        />
      </ht-form-item>
      <ht-form-item label="菜单名称" prop="name" label-width="180px">
        <ht-input
          v-model="menu.name"
          :validate="{required: true}"
          :maxlength="10"
          :showWordLimit="true"
        ></ht-input>
      </ht-form-item>
      <ht-form-item label="菜单别名" prop="alias" label-width="180px">
        <ht-input
          name="menu-alias"
          v-model="menu.alias"
          :readonly="type === 'manage'"
          :disabled="type === 'manage'"
          validate="required|alpha_dash"
          v-pinyin="menu.name"
          :maxlength="10"
          :showWordLimit="true"
        ></ht-input>
      </ht-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="onConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import portal from '@/api/portal.js'
import {mapState} from 'vuex'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import utils from '@/hotent-ui-util.js'
const getRouteExtend = function() {
  return {
    path: '',
    component: '',
    redirect: '',
    alwaysShow: false,
    caseSensitive: false,
    meta: {
      title: '',
      isChildren: true
    }
  }
}
export default {
  name: 'template-add-to-menu',
  props: {
    alias: String,
    isIndexLayout: [String, Number, Boolean],
    isShowTopMenu: {type: Boolean, default:false}
  },
  type: '',
  components: {Treeselect},
  data() {
    return {
      authorizeId: '',
      menu: {name: '', alias: ''},
      type: '',
      frontAliasPre: 'template/preview/',
      menuTreeData: [],
      dialogVisible: false,
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.children,
          isDefaultExpanded: false
        }
      },
      from: '',
      routeJson: '',
      routeEditDialogVisible: false,
      cmOptions: {
        value: '',
        mode: 'javascript',
        readOnly: false,
        smartIndent: true,
        tabSize: 2,
        theme: 'base16-light',
        lineNumbers: true,
        line: true
      }
    }
  },
  computed: {
    ...mapState({
      currentUser: state => state.login.currentUser
    })
  },
  watch: {
    alias: {
      handler(newVal, oldVal) {
        if (newVal != oldVal) {
          this.dataTemplate = newVal
        }
      }
    },
    type: {
      handler(newVal, oldVal) {
        if (newVal != oldVal) {
          this.getMenuDataByType()
        }
      }
    }
  },
  methods: {
    onConfirm(selection) {
      if (!this.menu.parentAlias) {
        this.$message.error('请选择父节点！')
        return
      }
      const this_ = this
      utils
        .validateForm(this, 'TemplateMenuForm')
        .then(result => {
          if (result) {
            let menu = {...this_.menu}
            if (this.type == 'front') {
              menu.routeExtend = this.buildRouteExtend()
              menu.type = 'page'
            }
            delete menu.parentMenuName
            if (this.authorizeId) {
              menu.authorizeId = this.authorizeId
            }
            portal.saveDataTemplateToMenu(menu).then(rep => {
              if (rep.state) {
                this_.dialogVisible = false
                this.$message.success(rep.message)
              }
            })
          } else {
            let arr = this_.$validator.errors.items.filter(
              item => item.scope == 'TemplateMenuForm'
            )
            let errorLength = arr.length
            this_.$message({
              showClose: true,
              message: `有${errorLength}个字段未通过校验，请正确填写表单内容。`,
              type: 'warning'
            })
          }
        })
        .catch(e => {})
    },
    //路由属性配置
    buildRouteExtend() {
      let routeExtend = getRouteExtend()
      // 布局发布为前端门户的子菜单
      if (this.isIndexLayout) {
        routeExtend.component = 'indexLayout'
        routeExtend.meta.isChildren = true
        routeExtend.meta.index = true
        routeExtend.path = `/${this.menu.alias}?alias=${this.alias}`
      } else {
        routeExtend.path = `/templatePreview/${this.menu.alias}?templateKey=${
          this.alias
        }`
        routeExtend.component = 'TemplateLayout'
      }
      routeExtend.meta.title = this.menu.name
      routeExtend.meta.isChildren = true
      return JSON.stringify(routeExtend)
    },
    handleClose() {
      this.dialogVisible = false
    },
    getMenuDataByType() {
      let frontUrl = 'front_menu&filterMenuAlias=appCenter1,personal'
      let manageUrl = 'manage_menu'
      this.isShowTopMenu = this.type == 'front' ? true : false
      if (this.isShowTopMenu) {
        frontUrl = frontUrl + '&isNeedTop=true'
        manageUrl = manageUrl+ '&isNeedTop=true'
      }
      let menuAlias = this.type == 'front' ? frontUrl : manageUrl
      portal.getCurrentMenuByAlias(menuAlias).then(rep => {
        if (rep.state && rep.value.length > 0) {
          let menus = rep.value
          // if (this.isIndexLayout) {
          //   // 如果是门户管理的布局添加到菜单，只能选择别名为 homePage 的前端菜单
          //   menus = rep.value.filter(item => {
          //     if (item.parentId === '3' && item.type === 'catalog') {
          //       delete item.children
          //       return true
          //     }
          //     return false
          //   })
          // } else {
          //   menus = rep.value.filter(item => {
          //     if (item.alias !== 'appCenterFront') {
          //       return true
          //     }
          //     return false
          //   })
          // }
          this.removeEmptyChildren(menus)
          //添加为后端菜单时如果二级菜单不是URL菜单则表单预览生成的菜单不能添加到这个菜单下面
          //如：设计中心->业务表单  设计中心下的业务表单菜单是下级菜单不是URL菜单则表单预览生成的菜单不能添加到这个菜单下面
          for (let i = 0; i < menus.length; i++) {
            if (menus[i].children) {
              for (let j = menus[i].children.length - 1; j >= 0; j--) {
                //发布为应用端菜单时如果二级菜单为应用中心则不可选
                if (this.type === 'front') {
                  const routeExtend =
                    menus[i].children[j].routeExtend &&
                    JSON.parse(menus[i].children[j].routeExtend)
                  if (
                    routeExtend &&
                    routeExtend.component === '@/views/appCenter/index'
                  ) {
                    menus[i].children.splice(j, 1)
                  }
                } else {
                  if (
                    menus[i].children[j].alias.indexOf('href/template') == -1
                  ) {
                    menus[i].children.splice(j, 1)
                  }
                }
              }
            }
          }

          this.menuTreeData = menus
          this.filterMenuByMenuType(menus)
        }
      })
    },
    filterMenuByMenuType(menuData) {
      const data = _.cloneDeep(menuData)
      let newMenus = []
      //let limit = this.type == 'front'? 4:5
      if (data && data.length) {
        newMenus = utils
          .nest2tile(data, 'children', false)
          .filter(
            item =>
              item.type !== 'page' &&
              !item.href &&
              item.path.split('.').slice(0, -1).length < 5
          )
        this.menuTreeData = utils.tile2nest(newMenus)
      }
    },
    removeEmptyChildren(menus) {
      menus.forEach(m => {
        if (m.children) {
          if (m.children.length < 1) {
            delete m.children
          } else {
            //不允许选择4级菜单
            if (m.path.split('.').length == 6) {
              delete m.children
            } else {
              this.removeEmptyChildren(m.children)
            }
          }
        }
      })
    },
    handleNodeClick(node) {
      this.menu.menuId = node.id
      this.menu.parentAlias = node.alias
      let menuAlias = ''
      if (this.type == 'manage') {
        //别名添加随机数，避免重复
        const key =
          Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
        this.menu.alias = 'templateShow/' + this.alias + '/' + key
      }
    },
    showDialog(type, from, authorizeId) {
      if (authorizeId) {
        this.authorizeId = authorizeId
      }
      this.menu = {name: '', alias: ''}
      this.type = type
      if (from && type == 'front') {
        this.from = from
      } else if (from && type == 'manage') {
        this.from = 'addManageReport'
      }
      this.dialogVisible = true
    }
  }
}
</script>
<style scoped>
form >>> .inputs {
  width: 80%;
}
</style>