import * as React from 'react';
import styled from 'styled-components';
import {
  rem,
  zIndex
} from '../../style/function.style';
import {
  imgResize
} from '../../utils/imgResize';
import { formatAvatar, formatNumber } from '../../utils/format';
import { isNumber } from '../../utils/detect';
import {
  PostErrorTip,
  skeletonOneLine,
  skeletonTwoLine,
  skeletonImage,
  mode
} from '../index.style';
import { PostCardConfig, AllDetail } from '../type';
import { formatDescription } from './utils';
import { LofterPostTags } from './Tags';

export const Container = styled.div`
  width: ${rem(339)};
  position: relative;
  font-size: 0;
  &:nth-child(2n+1) {
    margin-right:${rem(26)}
 };
`

export const Header = styled.div`
  position: relative;
  width: 100%;
  height: ${rem(323)};
  border-radius: ${rem(24)};
  margin-top: ${rem(25)};
  margin-right: ${rem(26)};
  .header-img {
    background: #F5F5F5;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 3;
    border-radius: ${rem(24)};
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
`
export const Image = styled.img`
   width:${rem(339)}
   height:${rem(323)};
   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 HeaderCommon = styled.span`
  display: -webkit-inline-box;
  padding: ${rem(3)} ${rem(12)};
  background: rgba(0, 0, 0, 0.3);
  border-radius: ${rem(20)};
  position: absolute;
  font-weight: 500;
  color: #FFFFFF;
  font-size: ${rem(24)};
  line-height: ${rem(34)};
  z-index: 4;
  max-width: ${rem(280)};
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
`
// @ts-ignore
export const HeaderTag = styled(HeaderCommon)`
  left: ${rem(12)};
  top: ${rem(12)};
`

// @ts-ignore
export const HeaderView = styled(HeaderCommon)`
  left: ${rem(16)};
  bottom: ${rem(12)};
`

// @ts-ignore
export const HeaderPost = styled(HeaderCommon)`
  right: ${rem(12)};
  bottom: ${rem(12)};
`

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


export const Description = styled.div<{ skeleton?: boolean }>`
  margin-top: ${rem(12)};
  margin-bottom: ${rem(6)};
  font-size: ${rem(24)};
  line-height: ${rem(34)};
  color: #b3b3b3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  ${({ skeleton }) => (
    skeleton ? skeletonOneLine : ''
  )}
`;

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

export const UserInfo = styled.div`
  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 LoadingCol = styled.div`
  height: ${rem(533)};
  .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)};
    }
  }
`
export const Author = styled.div`
  line-height: ${rem(40)};
  display: flex;
  align-items: center;
  margin-top: ${rem(16)};
`

export const AuthorAvatar = styled.div<{ skeleton?: boolean, isAuth?: boolean, avatarBoxImage?: string }>`
  width: ${rem(40)};
  height: ${rem(40)};
  border-radius: 100%;
  margin-right: ${rem(16)};
  background-size: 100% auto;
  background-color:${mode === 'light' ? '#ffffff' : '#151515'};
  position: relative;
  border: ${rem(1)} solid rgba(0, 0, 0, 0.1);
  ${({ skeleton }) => (
    skeleton ? skeletonImage : ''
  )}
  ${({ isAuth }) => (
    isAuth ? `
      &::after{
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 2;
        width: ${rem(16)};
        height: ${rem(16)};
        background: url(${mode === 'light' ? AUTH_ICON : AUTH_ICON_DARK}) no-repeat;
        background-size: 100% auto;
      }
    ` : ''
  )}
`

export const AuthorName = styled.div<{ skeleton?: boolean }>`
  font-size: ${rem(24)};
  line-height: ${rem(30)};
  width: ${rem(283)};
  color: #b3b3b3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align:middle;
  ${({ skeleton }) => (
    skeleton ? `
      width: 30%;
      ${skeletonOneLine}
    ` : ''
  )}
  .nw-dark-mode &{
    color: #888;
  }
`;

export const Title = styled.div<{ skeleton?: boolean, singleLine?: boolean, isCocreate?: boolean }>`
  font-size: ${rem(30)};
  line-height: ${rem(42)};
  font-weight: 500;
  color: #2e2e2e;
  ${({ singleLine }) => (
    singleLine ? `
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    ` : `
      max-height: ${rem(80)};
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    `
  )}
  ${({ skeleton, singleLine }) => (
    skeleton ? `
      width: 60%;
      ${singleLine ? skeletonOneLine : skeletonTwoLine}
      ${singleLine ? `height: ${rem(42)}` : `height: ${rem(80)}`}
    ` : ''
  )}
  ${({ isCocreate }) => (
    isCocreate ? `
      width: ${rem(470)};
      position: relative;
      &::after{
        content: '共创';
        position: absolute;
        right: 0;
        top: ${rem(4)};
        width: ${rem(52)};
        line-height: ${rem(28)};
        height: ${rem(28)};
        font-size: ${rem(20)};
        color: #8f8f8f;
        text-align: center;
        border: 1px solid #B3B3B3;
        border-radius: ${rem(8)};
      }
    ` : ''
  )}
  .nw-dark-mode &{
    color: #ccc;
  }
`;
export const Tips = styled.div`
  height: ${rem(40)};
  position: absolute;
  color: red;
  top: ${rem(30)};
  left: ${rem(30)};
  border: 1px solid red;
  display: inline-block;
  padding: ${rem(2)};
  font-size: ${rem(24)};
  z-index: 4;
}`
// 推荐模块icon
export const REC_ICON = 'data:image/png;base64,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';
// 推荐模块icon-深色
export const REC_ICON_DARK = 'data:image/png;base64,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';
// 加v用户icon
export const AUTH_ICON = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAO7SURBVHgBzZhBTBNBFIZfaY0YoS0kkEDSpiWBqEGtIfFgL+WoF69yMXDiZMCDvXhAE054AKMXvLTxAke5yBEumGhCbKRqoomtbUINRFtqEYyY9b1lp5mdndldaDX+ycvQt7sz3755b3YGgP9IHjimNE2LYJNAu4gW5C5V0D6jZTwezyr8LSFAEG0Kray5E92XQktAs2RApLTGlEOLQSPCDiY095Fwo1m0oGwsjwPILDaTsmvVgwPY2P0O2R81yNZqdX/A54W4vwMG29ohdLJV1XUebRhzKu8KBkFS2IyK/uxuDRa3NmFhq6QD2Ske6IAb3T26uQHyKECmsLnH+2jgmWIO5jcLcFRRhJbOD8kilUe7hEAVKQyCjGKT4n3Fn/twfWNdb4+rgM8H09EBWZRWEWbYAqMdrh0raJFmgvB61H9OBnQbgeZEGFOe0NQkMi+bBsK0ErsMg6fbeRdNU7SFA4mAkLCUI80GId18/wZ2zMlPpT7Zwjmm+KsEISar33fCrlwtUt1LfT/ZLIruifo00QoJXK7c+vgOS7hUh0iGIjDS3Yt/+/TO7uY+wPLXbQXEKcyNs3ppk6ifmQJFea9+DyX0+lBcb5laDJAYD0IhZCD6g14vjPeGdRD2xk/PXBDnva7HmKQMhEQJ6+cGZWOsVcsmH5umCO/M4srKiyLBwzFNR/stPoK4EjCv9ms7ZXgr9EkSI8tgYuLDomYKnxQDd5h8yVCf5T7Zi8jGkUZGVkF60pUsSYd51CPABS3PqWCqvw+kMK5E0RFKUs8HSliSLCqyiDKJfR0Jhh6WlCQmd0gaFZJsylViMBXe6ff6lA/MlwrS6MiSmabHbtEUq5HB5E03tbUpO5BFh9YKWZnbTREp3Noqhcnwzmud3WAnWXREOUWFdLWzSwlTnyp6U7Fkealyh9eCooJ4xYUxdBhjc7PEX0iGorYd2UWHIvLCIXEPq9A0TRW+mtIgUDtF50FRnhO0/3FSMmxZBp6J+xnaWCXYb3rD4cwrHPgXqERvSKUdwI9pYX8PAXOO5Uzr0Z2wJfJRESYBhzu9uigR6QveLI33hGC6b0B0pzFVxkyLnnEcfcj76M1pq9gM6euRFSSPdl8fX7xiHLBeg+VLXtN3aPyexK3Yfoi2IRLR6SAjhTGAIiBszJloIVvc+uIaigqBIqvY9Y0hSJr9sDvERVRApOe4F1n+tq1HrICJXjWSnAal0yRBjHRZN1UqEEcREFpaa65yWiP/AKCDndFJo5rTFIf+fwVVNiAiTv3/AexOSZI5pM39AAAAAElFTkSuQmCC';
// 加v用户icon-深色
export const AUTH_ICON_DARK = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAjCAYAAAAe2bNZAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAASaSURBVHgBzVjNbxtFFH92bOPYgjglJh9KxLbUiu0g4QgiFQqSI8gBEFJzoIJT4gOCA1LyHyT5C9IcOdk5c6gRSCC1UouEIIhW3UsdN1GSjZBCRdJ4Q+rYkb94b2pvZ3dn1x/JoT9ptPab8Zvfvo+Z9wzwAsEBHSIcDkv4iDscjrdqtVpAU+hwqPjYRZmczWbvQhtoi4wkSQGfzzeHH+d5ApbKnxFLV6vV1VaItUSmTmIZCcxC51DK5fL05uambLWgC5ogEonMeTyeNBK5AmdDwOl0ftPf3x/w+/1/qqpaNC5wNCGyjI950VzV64XC0AAUcZwODWryrkIBfFsKeP95DO6caqVawZebRNcpLZGJRqNJkVto86O3Y6C+M84I2cG3rUDPvQcQuC+3REhIBjNlAYNvkZfRxvtTk3D4fvveIgu9/l1SZCmlUCiMK4rCJroERGaRyA1eVuoNgPLtV5AfvQydoNrtRWuOg+s4z9zHIeB2u68cHBysmsjQ2YFEkrSIJ7L7dYI9z4Ka2wXHY2Hw5I6MhKRgMHiEhNacvBSjfYEmtTdC15wHER57169BcXDAKF6g40OzTP1ETfEr/v14qmPX2CE/GoLAPRkc5XJD5MXj41SzTN0qGsgaxmBFB4Pk80OrsFpLup98oNeNmTXn5L7E+cn9qbiOxPKbMdj58FMcn7BxbWAILEl0++HOe3G2rvbZ55CMTTAZj9zVd41HQ4CRCYVCMeBipVKP/udkPDB/McRINd745sRViL0ijqXk+ATEXw1q32dHJO23/B5P35B0MkbG5XLppKeGAFNO8rD6twJGkLWMIBI8EcLdJ/sg/2c+jZ9GI2Yy6CKd1vwlyfTDxY1MSxsvjI6Z1olehHAisgxwLiKIUpmss7K9YZLPjEi25JRCHlIWZIzXiRPaAFlHLZd0MoqHRnCKrLL0KGOpj+KmYzJqqQQrW2brzF+6LLQKgeKlVTAy9YpMQ1exaPmDGzubJuvMjFwUBjO5h9xrhZf014JmGUW3aO+xpQKRdShtRWm+tGHtIoLnMGcmQ8UzL3w5k7VVIrKOEc2swvZ5mDWT8Xq9Mu+qrkKRFUZWsIodHlbpzMO4ByMjy7KKFfwP/ETw1h1bRXbWoXRuFrg9eFEaii2Vz6YUGFg3s87So4fCucnff4VmCN7WvyyGSlorIbC4Ufr6+qgpkxoyP5KhWrfmcgkVruUOYbdwwu6qYqXKjvyE/Jfw6OfRh0SM8YKY1tXAWNMQGR1lKr73rk/DeeHCb39A/4+/6GRolRQW5gld2UnWwRKwFz9qxQaViB707fFYBM6KnvsPYPDmT0axgiOBe6umgnx4eHitUql8AVwdTIQo3alCq3bbtyciOPEQfe3nWzhum+bQE5Pr6+vMZ1atilR3l2ScO/gozuKo1brYt7UDQ9+nhQ0duieB7klpxKyU2BEiUKV/HA2zpq50oVe7gWlTOsH92zusznVaXC1GIrZkGoTwsYikZuD8oKC+6UwmY2ozbRt/CiocaUz5XVRAN+FZe5YV7CC/xH8iFNFkW//P1LtNXW/VDHTNYEKsUpdqbPSN+B85q/zYBLrYzAAAAABJRU5ErkJggg==';
// 视频icon
export const VIDEO_ICON = 'data:image/png;base64,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';
// 合集icon
export const COLLECTION_ICON = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAwCAYAAABuZUjcAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAMKSURBVHgB7VhLjtpAEC0+YgWIFds4OxaAfINwgyEnGM8JkpwgyQky3ACfIMwNnBtYgBC79GxZjcSO71RZ3Yw/2O622/OR/KQe24wMr7ur6r0ugBKviwoUAMMwOq1Wa1ypVIzz+exut1uHMfYEGqGVeL/fHyHZnzhMfOz4/vWEE5jhsJfLpQMakJs4J3uDw4Ig2TgwnIBzPB4nq9XKhYzIRJxCod1uf8Nbix4hO1ycxGS/3zvr9ZqpvChNnJO18IdodUegGbQLeLExH2Yy+ZBInMg2m00zJm6LglQ+XCWeIW6LQmw+XIhrjNui4OXDYrGY0sOF+GAw+IsrPIZ3DgojJP+1Kj74CKQJPNfgQpxn9UfAA/2piafNZmN3u91HvO2QVMM7A1/YHxgm9/R8taqYpmmcTicKHUpWA94IRBYX8V+1Wr13XTdQ21MFiEojvmjh7Rd4nUkQwQkunKNcx+OAlWfMk/gW9ELZhGXyKhRKKAojvL3NI/9C5mu12iwcCmnI7Q5V8yEpblUQS1yYqsPh4Mjaz4R8kIrb8HdRdYtzjpUwWTq5QDQElO2n+GF8j8mSjbMdFP94sbEUziLEh8MhJRzVyERTpWo/JcnK2mWGu3ZHC+En/h/Uyl2u41jCMS8NbD6ff677PlC1r6SwFg2ctNRxTJNd9nbZ7w6pRv+B/CITyIder2c0Gg0KQ0vHd2Py32E1ciNVxVcZbuBtDxECtMI2xvbMH5KJdRx3wYKcIpMRlD+0c7/r9bp7rd5LCZBQSpwAlSoTCgIXpwfc8WmaOCkrJ1fKX6DPdDEc9m63m6q0KHJJfo58uBq3KtDWgpPIh9S4VUFqe0IopV9ukxByjp7ky8YtIWQ7DB3tCU9kdDYu/ZAQJy3tCYZjigllq/b8wmRxJyjJv4Nkjoj2hN+rnCEDRCjJOkcNPcigV+E1dASK4O+MUNZp1yL2U5AN22W8QkZ47YnA2xqVkvGFeMTrJx6CuewD39mJWJSyPaERZXsigrI9UUR7Igt0tifSoJW4H1naEyVKlHjBM5t8WWbMItipAAAAAElFTkSuQmCC';
// 合集icon-深色
export const COLLECTION_ICON_DARK = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAwCAYAAABuZUjcAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAALzSURBVHgB7VnZceJAEG3ObzJYbQZQHFV8mY3AOAJDBHYGuxvBmgxQBCtnMPvFB1CQwbIZ8E1x7GuM8CB0zIxGPqr0qqZkyaXR61YfTw1RjrdFgTLAYrGo7ff7PpZTKBSWpVJJNBqNNVmEVeLT6bQHot/xZx2rJv1rjeseDHHb7bYgC0hNnMkWi8Xbw+EwoEuyUVjBCLHb7UadTmdJhjAifgqFhxNZh8yxxD4jGCG63e5K50Zl4kx2u90O4K1bnPbIPgSHUqVS8VTyIZb4iWw9Im6zglI+hBI3iNusEJkPZ+IW4zYrHPMBBoz55Ex8Npv9xqFPHx9eq9W6K0oXPgNpQuhwrpFMXNAnAEL5mY9n4nD/N1gzpI9rgMC6A89HPgmtKpPJxCmXy30Y8kDvm6gCHv4DLk/B2p7YgLg0cqVBebyhtzFijeeNcBTadTwKqDys+Pow4p7sQluEGWkVDqVqtcpvgg3okTkECLtwhKcre1OrQ4N8iIxbHUQS90UVHiJU5WdMPijFbcheTpRyLATJcgyHhIC2/DzpHQf3rVTJxsgOD8tFKfSuiCPxmOwTJYsqLfmpQlZDLq9g1JAdIRP/S3rlLtXnWMxnXixwz6rZbH4tS9d05WuNXyk2GsBopc8xG3IZ9x7fsuxxFlm/KH2TuciHU+m8tySXee8hO+eqqkiVgWPuPT8ifLCHXXDy5JCMrePz+XxgocmYgMku8eyfqPfLsCKg1ICkTslNpk7ZgZvTM8iOkyqWdudkIzCZ+mFRdHGJc1ESxzojilQtP0U+hMatDqyN4BTyITFudaAynhAUaLdxCChHh15CQSluGQHZ4dgYTxybjM3BpQyF5mRlPMFGjDebjas78wshewOyj6SeI8fxhEz8QGY4vgVV5Zh2BhmmVQSZNRr2Gi82/kp++mT9uIWBLK7IFP544mIHi53Sz4d/MOgL9uQQTCsfBNbId0o+nrCIfDxxhXw8kcV4wgQ2xxNJyOQHWobJeCJHjhyv+A/EDH8qi10zxAAAAABJRU5ErkJggg==';
// 推集icon
export const PUSH_ICON = 'data:image/png;base64,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'


export const CollectionIcon = styled.div`
  display: inline-block;
  width: ${rem(23)};
  height: ${rem(24)};
  background: url(${COLLECTION_ICON}) center center no-repeat;
  background-size: 100% auto;
  margin-right: ${rem(8)};
  .nw-dark-mode &{
    background-image: url(${COLLECTION_ICON_DARK});
  }
`
export const PushIcon = styled.div`
display: inline-block;
width: ${rem(52)};
height: ${rem(32)};
background: url(${PUSH_ICON}) center center no-repeat;
background-size: 100% auto;
margin-right: ${rem(8)};
vertical-align: text-bottom;
// .nw-dark-mode &{
//   background-image: url(${COLLECTION_ICON_DARK});
// }
`





export class LofterSelectedColCard extends React.Component<{
  postCardConfig: PostCardConfig,
  showCover?: boolean,
  post?: false | AllDetail,
  isEdit?: boolean | undefined,
}> {

  render() {
    const {
      post,
      postCardConfig,
      isEdit
    } = this.props;
    const {
      type,
      postId,
      cover,
      title,
      description,
      recommend,
      authorAvatar,
      authorName,
      authorDesc,
      data,
      link,
    } = postCardConfig;
    let isPushFolder, isCollection, isOther, cardName
    if (post) {
      isPushFolder = post?.classifyType === 4;
      isCollection = post?.classifyType === 2;
      isOther = post?.classifyType === 3;
      cardName = isCollection ? '合集' : '文章';
    }
    const skeleton = !post;

    const customCover = cover && cover.url;
    const resizedCover = imgResize(
      customCover || (post && post.firstImage && post.firstImage.orign) || '',
      339,
      323,
      1
    );
    const isAuth = post && post.blogInfo && post.blogInfo.isAuth;
    const resizedAvatar = formatAvatar((authorAvatar && authorAvatar.url) || (post && post.blogInfo?.bigAvaImg));
    // 	https://www.lofter.com/front/blog/collection-push/detail?folderId={收藏夹id}
    return (
      <>
        {post && (isEdit || post.blogInfo || isOther) &&
          <Container
            onClick={() => {
              if (link) {
                window.location.href = link;
              } else if (post) {
                window.location.href = post.postPageUrl;
              }
            }}
          >
            {/* 只有在编辑模式，且不是其他类型（需要接口请求），blogInfo是推集合集文章如果id存在相关信息的共同拥有的属性 */}
            {
              isEdit && post && (!post.blogInfo) && !isOther && <Tips>这个id没有相关信息呢</Tips>
            }
            {
              // 推集存在配置的时候,有信息，后来变成私有了之后没信息的情况
              post && (
                <>
                  <Header
                  >
                    <Image
                      width={323}
                      height={339}
                      src={resizedCover}
                      className='header-img'
                    />
                    <HeaderImageBorder />
                    {
                      post?.subscribedCount
                        ? (
                          <HeaderView>
                            {formatNumber(post?.subscribedCount)}订阅，
                            {formatNumber(post?.postCount)}篇
                          </HeaderView>
                        ) : null
                    }
                  </Header>
                  <InfoContainer>
                    <Title
                      skeleton={(!title) && skeleton}
                      singleLine={isCollection || isOther}
                      isCocreate={post && isCollection && post.collectionType === 1}
                    >
                      {isPushFolder && <PushIcon />}
                      {isCollection && <CollectionIcon />}
                      {/* {title || (post && formatDescription(post.title)) || (post && formatDescription(post.digest))} */}
                      <span dangerouslySetInnerHTML={{
                        __html: title
                          || (post && formatDescription(post.title))
                          || (post && formatDescription(post.digest))
                      }} />
                    </Title>
                    {
                      (isPushFolder || isCollection || isOther) && <Description skeleton={skeleton}>{description || (post && post.digest)}</Description>
                    }
                    {
                      isPushFolder && post.tags && post.tags.length && <LofterPostTags tagList={post.tags}></LofterPostTags>
                    }
                    <UserInfo
                    // onClick={() => {
                    //     //   goToUserPage(colDetail?.blogInfo?.blogName)
                    // }}
                    >
                      <Author>
                        <AuthorAvatar skeleton={skeleton} isAuth={isAuth} style={{ backgroundImage: `url(${resizedAvatar})` }} />
                        <AuthorName
                          skeleton={skeleton}
                        >{authorName || (post && post.blogInfo?.blogNickName)}&nbsp;&nbsp;{authorDesc}</AuthorName>
                      </Author>
                    </UserInfo>
                  </InfoContainer>
                </>
              )
            }
          </Container >
        }
      </>
    )
  }
}