import type { ActionType, ProColumns, ProFormInstance } from '@ant-design/pro-components';
import { ModalForm, PageContainer, ProFormSelect, ProFormText, ProTable } from '@ant-design/pro-components';
import '@umijs/max';
import { Select } from 'antd';
import dayjs from 'dayjs';
import React, { useRef, useState } from 'react';

import { TIME_FORMAT } from '@/constants/global';
import { getPublisherList, updatePublisherInfo } from '@/services/list';

const WX_STATUS_OPTIONS = [
  { label: '为空', value: 0 },
  { label: '不为空', value: 1 },
];

const STATUS_OPTIONS = [
  { label: '正常', value: 0 },
  { label: '暂停', value: 1 },
];

const ADD_WX_STATUS_OPTIONS = [
  { label: '待申请', value: 0 },
  { label: '已申请', value: 1 },
  { label: '不可添加', value: 2 },
  { label: '被封号', value: 3 },
];

const HAS_DECLARE_OPTIONS = [
  { label: '有报单', value: true },
  { label: '无报单', value: false },
];

const TableList: React.FC = () => {
  const [updateModalOpen, handleUpdateModalOpen] = useState<boolean>(false);
  const [currentRow, setCurrentRow] = useState<API.PublisherListItem>();
  const actionRef = useRef<ActionType>();
  const formRef = useRef<ProFormInstance>();

  const columns: ProColumns<API.PublisherListItem>[] = [
    {
      title: '发布人昵称',
      dataIndex: 'publisher',
      valueType: 'textarea',
      copyable: true,
    },
    {
      title: '发布人ID',
      dataIndex: 'blPublisherId',
      valueType: 'textarea',
      copyable: true,
    },
    {
      title: '账号状态',
      dataIndex: 'status',
      valueType: 'textarea',
      renderText(status: number) {
        return STATUS_OPTIONS.find(option => option.value === status)?.label;
      },
      renderFormItem() {
        return <Select showSearch allowClear options={STATUS_OPTIONS} />;
      },
    },
    {
      title: '发布人微信账号',
      dataIndex: 'publisherAcctNo',
      valueType: 'textarea',
      copyable: true,
    },
    {
      title: '发布人微信状态',
      dataIndex: 'publisherAcctStatus',
      valueType: 'textarea',
      renderText(status: number) {
        const publisherAcctStatus = Number(status);
        return WX_STATUS_OPTIONS.find(option => option.value === publisherAcctStatus)?.label;
      },
      renderFormItem() {
        return <Select showSearch allowClear options={WX_STATUS_OPTIONS} />;
      },
    },
    {
      title: '是否申请好友',
      dataIndex: 'addAcctStatus',
      valueType: 'textarea',
      renderText(status: number) {
        return ADD_WX_STATUS_OPTIONS.find(option => option.value === status)?.label;
      },
      renderFormItem() {
        return <Select showSearch allowClear options={ADD_WX_STATUS_OPTIONS} />;
      },
    },
    {
      title: '机器人微信昵称',
      dataIndex: 'robotImNick',
      valueType: 'textarea',
    },
    {
      title: '来源群',
      dataIndex: 'imGroupNick',
      valueType: 'textarea',
      copyable: true,
    },
    {
      title: '是否有报单',
      dataIndex: 'hasDeclareOrder',
      hideInTable: true,
      renderText(status: boolean) {
        return HAS_DECLARE_OPTIONS.find(option => option.value === status)?.label;
      },
      renderFormItem() {
        return <Select showSearch allowClear options={HAS_DECLARE_OPTIONS} />;
      },
    },
    {
      title: '最新通告发布时间',
      dataIndex: 'lastPublishedTime',
      valueType: 'dateTime',
      sorter: true,
      renderText(created: string) {
        return created ? dayjs(Number(created)).format(TIME_FORMAT) : '';
      },
      search: false,
    },
    {
      title: '小程序用户 id',
      dataIndex: 'appUid',
      valueType: 'textarea',
      search: true,
    },
    {
      title: '创建时间',
      dataIndex: 'created',
      valueType: 'dateTime',
      sorter: true,
      renderText(created: string) {
        return dayjs(Number(created)).format(TIME_FORMAT);
      },
      search: false,
    },
    {
      title: '操作',
      valueType: 'option',
      render: (_, record) => (
        <a
          key="config"
          onClick={() => {
            handleUpdateModalOpen(true);
            setCurrentRow(record);
          }}
        >
          修改
        </a>
      ),
    },
  ];
  return (
    <PageContainer>
      <ProTable<API.PublisherListItem, API.PageParams>
        headerTitle="查询表格"
        actionRef={actionRef}
        rowKey="key"
        search={{ labelWidth: 120, collapsed: false, collapseRender: false }}
        request={getPublisherList}
        columns={columns}
      />
      <ModalForm
        title="更新发布人信息"
        width="400px"
        formRef={formRef}
        open={updateModalOpen}
        onOpenChange={handleUpdateModalOpen}
        onFinish={async data => {
          const params: API.UpdatePublisherParams = {
            blPublisherId: currentRow!.blPublisherId,
            publisherAcctNo: data.publisherAcctNo,
            status: data.status,
            addAcctStatus: data.addAcctStatus,
          };
          console.log('update confirm', data, params);
          try {
            await updatePublisherInfo(params);
            actionRef.current?.reload();
            formRef.current?.resetFields();
          } catch (e) {}
          handleUpdateModalOpen(false);
        }}
      >
        <ProFormText width="md" name="publisherAcctNo" label="发布人微信账号" />
        <ProFormSelect name="status" label="账号状态" options={STATUS_OPTIONS} />
        <ProFormSelect name="addAcctStatus" label="是否申请好友" options={ADD_WX_STATUS_OPTIONS} />
      </ModalForm>
    </PageContainer>
  );
};
export default TableList;
