import React, { useState } from 'react'
import clsx from 'clsx'
import { Tabs, Input, Button } from 'antd'
import '@platformuiserver/platformui.assets/css/index.less'
import styles from './style.module.less'

const { TabPane } = Tabs
const { TextArea } = Input

export default function ActionDynamic (props) {
  const { commentsList = [], changeRecordList = null, executionUseCase = null, isShowComments = true, onPulishComments, getComListAndLogList, showLog = true } = props
  const [commentText, setCommentText] = useState('')
  function back (isSuccess = true) {
    if (isSuccess) {
      setCommentText('')
    }
  }

  return (
    <div className={styles.actionDynamic}>
      <Tabs defaultActiveKey="1" animated={false} onChange={(e) => getComListAndLogList && getComListAndLogList(e)}>
        {isShowComments && (
          <TabPane tab="评论" key="1">
            <div className={styles.tabbox}>
              {commentsList.map((item, index) => (
                <div key={item?.id || index} className={styles.comments}>
                  <span className={styles.name}>{item.name}</span>
                  <span className={styles.time}>{item.createTime}</span>
                  <div className={styles.content}>{item.content}</div>
                </div>
              ))}
            </div>
            <TextArea value={commentText} rows={3} onChange={(e) => setCommentText(e.target.value)} />
            <div className={styles.btn}>
              <Button type="primary" onClick={() => onPulishComments(commentText, (isSuccess) => back(isSuccess))}>
                发表评论
              </Button>
            </div>
          </TabPane>
        )}
        {changeRecordList && (
          <TabPane tab="变更记录" key="2">
            <div className={styles.tabbox}>
              {changeRecordList.map((item, idx) => (
                <div className={clsx(styles.changeRecordItem, 'flex-center-between')} style={{ alignItems: 'baseline' }} key={item?.id || idx}>
                  <div className="flex-center-between" style={{ flex: 1, alignItems: 'baseline' }}>
                    <div className={styles.operator}>{item.operator}：</div>
                    <div className={styles.remark}>{item.remark}</div>
                  </div>
                  <div className={styles.time}>{item.createTime}</div>
                </div>
              ))}
            </div>
          </TabPane>
        )}
        {executionUseCase && (
          <TabPane tab="执行记录" key="3">
            <div className={styles.tabbox}>
              {executionUseCase.map((item, idx) => (
                <div className={clsx(styles.changeRecordItem, 'flex-center-between')} style={{ alignItems: 'baseline' }} key={item.id}>
                  <div className="flex-center-between" style={{ flex: 1, alignItems: 'baseline' }}>
                    <div className={styles.time}>{item.createTime}</div>
                    <div className={styles.operator}>{item.operator}</div>
                    <div className={styles.remark}>{item.remark}</div>
                  </div>
                  <div className={styles.time}>
                    <span>执行结果：</span>
                    <span style={{ color: item.color }}>{item.Result}</span>
                  </div>
                </div>
              ))}
            </div>
          </TabPane>
        )}
      </Tabs>
    </div>
  )
}
