<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="无对应菜单"
          noResultsText="无对应菜单"
          noChildrenText=" "
          placeholder="请选择父节点"
          style="width: 80%"
        />
      </ht-form-item>
      <ht-form-item label="Url地址" prop="alias" label-width="180px">
        <ht-input v-model="menu.href" disabled></ht-input>
      </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>
    </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 form from '@/api/form.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'
import utils from '@/hotent-ui-util.js'
export default {
  name: 'form-menus-add',
  props: {
    formId: [String, Number],
    isShowTopMenu: {type: Boolean, default: false}
  },
  type: '',
  components: {Treeselect},
  data() {
    return {
      menu: {},
      type: '',
      frontAliasPre: 'href/template/',
      menuTreeData: [],
      dialogVisible: false,
      normalizer(node) {
        return {
          id: node.id,
          label: node.name,
          children: node.children,
          isDefaultExpanded: false
        }
      },
      from: ''
    }
  },
  created() {
    this.$validator = this.$root.$validator
  },
  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
      this_.$validator.validateAll('TemplateMenuForm').then(result => {
        if (result) {
          let menu = {...this_.menu}
          delete menu.parentMenuName
          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'
          })
        }
      })
    },
    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
          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) {
      let menuAlias = ''
      const key =
        Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
      menuAlias = this.frontAliasPre + key
      //后台外部菜单URL地址
      const src = '/formPreview/' + this.formId
      this.menu.href = this.type === 'front' ? src : window.context.front + src
      let this_ = this
      portal.isMenuExist(this_.menu.alias).then(rep => {
        if (rep.state) {
          this_.menu.menuId = node.id
          if (rep.value) {
            this_.$message.error('菜单别名：' + menuAlias + '已存在！')
            this_.menu.alias = ''
            this_.$forceUpdate()
          } else {
            this_.menu.alias = menuAlias
            this_.menu.parentAlias = node.alias
            this_.$forceUpdate()
          }
        } else {
          this_.$message.error('菜单别名校验失败！')
        }
      })
    },
    //显示对话框
    showDialog(type, from) {
      this.menu = {}
      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>