import { RuleProps } from "@/services/adMonitor/earlyWarning"
import { EyeOutlined } from "@ant-design/icons"
import { Tooltip } from "antd"
import React from "react"
import { MonitorFieldEnum } from "./config"
import { OperationTypeObj } from "./ruleLog"

/**
 * 查看规则
 */
interface Props {
    rules: {
        rule: RuleProps[],
        operationType: number,
        operationValue?: number
    }[]
}
const Look: React.FC<Props> = ({ rules }) => {

    return <Tooltip
        color="#FFF"
        title={<span
            style={{ color: '#000' }}
            dangerouslySetInnerHTML={{
                __html: rules.map(item => `<span style="color: red; ">(</span> ${item.rule.map(rule => `${MonitorFieldEnum[rule.field as keyof typeof MonitorFieldEnum]}${rule.condition}${rule.value}`)
                    .join(' <span style="color: #1890ff; ">并且</span> ')}，满足条件后：${OperationTypeObj[item.operationType as keyof typeof OperationTypeObj]}，${item?.operationValue ? '操作值：' + item?.operationValue : ''} <span style="color: red; ">)</span>`)
                    .join(` <span style="color: red; font-weight: 700; font-size: 16px ">或者</span> `)
            }}
        ></span>}
    >
        <a><EyeOutlined /></a>
    </Tooltip>
}


export default React.memo(Look)