<template>
  <el-container class="fullheight">
    <el-aside
      :width="width"
      style="border-right: 1px solid #eee; height: 800px"
    >
      <sys-app-menu-tree
        highlight-current
        ref="sysAppMenuTree"
        :support-filter="true"
        :default-expand-all="true"
        :expand-on-click-node="false"
        @node-click="handleNodeClick"
        :id="id"
      >
        <span class="custom-tree-node" slot-scope="{node, data}">
          <span class="show-ellipsis" :title="node.label">{{
            node.label
          }}</span>
          <el-dropdown @command="handleCommand">
            <span>
              <i class="icon-more" title="更多操作" />
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                icon="el-icon-plus"
                :command="{node: node, data, action: 'add'}"
                v-if="
                  (!data.parentId || data.parentId === '0') &&
                  (!data.type || data.type === 10)
                "
                >添加下级菜单</el-dropdown-item
              >
              <el-dropdown-item
                v-if="data.id"
                icon="el-icon-edit"
                :command="{node: node, data, action: 'edit'}"
                >编辑</el-dropdown-item
              >
              <el-dropdown-item
                v-if="data.id"
                icon="el-icon-delete"
                :command="{node: node, data, action: 'delete'}"
                >删除</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </span>
      </sys-app-menu-tree>
    </el-aside>
    <el-main v-show="editMenuFormVisible">
      <el-header>
        <ht-submit-button
          :url="saveUrl"
          :model="menu"
          scope-name="editMenuForm"
          @before-save-data="beforeSaveData"
          @after-save-data="afterSaveData"
          >保存</ht-submit-button
        >
      </el-header>
      <el-form data-vv-scope="editMenuForm" v-model="menu" size="mini">
        <ht-form-item label="页面类型" label-width="150px">
          <ht-radio
            :disabled="!!menu.id"
            :options="[
              {key: 10, value: '目录'},
              {key: 1, value: '页面'},
            ]"
            v-model="menuType"
          />
        </ht-form-item>

        <ht-form-item
          v-if="hasParent && isShow"
          label="上级菜单"
          label-width="150px"
        >
          <ht-input
            name="parent-menu-name"
            v-model="currentNodeData.name"
            autocomplete="off"
            disabled
          ></ht-input>
        </ht-form-item>
        <ht-form-item label="菜单名称" label-width="150px">
          <ht-input
            name="menu-name"
            v-model="menu.name"
            autocomplete="off"
            :validate="'required'"
            :maxlength="50"
            :showWordLimit="true"
          ></ht-input>
        </ht-form-item>
        <ht-form-item label="别名" label-width="150px">
          <ht-input
            v-model="menu.alias"
            :disabled="menu.id ? true : false"
            style="width: 215px"
            :validate="'required|alpha_num'"
            :maxlength="30"
            v-pinyin="menu.name"
            :showWordLimit="true"
          ></ht-input>
        </ht-form-item>
        <ht-form-item
          label="跳转模式"
          label-width="150px"
          v-if="menuType !== 10"
        >
          <ht-select
            v-model="menu.type"
            :options="[
              {key: 1, value: '网页跳转'},
              {key: 2, value: '表单列表'},
              {key: 3, value: '数据列表'},
              {key: 4, value: '图表'},
              {key: 6, value: '表单'},
              {key: 7, value: '流程模块'},
              {key: 8, value: '流程'},
              {key: 9, value: 'datav大屏'},
            ]"
            validate="required"
            class="width-input"
            @change="modeChange"
          />
        </ht-form-item>
        <ht-form-item
          label="网页链接"
          v-if="menu.type === 1"
          label-width="150px"
        >
          <ht-input v-model="menu.content" />
        </ht-form-item>
        <ht-form-item
          label="表单列表"
          v-if="menu.type === 2"
          label-width="150px"
        >
          <eip-data-template-selector
            v-model="templateData"
            placeholder="请选择表单列表"
            :single="true"
            style="width: 200px"
          />
        </ht-form-item>
        <ht-form-item
          label="数据列表"
          v-if="menu.type === 3"
          label-width="150px"
        >
          <eip-custom-view-selector
            validate="required"
            v-model="customQueryData"
            :single="true"
            style="width: 200px"
          />
        </ht-form-item>
        <ht-form-item label="图表" v-if="menu.type === 4" label-width="150px">
          <eip-chart-selector
            validate="required"
            :dataParam.sync="menu.content"
            :chartType="2"
          ></eip-chart-selector>
        </ht-form-item>
        <ht-form-item label="表单" v-if="menu.type === 6" label-width="150px">
          <eip-form-selector
            validate="required"
            v-model="formData"
            :single="true"
            style="width: 200px"
          />
        </ht-form-item>
        <ht-form-item label="模块" v-if="menu.type === 7" label-width="150px">
          <eip-module-selector
            class="select-list"
            validate="required"
            v-model="moduleData"
            :single="true"
          />
        </ht-form-item>
        <ht-form-item label="流程" v-if="menu.type === 8" label-width="150px">
          <eip-flow-selector
            validate="required"
            v-model="flowData"
            :single="true"
            class="select-list"
          >
          </eip-flow-selector>
        </ht-form-item>
        <ht-form-item
          label="datav大屏"
          v-if="menu.type === 9"
          label-width="150px"
        >
          <ht-select
            v-model="datavData.alias"
            :options="datavList"
            validate="required"
            class="width-input"
            :props="{key: 'alias', value: 'name'}"
            @change="datavChange"
            style="width: 200px"
            @focus="() => getDatavList()"
          />
        </ht-form-item>
        <ht-form-item label="排序" label-width="150px">
          <ht-input
            name="menu-sn"
            v-model="menu.sn"
            autocomplete="off"
            validate="required|numeric"
            :maxlength="50"
            :showWordLimit="true"
          ></ht-input>
        </ht-form-item>
      </el-form>
    </el-main>
    <el-main v-show="!editMenuFormVisible">
      <div class="form-empty">请选择一个菜单进行操作</div>
    </el-main>
  </el-container>
</template>

<script>
import styles from '@/assets/css/element-variables.scss'
import portal from '@/api/portal'
const sysAppMenuTree = () => import('@/components/portal/SysAppMenuTree')
const eipDataTemplateSelector = () =>
  import('@/components/selector/EipDataTemplateSelector.vue')
const eipChartSelector = () =>
  import('@/components/selector/EipChartSelector.vue')
const eipCustomViewSelector = () =>
  import('@/components/selector/EipCustomViewSelector.vue')
const eipFormSelector = () =>
  import('@/components/selector/EipFormSelector.vue')
const eipModuleSelector = () =>
  import('@/components/selector/EipModuleSelector.vue')
const eipFlowSelector = () =>
  import('@/components/selector/EipFlowSelector.vue')
export default {
  name: 'sys-app-menu',
  props: {
    id: String,
  },
  components: {
    sysAppMenuTree,
    eipDataTemplateSelector,
    eipChartSelector,
    eipCustomViewSelector,
    eipFormSelector,
    eipModuleSelector,
    eipFlowSelector,
  },
  data() {
    return {
      width: styles.aside_width,
      hasParent: true,
      isShow: true,
      currentNodeData: {},
      menu: {name: '', alias: ''},
      isFrontMenu: '',
      tabsStyle: {},
      saveUrl: window.context.portal + '/portal/sysAppMenu/v1/save',
      templateData: {},
      customQueryData: {},
      formData: {},
      editMenuFormVisible: false,
      datavData: {id: '', alias: '', name: ''},
      datavList: [],
      datavMap: {},
      moduleData: {},
      flowData: {},
      menuType: 1,
    }
  },
  methods: {
    handleNodeClick(menu) {
      if (menu.name === '菜单') return
      this.isShow = false
      this.editMenuFormVisible = true
      this.edit(menu)
    },
    handleCommand({data, action}) {
      switch (action) {
        case 'add':
          this.add(data)
          break
        case 'edit':
          this.edit(data)
          break
        case 'delete':
          this.delete(data)
          break
      }
    },
    delete(menu) {
      let ids = []
      this.getChildIds(menu, ids)
      this.$confirm(`是否删除菜单[${menu.name}]及其下级菜单?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success',
      })
        .then(() => {
          this.$http
            .remove(
              '${portal}/portal/sysAppMenu/v1/remove?ids=' + ids.join(',')
            )
            .then((resp) => {
              if (resp && resp.data && resp.data.state) {
                this.$refs.sysAppMenuTree.loadData(this.id)
                this.$message({
                  showClose: true,
                  message: '删除成功',
                  type: 'success',
                })
              }
            })
        })
        .catch(() => {})
    },
    getChildIds(node, ids) {
      if (!node) {
        return
      }
      ids.push(node.id)
      if (!node.children) {
        return
      }
      node.children.forEach((n) => {
        this.getChildIds(n, ids)
      })
    },
    add(menu) {
      this.editMenuFormVisible = true
      this.menu = {name: '', alias: ''}
      this.currentNodeData = menu
      this.menu.appId = this.id
      this.menuType = 1
      this.isShow = true
      if (menu.name === '菜单') {
        //是否显示上级菜单
        this.hasParent = false
        this.menu.parentId = '0'
      } else {
        this.menu.parentId = menu.id
      }
    },
    edit(menu) {
      this.isShow = false
      this.editMenuFormVisible = true
      this.menu = menu
      this.menuType = menu.type === 10 ? 10 : 1
      if (menu.type === 2) {
        //数据报表
        this.templateData = JSON.parse(menu.content)
      } else if (menu.type === 3) {
        //自定义图表
        this.currentNodeData = JSON.parse(menu.content)
      } else if (menu.type === 6) {
        //表单
        this.formData = JSON.parse(menu.content)
      } else if (menu.type === 7) {
        this.moduleData = JSON.parse(menu.content)
      } else if (menu.type === 8) {
        this.flowData = JSON.parse(menu.content)
      } else if (menu.type === 9) {
        this.datavData = JSON.parse(menu.content)
      }
    },
    beforeSaveData() {
      if (this.menuType === 10) {
        this.menu.type = this.menuType
      }
      if (this.menu.type === 2) {
        let data = {
          id: this.templateData.id,
          alias: this.templateData.alias,
          name: this.templateData.name,
        }
        this.menu.content = JSON.stringify(data)
      } else if (this.menu.type === 3) {
        let data = {
          id: this.customQueryData.id,
          alias: this.customQueryData.alias,
          sqlAlias: this.customQueryData.sqlAlias,
          name: this.customQueryData.name,
        }
        this.menu.content = JSON.stringify(data)
      } else if (this.menu.type === 6) {
        let data = {
          id: this.formData.id,
          name: this.formData.name,
          key: this.formData.formKey,
        }
        this.menu.content = JSON.stringify(data)
      } else if (this.menu.type === 7) {
        let data = {
          id: this.moduleData.id,
          name: this.moduleData.name,
        }
        this.menu.content = JSON.stringify(data)
      } else if (this.menu.type === 8) {
        let data = {
          id: this.flowData.id,
          name: this.flowData.name,
          key: this.flowData.defKey,
        }
        this.menu.content = JSON.stringify(data)
      } else if (this.menu.type === 9) {
        let data = {
          id: this.datavData.id,
          name: this.datavData.name,
          alias: this.datavData.alias,
        }
        this.menu.content = JSON.stringify(data)
      }
    },
    afterSaveData() {
      this.$refs.sysAppMenuTree.loadData(this.id)
      this.editMenuFormVisible = false
    },
    modeChange() {
      this.$set(this.menu, 'content', '')
      if (this.menu.type === 9) {
        this.datavData = {id: '', alias: '', name: ''}
      }
    },
    getDatavList() {
      let query = []
      query.push({
        property: 'type_',
        value: 'datav',
        group: 'type',
        operation: 'EQUAL',
        relation: 'AND',
      })
      query.push({
        property: 'enable',
        operation: 'EQUAL',
        value: 1,
        relation: 'AND',
        group: 'type',
      })
      query.push({
        property: 'LAYOUT_TYPE',
        value: 1,
        group: 'type',
        operation: 'NOT_EQUAL',
        relation: 'AND',
      })
      let param = {
        pageBean: {page: 1, pageSize: -1, total: 0},
        querys: query,
        sorter: [{direction: 'DESC', property: 'CREATE_TIME_'}],
      }
      let _this = this
      portal
        .getLayoutManagerPage(param)
        .then((data) => {
          _this.datavList = []
          _this.datavMap = {}
          if (data.rows && data.rows.length > 0) {
            _this.datavList = data.rows
            data.rows.forEach((item) => {
              _this.datavMap[item.alias] = item
            })
          }
        })
        .finally(() => {})
    },
    datavChange(val) {
      this.$set(this.datavData, 'id', this.datavMap[val].id)
      this.$set(this.datavData, 'name', this.datavMap[val].name)
    },
  },
}
</script>

<style scoped>
>>> .navbar-collapse {
  position: relative;
  top: -60%;
  cursor: pointer;
  width: 20px;
}

>>> .el-dropdown {
  display: none;
}

>>> .el-tree-node__content:hover .el-dropdown {
  display: inline-block;
}

>>> .custom-tree-node {
  width: calc(100% - 40px);
  /* flex: 1; */
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

.custom-tree-node i {
  visibility: hidden;
  font-weight: bold;
}

.custom-tree-node:hover i {
  visibility: visible;
}
.form-empty {
  position: absolute;
  text-align: center;
  width: 300px;
  font-size: 20px;
  top: 200px;
  left: 50%;
  margin-left: -150px;
  color: #ccc;
}
</style>
