import styled from 'styled-components';
import {
  rem,
  zIndex
} from '../style/function.style';

export const Container = styled.div<{
  marginColor: string;
}>`
  position: relative;
// 编辑器样式
  & > .resize {
    z-index: 2;
  }
  &.list {
    background:${({ marginColor }) => marginColor ? marginColor : '#26279d'};
  }
`;

export const NavBox = styled.div<{
  tabHeight?: number
  tabColor?:string
}>`
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: ${rem(750)};
  height: ${({ tabHeight }) => tabHeight ? rem(tabHeight):rem(78)};
  margin: auto;
  background:${({ tabColor }) => tabColor?tabColor:'rgba(0,0,0,0)'};;
  border-radius:32px;
  z-index: 2;
`;
export const NavItems = styled.div<{marginLR:number,tabHeight:number}>`
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-sizing: border-box;

  &.type-1 {
    justify-content: center;
    height: ${rem(64)};
    margin: ${rem(12)} ${({ marginLR }) => rem(32 + marginLR)};
    padding: 0 ${rem(3)};
    border-radius: ${rem(32)};
    background-color: #ededed;
  }

  &.type-2 {
    justify-content: center;
    height: ${rem(88)};
  }

  &.type-3 {
    justify-content: center;
    height: ${rem(64)};
    margin: 0 ${({ marginLR }) => rem(32 + marginLR)};
    padding: 0 ${rem(3)};
    border-radius: ${rem(32)};
    background-color: #ededed;
  }
  &.type-4 {
    overflow-x: scroll;
    height: ${({ tabHeight }) => tabHeight ? rem(tabHeight) : 0};
    // 让Tab也支持内边距
    margin:0 ${({ marginLR }) => marginLR ? rem(marginLR) : 0};
    &::-webkit-scrollbar{
      display: none;
    }
  }
`;

export const NavBoxPlace =  styled.div<{
  tabHeight?: number
}>`
  height: ${({ tabHeight }) => tabHeight ? rem(tabHeight) : rem(88)};
`;

export const NavItem = styled.div<{
  focusImage?: string;
  unfocusImage?: string;
  tabWidth?: number;
  tabHeight:number
}>`
  flex: 1 1 auto;

  &.type-1 {
    height: ${rem(58)};
    font-size: ${rem(32)};
    line-height: ${rem(58)};
    border-radius: ${rem(29)};
    background: transparent;
    color: #1f1f1f;
    text-align: center;

    &.active {
      background: #fff;
    }
  }

  &.type-2 {
    position: relative;
    height: ${rem(88)};
    font-size: ${rem(34)};
    line-height: ${rem(88)};
    color: #b3b3b3;
    text-align: center;

    &.active {
      color: #2e2e2e;

      &::after {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        right: 0;
        bottom: ${rem(10)};
        margin: auto;
        width: ${rem(32)};
        height: ${rem(6)};
        border-radius: ${rem(3)};
        background: #14C4BC;
      }
    }
  }
  &.type-3 {
    height: ${rem(60)};
    font-size: ${rem(30)};
    line-height: ${rem(58)};
    border-radius: 32px;
    color: #1f1f1f;
    text-align: center;
    &.active {
      background: #fff;
    }
  }
  &.type-4{
    flex: 0 0 auto;
    height:100%;
  }
  img  {
    // 图片上传背景，给一个高度，不拉伸,cover,图像不会被压扁
    position: relative;
    height: 100%;
    // width:${({ tabWidth }) => tabWidth ? rem(tabWidth * 25) : 0};
    width:auto;
    // border-radius: ${rem(32)};
  }
`;

export const ContentItem = styled.div<{
  tabType: number;
  selected: boolean;
  isEdit: boolean;
}>`
  position: relative;
  min-height: ${rem(300)};
  display: ${({ tabType, selected, isEdit }) => (tabType === 2 && !selected && !isEdit ? 'none' : 'block')};
  overflow: hidden;
`;

export const ContentItemEditTip = styled.div`
  position: absolute;
  left: 0;
  top: 0;
  border: 1px solid #14C4BC;
  padding: ${rem(4)} ${rem(8)};
  color: #2e2e2e;
  z-index: 4;
  background: rgba(255, 255, 255, 0.4);
`;

export const ListMode = styled.div<{
  marginLR: number;
  backgrondColor?:string
}>`
   &.list{
    margin:0 ${({ marginLR }) => marginLR?rem(marginLR):0};
    border-radius: ${rem(32)};
    background:  ${({ backgrondColor }) => backgrondColor?backgrondColor:'#fff'};
   }
`;