import React from 'react';
import { Dict } from '@zenview/micro-basic-library';
import IconFont from '../../../themeComponents/IconFont';
import { Tooltip } from 'antd';
import './index.less';

/**
 * 场景卡片
 * @param {*} isBase 背景图
 * @param {*} index 场景的索引
 * @param {*} sceneItem 卡片信息
 * @param {*} renderControl 操作栏(可选)
 * @param {*} renderTip 场景的系统数量标签(可选)
 */
const SceneCard = ({ isBase, index = 0, sceneItem, renderControl, renderTip}) => {
  let placeTags = Dict.useDict('119100');
  let dataTags = ['119103', '119104', '119107', '119108', '119105', '119109', '119111', '119112', '119106', '119110'];
  // eslint-disable-next-line no-unused-vars
  let showTags = dataTags.splice(0, 5);
  const colorArr = [
    ['#2D374B', '#8C919C','#2C3443'],
    ['#01AF84', '#3E9B9A','#035452'],
    ['#AE4358', '#E98085','#641727'],
    ['#D67B12', '#D19039','#A05700'],
  ];
  const baseColorArr = [
    ['rgba(59, 117, 220, 1)', 'rgba(59, 117, 220, 0.4)','#18327C'],
    ['rgba(102, 102, 204, 1)', 'rgba(102, 102, 204, 0.4)','#2A2A64'],
    ['rgba(50, 158, 101, 1)', 'rgba(50, 158, 101, 0.4)','#1D4A33'],
    ['rgba(0, 190, 249, 0.47)', 'rgba(0, 190, 249, 0.3)','#042A48'],
  ];
  let ind=index % 4
  let showColor = isBase ? baseColorArr[ind]:colorArr[ind]

  return (
    <div className="scene-card">
      {renderTip && renderTip()}
      <div
        className="scene-card-bg"
        style={{
          background: `linear-gradient(45deg, ${showColor[0]} 0%, ${isBase ? 'rgba(0,0,0,0)' : showColor[1]} 100%)`,
        }}
      ></div>
      {isBase ? (
        <>
          <div style={{ background: ` url(/micro-apps/micro-dep-librarys/images/${(ind) + 1}.png)` }} className="scene-card-base-bg"></div>
          <div style={{ background: `linear-gradient(45deg, ${showColor[1]} 0%, rgba(0,0,0,0) 100%)` }} className="scene-card-mask"></div>
        </>
      ) : null}
      <div className="card-title" style={{background:showColor[2]}}>
        <div className="card-title-tip" style={{background: showColor[2]}}></div>
        <NormalBox className="card-title-content">{sceneItem.name}</NormalBox>
      </div>
      <div className="card-desc">
        <NormalBox title={sceneItem.describe} className="card-desc-content">
          {sceneItem.describe}
        </NormalBox>
      </div>
      <div className="card-label">
        <NormalBox className="card-label-content">
          {Array.isArray(sceneItem.tags) && sceneItem.tags.length && sceneItem.tags.slice(0, 5).map((v) => {
            let item = placeTags.find((j) => j.code === v);
            return (
              <div key={item.code} className="scene-tags-item">
                <IconFont type={item.icon} />
                {item.label}
              </div>
            );
          })}
          {Array.isArray(sceneItem.tags) && sceneItem.tags.length ? (
            <Tooltip
              placement="bottom"
              title={() => {
                return (
                  <div className="scene-tags-item-more-tip">
                    {sceneItem.tags.map((v) => {
                      let item = placeTags.find((j) => j.code === v);
                      return (
                        <div key={item.code} className="scene-tags-item">
                          <IconFont type={item.icon} />
                          {item.label}
                        </div>
                      );
                    })}
                  </div>
                );
              }}
            >
              <div className="scene-tags-item-more">
                <IconFont type="icon-S_Edit_More" />
                更多
              </div>
            </Tooltip>
          ) : null}
        </NormalBox>
      </div>
      {renderControl && renderControl()}
    </div>
  );
};

const NormalBox = ({ className, children, title }) => {
  return (
    <div title={title} className={`scene-card-normal-box ${className}`}>
      {children}
    </div>
  );
};

export default SceneCard;
