import Avatar from './avatar.jpg';

export default class LastMayday {
  palette() {
    return {
      width: '654rpx',
      height: '1000rpx',
      background: '#eee',
      borderRadius: '15px',
      views: [
        _textDecoration('overline', 0),
        _textDecoration('underline', 1),
        _textDecoration('line-through', 2),
        _textDecoration('overline underline line-through', 3, 'red'),
        {
          type: 'rect',
          css: {
            width: '200rpx',
            right: '20rpx',
            top: '30rpx',
            height: '100rpx',
            shadow: '10rpx 10rpx 5rpx #888888',
            color: 'linear-gradient(-135deg, #fedcba 0%, rgba(18, 52, 86, 1) 20%, #987 80%)',
          },
        },
        {
          id: 'my-text-id',
          type: 'text',
          text: "fontWeight: 'bold'",
          css: [
            {
              top: `${startTop + 4 * gapSize}rpx`,
              shadow: '10rpx 10rpx 5rpx #888888',
              fontWeight: 'bold',
            },
            common,
          ],
        },
        {
          type: 'rect',
          css: {
            width: '20rpx',
            height: '20rpx',
            color: 'red',
            left: [`${startTop}rpx`, 'my-text-id'],
            top: `${startTop + 4 * gapSize + 15}rpx`,
          },
        },
        {
          type: 'text',
          text: '我是把width设置为400rpx后，我就换行了xx行了',
          css: [
            {
              top: `${startTop + 5 * gapSize}rpx`,
              align: 'center',
              width: '400rpx',
              background: '#538e60',
              textAlign: 'center',
              padding: '10rpx',
            },
            common,
            {
              left: '300rpx',
            },
          ],
        },
        {
          type: 'text',
          text: '我设置了maxLines为1，看看会产生什么效果',
          css: [
            {
              top: `${startTop + 7 * gapSize}rpx`,
              width: '500rpx',
              maxLines: 1,
            },
            common,
          ],
        },
        _image(0),
        _des(0, '普通'),
        _image(1, 30),
        _des(1, 'rotate: 30'),
        _image(2, 30, '20rpx'),
        _des(2, 'borderRadius: 30rpx'),
        _image(3, 0, '60rpx'),
        _des(3, '圆形'),
        {
          type: 'image',
          url: Avatar,
          css: {
            bottom: '40rpx',
            left: '40rpx',
            borderRadius: '50rpx',
            borderWidth: '10rpx',
            borderColor: 'yellow',
            width: '100rpx',
            height: '100rpx',
          },
        },
        {
          type: 'qrcode',
          content: 'https://github.com/Kujiale-Mobile/Painter',
          css: {
            bottom: '40rpx',
            left: '180rpx',
            color: 'red',
            borderWidth: '10rpx',
            borderColor: 'blue',
            width: '120rpx',
            height: '120rpx',
          },
        },
        {
          type: 'rect',
          css: {
            bottom: '40rpx',
            right: '40rpx',
            color: 'radial-gradient(rgba(0, 0, 0, 0) 5%, #0ff 15%, #f0f 60%)',
            borderRadius: '20rpx',
            borderWidth: '10rpx',
            width: '120rpx',
            height: '120rpx',
          },
        },
        {
          type: 'text',
          text: 'borderWidth',
          css: {
            bottom: '40rpx',
            right: '200rpx',
            color: 'green',
            borderWidth: '2rpx',
          },
        },
      ],
    };
  }
}

const startTop = 50;
const startLeft = 20;
const gapSize = 70;
const common = {
  left: `${startLeft}rpx`,
  fontSize: '40rpx',
};

function _textDecoration(decoration: string, index: number, color?: string) {
  return {
    type: 'text',
    text: decoration,
    css: [
      {
        top: `${startTop + index * gapSize}rpx`,
        color: color,
        textDecoration: decoration,
      },
      common,
    ],
  };
}

function _image(index: number, rotate?: number, borderRadius?: string) {
  return {
    type: 'image',
    url: Avatar,
    css: {
      top: `${startTop + 8.5 * gapSize}rpx`,
      left: `${startLeft + 160 * index}rpx`,
      width: '120rpx',
      height: '120rpx',
      shadow: '10rpx 10rpx 5rpx #888888',
      rotate: rotate,
      borderRadius: borderRadius,
    },
  };
}

function _des(index: any, content: any) {
  const des: any = {
    type: 'text',
    text: content,
    css: {
      fontSize: '22rpx',
      top: `${startTop + 8.5 * gapSize + 140}rpx`,
    },
  };
  if (index === 3) {
    des.css.right = '60rpx';
  } else {
    des.css.left = `${startLeft + 120 * index + 30}rpx`;
  }
  return des;
}
