import React, { useEffect, useState, useRef } from 'react';
import { UserOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Drawer, Descriptions, Card } from 'antd';
import moment from 'moment';
import { connect } from 'dva';
import CommentContent from '@/components/CommentContent';

// 评论
function RightDrawer(props) {
  const {
    visible,
    onClose,
    comment,
    bomComment,
    addComment,
    version,
    loading,
    dispatch,
    userList,
    cellPosition,
  } = props;
  // const [commentList, setCommentList] = useState([]);

  const handleSubmitBom = (value, callback) => {
    if (!value) return;
    dispatch({
      type: 'detail/addBomComment',
      payload: {
        excel_id: version.id,
        comment: value,
      },
      callback,
    });
  };
  const handleSubmitCell = (value, callback) => {
    if (!value) return;
    dispatch({
      type: 'detail/addComment',
      payload: {
        ...cellPosition.current,
        comment: value,
      },
      callback,
    });
  };

  useEffect(() => {
    if (!version.id || !visible) return;
    dispatch({
      type: 'detail/queryBomComment',
      payload: { excel_id: version.id },
    });
  }, [version.id,visible]);

  return (
    <Drawer
      width={600}
      title="清单"
      mask={false}
      placement="right"
      onClose={onClose}
      visible={visible}
    >
      <BomContetn version={version} userList={userList} />
      <CommentContent
        title="清单沟通记录"
        comment={bomComment}
        onSubmit={handleSubmitBom}
        loading={
          loading.effects['detail/queryBomComment'] || loading.effects['detail/addBomComment']
        }
      />

    </Drawer>
  );
}
function BomContetn(props) {
  const { version, userList } = props;
  console.log(userList)
  return (
    <Card title="清单详情" type="inner">
      <Descriptions column={2}>
        <Descriptions.Item label="清单名称">{version.version_name}</Descriptions.Item>
        <Descriptions.Item label="创建人">
          {userList.find(item => item.ID == version.author)?.CName}
        </Descriptions.Item>
        <Descriptions.Item label="创建时间">
          {moment(version.c_time).format('YYYY-MM-DD')}
        </Descriptions.Item>
        <Descriptions.Item label="概述">{version.desc}</Descriptions.Item>
      </Descriptions>
    </Card>
  );
}

export default connect(({ detail, user, loading }) => ({
  comment: detail.comment,
  userList: user.list,
  bomComment: detail.bomComment,
  loading: loading,
}))(RightDrawer);