<template>
  <div>
    <n-card>
      <headSearch :info="search" @search="loadDataTable" @reset="loadDataTable" />
      <data-table
        ref="tableRef"
        :columns="columns"
        :row-key="(row) => row.id"
        :data="tableData"
        :pagination="false"
        size="large"
      >
        <template #tableTitle>
          <n-button v-if="permissionList.includes('system:mpmenu:create')" type="primary" @click="handleModal"> {{ getPermissionLabel('system:mpmenu:create') }} </n-button>
        </template>
      </data-table>
    </n-card>
  </div>
  <!-- 新增、编辑弹窗 -->
  <MenuModal v-if="modalShow" v-model:visible="modalShow" :source="menuSource" :data="rowData" :type="modalType" @reload="loadDataTable" />
</template>

<script>
import search from './tools/search.js'
import table from './tools/table.js'
import headSearch from '@/components/Search/index.vue'
import dataTable from '@/components/DataTable/index.vue'
import MenuModal from './components/MenuModal.vue'
import { toRefs, reactive, onUnmounted } from 'vue'
import { usePermissionStore } from '@/store/modules/permission'
export default {
  name: 'MenuPage',
  components: { dataTable, MenuModal, headSearch },
  setup() {
    const permissionStore = usePermissionStore()
    const data = reactive({
      ...toRefs(table),
      search,
      permissionList: permissionStore.accessPermissionCodes
    })

    table.fetchList()

    const getPermissionLabel = (code) => {
      return permissionStore.accessPermissions.find((item) => {
        return item.code === code
      })?.name || ''
    }
    // 新增
    function handleModal() {
      data.rowData = null
      data.modalType = 'create'
      data.modalShow = true
    }

    onUnmounted(() => {
      data.searchParams = { menuType: 2 }
    })

    return {
      ...toRefs(data),
      handleModal,
      getPermissionLabel
    }
  }
}
</script>
<style scoped lang='scss'>
.n-button + .n-button {
  margin-left: 10px;
}
</style>
