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

import { CITY_CODE_TO_NAME_MAP, CITY_OPTIONS } from '@/constants/city';
import { TIME_FORMAT } from '@/constants/global';
import { DeclarationType } from '@/constants/product';
import { getDeclarationList, updateDeclarationInfo } from '@/services/list';

const STATUS_OPTIONS = [
  { label: '待处理', value: 0 },
  { label: '已处理', value: 1 },
];

const TYPE_OPTIONS = [
  { label: '直接联系', value: DeclarationType.Direct },
  { label: '客服联系', value: DeclarationType.CS },
];

const WE_COM_OPTIONS = [
  { label: '未加', value: 0 },
  { label: '已加', value: 1 },
];

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

  const columns: ProColumns<API.DeclarationListItem>[] = [
    {
      title: '主播昵称',
      dataIndex: 'nickName',
      valueType: 'textarea',
    },
    {
      title: '主播ID',
      dataIndex: 'userId',
      valueType: 'textarea',
      copyable: true,
    },
    {
      title: '主播手机号',
      dataIndex: 'userPhone',
      valueType: 'textarea',
      copyable: true,
    },
    {
      title: '通告标题',
      dataIndex: 'title',
      valueType: 'textarea',
    },
    {
      title: '通告ID',
      dataIndex: 'jobId',
      valueType: 'textarea',
      copyable: true,
    },
    {
      title: '解锁时间',
      dataIndex: 'useDate',
      valueType: 'dateTime',
      renderText(time: string) {
        return dayjs(Number(time)).format(TIME_FORMAT);
      },
      search: false,
    },
    {
      title: '职位发布人昵称',
      dataIndex: 'publisher',
      valueType: 'textarea',
      search: false,
      copyable: true,
    },
    {
      title: '职位发布人ID',
      dataIndex: 'blPublisherId',
      valueType: 'textarea',
      copyable: true,
    },
    {
      title: '职位发布人微信',
      dataIndex: 'publisherAcctNo',
      valueType: 'textarea',
      copyable: true,
    },
    {
      title: '报单类型',
      dataIndex: 'type',
      valueType: 'textarea',
      renderText(type: number) {
        return TYPE_OPTIONS.find(option => option.value === type)?.label;
      },
      renderFormItem() {
        return <Select allowClear options={TYPE_OPTIONS} />;
      },
    },
    {
      title: '报单时间',
      dataIndex: 'declarationDate',
      valueType: 'dateTime',
      renderText(time: string) {
        return dayjs(Number(time)).format(TIME_FORMAT);
      },
      search: false,
    },
    {
      title: '报单处理状态',
      dataIndex: 'declaredStatus',
      valueType: 'textarea',
      renderText(status: number) {
        const declaredStatus = Number(status);
        return STATUS_OPTIONS.find(option => option.value === declaredStatus)?.label;
      },
      renderFormItem() {
        return <Select showSearch allowClear options={STATUS_OPTIONS} />;
      },
    },
    {
      title: '报单处理时间',
      dataIndex: 'declaredDate',
      valueType: 'dateTime',
      renderText(time: string) {
        return dayjs(Number(time)).format(TIME_FORMAT);
      },
      search: false,
    },
    {
      title: '是否加企微',
      dataIndex: 'weComStatus',
      valueType: 'textarea',
      renderText(status: number) {
        return WE_COM_OPTIONS.find(option => option.value === status)?.label;
      },
      renderFormItem() {
        return <Select showSearch allowClear options={WE_COM_OPTIONS} />;
      },
    },
    {
      title: '通告所属城市',
      dataIndex: 'jobCityCode',
      valueType: 'textarea',
      renderText(cityCode: string) {
        return CITY_CODE_TO_NAME_MAP.get(cityCode);
      },
      renderFormItem() {
        return (
          <Select
            showSearch
            allowClear
            options={CITY_OPTIONS}
            filterOption={(input, option) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase())}
          />
        );
      },
    },
    {
      title: '报单备注信息',
      dataIndex: 'declaredMark',
      valueType: 'textarea',
      search: false,
    },
    {
      title: '操作',
      valueType: 'option',
      fixed: 'right',
      width: 100,
      align: 'center',
      render: (_, record) => (
        <a
          key="config"
          onClick={() => {
            handleUpdateModalOpen(true);
            setCurrentRow(record);
          }}
        >
          修改
        </a>
      ),
    },
  ];
  return (
    <PageContainer>
      <ProTable<API.DeclarationListItem, API.PageParams>
        headerTitle="查询表格"
        actionRef={actionRef}
        rowKey="key"
        search={{ labelWidth: 120, collapsed: false, collapseRender: false }}
        request={getDeclarationList}
        columns={columns}
        scroll={{ x: 'max-content' }}
      />
      <ModalForm
        title="更新报单信息"
        width="400px"
        formRef={formRef}
        open={updateModalOpen}
        onOpenChange={handleUpdateModalOpen}
        onFinish={async data => {
          const params: API.UpdateDeclarationParams = {
            id: currentRow!.id,
            weComStatus: data.weComStatus,
          };
          console.log('update confirm', data, params);
          try {
            await updateDeclarationInfo(params);
            actionRef.current?.reload();
            formRef.current?.resetFields();
          } catch (e) {}
          handleUpdateModalOpen(false);
        }}
      >
        <ProFormSelect
          name="weComStatus"
          label="是否加企微"
          options={WE_COM_OPTIONS}
          rules={[{ required: true, message: '必填项' }]}
        />
        <ProFormTextArea name="declaredMark" label="报单备注" placeholder="输入备注信息" />
      </ModalForm>
    </PageContainer>
  );
};
export default TableList;
