<template>
  <PageWrapper>
    <el-card shadow="never" size="small" class="proCard tabsCard">
      <el-tabs v-model="activeName" @tab-change="handleClick">
        <el-tab-pane :name="item.value" v-for="(item, index) in messageTypeList" :key="index">
          <template #label>
            <span class="custom-tabs-label">
              <el-badge :value="item.number ? item.number : ''" :max="99" class="item">
                <span class="t1">{{ item.name }}</span>
              </el-badge>
            </span>
          </template>
        </el-tab-pane>
      </el-tabs>
      <BasicTable
        :columns="columns"
        :request="loadDataTable"
        :row-key="(row) => row.id"
        ref="tableRef"
        :actionColumn="actionColumn"
        @selection-change="onSelectionChange"
      >
        <template #tableTitle>
          <el-button type="primary" @click="handleSetRead()"> 批量确认 </el-button>
          <el-button type="danger" @click="handleDelete()" :disabled="!selectionData.length">
            <template #icon>
              <el-icon class="el-input__icon">
                <Delete />
              </el-icon>
            </template>
            删除
          </el-button>
        </template>
      </BasicTable>
    </el-card>
    <editDialog
      v-if="editVisible"
      :messageId="messageId"
      v-model:visible="editVisible"
      @success="reloadTable('noRefresh')"
    />
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { reactive, ref, h, nextTick, defineAsyncComponent, onMounted } from 'vue';
  import { TableAction } from '@/components/Table';
  import {
    getMessageProfile,
    messageDelete,
    messageBatchDelete,
    setRead,
  } from '@/api/dashboard/message';
  import { columns } from './columns';
  import { message, confirm } from '@/utils/auth';

  /**
   * 定义参数
   */
  const editDialog = defineAsyncComponent(() => import('./edit.vue'));
  const messageId = ref(0);
  const docHeight = ref(500);
  const activeName = ref(1);
  const editVisible = ref(false);
  const selectionData = ref([]);
  const tableRef = ref();

  /**
   * 定义查询参数
   */
  const formParams = reactive({
    type: 1,
  });

  /**
   * 定义数据源
   */
  const messageTypeList = ref([
    {
      name: '系统通知',
      value: 1,
    },
    {
      name: '用户私信',
      value: 2,
    },
    {
      name: '代办事项',
      value: 3,
    },
  ]);

  /**
   * 定义操作栏
   */
  const actionColumn = reactive({
    width: 280,
    label: '操作',
    prop: 'action',
    fixed: 'right',
    render(record) {
      return h(TableAction, {
        style: 'button',
        actions: [
          {
            label: '确认',
            icon: 'Check',
            type: 'warning',
            onClick: handleSetRead.bind(null, record),
          },
          {
            label: '详情',
            icon: 'View',
            type: 'warning',
            onClick: handleDetail.bind(null, record),
          },
          {
            label: '删除',
            icon: 'Delete',
            type: 'danger',
            onClick: handleDelete.bind(null, record),
          },
        ],
      });
    },
  });

  /**
   * 加载数据列表
   * @param res 参数
   */
  const loadDataTable = async (res: any) => {
    const result = await getMessageProfile({ ...formParams, ...res });
    let item = messageTypeList.value.find((item, index) => item.value == activeName.value);
    item.number = result.number;
    return result;
  };

  /**
   * 刷新数据列表
   * @param noRefresh 参数
   */
  function reloadTable(noRefresh = '') {
    tableRef.value.reload(noRefresh ? {} : { pageNo: 1 });
  }

  /**
   * 执行点击事件
   * @param e 参数
   */
  const handleClick = (e) => {
    activeName.value = e;
    formParams.type = activeName.value;
    reloadTable();
  };

  /**
   * 执行查看详情
   * @param record 参数
   */
  const handleDetail = async (record: Recordable) => {
    messageId.value = record.row.id;
    await nextTick();
    editVisible.value = true;
  };

  /**
   * 执行删除
   * @param record 参数
   */
  async function handleDelete(record: Recordable) {
    let ids = [];
    if (!record) {
      ids = selectionData.value.map(({ id }) => id);
    }
    await confirm('确定要删除？');
    record ? await messageDelete(record.row.id) : await messageBatchDelete(ids);
    message('删除成功');
    reloadTable();
  }

  /**
   * 执行已读
   * @param record 参数
   */
  async function handleSetRead(record: Recordable) {
    let ids = [];
    if (!record) {
      ids = selectionData.value.map(({ id }) => id);
    }
    await confirm('确定标记为已读？');
    record ? await setRead({ idList: [record.row.id] }) : await setRead({ idList: ids });
    message('标记成功');
    reloadTable();
  }

  /**
   * 数据行选中事件
   * @param value 参数
   */
  function onSelectionChange(value) {
    selectionData.value = value;
  }

  /**
   * 钩子函数
   */
  onMounted(() => {
    docHeight.value = document.body.clientHeight - 145;
  });
</script>

<style lang="scss" scoped>
  :deep(.proCard.tabsCard .el-card__body) {
    padding-bottom: 15px;
  }
  :deep(.el-badge__content.is-fixed) {
    top: 6px;
    right: calc(-10px + var(--el-badge-size) / 2);
  }
</style>
