syber-lowcode-business-materials/es/components/robot-item/robot-item.js

syber-lowcode-business-materials

import _Checkbox from "antd/es/checkbox";
import _message from "antd/es/message";
import * as React from 'react';
import styles from "./styles.module.scss";
import { CopyOutlined, FacebookOutlined, InstagramOutlined, RobotOutlined, TikTokOutlined, TwitterOutlined, UserOutlined, YoutubeOutlined } from '@ant-design/icons';
var statusConfig = {
  1: {
    title: '缺勤',
    value: 1,
    color: '#FFA057',
    bgColor: 'rgba(251,106,0,0.15)'
  },
  2: {
    title: '空闲',
    value: 2,
    color: 'rgba(70,254,165,0.83)',
    bgColor: 'rgba(34,255,153,0.12)'
  },
  3: {
    title: '忙碌',
    value: 3,
    color: '#9EB1FF',
    bgColor: 'rgba(47,98,255,0.24)'
  },
  4: {
    title: '停工',
    value: 4,
    color: '#FF92AD',
    bgColor: 'rgba(254,42,139,0.16)'
  }
};
var iconMap = {
  2: 'https://cyber-resource-hz.oss-cn-hangzhou.aliyuncs.com/platform/icons/mobile.png',
  3: 'https://cyber-resource-hz.oss-cn-hangzhou.aliyuncs.com/platform/icons/pc.png',
  4: 'https://cyber-resource-hz.oss-cn-hangzhou.aliyuncs.com/platform/icons/server.png'
};
var mockMediaMap = [{
  image: 'https://fw-aigc.fwgcloud.com/dp/4c4693c4986311ef946fa036bccb3e9f.png',
  medias: [{
    type: 'youtube',
    value: 2,
    icon: /*#__PURE__*/React.createElement(YoutubeOutlined, {
      style: {
        fontSize: '30px'
      }
    })
  }, {
    type: 'twitter',
    value: 4,
    icon: /*#__PURE__*/React.createElement(TwitterOutlined, {
      style: {
        fontSize: '30px'
      }
    })
  }, {
    type: 'facebook',
    value: 3,
    icon: /*#__PURE__*/React.createElement(FacebookOutlined, {
      style: {
        fontSize: '30px'
      }
    })
  }, {
    type: 'instagram',
    value: 2,
    icon: /*#__PURE__*/React.createElement(InstagramOutlined, {
      style: {
        fontSize: '30px'
      }
    })
  }, {
    type: 'tikTok',
    value: 2,
    icon: /*#__PURE__*/React.createElement(TikTokOutlined, {
      style: {
        fontSize: '30px'
      }
    })
  }]
}];
var RobotItem = function RobotItem(props) {
  var _props$checkedList, _props$checkedList2, _statusConfig$robotDa, _statusConfig$robotDa2, _statusConfig$robotDa3, _statusConfig$robotDa4, _robotData$location, _robotData$location2, _robotData$skills, _robotData$skill;
  var _ref = props !== null && props !== void 0 ? props : {},
    robotData = _ref.robotData;
  var copyText = function copyText(str) {
    var oInput = document.createElement('textarea');
    oInput.value = str;
    document.body.appendChild(oInput);
    oInput.select();
    document.execCommand('Copy');
    oInput.style.display = 'none';
    document.body.removeChild(oInput);
    if (str && str.length > 100) {
      str = str.substring(0, 100);
    }
    _message.success(/*#__PURE__*/React.createElement("div", {
      style: {
        whiteSpace: 'pre-wrap',
        textAlign: 'left'
      }
    }, /*#__PURE__*/React.createElement("div", null, '复制成功:'), /*#__PURE__*/React.createElement("div", null, str)));
  };
  return /*#__PURE__*/React.createElement("div", {
    className: styles.robotWrap,
    style: {
      '--borderColor': props !== null && props !== void 0 && (_props$checkedList = props.checkedList) !== null && _props$checkedList !== void 0 && _props$checkedList.includes(robotData === null || robotData === void 0 ? void 0 : robotData._id) && props !== null && props !== void 0 && props.isCheckbox ? '#07abf7' : '#ebebeb'
    },
    onClick: function onClick(e) {
      if (props !== null && props !== void 0 && props.isCheckbox) {
        // 选择卡片类型
        props === null || props === void 0 ? void 0 : props.onCheckboxChange(e, robotData);
      } else {
        // 跳转详情页
      }
    }
  }, (props === null || props === void 0 ? void 0 : props.isCheckbox) && /*#__PURE__*/React.createElement(_Checkbox, {
    style: {
      position: 'absolute',
      top: '10px',
      right: '10px'
    },
    checked: props === null || props === void 0 ? void 0 : (_props$checkedList2 = props.checkedList) === null || _props$checkedList2 === void 0 ? void 0 : _props$checkedList2.includes(robotData === null || robotData === void 0 ? void 0 : robotData._id)
  }), /*#__PURE__*/React.createElement("div", {
    className: styles.robotContent
  }, /*#__PURE__*/React.createElement("div", {
    className: styles.robotImage
  }, /*#__PURE__*/React.createElement("img", {
    src: robotData.image,
    alt: robotData.name
  }), /*#__PURE__*/React.createElement("div", {
    className: styles.robotTips
  }, /*#__PURE__*/React.createElement(UserOutlined, null), "\u793E\u4EA4\u7D20\u4EBA")), /*#__PURE__*/React.createElement("div", {
    className: styles.robotMessage
  }, /*#__PURE__*/React.createElement("div", {
    className: styles.name
  }, /*#__PURE__*/React.createElement("div", {
    className: styles.nameText
  }, robotData.name), /*#__PURE__*/React.createElement("div", {
    className: styles.tag,
    style: {
      background: (_statusConfig$robotDa = statusConfig[robotData === null || robotData === void 0 ? void 0 : robotData.status]) === null || _statusConfig$robotDa === void 0 ? void 0 : _statusConfig$robotDa.bgColor
    }
  }, /*#__PURE__*/React.createElement(UserOutlined, {
    style: {
      color: (_statusConfig$robotDa2 = statusConfig[robotData === null || robotData === void 0 ? void 0 : robotData.status]) === null || _statusConfig$robotDa2 === void 0 ? void 0 : _statusConfig$robotDa2.color
    }
  }), /*#__PURE__*/React.createElement("span", {
    style: {
      color: (_statusConfig$robotDa3 = statusConfig[robotData === null || robotData === void 0 ? void 0 : robotData.status]) === null || _statusConfig$robotDa3 === void 0 ? void 0 : _statusConfig$robotDa3.color,
      marginLeft: 4
    }
  }, (_statusConfig$robotDa4 = statusConfig[robotData === null || robotData === void 0 ? void 0 : robotData.status]) === null || _statusConfig$robotDa4 === void 0 ? void 0 : _statusConfig$robotDa4.title))), /*#__PURE__*/React.createElement("div", {
    className: styles.robotMessageRow
  }, (robotData === null || robotData === void 0 ? void 0 : robotData.gender) || '女', " \uFF5C ", robotData.age, " \u5C81 ", (robotData === null || robotData === void 0 ? void 0 : robotData.deviceType) > 0 && '｜', /*#__PURE__*/React.createElement("img", {
    width: 15,
    src: iconMap[robotData === null || robotData === void 0 ? void 0 : robotData.deviceType]
  })), /*#__PURE__*/React.createElement("div", {
    className: styles.robotMessageRow,
    style: {
      flexDirection: 'column',
      alignItems: 'flex-start'
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      lineHeight: '1.6'
    }
  }, "\u8EAB\u4EFD\u8BC1\u53F7"), robotData.deviceId ? /*#__PURE__*/React.createElement("div", {
    className: styles.copyText
  }, /*#__PURE__*/React.createElement("span", {
    className: styles.ellipsis,
    style: {
      '--width': 'calc(100% - 32px)'
    }
  }, robotData.deviceId), /*#__PURE__*/React.createElement(CopyOutlined, {
    className: styles.copyIcon,
    onClick: function onClick(e) {
      e.stopPropagation();
      if (robotData.deviceId) {
        copyText(robotData.deviceId);
      }
    }
  }), /*#__PURE__*/React.createElement(RobotOutlined, {
    className: styles.copyIcon,
    onClick: function onClick(e) {
      e.stopPropagation();
      props === null || props === void 0 ? void 0 : props.onLongRange(e, robotData);
    }
  })) : '-'), /*#__PURE__*/React.createElement("div", {
    className: styles.robotMessageRow,
    style: {
      flexDirection: 'column',
      alignItems: 'flex-start'
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      lineHeight: '1.6'
    }
  }, "\u5C45\u4F4F\u5730"), /*#__PURE__*/React.createElement("span", {
    className: styles.ellipsis,
    style: {
      '--width': '100%'
    }
  }, ((robotData === null || robotData === void 0 ? void 0 : (_robotData$location = robotData.location) === null || _robotData$location === void 0 ? void 0 : _robotData$location.countryName) || '-') + " / " + ((robotData === null || robotData === void 0 ? void 0 : (_robotData$location2 = robotData.location) === null || _robotData$location2 === void 0 ? void 0 : _robotData$location2.cityName) || '-'))), /*#__PURE__*/React.createElement("div", {
    className: styles.robotMessageRow,
    style: {
      flexDirection: 'column',
      alignItems: 'flex-start'
    }
  }, /*#__PURE__*/React.createElement("span", {
    style: {
      lineHeight: '1.6'
    }
  }, "\u80FD\u529B"), /*#__PURE__*/React.createElement("span", {
    className: styles.ellipsis,
    style: {
      '--width': '100%'
    }
  }, (robotData === null || robotData === void 0 ? void 0 : (_robotData$skills = robotData.skills) === null || _robotData$skills === void 0 ? void 0 : _robotData$skills.map(function (item) {
    return item.name;
  }).join('、')) || (robotData === null || robotData === void 0 ? void 0 : (_robotData$skill = robotData.skill) === null || _robotData$skill === void 0 ? void 0 : _robotData$skill.map(function (item) {
    return item;
  }).join('、')) || '-')), /*#__PURE__*/React.createElement("div", {
    className: styles.line
  }))), /*#__PURE__*/React.createElement("div", {
    className: styles.robotList
  }, mockMediaMap === null || mockMediaMap === void 0 ? void 0 : mockMediaMap.map(function (item, index) {
    var _item$medias;
    return /*#__PURE__*/React.createElement("div", {
      key: index,
      className: styles.mediaWrap
    }, /*#__PURE__*/React.createElement("img", {
      src: item.image,
      alt: "",
      className: styles.mediaImage,
      onClick: function onClick(e) {
        e.stopPropagation();
        props === null || props === void 0 ? void 0 : props.onMediaClick(e, item);
      }
    }), item === null || item === void 0 ? void 0 : (_item$medias = item.medias) === null || _item$medias === void 0 ? void 0 : _item$medias.map(function (media, i) {
      return /*#__PURE__*/React.createElement("div", {
        key: i,
        className: styles.mediaItem
      }, media.icon, media.value);
    }));
  })));
};
RobotItem.displayName = 'RobotItem';
export default RobotItem;