/** @format */

import _ from 'lodash';
import React from 'react';
import styled from 'styled-components';

const Box = styled.div`
  background-size: 100% 100%;
  color: #fff;
  font-size: 30px;
  text-align: center;
  display: flex;
  justify-content: center;
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
  align-items: center;
  .bor {
    border: solid 1px;
    /* border-image: url('https://datav.oss-cn-hangzhou.aliyuncs.com/uploads/images/a7c93134c5e1440c58b1a7a3b675009b.png')
      27 stretch; */
  }
`;

interface BgPlateProps {
  size?: Record<string, any>;
  [key: string]: any;
  borderRadius: number;
}

const BgPlate = (props: BgPlateProps) => {
  const {
    size,
    background = '#000',
    colorLinear = false,
    background1 = '#000',
    background2 = '#000',
    direction = '0deg',
    borderRadius,
    borderWidth = 0,
    borderColor,
    borderStyle,
    borderImageSlice = '32 fill',
    borderImageRepeat = 'stretch',
    borderImageOutset = 0,
    borderImageWidth = '20px',
    types = 0,
    borderImage,
    selectBorderImage = { name: '11', img: '11' },
  } = props;

  // 图片边框
  const styleBase = {
    height: 370,
    overflow: 'hidden',
    borderRadius: borderImage ? 0 : borderRadius,
    background: colorLinear
      ? `linear-gradient(${direction},${background1},${background2})`
      : background,
    borderImageSource: `url(${borderImage})`,
    borderImageSlice, // 切
    borderImageRepeat, // 平铺方式
    borderImageOutset, // 外扩
    borderImageWidth, // 边框宽度
  };
  // 纯色边框
  const styleBase1 = {
    height: 370,
    overflow: 'hidden',
    borderRadius,
    background: colorLinear
      ? `linear-gradient(${direction},${background1},${background2})`
      : background,
    borderWidth,
    borderColor,
    borderStyle,
  };
  // 边框选择
  const styleBase2 = {
    height: 370,
    overflow: 'hidden',
    borderRadius: borderImage ? 0 : borderRadius,
    background: colorLinear
      ? `linear-gradient(${direction},${background1},${background2})`
      : background,
    borderImageSource: `url(${selectBorderImage.img})`,
    borderImageSlice: selectBorderImage.borderImageSlice, // 切
    borderImageRepeat: 'stretch', // 平铺方式
    borderImageOutset: selectBorderImage.borderImageOutset, // 外扩
    borderImageWidth: selectBorderImage.borderImageWidth, // 边框宽度
  };
  let style = {};
  if (types === 0 || types === '纯色') {
    style = _.merge(styleBase1, size);
  } else if (types === 1 || types === '图片') {
    style = _.merge(styleBase, size);
  } else {
    style = _.merge(styleBase2, size);
  }

  return (
    <Box>
      <div style={style} className="bor"></div>
    </Box>
  );
};

BgPlate.themeUpdate = function(params: any) {
  return {
    background: params.primaryColor,
  };
};

export default BgPlate;