<template>
  <page-container>
    <div class="ant-pro-table">
      <div class="ant-pro-table-search">
        <h-form layout="horizontal">
          <h-row :gutter="16" type="flex" justify="start">
            <h-col :xs="24" :sm="24" :md="12">
              <h-form-item label="角色名">
                <h-input placeholder="please enter" />
              </h-form-item>
            </h-col>
            <h-col :xs="24" :sm="24" :md="12">
              <h-form-item label="描述">
                <h-input placeholder="please enter" />
              </h-form-item>
            </h-col>
          </h-row>
        </h-form>
      </div>
      <h-card :body-style="{ padding: 0 }" ref="elRef">
        <div class="ant-pro-table-list-toolbar">
          <div class="ant-pro-table-list-toolbar-container">
            <div class="ant-pro-table-list-toolbar-left">
              <div class="ant-pro-table-list-toolbar-title">角色列表</div>
            </div>
            <div class="ant-pro-table-list-toolbar-right">
              <h-space align="center">
                <h-button
                  type="primary"
                  @click="
                    () => {
                      modalVisible = true;
                      roleModalRef = null;
                    }
                  "
                >
                  <plus-outlined />
                  新增角色
                </h-button>
              </h-space>
              <div class="ant-pro-table-list-toolbar-divider">
                <h-divider type="vertical" />
              </div>
              <div class="ant-pro-table-list-toolbar-setting-item">
                <h-tooltip title="刷新">
                  <reload-outlined @click="reload" />
                </h-tooltip>
              </div>
              <div class="ant-pro-table-list-toolbar-setting-item">
                <h-tooltip title="密度">
                  <h-dropdown :trigger="['click']" placement="bottomRight">
                    <column-height-outlined />
                    <template #overlay>
                      <h-menu
                        style="width: 80px"
                        :selected-keys="[state.tableSize]"
                        @click="
                          ({ key }) => {
                            fetchDataContext.tableSize = String(key);
                          }
                        "
                      >
                        <h-menu-item key="default">
                          <a href="javascript:;">默认</a>
                        </h-menu-item>
                        <h-menu-item key="middle">
                          <a href="javascript:;">中等</a>
                        </h-menu-item>
                        <h-menu-item key="small">
                          <a href="javascript:;">紧凑</a>
                        </h-menu-item>
                      </h-menu>
                    </template>
                  </h-dropdown>
                </h-tooltip>
              </div>
              <div class="ant-pro-table-list-toolbar-setting-item">
                <h-popover
                  placement="bottomRight"
                  arrowPointAtCenter
                  trigger="click"
                  overlayClassName="ant-pro-table-column-setting-overlay"
                >
                  <template #title>
                    <div class="ant-pro-table-column-setting-title">
                      <h-checkbox
                        v-model:checked="columnState.checkAll"
                        :indeterminate="columnState.indeterminate"
                        @change="handleColumnAllClick"
                      >
                        列展示 / 排序
                      </h-checkbox>
                      <a @click="reset">重置</a>
                    </div>
                  </template>
                  <template #content>
                    <span class="ant-pro-table-column-setting-list">
                      <drag-container
                        lockAxis="y"
                        dragClass="ant-pro-table-drag-ghost"
                        dropClass="ant-pro-table-drop-ghost"
                        @drop="({ removedIndex, addedIndex }) => move(removedIndex, addedIndex)"
                      >
                        <draggable :key="column.key" v-for="column in dynamicColumnItems">
                          <div class="ant-pro-table-column-setting-list-item">
                            <drag-icon />
                            <h-checkbox
                              :checked="column.checked"
                              @change="handleColumnChange($event, column)"
                            >
                              {{ column.label }}
                            </h-checkbox>
                          </div>
                        </draggable>
                      </drag-container>
                    </span>
                  </template>
                  <h-tooltip title="列设置">
                    <setting-outlined />
                  </h-tooltip>
                </h-popover>
              </div>
              <div class="ant-pro-table-list-toolbar-setting-item">
                <h-tooltip :title="screenState ? '退出全屏' : '全屏'">
                  <fullscreen-outlined v-if="!screenState" @click="setFull" />
                  <fullscreen-exit-outlined v-else @click="exitFull" />
                </h-tooltip>
              </div>
            </div>
          </div>
        </div>
        <h-table
          row-key="id"
          :size="state.tableSize"
          :loading="state.loading"
          :columns="dynamicColumns"
          :data-source="state.dataSource"
          :pagination="{
            current: state.current,
            pageSize: state.pageSize,
            total: state.total,
          }"
          @change="handleTableChange"
        >
          <template #expandedRowRender="{ record }">
            <div class="table-role-permission-card">
              <h-row :gutter="12">
                <h-col
                  style="height: 48px"
                  :span="12"
                  :key="permission.id"
                  v-for="permission in record.permissions"
                >
                  <h-row :gutter="16">
                    <h-col :span="4">{{ permission.label }}</h-col>
                    <h-col>
                      <h-tag color="cyan" :key="action" v-for="action in permission.actions">
                        {{ action }}
                      </h-tag>
                    </h-col>
                  </h-row>
                </h-col>
              </h-row>
            </div>
          </template>
          <template #bodyCell="{ record, column }">
            <template v-if="column.dataIndex === 'action'">
              <a
                @click="
                  () => {
                    roleModalRef = record;
                    modalVisible = true;
                  }
                "
              >
                编辑
              </a>
            </template>
          </template>
        </h-table>
      </h-card>
    </div>
    <role-modal :model="roleModalRef" :visible="modalVisible" @cancel="modalVisible = false" />
  </page-container>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import {
  PlusOutlined,
  ReloadOutlined,
  ColumnHeightOutlined,
  SettingOutlined,
  FullscreenOutlined,
  FullscreenExitOutlined,
} from '@ant-design/icons-vue';
import { Container as DragContainer, Draggable } from '@/components/draggable';
import { getRoles } from '@/api/user/role';
import type { Pagination, TableColumn } from '@/typing';
import { useFetchData } from '@/utils/hooks/useFetchData';
import { useFullscreen } from '@/utils/hooks/useFullscreen';
import { useTableDynamicColumns } from '@/utils/hooks/useTableColumn';
import DragIcon from '@/components/table/drag-icon.vue';
import RoleModal from './role-modal.vue';
import type { Role } from '@/store/modules/user/typing';

const baseColumns: TableColumn[] = [
  {
    title: '编号',
    dataIndex: 'id',
  },
  {
    title: '角色名称',
    dataIndex: 'name',
  },
  {
    title: '描述',
    dataIndex: 'describe',
  },
  {
    title: '操作',
    dataIndex: 'action',
  },
];
export default defineComponent({
  name: 'RoleList',
  setup() {
    const roleModalRef = ref<Role>({} as Role);
    const {
      state: columnState,
      dynamicColumns,
      dynamicColumnItems,
      handleColumnAllClick,
      handleColumnChange,
      reset,
      move,
    } = useTableDynamicColumns(baseColumns, { needRowIndex: false });
    const [elRef, screenState, { setFull, exitFull }] = useFullscreen();
    const fetchDataContext = reactive({
      current: 1,
      pageSize: 10,
      tableSize: 'middle', // 'default' | 'middle' | 'small'
      stripe: false,
    });
    // 表格数据和加载
    const { reload, context: state } = useFetchData(getRoles, fetchDataContext);
    const handleTableChange = ({ current, pageSize }: Pagination) => {
      fetchDataContext.current = current;
      fetchDataContext.pageSize = pageSize;
    };
    // 新增修改表单
    const modalVisible = ref<boolean>(false);

    return {
      reload,
      state,
      columnState,
      dynamicColumns,
      dynamicColumnItems,

      // fullscreen
      elRef,
      screenState,
      setFull,
      exitFull,

      handleTableChange,

      handleColumnChange,
      handleColumnAllClick,
      reset,
      move,

      // 表单
      modalVisible,

      roleModalRef,
      fetchDataContext,
    };
  },
  components: {
    DragIcon,
    PlusOutlined,
    ReloadOutlined,
    ColumnHeightOutlined,
    SettingOutlined,
    FullscreenOutlined,
    FullscreenExitOutlined,
    Draggable,
    DragContainer,
    RoleModal,
  },
});
</script>
