/*
 * @Author: code4eat awesomedema@gmail.com
 * @Date: 2024-12-06 14:42:57
 * @LastEditors: code4eat awesomedema@gmail.com
 * @LastEditTime: 2024-12-25 15:58:50
 * @FilePath: /MediResourceManaSys/src/pages/qualificationMana/qualificationAuth/authHisttory/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AEi m z z
 */


import { createFromIconfontCN } from '@ant-design/icons';
import React, { Children } from 'react'
import { Timeline } from 'antd'
import './style.less'
import { authTimeType } from '@/constant';

const IconFont = createFromIconfontCN({
    scriptUrl: '',
});


export default function AuthHisContent({ hisList }: { hisList: any[] }) {

    const getPeriodStr = (code:number)=>{
        const result = authTimeType.filter((a)=>a.value == code);
        if(result.length>0){
            return result[0].label
        }
        return undefined
    }

    const dotNode = (isActive=false)=>{
        return <div style={{display:'flex',justifyContent:'center',alignItems:'center',width:16,height:16,border:'2px solid #E7EBF2',borderRadius:'50%'}}>
            {isActive&&<div style={{width:8,height:8,background:'#363F4D',borderRadius:'50%'}}></div>}
        </div>
    }
    return (
        <div className='AuthHisContent'>
            <div className='AuthHisContent-title'>
                <IconFont type={'icon-qingliangtishi'} style={{ paddingRight:12 }} />调整历史
            </div>
            <div className='AuthHisContent-content'>
                <Timeline>
                    {
                        hisList.map((a,index)=>{
                             return (
                                <Timeline.Item key={index} dot={dotNode(index == 0?true:false)} >
                                      <div style={{fontWeight:'bold',fontSize:14,color:'#17181A',height:14,lineHeight:'14px',marginBottom:8}}>{`${a.adjustUserName} ${a.adjustTime}`}</div>
                                      <div style={{height:14,fontSize:12,color:'#176DE6',lineHeight:'14px',marginBottom:8,paddingLeft:6}}>
                                        <img style={{width:43,height:14,marginRight:4}} src={require('../../../../../static/tiaozhenghou.png')} />{getPeriodStr(a.qualificationPeriodAfter)} {`(${a.beginDateAfter}至${a.endDateAfter})`}
                                      </div>
                                      <div style={{height:14,fontSize:12,color:'#525866',lineHeight:'14px',marginBottom:8,paddingLeft:6}}>
                                        <img style={{width:43,height:14,marginRight:4}} src={require('../../../../../static/tiaozhengqian.png')} />
                                        {getPeriodStr(a.qualificationPeriodBefore)} {`(${a.beginDateBefore}至${a.endDateBefore})`}
                                      </div>
                                      {(a.memo&&a.memo.length>0)&&<div style={{padding:'5px 8px',fontSize:12,color:'#525866',background:'#F7F9FC',borderRadius:4}}>{a.memo}</div>}
                                </Timeline.Item>
                             )
                        })
                    }
                </Timeline>
            </div>
        </div>
    )
}
