import Constants from '@/constants';
import {
  adminChangeBusinessInfoUsingPost,
  getPbcBusinessByIdUsingPost,
} from '@/services/pop-b2b2c/pbcBusinessController';
import { CheckCircleOutlined, InfoCircleOutlined, PlusCircleOutlined } from '@ant-design/icons';
import {
  ProCard,
  ProConfigProvider,
  ProDescriptions,
  ProFormUploadButton,
} from '@ant-design/pro-components';
import { PageContainer } from '@ant-design/pro-layout';
import { useAccess, useParams, useSearchParams } from '@umijs/max';
import { Button, Image, message, Tag } from 'antd';
import { RcFile } from 'antd/es/upload';
import React, { useEffect, useState } from 'react';

const Detail: React.FC<any> = () => {
  const params = useParams();
  const [searchParams] = useSearchParams();
  const access: any = useAccess();
  const isEdit = searchParams.get('isEdit') === '1';

  const [info, setInfo] = useState<API.PbcBusiness>({});

  const getInfo = () => {
    if (params.id) {
      getPbcBusinessByIdUsingPost({ pbcId: parseInt(params.id) }).then((res) => {
        if (res.retcode && res.data) {
          setInfo(res.data);
        }
      });
    }
  };

  useEffect(() => {
    getInfo();
  }, []);

  return (
    <PageContainer
      header={{
        title: '',
      }}
      footer={[
        <Button
          key="back"
          onClick={() => {
            history.back();
          }}
        >
          返回
        </Button>,
      ]}
    >
      <ProCard style={{ marginBottom: 12 }}>
      <ProConfigProvider
          valueTypeMap={{
            upload: {
              render: (text) => {
                return text.length > 0 ? text.map((e: any) => 
                  <Image width={200} src={e.url}></Image>
                ) : (
                  <span></span>
                );
              },
              renderFormItem: (text, props) => {
                return (
                  <ProFormUploadButton
                    {...props}
                    {...props?.fieldProps}
                    icon={<PlusCircleOutlined style={{ fontSize: 30 }} />}
                    title={<div style={{ marginTop: 10, fontSize: 12 }}>点击上传图片</div>}
                    fieldProps={{
                      name: 'file',
                      accept: 'image/*',
                      listType: 'picture-card',
                      headers: {
                        authorization: localStorage.getItem('token') ?? '',
                      },
                      beforeUpload(file: RcFile) {
                        const isLt2M = file.size / 1024 / 1024 < 2;
                        if (!isLt2M) {
                          message.error('图片大小不能超过2MB!');
                        }
                        return isLt2M;
                      },
                      onPreview: async (file) => {
                        console.log(file);
                        if (file.uid === '-1') {
                          window.open(file.url);
                        }
                        if (file.response && file.response.retcode) {
                          window.open(file.response.data);
                        }
                      },
                    }}
                    action={'/oss/imgUpload'}
                    onChange={(a: any) => {
                      props?.fieldProps.onChange(a.fileList);
                    }}
                  />
                );
              },
            },
          }}
          hashed={false}
        >
          <ProDescriptions
            editable={
              access.businessSave && isEdit
                ? {
                    onSave: async (key, record: any, originRow) => {
                      let pbcState = record.pbcState;
                      let pbcBusinessLogo = "";
                      let pbcBusinessImage = [];
                      let pbcBusinessPosterUrl = [];
                      if (key === 'pbcState') {
                        pbcState = record[key] ? 1 : 2;
                      }
                      if (
                        key === 'pbcBusinessLogo' &&
                        record[key] &&
                        record[key].length > 0
                      ) {
                        if (record[key][0].uid === '-1') {
                          pbcBusinessLogo = record[key][0].url;
                        }
                        if (record[key][0].response && record[key][0].response.retcode) {
                          pbcBusinessLogo = record[key][0].response.data;
                        }
                      }
                      if (
                        key === 'pbcBusinessImage' &&
                        record[key] &&
                        record[key].length > 0
                      ) {
                        for (let i = 0; i < record[key].length; i++) {
                          const element = record[key][i];
                          if (element.uid === '-1') {
                            pbcBusinessImage.push(element.url)
                          }
                          if (element.response && element.response.retcode) {
                            pbcBusinessImage.push(element.response.data)
                          }
                        }
                      }
                      if (
                        key === 'pbcBusinessPosterUrl' &&
                        record[key] &&
                        record[key].length > 0
                      ) {
                        for (let i = 0; i < record[key].length; i++) {
                          const element = record[key][i];
                          if (element.uid === '-1') {
                            pbcBusinessPosterUrl.push(element.url)
                          }
                          if (element.response && element.response.retcode) {
                            pbcBusinessPosterUrl.push(element.response.data)
                          }
                        }
                      }
                      //@ts-ignore
                      await adminChangeBusinessInfoUsingPost({
                        pbcId: info.pbcId,
                        [key]: record[key],
                        pbcState: key === 'pbcState' ? pbcState : undefined,
                        pbcBusinessLogo: key === 'pbcBusinessLogo' ? pbcBusinessLogo : undefined,
                        pbcBusinessImage: key === 'pbcBusinessImage' ? pbcBusinessImage.join(',') : undefined,
                        pbcBusinessPosterUrl: key === 'pbcBusinessPosterUrl' ? pbcBusinessPosterUrl.join(',') : undefined,
                      })
                        .then((res) => {
                          if (res.retcode) {
                            getInfo();
                            message.success('修改成功');
                            return record;
                          } else {
                            message.error('修改失败');
                            return originRow;
                          }
                        })
                        .catch(() => {
                          return originRow;
                        });
                    },
                  }
                : undefined
            }
            bordered
            title={
              <>
                <span style={{ marginRight: 20 }}>基本信息</span>
                {info.pbcBusinessState === 1 ? (
                  <Tag icon={<CheckCircleOutlined />} color="success">
                    已认证
                  </Tag>
                ) : (
                  <Tag icon={<InfoCircleOutlined />} color="default">
                    未认证
                  </Tag>
                )}
              </>
            }
            dataSource={{
              pbcBusinessName: info.pbcBusinessName,
              pbcBusinessType: info.pbcBusinessType,
              pbcState: info.pbcState,
              pbcBusinessContact: info.pbcBusinessContact,
              pbcBusinessContactMobile: info.pbcBusinessContactMobile,
              pbcBusinessLevel: info.pbcBusinessLevel,
              pbcBusinessIntroduction: info.pbcBusinessIntroduction,
              pbcBusinessLogo: info.pbcBusinessLogo ? [
                  {
                    uid: '-1',
                    name: 'image.png',
                    status: 'done',
                    url: info.pbcBusinessLogo,
                  },
                ]
              : [],
              pbcBusinessImage:  info.pbcBusinessImage ? info.pbcBusinessImage.split(',').map((e, index) => {
                return {
                  uid: '-' + (index+1),
                  name: 'image.png',
                  status: 'done',
                  url: e,
                }
              }) : [],
              pbcBusinessPosterUrl: info.pbcBusinessPosterUrl ? info.pbcBusinessPosterUrl.split(',').map((e, index) => {
                return {
                  uid: '-' + (index+1),
                  name: 'image.png',
                  status: 'done',
                  url: e,
                }
              }) : [],
            }}
            columns={[
              {
                title: '商户名称',
                key: 'pbcBusinessName',
                dataIndex: 'pbcBusinessName',
              },
              {
                title: '商户类别',
                key: 'pbcBusinessType',
                dataIndex: 'pbcBusinessType',
                valueEnum: Constants.pbcBusinessType
              },
              {
                title: '商户状态',
                key: 'pbcState',
                dataIndex: 'pbcState',
                valueType: "switch",
                fieldProps:{ checkedChildren: '启用', unCheckedChildren: '禁用' }
              },
              {
                title: '联系人',
                key: 'pbcBusinessContact',
                dataIndex: 'pbcBusinessContact',
              },
              {
                title: '手机号',
                key: 'pbcBusinessContactMobile',
                dataIndex: 'pbcBusinessContactMobile',
              },
              {
                title: '商户等级',
                key: 'pbcBusinessLevel',
                dataIndex: 'pbcBusinessLevel',
                valueType: "select",
                fieldProps: { options: ['1级', '2级', '3级', '4级', '5级'] }
              },
              {
                title: '商户简介',
                key: 'pbcBusinessIntroduction',
                valueType: 'textarea',
                span: 3,
                dataIndex: 'pbcBusinessIntroduction'
              },
              {
                title: '商户LOGO',
                key: 'pbcBusinessLogo',
                dataIndex: 'pbcBusinessLogo',
                span: 3,
                valueType: 'upload',
                fieldProps: {
                  max: 1
                }
              },
              {
                title: '商户图片',
                key: 'pbcBusinessImage',
                dataIndex: 'pbcBusinessImage',
                span: 3,
                valueType: 'upload',
              },
              {
                title: '商户海报',
                key: 'pbcBusinessPosterUrl',
                dataIndex: 'pbcBusinessPosterUrl',
                span: 3,
                valueType: 'upload',
              },
            ]}
            column={3}
          ></ProDescriptions>
        </ProConfigProvider>
      </ProCard>
      <ProCard style={{ marginBottom: 12 }}>
        <ProConfigProvider
          valueTypeMap={{
            upload: {
              render: (text) => {
                return text.length > 0 ? (
                  <Image width={200} src={text[0].url}></Image>
                ) : (
                  <span></span>
                );
              },
              renderFormItem: (text, props) => {
                return (
                  <ProFormUploadButton
                    {...props}
                    {...props?.fieldProps}
                    icon={<PlusCircleOutlined style={{ fontSize: 30 }} />}
                    title={<div style={{ marginTop: 10, fontSize: 12 }}>点击上传图片</div>}
                    max={1}
                    fieldProps={{
                      name: 'file',
                      accept: 'image/*',
                      listType: 'picture-card',
                      headers: {
                        authorization: localStorage.getItem('token') ?? '',
                      },
                      beforeUpload(file: RcFile) {
                        const isLt2M = file.size / 1024 / 1024 < 2;
                        if (!isLt2M) {
                          message.error('图片大小不能超过2MB!');
                        }
                        return isLt2M;
                      },
                      onPreview: async (file) => {
                        console.log(file);
                        if (file.uid === '-1') {
                          window.open(file.url);
                        }
                        if (file.response && file.response.retcode) {
                          window.open(file.response.data);
                        }
                      },
                    }}
                    action={process.env.BASE_URL + '/oss/imgUpload'}
                    onChange={(a: any) => {
                      props?.fieldProps.onChange(a.fileList);
                    }}
                  />
                );
              },
            },
          }}
          hashed={false}
        >
          <ProDescriptions
            dataSource={{
              pbcBusinessHead: info.pbcBusinessHead,
              pbcBusinessHeadUserNo: info.pbcBusinessHeadUserNo,
              pbcBusinessStartDate: info.pbcBusinessStartDate,
              pbcBusinessBank: info.pbcBusinessBank,
              pbcBusinessAccountName: info.pbcBusinessAccountName,
              pbcBusinessAccount: info.pbcBusinessAccount,
              pbcBusinessMainCategory: info.pbcBusinessMainCategory,
              pbcBusinessLicenseUrl: info.pbcBusinessLicenseUrl
                ? [
                    {
                      uid: '-1',
                      name: 'image.png',
                      status: 'done',
                      url: info.pbcBusinessLicenseUrl,
                    },
                  ]
                : [],
            }}
            editable={
              access.businessSave && isEdit
                ? {
                    onSave: async (key, record: any, originRow) => {
                      let pbcBusinessLicenseUrl = "";
                      if (
                        key === 'pbcBusinessLicenseUrl' &&
                        record[key] &&
                        record[key].length > 0
                      ) {
                        if (record[key][0].uid === '-1') {
                          pbcBusinessLicenseUrl = record[key][0].url;
                        }
                        if (record[key][0].response && record[key][0].response.retcode) {
                          pbcBusinessLicenseUrl = record[key][0].response.data;
                        }
                      }
                      //@ts-ignore
                      await adminChangeBusinessInfoUsingPost({
                        pbcId: info.pbcId,
                        [key]: record[key],
                        pbcBusinessLicenseUrl:
                          key === 'pbcBusinessLicenseUrl' ? pbcBusinessLicenseUrl : undefined,
                      })
                        .then((res) => {
                          if (res.retcode) {
                            getInfo();
                            message.success('修改成功');
                            return record;
                          } else {
                            message.error('修改失败');
                            return originRow;
                          }
                        })
                        .catch(() => {
                          return originRow;
                        });
                    },
                  }
                : undefined
            }
            columns={[
              {
                title: '法人',
                key: 'pbcBusinessHead',
                dataIndex: 'pbcBusinessHead',
              },
              {
                title: '法人身份证号',
                key: 'pbcBusinessHeadUserNo',
                dataIndex: 'pbcBusinessHeadUserNo',
              },
              {
                title: '公司成立时间',
                key: 'pbcBusinessStartDate',
                valueType: 'date',
                dataIndex: 'pbcBusinessStartDate',
              },
              {
                title: '开户行',
                key: 'pbcBusinessBank',
                dataIndex: 'pbcBusinessBank',
              },
              {
                title: '商户账户名称',
                key: 'pbcBusinessAccountName',
                dataIndex: 'pbcBusinessAccountName',
              },
              {
                title: '收款账号',
                key: 'pbcBusinessAccount',
                dataIndex: 'pbcBusinessAccount',
              },
              {
                title: '经营范围',
                key: 'pbcBusinessMainCategory',
                valueType: 'textarea',
                span: 3,
                dataIndex: 'pbcBusinessMainCategory',
              },
              {
                title: '营业执照',
                key: 'pbcBusinessLicenseUrl',
                dataIndex: 'pbcBusinessLicenseUrl',
                span: 3,
                valueType: 'upload',
              },
            ]}
            bordered
            title="工商信息"
          ></ProDescriptions>
        </ProConfigProvider>
      </ProCard>
    </PageContainer>
  );
};

export default Detail;