<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" l>
        <template slot="label">
          <span>父节点</span>
        </template>
        <Treeselect
          v-model="menu.parentMenuName"
          :normalizer="normalizer"
          @select="handleNodeClick"
          :multiple="false"
          :options="menuTreeData"
          noOptionsText=" "
          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, max: 10}"
          :maxlength="10"
          show-word-limit
        ></ht-input>
      </ht-form-item>
      <ht-form-item label="菜单别名" prop="alias" label-width="180px">
        <ht-input
          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>
      <!-- <ht-form-item
        v-if="type == 'manage'"
        label="Url地址"
        prop="alias"
        label-width="180px"
      >
        <ht-input v-model="menu.href" disabled></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 utils from '@/hotent-ui-util.js'
import portal from '@/api/portal.js'
import {mapState} from 'vuex'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
const getRouteExtend = function() {
  return {
    path: '',
    component: '',
    redirect: '',
    alwaysShow: false,
    caseSensitive: false,
    meta: {
      title: '',
      isChildren: true
    }
  }
}
export default {
  name: 'menusAdd',
  props: ['alias', 'sqlAlias', 'viewId'],
  type: '',
  components: {Treeselect},
  data() {
    return {
      menu: {},
      type: '',
      manageAliasPre: 'templateMenu/',
      frontAliasPre: 'querySql/queryView/',
      menuTreeData: [],
      dialogVisible: false,
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.children,
          isDefaultExpanded: false
        }
      },
      from: ''
    }
  },
  computed: {
    ...mapState({
      currentUser: state => state.login.currentUser
    })
  },
  watch: {
    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
            portal.saveDataTemplateToMenu(menu).then(rep => {
              if (rep.state) {
                this_.dialogVisible = false
                this.$message.success(rep.message)
              }
            })
          }
        })
        .catch(e => {})
    },
    //路由属性配置
    buildRouteExtend() {
      let routeExtend = getRouteExtend()
      routeExtend.path = `/querySqlPreview/${this.menu.alias}?sqlViewId=${this.viewId}`
      routeExtend.component = 'QuerySqlLayout'
      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
      // let menuAlias = this.type == 'front' ? 'front_menu&filterMenuAlias=appCenter1,personal' : 'manage_menu'
      portal.getCurrentMenuByAlias(menuAlias).then(rep => {
        if (rep.state && rep.value.length > 0) {
          let menus = rep.value
          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 = []
      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())
        this.menu.alias = 'querySqlShow/' + this.viewId + '/' + key
      }
    },
    //显示对话框
    showDialog(type, from) {
      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>