import React from 'react';
import AuthComponent from '../AuthComponent'
import IconFont from '../../themeComponents/IconFont'



import './index.less';

/**
 * 布控告警卡片底部有效、无效按钮
 * @param {*} sourceData 数据
 * @param {*} handleChangeYN handle方法
 */
const AlarmCardFooter = (props) => {
  let { actionName, sourceData, handleChangeYN,defence } = props;
  return (
    <div className="alarm-card-handle-footer">
       <AuthComponent actionName={actionName}>
        <div
          className="handle handle-yes"
          onClick={(e) => {
            e.stopPropagation();
            handleChangeYN && handleChangeYN(sourceData, 1, e);
          }}
        >
          <IconFont type={defence&& defence === 1? "icon-S_Photo_ThumbInvalid":"icon-S_Photo_ThumbEffective"} theme="outlined" />
          {defence&& defence === 1? "已违规":"有效"}
        </div>
      </AuthComponent>
      <AuthComponent actionName={actionName}>
        <div
          className="handle handle-no"
          onClick={(e) => {
            e.stopPropagation();
            handleChangeYN && handleChangeYN(sourceData, 0, e);
          }}
        >
          <IconFont type={defence&& defence === 1? "icon-S_Photo_ThumbEffective":"icon-S_Photo_ThumbInvalid"} theme="outlined" />
          {defence&& defence === 1? "未违规":"无效"}
        </div>
      </AuthComponent>
    </div>
  );
};

/**
 * 告警卡片的有效、无效水印
 * @param {*} sourceData 数据
 * @param {*} handleChangeYN handle方法
 */
const AlarmCardEffective = (props) => {
  let { isEffective } = props;
  return <div className={`alam-effect-rotate ${isEffective === 1 ? 'alarm-rotate-yes' : 'alarm-rotate-no'}`} />;
};

/**
 * icon-value-不换行
 * @param {*} props
 */
const IconValueCard = (props) => {
  let { icon, value, className } = props;
  return (
    <div className={`lm-card-icon-value ${className || ''}`}>
      <IconFont type={icon} theme="outlined" />
      <span className="value" title={value}>
        {value || '暂无'}
      </span>
    </div>
  );
};
//车辆布防违规卡片底部
const AlarmCardVecjile = (props) => {
  let { isEffective } = props;
  return <div className={`alam-vechile-rotate ${isEffective === 1 ? 'alarm-rotate-yes' : 'alarm-rotate-no'}`}></div>;
};

export {
  AlarmCardFooter,
  AlarmCardEffective,
  IconValueCard,
  AlarmCardVecjile,
}
