import {
  MyButtons,
  MyColumns,
  MyPageContainer,
  MyProTableProps,
  MyTableActions,
  MyToolBarActions,
} from '@/common';
import { Selects } from '@/components/Select';
import { Apis } from '@/gen/Apis';
import { MsgPropertyAnnouncementsPublishTypeEnum } from '@/gen/Enums';
import { ProTable } from '@ant-design/pro-components';
import { Space } from 'antd';
import AnnouncementCreate from './modals/AnnouncementCreate';
import AnnouncementShow from './modals/AnnouncementShow';
import AnnouncementUpdate from './modals/AnnouncementUpdate';

export default function Index({ title = '项目公告' }) {
  return (
    <MyPageContainer
      title={title}
      enableTabs={true}
      tabKey="msg-property-announcements"
      tabLabel={title}
    >
      <ProTable
        {...MyProTableProps.props}
        headerTitle="公告列表"
        request={async (params, sort) =>
          MyProTableProps.request(
            params,
            sort,
            Apis.Msg.MsgPropertyAnnouncements.List,
          )
        }
        toolBarRender={(action) => [
          <MyToolBarActions
            key="toolbar"
            actions={{
              add: (
                <AnnouncementCreate
                  key="Select"
                  reload={action?.reload}
                  title={title}
                />
              ),
            }}
          />,
        ]}
        columns={[
          Selects?.AssetProjects({
            title: '选择项目',
            key: 'asset_projects_id',
            hidden: true,
          }),
          {
            title: '关联项目',
            dataIndex: ['asset_project', 'name'],
            // search: {
            //   transform: (value) => {
            //     return { project_name: value };
            //   },
            // },
            search: false,
          },
          {
            title: '公告标题',
            dataIndex: 'title',
            width: 120, // 关键：固定列宽（若父容器过窄，可设 minWidth: 200 优先保证列宽）
            render: (text) => (
              <div
                style={{
                  width: '100%', // 继承列宽
                  // height: '60px', // 设置固定高度，约显示3行文本
                  overflow: 'hidden', // 超出隐藏
                  textOverflow: 'ellipsis', // 省略号
                  display: '-webkit-box',
                  WebkitBoxOrient: 'vertical',
                  WebkitLineClamp: 1, // 显示3行
                }}
              >
                {text}
              </div>
            ),
          },
          {
            title: '落款日期',
            dataIndex: 'publish_at',
            valueType: 'date',
            search: false,
          },
          MyColumns.EnumTag({
            title: '发布方式',
            dataIndex: 'publish_type',
            valueEnum: MsgPropertyAnnouncementsPublishTypeEnum,
            search: false,
          }),

          MyColumns.Boolean({
            title: '是否发布',
            dataIndex: 'is_publish',
            search: false,
          }),
          {
            title: '发布时间',
            dataIndex: 'publish_at',
            valueType: 'dateTime',
            search: false,
          },
          {
            title: '发布时间',
            dataIndex: 'publish_at',
            valueType: 'dateRange',
            hideInTable: true,
          },

          // MyColumns.SoftDelete({
          //   title: '启/禁用',
          //   onRestore: Apis.Msg.MsgPropertyAnnouncements.Restore,
          //   onSoftDelete: Apis.Msg.MsgPropertyAnnouncements.SoftDelete,
          //   search: false,
          // }),
          MyColumns.UpdatedAt(),
          MyColumns.Option({
            render: (_, item: any, index, action) => (
              <Space key={index}>
                <AnnouncementShow item={item} />
                <MyTableActions
                  actions={{
                    update: (
                      <AnnouncementUpdate item={item} reload={action?.reload} />
                    ),
                    publish: (
                      <MyButtons.Default
                        title={item.is_publish === 0 ? '发布' : '下架'}
                        type="primary"
                        isConfirm
                        description={
                          item.is_publish === 0
                            ? '确认发布此公告吗？'
                            : '确认下架此公告吗？'
                        }
                        onConfirm={() => {
                          let newStatus: boolean;
                          if (item.is_publish === 0) {
                            newStatus = true;
                          } else {
                            newStatus = false;
                          }
                          Apis.Msg.MsgPropertyAnnouncements.IsPublish({
                            id: item.id,
                            is_publish: Boolean(newStatus),
                          }).then(() => action?.reload());
                        }}
                      />
                    ),
                    delete: (
                      <MyButtons.Delete
                        onConfirm={() =>
                          Apis.Msg.MsgPropertyAnnouncements.Delete({
                            id: item.id,
                          }).then(() => action?.reload())
                        }
                      />
                    ),
                  }}
                />
              </Space>
            ),
          }),
        ]}
      />
    </MyPageContainer>
  );
}
