import { Collapse, Form } from 'antd';
import _ from 'lodash';
import CustomTree from '../CustomTree';

const { Panel } = Collapse;
const BindDataItem = ({
  flagList,
  isAllowApply,
  disabledIds,
  isHaveDate,
  isHaveDay,
  isHaveCheckBox,
  activeKey,
  setActiveKey,
  selectMap,
  getSelectOptions,
  appId,
  customRender,
  checkInterceptor,
  isOtherUser,
  fixedIds,
}) => {
  return (
    <Collapse
      activeKey={activeKey}
      bordered={false}
      onChange={async (val) => {
        setActiveKey(val);
        // 把打开以后没有请求的key都查出来
        const diffArr = _.difference(val, _.keys(selectMap));
        if (diffArr.length > 0) {
          // 因为每次只能打开一个，所以只会出现一个key，所以直接取第一个
          getSelectOptions?.(parseInt(diffArr[0], 10));
        }
      }}
      defaultActiveKey={['1']}
    >
      {flagList?.map((item) => (
        <Panel
          style={{ display: !item.isAllowApply ? 'none' : '' }}
          key={item.id}
          collapsible={isAllowApply ? (!item.isAllowApply ? 'disabled' : undefined) : undefined}
          header={`${item.name}${item.uniqueKey ? `（${item.uniqueKey}）` : ''}`}
        >
          <Form.Item name={`data${item.id}`}>
            <CustomTree
              type={'option'}
              isAllowApply={isAllowApply}
              isHaveDate={isHaveDate}
              isHaveDay={isHaveDay}
              isHaveCheckBox={isHaveCheckBox}
              oldData={selectMap?.[item.id]}
              disabledIds={disabledIds}
              treeData={item.optionList}
              appId={appId}
              fixedIds={fixedIds}
              checkInterceptor={checkInterceptor}
              customRender={customRender}
              isOtherUser={isOtherUser}
            />
          </Form.Item>
        </Panel>
      ))}
    </Collapse>
  );
};
export default BindDataItem;