tieba-admin/src/pages/setting/banner/modal.tsx

import React, { useEffect, useState } from 'react';

import { Button, Col, Drawer, Row, Empty, message, Spin } from 'antd';

import BannerItem from './item';

import { opraBanner, getBanner } from '@/services/notice';

import { IBanner, EJumpType } from './types';

import { Role } from '@/models/user';

interface IProps {
  visible: boolean;
  opraModal: (_state: boolean, reloadTable?: boolean) => void;
  roleData: Role;
}

interface IState {
  bannerList: IBanner[];
}

const initBanner = {
  imgUrl: '',
  isShow: false,
  jumpAppId: '',
  jumpPath: '',
  jumpType: EJumpType.h5,
  sort: 0,
  roleId: '',
  roleName: '',
};

const BannerDrawer: React.FC<IProps> = ({ visible, opraModal, roleData }) => {
  const [state, setState] = useState<IState>({
    bannerList: [],
  });

  const [loading, setLoading] = useState<boolean>(false);

  const { bannerList } = state;

  useEffect(() => {
    console.log('我触发么');
    console.log(roleData, 'roleDataroleDataroleDataroleData');

    if (typeof roleData === 'object' && Reflect.ownKeys(roleData).length && visible) {
      GetBanner();
    }
  }, [visible]);

  // 新增banner
  const addBanner = () => {
    if (bannerList.length >= 8) {
      message.warn('最多添加八张轮播图');
      return;
    }

    const $par = Object.assign({}, initBanner, {
      sort: 0,
      roleId: roleData.id,
      roleName: roleData.label,
      uid: Math.random().toString(36).slice(2),
    });

    bannerList.unshift($par);

    console.log(bannerList, 'bannerListbannerList');

    setState({
      ...state,
      bannerList: bannerList.map((item: IBanner, index: number) => {
        return {
          ...item,
          sort: index,
        };
      }),
    });
  };

  // 查询banner
  const GetBanner = async () => {
    setLoading(true);
    const { status, data } = await getBanner(roleData.id);
    setLoading(false);
    console.log(status, data);
    const $r = data.map((item: IBanner) => {
      return {
        ...item,
        roleName: roleData.label,
        uid: item.id,
      };
    });
    if (status === 200) {
      setState({
        ...state,
        bannerList: $r,
      });
    }
  };

  // 收集所有item的结果
  const collecrtItem = (itemData: IBanner) => {
    console.log(itemData, '收集所有item的结果');
    const r = bannerList.map((_banner: IBanner) => {
      if (_banner.uid === itemData.uid) {
        return {
          ...itemData,
          jumpAppId: itemData.jumpAppId?.trim(),
          jumpPath: itemData.jumpPath?.trim(),
        };
      } else {
        return _banner;
      }
    });

    setState({
      bannerList: r,
    });
  };

  // 删除当前的item(还未保存前的)
  const delItem = (uid: string) => {
    const r = bannerList.filter((_banner) => _banner.uid !== uid);

    setState({
      ...state,
      bannerList: r,
    });
  };

  // 验证当前banner数据是否完整
  const verifyBanner = (bannerList: IBanner[]) => {
    let obj = {
      r: true,
      msg: '保存成功',
      index: 0,
    };
    bannerList.forEach((_banner, index) => {
      if (_banner.jumpType === EJumpType.h5 && !_banner.jumpPath) {
        obj = {
          r: false,
          msg: '存在跳转地址未填写',
          index,
        };
      }
      // else if (_banner.jumpType === EJumpType.h5 && !_banner.jumpPath) {
      //   obj = {
      //     r: false,
      //     msg: '存在appid未填写',
      //     index,
      //   };
      // }
      else if (!_banner.imgUrl) {
        obj = {
          r: false,
          msg: '图片封面未上传',
          index,
        };
      }
    });
    if (!obj.r) {
      message.error('第' + (obj.index + 1) + '项' + obj.msg);
      return false;
    }
    return true;
  };

  // 对banner进行添加或者修改
  const OpraBanner = async () => {
    const r = verifyBanner(bannerList);
    if (!r) return;
    const { status, data } = await opraBanner(bannerList, roleData.id);

    if (status === 200 && data) {
      message.success('保存成功');
      opraModal(false, true);
    }
  };

  const DrawerFooter = () => {
    return (
      <Row justify="end">
        <Col span={6}>
          <Button onClick={() => opraModal(false)}> 关闭 </Button>
        </Col>
        <Col span={6}>
          <Button type="primary" onClick={OpraBanner}>
            保存
          </Button>
        </Col>
      </Row>
    );
  };

  const DrawerTitle = () => {
    return (
      <Row align="middle">
        <Col span="16">编辑轮播图</Col>
        <Col span="6">
          <Button type="primary" onClick={addBanner}>
            新增
          </Button>
        </Col>
      </Row>
    );
  };

  return (
    <Drawer
      title={DrawerTitle()}
      placement="right"
      visible={visible}
      width={420}
      closable={false}
      onClose={() => opraModal(false)}
      maskClosable
      footer={DrawerFooter()}
    >
      <Spin spinning={loading}>
        {bannerList.length ? (
          bannerList.map((item, index) => (
            <BannerItem key={index} itemData={item} delItem={delItem} collecrtItem={collecrtItem} />
          ))
        ) : (
          <Empty description="这里空空如也" image={Empty.PRESENTED_IMAGE_SIMPLE} />
        )}
      </Spin>
    </Drawer>
  );
};

export default BannerDrawer;