<template>
  <div>
    <n-card>
      <headSearch :info="search" @search="handleSearch" @reset="handleSearch" />
      <data-table
        ref="tableRef"
        :columns="columns"
        :row-key="(row) => row.id"
        :request="loadDataTable"
        size="large"
        scroll-x="1200"
        @update:checked-row-keys="handleCheck"
      >
        <template #tableTitle>
          <n-button type="primary" @click="handleModal"> 新建 </n-button>
          <n-popconfirm
            negative-text="取消"
            positive-text="确认"
            @positive-click="deleteComplex"
          >
            <template #trigger>
              <n-button type="primary">删除</n-button>
            </template>
            确定删除选中的数据吗?
          </n-popconfirm>
        </template>
      </data-table>
    </n-card>
  </div>
  <!-- 新增、编辑弹窗 -->
  <RoleModal v-if="modalShow" v-model:visible="modalShow" :data="rowData" :type="modalType" @reload="handleSearch" />
  <!-- 分配权限 -->
  <ConfigModal v-if="configModalShow" v-model:visible="configModalShow" :data="rowData" @reload="handleSearch" />
</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 RoleModal from './components/RoleModal.vue'
import ConfigModal from './components/ConfigModal.vue'
import { getRoleList } from '@/api/system/role/index'
import { ref, unref, toRefs, reactive, onUnmounted } from 'vue'

export default {
  name: 'MenuPage',
  components: { headSearch, dataTable, RoleModal, ConfigModal },
  setup() {
    const data = reactive({
      ...toRefs(table),
      search
    })

    const loadDataTable = async(res) => {
      const _params = {
        ...unref(data.searchParams),
        ...res
      }
      return await getRoleList(_params)
    }

    // 新增用户
    function handleModal() {
      data.rowData = null
      data.modalType = 'create'
      data.modalShow = true
    }

    // 选择表格数据
    const selectedIds = ref([])
    function handleCheck(rowKeys) {
      selectedIds.value = rowKeys
    }

    // 批量删除
    function deleteComplex() {
      if (selectedIds.value.length) {
        data.deleteData(selectedIds.value)
      } else {
        $message.warning('请至少选中一条数据')
      }
    }

    onUnmounted(() => {
      data.searchParams = null
    })

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