<!--
 * @Author: 曹捷
 * @Date: 2021-03-15 14:54:07
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-08-26 19:03:05
 * @Description: 菜单管理
-->
<template>
  <obitUniversalTable type="rightTable" name="菜单管理" class="menuIndex">
    <template #left>
      <appListVue v-model:value="params.appId" @change="changeApp(params.appId)"></appListVue>
    </template>
    <template #search>
      <obit-search-form :params="params" :paramList="paramList" @search="pageQuerylist(true)">
      </obit-search-form>
    </template>
    <template #btn>
      <a-button type="primary" @click="addDialog">
        <i class="iconfont icon-add-bold p-r-5"></i> 新 增
      </a-button>
    </template>
    <a-table class="obit-atable" :columns="tableColumns" :data-source="menuList" rowKey="menuId" :expandRowByClick="true">
      <template #icon="{ record  }">
        <span class="iconfont obit-link coseq" :class="'icon-'+record.icon"></span>
        <!-- <span class="obit-link m-l-10">{{record.icon}} </span> -->
      </template>
      <template #visible="{record}">
        <div v-if="record.visible == 0">显示</div>
        <div v-else>隐藏</div>
      </template>
      <template #operation="{ record  }" :key="record.menuId">
        <a-button type="link" class="operation-btn" @click.stop="addDialog(record )">新增</a-button>
        <a-button type="link" class="operation-btn" @click.stop="editDialog(record)">编辑</a-button>
        <a-button type="link" class="operation-btn" @click.stop="remove(record)"> 删除</a-button>
      </template>
    </a-table>
  </obitUniversalTable>
  <menuAdd :addType="pageType" :menuIds="menuIds" :parentIds="parentIds" v-model:open="pageVisable" :appId="appId" :detailsInfo="detailsInfo"
    @reload="pageQuerylist(true)">
  </menuAdd>
</template>

<script>
import { getCurrentInstance, inject, onMounted, reactive, toRefs } from 'vue'
import menuAdd from './menuAdd.vue'
import appListVue from '../components/appList.vue'
import { useStore } from 'vuex'

export default {
  components: { menuAdd, appListVue },

  setup (props, contenxt) {
    let { proxy } = getCurrentInstance()
    let http = inject('http')
    let store = useStore()

    let _data = reactive({
      pageType: 'add',
      menuIds: '',
      parentIds: '',
      pageVisable: false,
      detailsInfo: {},
      params: {},
      appId: '',
      formData: {},
      menuList: [],
      tableColumns: [
        { dataIndex: 'menuName', title: '菜单名称', width: '200px' },
        { title: '图标', slots: { customRender: 'icon' }, width: '80px' },
        { dataIndex: 'orderNum', title: '编号', width: '80px' },
        { dataIndex: 'perms', title: '权限标识', width: '110px' },
        { dataIndex: 'component', title: '组件路由', width: '110px' },
        { slots: { customRender: 'visible' }, title: '状态', width: '80px' },
        { dataIndex: 'createTime', title: '创建时间', width: '180px' },
        { title: '操作', slots: { customRender: 'operation' }, width: '180px' },
      ],
      paramList: [
        { name: '菜单名称', key: 'menuName' },
        {
          type: 'ajax',
          key: 'visible',
          name: '菜单状态',
          valuename: 'dictValue',
          labelname: 'dictLabel',
          ajaxurl: 'system/dict/data/type/sys_show_hide',
        },
      ],
    })
    let _methods = {
      changeApp (item) {
        _data.appId = item
        _methods.pageQuerylist()
      },
      // 获取数据
      pageQuerylist () {
        _data.menuList = []
        let param = {
          menuName: _data.params.menuName,
          visible: _data.params.visible,
          appId: _data.appId,
        }
        http.sysPost("system/menu/list", param).then((res) => {
          let datas = res
          let result = []
          if (!Array.isArray(datas)) {
            return result
          }
          datas.forEach(item => {
            delete item.children;
          });
          let map = {};
          datas.forEach(item => {
            map[item.menuId] = item;
          });
          datas.forEach(item => {
            let parent = map[item.parentId];
            if (parent) {
              (parent.children || (parent.children = [])).push(item);
            } else {
              result.push(item);
            }
          });
          _data.menuList = result
        })
      },
      // 新增组件
      addDialog (item) {
        console.log('新增组件',item,item.menuId)
        _data.pageVisable = !_data.pageVisable
        _data.detailsInfo = {}
        _data.pageType = 'add'
        _data.menuIds = item.menuId
        _data.parentIds = item.parentId
      },
      // 编辑组件
      editDialog (item) {
        console.log('编辑组件', item)
        _data.detailsInfo = item
        _data.pageVisable = true
        _data.pageType = 'edit'
      },
      // 删除
      remove (item) {
        proxy.$confirm({
          title: '提示',
          content: '是否删除',
          onOk () {
            let fors = {
              id: item.menuId
            }
            http.sysPost("system/menu/remove", fors).then((res) => {
              proxy.$message.success('删除成功')
              _methods.pageQuerylist()
            })
          },
        })
      },
    }

    onMounted(() => {
      // _methods.pageQuerylist()
    })
    return {
      ...toRefs(_data),
      ..._methods,
    }
  },
}
</script>

<style  lang="less" >
.menuIndex {
  .menunav {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  .ant-pagination {
    display: none;
  }
  .coseq {
    color: #606266;
  }
}
.menunav-top {
  max-height: 75px;
  margin-top: 20px;
  margin-left: 20px;
  background: #fff;
  height: 75px;
  margin-right: 20px;
  .masr {
    margin-left: 15px;
    margin-right: 15px;
  }
}
.menuIndex-top {
  position: relative;
}
.menuIndex-nav {
  position: absolute;
  right: 20px;
  top: 30px;
}
</style>