import { PlusOutlined } from '@ant-design/icons';
import {
  ActionType,
  ProColumns,
  ProFormInstance,
  ProFormSelect,
  ProFormText,
  ProFormUploadButton,
  ProFormDependency,
} from '@ant-design/pro-components';
import { ModalForm, PageContainer, ProTable } from '@ant-design/pro-components';
import '@umijs/max';
import { Button, message } from 'antd';
import { Select } from 'antd';
import { createStyles } from 'antd-style';
import dayjs from 'dayjs';
import React, { useEffect, useMemo, useRef, useState } from 'react';

import { CITY_OPTIONS } from '@/constants/city';
import { TIME_FORMAT } from '@/constants/global';
import { uploadFileWx } from '@/services/file';
import {
  deleteCityOperator,
  getAllStaffList,
  getCityOpratorList,
  getProductList,
  updateCityOperator,
} from '@/services/list';

const useStyles = createStyles(({ token }) => {
  return {
    img: {
      width: 100,
      height: 100,
    },
    delete: {
      color: token.colorError,
    },
    button: {
      marginRight: '8px',
    },
  };
});

const calcPrice = (productSpecId: string, specList: API.ProductSpecListItem[]) => {
  const product = specList.find(o => o.productSpecId === productSpecId);
  return { price: product?.showPrice, originalPrice: product?.originalPrice, sendCount: product?.count };
};
const TableList: React.FC = () => {
  const [updateModalOpen, handleUpdateModalOpen] = useState<boolean>(false);
  const [specList, setSpecList] = useState<API.ProductSpecListItem[]>([]);
  const [currentRow, setCurrentRow] = useState<API.CityOperatorListItem>();
  const actionRef = useRef<ActionType>();
  const formRef = useRef<ProFormInstance>();
  const [staffOptions, setStaffOptions] = useState<Array<{ label: string; value: number; isDefault: boolean }>>([]);
  const defaultStaff = useMemo(() => {
    return staffOptions.find(it => it.isDefault) || staffOptions[0];
  }, [staffOptions]);
  const { styles } = useStyles();
  const specOptions = useMemo(
    () =>
      specList.map(it => ({
        value: it.productSpecId,
        label: it.title,
      })),
    [specList],
  );

  const getAllStaffOptions = async () => {
    try {
      const results = await getAllStaffList();
      setStaffOptions(
        results.map(it => ({
          label: `${it.staffName}${it.isDefault ? ' （默认）' : ''}`,
          isDefault: Boolean(it.isDefault),
          value: it.id,
        })),
      );
    } catch (e) {
    } finally {
    }
  };

  const getAllSpectList = async () => {
    const list = await getProductList('GROUP_BATCH_PUSH');
    setSpecList(list);
  };

  const handleDelete = async (id: number) => {
    await deleteCityOperator(id);
    message.success('操作成功');
    actionRef.current?.reload();
  };
  const handleUpload = async (file: File) => {
    const url = await uploadFileWx({ file, id: currentRow?.id });
    return url;
  };
  useEffect(() => {
    getAllStaffOptions();
    getAllSpectList();
  }, []);

  const columns: ProColumns<API.CityOperatorListItem>[] = [
    {
      title: '城市',
      dataIndex: 'cityCode',
      valueType: 'textarea',
      render: (_text, record) => record.cityName,
      renderFormItem() {
        return (
          <Select
            showSearch
            allowClear
            options={CITY_OPTIONS}
            filterOption={(input, option) => (option?.label ?? '').toLowerCase().includes(input.toLowerCase())}
          />
        );
      },
    },
    {
      title: '运营',
      dataIndex: 'staffName',
      valueType: 'textarea',
      search: false,
    },
    {
      title: '创建时间',
      dataIndex: 'created',
      valueType: 'dateTime',
      renderText(created: string) {
        return dayjs(created).format(TIME_FORMAT);
      },
      search: false,
    },
    {
      title: '进群链接',
      dataIndex: 'groupLink',
      valueType: 'textarea',
      search: false,
    },
    {
      title: '企微好友二维码',
      dataIndex: 'contactQrCode',
      valueType: 'textarea',
      copyable: true,
      search: false,
      render(_dom, { contactQrCode }) {
        return contactQrCode ? <img className={styles.img} src={contactQrCode} alt="" /> : '-';
      },
    },
    {
      title: '进群二维码',
      dataIndex: 'groupQrCode',
      valueType: 'textarea',
      copyable: true,
      search: false,
      render(_dom, { groupQrCode }) {
        return groupQrCode ? <img className={styles.img} src={groupQrCode} alt="" /> : '-';
      },
    },
    {
      title: '可群发数量',
      dataIndex: 'productSpecId',
      valueType: 'textarea',
      search: false,
      renderText: productSpecId => calcPrice(productSpecId, specList).sendCount || '-',
    },
    {
      title: '群代发价格',
      dataIndex: 'productSpecId',
      valueType: 'textarea',
      search: false,
      renderText: productSpecId => calcPrice(productSpecId, specList).price || '-',
    },
    {
      title: '操作',
      valueType: 'option',
      render: (_, record) => (
        <>
          <a
            key="config"
            className={styles.button}
            onClick={() => {
              handleUpdateModalOpen(true);
              setCurrentRow(record);
              setTimeout(() => {
                formRef.current?.setFieldsValue({
                  ...record,
                  city: {
                    label: record.cityName,
                    value: record.cityCode,
                  },
                  qrCode: record.groupQrCode
                    ? [
                        {
                          uid: `${record.id}_qrCode`,
                          name: `${record.cityName}_qrCode`,
                          status: 'done',
                          url: record.groupQrCode,
                        },
                      ]
                    : undefined,
                });
              });
            }}
          >
            修改
          </a>
          <a key="delete" className={styles.delete} onClick={() => handleDelete(record.id)}>
            删除
          </a>
        </>
      ),
    },
  ];
  return (
    <PageContainer>
      <ProTable<API.CityOperatorListItem, API.PageParams>
        headerTitle="查询表格"
        actionRef={actionRef}
        rowKey="key"
        search={{ labelWidth: 120, collapsed: false, collapseRender: false }}
        request={getCityOpratorList}
        columns={columns}
        toolBarRender={() => [
          <Button
            type="primary"
            key="add"
            icon={<PlusOutlined />}
            onClick={() => {
              handleUpdateModalOpen(true);
              setCurrentRow(undefined);
              formRef.current?.resetFields();
            }}
          >
            新增
          </Button>,
        ]}
      />
      <ModalForm
        title={`${currentRow ? '修改' : '新增'}城市`}
        width="400px"
        formRef={formRef}
        initialValues={{ staffId: defaultStaff?.value }}
        open={updateModalOpen}
        onOpenChange={handleUpdateModalOpen}
        onFinish={async formData => {
          const params: API.UpdateCityOperator = {
            id: currentRow?.id,
            staffId: formData.staffId,
            cityCode: formData.city.value,
            cityName: formData.city.label,
            groupLink: formData.groupLink,
            productSpecId: formData.productSpecId,
            groupQrCode: formData.qrCode[0].xhr ? formData.qrCode[0].xhr.responseURL : formData.qrCode[0].url,
          };
          console.log('update confirm', formData, params);
          try {
            await updateCityOperator(params);
            actionRef.current?.reload();
            formRef.current?.resetFields();
          } catch (e) {}
          handleUpdateModalOpen(false);
        }}
      >
        <ProFormSelect.SearchSelect
          name="city"
          mode="single"
          label="所属城市"
          options={CITY_OPTIONS}
          rules={[{ required: true, message: '必填项' }]}
        />
        <ProFormSelect
          mode="single"
          name="staffId"
          showSearch
          label="运营"
          options={staffOptions}
          rules={[{ required: true, message: '必填项' }]}
        />
        <ProFormText name="groupLink" label="进群链接" rules={[{ message: '请输入链接', type: 'url' }]} />
        <ProFormUploadButton
          name="qrCode"
          label="进群二维码"
          max={1}
          accept="image/*"
          rules={[{ required: true, message: '必填项' }]}
          fieldProps={{
            name: 'file',
          }}
          action={handleUpload}
        />
        <ProFormSelect
          mode="single"
          name="productSpecId"
          label="可群发数量"
          options={specOptions}
          rules={[{ required: true, message: '必填项' }]}
        />
        <ProFormDependency name={['productSpecId']}>
          {({ productSpecId }) =>
            productSpecId ? (
              <div>
                价格：{calcPrice(productSpecId, specList).price}（原价：{calcPrice(productSpecId, specList).originalPrice}）
              </div>
            ) : null
          }
        </ProFormDependency>
      </ModalForm>
    </PageContainer>
  );
};
export default TableList;