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

export const Container = styled.div`
  width: ${rem(307)};
  display: inline-block;
  font-size: 0;
`

export const Header = styled.div`
  position: relative;
  width: 100%;
  height: ${rem(307)};
  border-radius: ${rem(24)};
  margin-top: ${rem(26)};
  .header-img {
    background: #F5F5F5;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 3;
    border-radius: ${rem(24)};
  }
`

export const HeaderImageBg = styled.div`
  background-color: #ffffff;
  border: 1px solid #EDEDED;
  border-radius: ${rem(24)};
  position: absolute;
  z-index: 2;
`
// @ts-ignore
export const HeaderImageBg1 = styled(HeaderImageBg)`
  width: ${rem(283)};
  height: ${rem(283)};
  top: ${rem(-14)};
  left: ${rem(12)};
`
// @ts-ignore

export const HeaderImageBg2 = styled(HeaderImageBg)`
  width: ${rem(259)};
  height: ${rem(259)};
  top: ${rem(-26)};
  left: ${rem(24)};
`

export const HeaderImageBorder = styled.div`
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  border-radius: ${rem(24)};
  border: 1px solid rgba(0, 0, 0, 0.1);
`

export const HeaderInfoContainer = styled.div`
  position: absolute;
  top: ${rem(12)};
  left: ${rem(12)};
  right: ${rem(12)};
  z-index: 4;
`

export const HeaderCommon = styled.span`
  display: inline-block;
  padding: ${rem(3)} ${rem(12)};
  background: rgba(0, 0, 0, 0.3);
  border-radius: ${rem(20)};
  font-weight: 500;
  color: #FFFFFF;
  font-size: ${rem(24)};
  line-height: ${rem(34)};
  max-width: 50%;
  box-sizing: border-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  flex: 0 1 auto;
  white-space: nowrap;
`
// @ts-ignore
export const HeaderTag = styled(HeaderCommon)`
  float: left;
`

// @ts-ignore
export const HeaderCount= styled(HeaderCommon)`
  float: right;
  .header-icon {
    width: ${rem(24)};
    height: ${rem(24)};
    margin-right: ${rem(2)};
  }
`

export const InfoContainer = styled.div`
  width: 100%;
  padding: ${rem(16)} ${rem(8)} ${rem(48)};
`

export const Title = styled.div`
  font-weight: 500;
  font-size: ${rem(28)};
  line-height: ${rem(40)};
  color: #2E2E2E;
  word-break: break-all;
  display: -webkit-box;
  // 超出截断
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
`

export const Description = styled.div`
  padding: ${rem(3)} ${rem(16)};
  background: #F5F5F5;
  border-radius: ${rem(20)} ${rem(20)} ${rem(20)} ${rem(4)};
  font-size: ${rem(24)};
  line-height: ${rem(34)};
  color: #B3B3B3;
  margin-top: ${rem(8)};
  display: -webkit-inline-box;
  max-width: 100%;
  // 超出截断
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
`

export const EmptyDescription = styled.div`
  height: ${rem(40)};
  margin-top: ${rem(8)};
`

export const UserInfo = styled.div`
  margin-top: ${rem(16)};
  display: flex;
  align-items: center;
  .avatar {
    width: ${rem(32)};
    height: ${rem(32)};
    margin-right: ${rem(8)};
    background: #F5F5F5;
    border-radius: 50%;
    flex: 0 0 auto;
  }
  .name {
    font-size: ${rem(22)};
    line-height: ${rem(31)};
    color: #B3B3B3;
    height: ${rem(32)};
    line-height: ${rem(32)};
    word-wrap: break-all;
    // 超出截断
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }
`

export const Button = styled.div<{
  type: 'me' | 'other'
}>`
  width: ${rem(291)};
  height: ${rem(64)};
  margin-top: ${rem(16)};
  background: ${props => props.type === 'me' ? '#F5F5F5' : '#14C4BC'};
  color: ${props => props.type === 'me' ? '#B3B3B3' : '#FFFFFF'};
  border-radius: ${rem(40)};
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: 500;
  font-size: ${rem(26)};
  line-height: ${rem(36)};
  &:active {
    opacity: .7;
  }
`

export const LoadingCol = styled.div`
  height: ${rem(589)};
  .tips {
    position: absolute;
    color: red;
    top: 0;
    left: 0;
    border: 1px solid red;
    display: inline-block;
    padding: ${rem(2)};
    font-size: ${rem(24)};
  }
  .img {
    display: inline-block;
    width: 100%;
    height: ${rem(307)};
    border-radius: ${rem(24)};
    background: #F5F5F5;
  }
  .title {
    width: 100%;
    height: ${rem(40)};
    margin-top: ${rem(16)};
    background: #F5F5F5;
    border-radius: ${rem(7)};
  }
  .desc {
    background: #F5F5F5;
    width: 100%;
    height: ${rem(40)};
    border-radius: ${rem(20)} ${rem(20)} ${rem(20)} ${rem(4)};
    margin-top: ${rem(8)};
  }
  .user {
    margin-top: ${rem(16)};
    display: flex;
    align-items: center;
    padding-bottom: ${rem(48)};
    .avatar {
      width: ${rem(32)};
      height: ${rem(32)};
      margin-right: ${rem(8)};
      background: #F5F5F5;
      border-radius: 50%;
      flex: 0 0 auto;
    }
    .name {
      width: 100%;
      height: ${rem(31)};
      background: #F5F5F5;
      border-radius: ${rem(7)};
    }
  }
`