ad-manage/src/models/useOperating/useWxGroupList.ts

import { useCallback, useEffect, useReducer } from 'react';
import { allOfMember, listGroup, getAllZhMemBerApi } from '@/services/operating/account';
import { useAjax } from '@/Hook/useAjax';
import { getWxlist } from '@/services/operating/material';
import { getMpsTimeOut } from '@/services/user';
import { useModel, history } from 'umi';
import { Modal, notification } from 'antd';
import { getVersions } from '@/services/login';
import React from 'react';
type State = {
  actionWX?: any; //当前选中的微信
  mpAccounts?: any[]; //选中的组数据
  actionArr?: any[]; //多选的勾中的微信
  allWx?: any[]; //自己微信列表过滤重复
  tabsKey?: '自己' | '组员';
  tabsKey1?: '自己' | '组员';
  groupAllWx: any[]; //组员微信列表过滤重复
  filterWxs: any[]; //合并组员和自己的微信号
  groupActionWx: any[]; //当前组员的微信号
  selectWx?: any[]; //多选关联公众号
  versionsOpen?: boolean; //版本通知
  allOfMember?: any[]; //所有投手原始数据--->监控
  myallOfUser?: any[]; //自己的公众号数据--->监控
};
export type Action = {
  type:
  | 'actionWX'
  | 'mpAccounts'
  | 'allWx'
  | 'setTabsKey'
  | 'setTabsKey1'
  | 'setUserId'
  | 'setActionArr'
  | 'groupAllWx'
  | 'filterWxs'
  | 'groupActionWx'
  | 'selectWx'
  | 'versionsOpen'
  | 'allOfMember'
  | 'myallOfUser';
  params: any;
};
export function weChatReducer(state: State, action: Action) {
  let { type, params } = action;
  switch (type) {
    case 'actionWX':
      return { ...state, actionWX: params.actionWX };
    case 'mpAccounts':
      return { ...state, mpAccounts: params.mpAccounts };
    case 'allWx':
      return { ...state, allWx: params.allWx };
    case 'groupAllWx':
      return { ...state, groupAllWx: params.groupAllWx };
    case 'setTabsKey':
      return { ...state, tabsKey: params.tabsKey };
    case 'setTabsKey1':
      return { ...state, tabsKey1: params.tabsKey1 };
    case 'setActionArr':
      return { ...state, actionArr: params.actionArr };
    case 'filterWxs':
      return { ...state, filterWxs: params.filterWxs };
    case 'groupActionWx':
      return { ...state, groupActionWx: params.groupActionWx };
    case 'selectWx':
      return { ...state, selectWx: params.selectWx };
    case 'versionsOpen':
      return { ...state, versionsOpen: params.versionsOpen };
    case 'allOfMember':
      return { ...state, allOfMember: params.allOfMember };
    case 'myallOfUser':
      return { ...state, myallOfUser: params.myallOfUser };
    default:
      return state;
  }
}

export default function useWxGroupList() {
  const getDataList = useAjax(() => listGroup()); //获取分组微信公众号列表
  const getAllOfMember = useAjax(() => allOfMember()); //获取账户下属公众号
  const getAllZhMemBer = useAjax(() => getAllZhMemBerApi()); //获取账户下属公众号
  const catWx = useAjax((userId) => getMpsTimeOut(userId)); //查询公众号是否过期
  const getversions = useAjax(() => getVersions()); //获取版本号
  const getWxlists = useAjax((id) => getWxlist(id));
  const [state, dispatch] = useReducer(weChatReducer, {
    tabsKey: '自己',
    tabsKey1: '自己',
    actionArr: [],
    groupAllWx: [],
    filterWxs: [],
    groupActionWx: [],
    selectWx: [],
  });
  let versionsInterval: NodeJS.Timeout | null = null;
  const actionWx = useCallback((wx: any) => {
    dispatch({ type: 'actionWX', params: { actionWX: wx } });
  }, []);
  const actionMp = useCallback((mpAccounts: any[]) => {
    dispatch({ type: 'mpAccounts', params: { mpAccounts: mpAccounts?.filter(m => !!m) } });
  }, []);
  const initSelectWx = () => {
    dispatch({ type: 'selectWx', params: { selectWx: [] } });
  };
  //首次获取列表
  useEffect(() => {
    let ok: any = true;
    if (sessionStorage.getItem('Admin-Token') && history?.location?.pathname !== '/user/login') {
      //定时请求版本号对比
      let open = true;
      versionsInterval = setInterval(() => {
        let bdVersions = localStorage.getItem('versions'); //本地
        getversions.run().then((res) => {
          let fwqVersions = ''; //服务器版本
          let content = ''; //版本更新内容
          if (res) {
            fwqVersions = res?.configValue;
            content = res?.remark?.replace(/\n/gi, '<br/>');
            if (fwqVersions && bdVersions !== fwqVersions) {
              //不一样
              if (open) {
                //并且open未关闭
                //执行逻辑
                Modal.confirm({
                  title: '版本更新！',
                  content: React.createElement('div', {
                    dangerouslySetInnerHTML: { __html: content },
                  }),
                  keyboard: false,
                  cancelText: '稍后我自己刷新页面',
                  okText: '现在就去刷新页面',
                  onOk: () => {
                    localStorage.setItem('versions', fwqVersions); //重新设置服务器版本
                    location?.reload();
                  },
                  onCancel: () => {
                    dispatch({ type: 'versionsOpen', params: { versionsOpen: true } });
                  },
                });
                console.log('不一样');
                open = false; //已弹窗关闭
              }
            }
          }
        });
        console.log('请求版本号对比！');
      }, 1000 * 60 * 5); //5分钟请求一次
      ///
      // getDataList.run().then((res: any) => {
      //   if (res && res?.length > 0) {
      //     let allWx: any[] = [];
      //     res?.forEach((item: any, index: number) => {
      //       if (ok && item?.mpAccounts?.length > 0) {
      //         ok = false;
      //         actionWx(item?.mpAccounts[0]);
      //       }
      //       item?.mpAccounts?.forEach((list: any) => {
      //         if (allWx.every((wx: { id: number }) => wx.id !== list.id)) {
      //           allWx.push(list);
      //         }
      //       });
      //     });
      //     dispatch({
      //       type: 'myallOfUser',
      //       params: { myallOfUser: [{ key: res[0]?.operUserInfo, value: res[0]?.mpAccounts }] },
      //     });
      //     dispatch({ type: 'allWx', params: { allWx } });
      //   }
      // });
      getAllZhMemBer.run().then(res => {
        dispatch({ type: 'allOfMember', params: { allOfMember: res } });
      })
      // getAllOfMember.run().then((res) => {
      //   let groupAllWx: any[] = [];
      //   res?.forEach((item: any) => {
      //     if (ok && item?.value?.length > 0) {
      //       //假如自己没有绑定公众号，那就从组员中寻找
      //       ok = false;
      //       actionWx(item?.value[0]);
      //       dispatch({ type: 'setTabsKey', params: { tabsKey: '组员' } });
      //     }
      //     item?.value?.filter((v: any) => !!v)?.forEach((list: any) => {
      //       if (groupAllWx?.every((wx: { id: number }) => wx.id !== list.id)) {
      //         groupAllWx.push(list);
      //       }
      //     });
      //   });
      //   // console.log('getAllOfMember',groupAllWx)
      //   dispatch({ type: 'allOfMember', params: { allOfMember: res } });
      //   dispatch({ type: 'groupAllWx', params: { groupAllWx } });
      // });
      function canvas(dom: any, txt: any) {
        if (!dom) return false;
        let length = txt.length * 50 > 247 ? txt.length * 50 : 247; // 根据内容生成画布大小，20代表比例
        let canvas = document.createElement('canvas');
        canvas.id = 'myCanvas'
        canvas.width = length;
        canvas.id = 'myCanvas'
        canvas.height = 150;
        canvas.style.display = 'none';
        document.body.appendChild(canvas);
        let context: any = canvas.getContext('2d');
        canvas.style.letterSpacing = 3 + 'px';
        context.font =
          '30px "PingFangSC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif';
        context.fillStyle = 'rgba(255,0,0,0.06)';
        context.rotate((-13 * Math.PI) / 80); // 画布里面文字的旋转角度
        context.fillText(txt, (length - txt.length * 13) / 2, length / 2 + 20); // 文字的位置
        dom.style.backgroundImage = `url(${canvas.toDataURL('image/png')})`;
        return;
      }
      let div: any = document.createElement('div');
      div.style = `width: 100%;
        height: 100%;
        position: fixed;
        left: 0px;
        top: 0px;
        z-index: 10000;
        pointer-events: none;
        background-color:rgba(0,0,0,.03);
        background-repeat: round;`;
      setTimeout(() => {
        let main = document.getElementById('root');
        if (main) {
          main.appendChild(div);
          canvas(div, localStorage.getItem('name'));
          let myCanvas: any = document.getElementById('myCanvas')
          document.body.removeChild(myCanvas)
        }
      }, 1000);
    }
    return () => {
      versionsInterval && clearInterval(versionsInterval);
    };
  }, []);
  //计算合并组员和自己的微信
  useEffect(() => {
    if (state?.allWx || state?.groupAllWx) {
      let wxArr: any = [...state?.groupAllWx];
      if (state?.allWx?.length > 0) {
        state?.allWx?.forEach((item: any) => {
          if (wxArr.every((wx: { id: number }) => wx.id !== item.id)) {
            wxArr.push(item);
          }
        });
      }
      dispatch({ type: 'filterWxs', params: { filterWxs: wxArr } });
    }
  }, [state.allWx, state.groupAllWx]);
  //当前选中组员的微信
  const actionGroupWx = useCallback(
    (userId: number) => {
      if (state.tabsKey === '自己') {
        dispatch({ type: 'groupActionWx', params: { groupActionWx: state.allWx } });
      } else {
        if (getAllOfMember.data && userId) {
          getAllOfMember?.data?.map((item: { key: { userId: number }; value: any[] }) => {
            if (userId == item?.key?.userId) {
              dispatch({ type: 'groupActionWx', params: { groupActionWx: item?.value } });
            }
          });
        }
      }
    },
    [getAllOfMember.data, state.tabsKey, state.allWx],
  );
  return {
    state,
    getDataList,
    actionWx,
    actionMp,
    getAllOfMember,
    getAllZhMemBer,
    dispatch,
    actionGroupWx,
    initSelectWx,
    getWxlists,
    getversions,
  };
}