import styled from 'styled-components';

export interface BoxProps {
  index: number;
  leftcontentstyle?: {
    width?: string;
    margin?: {
      top: number | string;
      right: number | string;
      bottom: number | string;
      left: number | string;
    };
  };
}

export const LeftBox = styled.div`
  box-sizing: border-box;
`;

export const Box = styled.div<BoxProps>`
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  width: ${(props) => (props.leftcontentstyle?.width ? props.leftcontentstyle?.width : '790px')};
  .item {
    // 每个元素都要设置右边距margin-right（每个元素的左右间隙）
    // 同时设置下边距margin-bottom（每个元素的上下间隙）
    /* margin: 0 24px 15px 0; */
    margin: ${(props) =>
      props.leftcontentstyle?.margin
        ? `${props.leftcontentstyle?.margin.top} ${props.leftcontentstyle?.margin.right} ${props.leftcontentstyle?.margin.bottom} ${props.leftcontentstyle?.margin.left}`
        : '0 24px 15px 0'};
    width: calc(
      (
          100% - ${(props) => props.index - 1} *
            ${(props) =>
              props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : '24px'}
        ) / ${(props) => props.index}
    );
    // 这里一行显示index个，所以是/index，一行显示几个就除以几
    // 这里的72px = (分布个数index-1)*间隙20px, 可以根据实际的分布个数和间隙区调整
    min-width: calc(
      (
          100% - ${(props) => props.index - 1} *
            ${(props) =>
              props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : '24px'}
        ) / ${(props) => props.index}
    );
    max-width: calc(
      (
          100% - ${(props) => props.index - 1} *
            ${(props) =>
              props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : '24px'}
        ) / ${(props) => props.index}
    );
    // 每行最右侧的那个不设置右外边距
    &:nth-child(${(props) => props.index}n + ${(props) => props.index}) {
      margin-right: 0;
    }
  }
`;

export const WaterfallBox = styled.div<BoxProps>`
  box-sizing: border-box;
  display: flex;
  width: ${(props) => (props.leftcontentstyle?.width ? props.leftcontentstyle?.width : '790px')};
  .item {
    // 每个元素都要设置右边距margin-right（每个元素的左右间隙）
    // 同时设置下边距margin-bottom（每个元素的上下间隙）
    /* margin: 0 24px 15px 0; */
    margin: ${(props) =>
      props.leftcontentstyle?.margin
        ? `${props.leftcontentstyle?.margin.top} ${props.leftcontentstyle?.margin.right} ${props.leftcontentstyle?.margin.bottom} ${props.leftcontentstyle?.margin.left}`
        : '0 24px 15px 0'};
    /* width: calc(( 100% - ${(props) => props.index} * ${(props) =>
      props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : '24px'}) / ${(
      props,
    ) => props.index});   
			// 这里一行显示index个，所以是/index，一行显示几个就除以几 
			// 这里的72px = (分布个数index-1)*间隙20px, 可以根据实际的分布个数和间隙区调整
			min-width: calc(( 100% - ${(props) => props.index} * ${(props) =>
      props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : '24px'}) / ${(
      props,
    ) => props.index});
			max-width: calc(( 100% - ${(props) => props.index} * ${(props) =>
      props.leftcontentstyle?.margin ? props.leftcontentstyle?.margin.right : '24px'}) / ${(
      props,
    ) => props.index}); */
  }
  .left-columns {
  }
  .right-columns {
    .item {
      margin-right: 0;
    }
  }
`;
