/*
 * @Author: code4eat awesomedema@gmail.com
 * @Date: 2024-03-06 10:43:05
 * @LastEditors: code4eat awesomedema@gmail.com
 * @LastEditTime: 2024-06-20 21:03:12
 * @FilePath: /CostAccountingSys/src/pages/costLibraryManagement/projectCostManagement/chargeItemsMana/components/match.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { KCIMTable } from '@/components/KCIMTable';
import ProgressModal from '@/components/ProgressModal';
import { createFromIconfontCN } from '@ant-design/icons';
import { ProColumns, ProFormText } from '@ant-design/pro-components';
import { Progress, message, Modal, Skeleton } from 'antd';
import { useEffect, useState } from 'react';
import {
  getAllNeedMatchItems,
  getMatchCount,
  getReferralMatch,
  getSingleItem,
  mapItemAndStandItem,
  matchRequest,
} from '../service';

import './style.less';

const IconFont = createFromIconfontCN({
  scriptUrl: '',
});

interface SignalBarProps {
  level: number; // 信号强度级别，通常在0-4之间
}

const SignalBar: React.FC<SignalBarProps> = ({ level }) => {
  const maxLevel = 5;
  const signalLevel = Math.round(level * maxLevel); // 现在signalLevel是0到4之间的整数
  const signalBars = [];

  for (let i = 0; i < maxLevel; i++) {
    signalBars.push(
      <div
        key={i}
        className={`signal-bar ${i < signalLevel ? 'active' : ''}`}
        style={{
          marginLeft: i > 0 ? '2px' : undefined,
          height: `${8 + i * 2}px`, // 使每个条更高一些
          // 定义更多样式...
        }}
      />,
    );
  }

  return <div className="signal-container">{signalBars}</div>;
};

export const MatchPage = (props: any) => {
  const { record, single = true, closeDrawer, switchBatchHandle } = props;
  const [matchItemInfo, set_matchItemInfo] = useState<undefined | any>(
    undefined,
  );
  const [allNeedMatchList, set_allNeedMatchList] = useState<any[]>([]);
  const [allStandItem, set_allStandItem] = useState<any[]>([]);
  const [matchStandItem, set_matchStandItem] = useState<any[]>([]);
  const [dataSource, set_dataSource] = useState<any[]>([]);
  const [chargeItemTabledataSource, set_chargeItemTabledataSource] = useState<
    any[]
  >([]);
  const [searchText, setSearchText] = useState('');
  const [chargeItemSearchText, setChargeItemSearchText] = useState('');
  const [countInfo, set_countInfo] = useState<undefined | any>(undefined);
  const [currentTablePage, set_currentTablePage] = useState(1);
  const [openTable, set_openTable] = useState(false);
  const [isProgressModalVisible, set_isProgressModalVisible] = useState(false);
  const [loading, set_loading] = useState(true);

  const leftTableColumns = [
    {
      title: '标准项目编码',
      dataIndex: 'code',
    },
    {
      title: '标准项目名称',
      dataIndex: 'name',
    },
    {
      title: '康程分类',
      dataIndex: 'kcClassName',
    },
    {
      title: '操作',
      key: 'option',
      width: 80,
      valueType: 'option',
      render: (_: any, data: any) => {
        const { code } = data;
        return code != matchItemInfo?.standItemCode
          ? [
              <span
                key="btn"
                onClick={() => matchRequestHandle(data, 1)}
                style={{
                  display: 'inline-block',
                  width: 56,
                  height: 24,
                  cursor: 'pointer',
                  backgroundColor: '#FAFCFF',
                  borderRadius: 4,
                  border: '1px solid #DAE2F2',
                  textAlign: 'center',
                  color: '#17181A',
                }}
              >
                匹配
              </span>,
            ]
          : [
              <span
                key="btn"
                style={{ fontWeight: 500, fontSize: 14, color: '#00BF8F' }}
              >
                当前匹配
              </span>,
            ];
      },
    },
  ];

  const chargeTableColumns: ProColumns[] = [
    {
      title: '编号',
      width: 80,
      dataIndex: 'id',
    },
    {
      title: '收费项目编码',
      dataIndex: 'code',
    },
    {
      title: '收费项目名称',
      dataIndex: 'name',
    },
    {
      title: '状态',
      dataIndex: 'match',
      width: 90,
      renderText(bool, record, index, action) {
        return (
          <>
            {bool ? (
              <span style={{ fontSize: 14, color: '#17181A' }}>已匹配</span>
            ) : (
              <span style={{ fontSize: 14, color: '#FF8C19' }}>待匹配</span>
            )}
            {matchItemInfo?.code == record.code && (
              <IconFont
                style={{
                  color: '#3377FF',
                  display: 'inline-block',
                  marginLeft: 16,
                }}
                type="iconqueren"
              />
            )}
          </>
        );
      },
    },
  ];

  const getMatchInfo = async () => {
    const { code } = record;
    const resp = await getSingleItem(code, record.departmentCode);
    if (resp) {
      set_matchItemInfo(resp);
    }
  };

  const getNeedMatchList = async () => {
    const resp = await getAllNeedMatchItems();
    if (resp) {
      set_allNeedMatchList(resp);
    }
  };

  const getReferralMatchHandle = async () => {
    set_loading(true);
    const { code, departmentCode } = matchItemInfo;
    const resp = await getReferralMatch(
      code,
      single ? record.departmentCode : departmentCode,
    );
    if (resp) {
      const { allStandItem: all = [], matchStandItem: match = [] } = resp;
      const temp = [...all];
      const index = temp.findIndex(
        (item: any) => item.code == matchItemInfo.standItemCode,
      );
      if (index !== -1) {
        // 如果找到了符合条件的项，先将其从数组中移除
        const [item] = temp.splice(index, 1);
        // 然后将其添加到数组的开头
        temp.unshift(item);
      }
      set_allStandItem([...temp]);

      set_matchStandItem(
        match
          ? Array.from(new Map(match.map((a: any) => [a.code, a])).values())
          : [],
      );
      set_dataSource([...all]);
      set_loading(false);
    }
  };

  const switchNeddMatchItem = async (flag: number) => {
    const currentIndex = allNeedMatchList.findIndex(
      (a) => a.code == matchItemInfo.code,
    );

    if (currentIndex == allNeedMatchList.length - 1 && flag > 0) {
      message.info('已经是最后一项！');
      return;
    }
    if (currentIndex == 0 && flag < 0) {
      message.info('没有上一项！');
      return;
    }

    let next = undefined;

    if (flag > 0) {
      for (const item of [...allNeedMatchList].splice(
        currentIndex + 1,
        allNeedMatchList.length,
      )) {
        if (!item.match) {
          next = item;
          break; // 满足条件后退出循环
        }
      }
    }
    if (flag < 0) {
      for (const item of [...allNeedMatchList]
        .splice(0, currentIndex)
        .reverse()) {
        if (!item.match) {
          next = item;
          break; // 满足条件后退出循环
        }
      }
    }

    // console.log({switchNeddMatchItem,currentIndex,next});

    if (next) {
      set_matchItemInfo(next);
    } else {
      message.info('未找到未匹配项！');
      getMatchInfo();
      getNeedMatchList();
    }
  };

  const matchRequestHandle = async (data: any, type: number) => {
    try {
      const { code: itemCode, departmentCode } = matchItemInfo;
      const { code: standItemCode } = data;
      const resp = await matchRequest(
        itemCode,
        standItemCode,
        type,
        departmentCode,
      );
      if (resp) {
        if (!single) {
          switchNeddMatchItem(1);
          getNeedMatchList();
        } else {
          getMatchInfo();
          getNeedMatchList();
        }
      }
    } catch (error) {
      console.log('matchRequestHandle_error', error);
    }
  };

  const getRightsInfo = async () => {
    const resp = await getMatchCount();
    if (resp) {
      set_countInfo(resp);
    }
  };

  const openTableHandle = (bool: boolean) => {
    if (bool) {
      const currentIndex = allNeedMatchList.findIndex(
        (a) => a.code == matchItemInfo.code,
      );
      set_currentTablePage(Math.ceil((currentIndex + 1) / 10));
      set_chargeItemTabledataSource([...allNeedMatchList]);
    }
    set_openTable(bool);
  };

  const startBatchCalc = async () => {
    set_isProgressModalVisible(true);
    const resp = await mapItemAndStandItem();
    if (resp) {
      set_isProgressModalVisible(false);
    }
  };

  const mapBtnHandle = async () => {
    Modal.confirm({
      title: '注意',
      content: '对照操作只会自动匹配未对照的项目，是否继续操作？',
      okText: '确定',
      cancelText: '取消',
      onOk: (...args) => {
        startBatchCalc();
      },
    });
  };

  const goMatch = () => {
    getReferralMatchHandle();
  };

  useEffect(() => {
    if (matchItemInfo) {
      getReferralMatchHandle();
      getRightsInfo();
    }
  }, [matchItemInfo]);

  useEffect(() => {
    const filteredData = allStandItem.filter((item) => {
      return item.code.includes(searchText) || item.name.includes(searchText);
    });
    set_dataSource(filteredData);
  }, [searchText, allStandItem]);

  useEffect(() => {
    const filteredData = allNeedMatchList.filter((item) => {
      return (
        item.code.includes(chargeItemSearchText) ||
        item.name.includes(chargeItemSearchText)
      );
    });
    set_chargeItemTabledataSource(filteredData);
  }, [chargeItemSearchText]);

  useEffect(() => {
    if (!single) getRightsInfo();
  }, [single]);

  useEffect(() => {
    if (record) {
      getMatchInfo();
      getNeedMatchList();
    }
  }, [record]);

  return (
    <div className="matchPage">
      <ProgressModal
        title="正在匹配"
        type={'ITEM_BATCH_MATCH'}
        onComplete={() => {
          getMatchInfo();
          getNeedMatchList();
        }}
        visible={isProgressModalVisible}
      />
      {single && (
        <div className="header">
          <div className="title">{record ? record.standItemName : '项目'}</div>
          <div className="btnGroup">
            <IconFont
              onClick={() => {
                closeDrawer();
              }}
              type="iconquxiao"
              style={{
                color: '#17181A',
                marginRight: 8,
                cursor: 'pointer',
                fontSize: 21,
              }}
            />
          </div>
        </div>
      )}
      <div className="content" style={{ padding: single ? 16 : 0 }}>
        <div className="left">
          <div className="leftRowOne">
            {!single && (
              <div className="leftRowOneHeader">
                <div className="menu">
                  <IconFont
                    type="iconliebiao"
                    style={{
                      color: '#17181A',
                      marginRight: 8,
                      cursor: 'pointer',
                    }}
                    onClick={() => openTableHandle(!openTable)}
                  />
                  当前项目：{matchItemInfo?.id}
                </div>
                <div className="btnGroup">
                  <div
                    className="backPrev btns"
                    onClick={() => {
                      switchBatchHandle && switchBatchHandle(false);
                    }}
                  >
                    返回上一层
                  </div>
                  <div className="line"></div>
                  <div
                    className="prev btns"
                    onClick={() => switchNeddMatchItem(-1)}
                  >
                    上一项
                  </div>
                  <div
                    className="next btns"
                    onClick={() => switchNeddMatchItem(1)}
                  >
                    下一项
                  </div>
                </div>
                {openTable && (
                  <div className="floatTable" style={{ width: 432 }}>
                    <div style={{ marginBottom: 12 }}>
                      <div style={{ marginBottom: 12 }}>
                        <ProFormText
                          noStyle
                          placeholder={'收费项目编码、名称'}
                          fieldProps={{
                            // value: keyword,
                            suffix: (
                              <IconFont
                                style={{ color: '#99A6BF' }}
                                type="iconsousuo"
                              />
                            ),
                            onChange: (e) => {
                              if (e.target.value.length != 0) {
                                setChargeItemSearchText(e.target.value);
                              } else {
                                setChargeItemSearchText('');
                              }
                            },
                          }}
                        />
                      </div>

                      <KCIMTable
                        columns={chargeTableColumns}
                        options={{
                          density: true,
                          setting: {
                            listsHeight: 100,
                          },
                        }}
                        dataSource={[...chargeItemTabledataSource]}
                        rowKey={'id'}
                        onRow={(record) => {
                          return {
                            onClick: () => {
                              set_matchItemInfo(record);
                              set_openTable(false);
                            },
                          };
                        }}
                        tableAlertRender={false}
                        rowClassName={(record) =>
                          record.code == matchItemInfo.code ? 'match' : ''
                        }
                        pagination={{
                          showTitle: false,
                          showSizeChanger: true,
                          simple: true,
                          defaultPageSize: 10,
                          defaultCurrent: currentTablePage,
                        }}
                      />
                    </div>
                  </div>
                )}
              </div>
            )}

            <div className="leftRowOneContent">
              <div className="blocks">
                <div className="value">{matchItemInfo?.code}</div>
                <div className="label">项目编码</div>
              </div>
              <div className="blocks">
                <div className="value">{matchItemInfo?.name}</div>
                <div className="label">项目名称</div>
              </div>
              <div className="blocks">
                <div className="value">{matchItemInfo?.type}</div>
                <div className="label">项目类别</div>
              </div>
              <div className="blocks">
                <div className="value">
                  {matchItemInfo?.match ? '已匹配' : '未匹配'}
                </div>
                <div className="label">匹配状态</div>
              </div>
            </div>
          </div>

          <div className="leftTable">
            <div className="leftTableTitle">手动匹配</div>
            <div style={{ marginBottom: 12 }}>
              <ProFormText
                noStyle
                placeholder={'标准项目编码、名称'}
                fieldProps={{
                  // value: keyword,
                  suffix: (
                    <IconFont style={{ color: '#99A6BF' }} type="iconsousuo" />
                  ),
                  onChange: (e) => {
                    if (e.target.value.length != 0) {
                      setSearchText(e.target.value);
                    } else {
                      setSearchText('');
                    }
                  },
                }}
              />
            </div>
            <KCIMTable
              columns={leftTableColumns}
              options={{
                density: true,
                setting: {
                  listsHeight: 100,
                },
              }}
              loading={loading}
              dataSource={[...dataSource]}
              rowKey={'id'}
              tableAlertRender={false}
              pagination={{
                showTitle: false,
                showSizeChanger: true,
                simple: true,
                defaultPageSize: 12,
              }}
            />
          </div>
        </div>
        <div className="right">
          {!single && (
            <div className="rightRowOne">
              <div className="processCycle">
                <Progress
                  type="circle"
                  format={(percent) => (
                    <span
                      style={{ color: '52c41a !important' }}
                    >{`${percent}%`}</span>
                  )}
                  percent={
                    countInfo
                      ? Math.floor(
                          (countInfo.trueMatch / countInfo.allCount) * 100,
                        )
                      : 0
                  }
                  width={64}
                />
                <div className="processInfo">
                  <div className="total">
                    全部项目：{countInfo ? countInfo.allCount : 0}
                  </div>
                  <div className="subInfo">
                    <span>
                      已匹配：<a>{countInfo ? countInfo.trueMatch : 0}</a>
                    </span>{' '}
                    <span>
                      待匹配：<a>{countInfo ? countInfo.falseMatch : 0}</a>
                    </span>
                  </div>
                </div>
              </div>
              <div className="btn" onClick={() => mapBtnHandle()}>
                <IconFont
                  style={{ color: '#fff', fontSize: 14, marginRight: 4 }}
                  type="iconshuoming"
                />
                智能匹配
                <div className="description">
                  <img
                    src={require('../../../../../../static/tanhao.png')}
                    alt=""
                    style={{ width: 16, height: 16, marginRight: 4 }}
                  />
                  <div className="detail">
                    <div className="detailTitle">匹配规则</div>
                    <div className="detailContent">
                      1、逐个匹配未匹配的项目，已匹配的项目会自动跳过
                      <br />
                      2、与标准项目国家编码精准匹配的项目状态设置成已匹配
                      <br />
                      3、未精准匹配的项目会通过智能匹配算法形成推荐项，需用户逐个选择匹配项
                    </div>
                  </div>
                </div>
              </div>
            </div>
          )}

          <div className="rightContent">
            <div className="rightContentHeader">
              <span className="title">推荐匹配</span>
              <span className="btn" onClick={() => switchNeddMatchItem(1)}>
                <IconFont
                  style={{ color: '#3376FE', paddingRight: 4 }}
                  type="iconshuangyou"
                />
                跳过该项
              </span>
            </div>
            <div className="content">
              {loading && <Skeleton active />}
              {!loading &&
                matchStandItem.map((item, index) => {
                  const { code } = item;
                  return (
                    <div className="list" key={index}>
                      <div className="leftDetail">
                        <div className="rowOne">
                          <div className="title">{item.name}</div>
                          <div className="Signal">
                            <SignalBar
                              level={item.percent ? item.percent : 0}
                            />
                            {item.percentDisplay}
                          </div>
                        </div>
                        <div className="rowTwo">
                          <div className="code">普通门诊诊察费</div>
                          <div className="type">
                            康程分类：诊察费/西医诊察费
                          </div>
                        </div>
                      </div>
                      {code != matchItemInfo?.standItemCode ? (
                        <div
                          className="btn"
                          onClick={() => matchRequestHandle(item, 2)}
                        >
                          匹配
                        </div>
                      ) : (
                        <div className="btnText">当前匹配</div>
                      )}
                    </div>
                  );
                })}
              {!loading && matchStandItem.length == 0 && (
                <div className="empty">
                  <img
                    src={require('../../../../../../static/empty.png')}
                    alt=""
                  />
                  <div className="title">暂无推荐项目</div>
                  <div className="titleSub">
                    当前暂无推荐匹配项目，您可尝试进行对照或
                  </div>
                  <a className="btn" onClick={() => goMatch()}>
                    去匹配
                  </a>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
