<template>
  <div>
    <n-card>
      <headSearch :info="info" />
      <!-- <data-table
        ref="tableRef"
        :columns="columns"
        :pagination="false"
        data-type="tree"
        :request="loadDataTable"
      >
        <template #tableTitle>
          <n-button type="primary" @click="handleModal"> 添加菜单 </n-button>
        </template>
      </data-table> -->
    </n-card>
  </div>

  <MenuModal
    v-if="modalShow"
    v-model:visible="modalShow"
    :data="rowData"
    :menu-list="menuList"
    @done="handleSearch"
  />
</template>

<script>
import headSearch from '@/components/Search/index.vue'
import dataTable from '@/components/DataTable/index.vue'
import MenuModal from './components/MenuModal.vue'
import Action from '@/components/DataTable/tools/Action.vue'
import { getMenu, getMenuList, deleteMenu } from '@/api/system/menu/index.js'
import { h, ref, unref, reactive, toRefs, onMounted } from 'vue'
import info from './info.js'
import table from './table.js'
export default {
  name: 'MenuPage',
  components: { dataTable, MenuModal, headSearch },
  setup() {
    const data = reactive({
      columns: [
        ...table.columns,
        {
          title: '操作',
          align: 'center',
          width: 150,
          fixed: 'right',
          render(row) {
            return h(Action, {
              actions: [
                {
                  label: '添加',
                  type: 'button',
                  props: {
                    type: 'primary',
                    onClick: add.bind(null, row)
                  },
                  auth: 'basic_list'
                },
                {
                  label: '修改',
                  type: 'button',
                  props: {
                    type: 'primary',
                    onClick: play.bind(null, row)
                  },
                  auth: 'basic_list'
                },
                {
                  label: '删除',
                  type: 'popconfirm',
                  auth: 'basic_list',
                  tip: '确定删除这条数据吗?',
                  props: {
                    negativeText: '取消',
                    positiveText: '确认',
                    onPositiveClick: deleteSingle.bind(null, row.id)
                  }
                }
              ],
              align: 'center'
            })
          }
        }
      ],
      info: ref(info),
      modalShow: false,
      menuList: [],
      rowData: {
        status: 1,
        type: 0,
        hide: 0
      }
    })

    // 获取全部菜单信息
    async function getMenuAll() {
      const list = await getMenu()
      data.menuList = list.data
    }
    onMounted(() => {
      getMenuAll()
    })

    /**
     * @description: 获取菜单数据
     * @return {*}
     */
    const params = ref({})
    const tableRef = ref()

    function handleSearch(data) {
      params.value = {
        ...data
      }
      tableRef.value.reFetch({ ...unref(params) })
    }

    const loadDataTable = async(res) => {
      const _params = {
        ...unref(params),
        ...res
      }
      return await getMenuList(_params)
    }

    // 打开新增弹框
    function handleModal() {
      data.modalShow = true
      data.rowData = {}
    }
    // 行内新增
    function add(row) {
      data.modalShow = true
      data.rowData = {}
      data.rowData.pid = row.id
    }
    // 编辑
    function play(row) {
      data.rowData = row
      data.modalShow = true
    }
    // 单个删除数据
    function deleteSingle(id) {
      deleteData(id)
    }

    // 删除方法
    function deleteData(id) {
      deleteMenu(id)
        .then((res) => {
          if (res.code === 0) {
            handleSearch({})
            $message.success(res.msg)
          } else {
            $message.error(res.msg)
          }
        })
        .catch((e) => {
          console.log(e)
        })
    }

    return {
      ...toRefs(data),
      tableRef,
      loadDataTable,
      handleSearch,
      handleModal,
      deleteSingle
    }
  }
}
</script>
<style scoped lang='scss'>
</style>
