text: import './ProjectCard.scss';
  import React, { PureComponent as Component } from 'react';
  import { Card, Icon, Tooltip, Modal, Alert, Input, message } from 'antd';
  import { connect } from 'react-redux';
  import { delFollow, addFollow } from '../../reducer/modules/follow';
  import PropTypes from 'prop-types';
  import { withRouter } from 'react-router';
  import { debounce } from '../../common';
  import constants from '../../constants/variable.js';
  import produce from 'immer';
  import { getProject, checkProjectName, copyProjectMsg } from '../../reducer/modules/project';
  import { trim } from '../../common.js';
  const confirm = Modal.confirm;
  
  @connect(
    state => {
      return {
        uid: state.user.uid,
        currPage: state.project.currPage
      };
    },
    {
      delFollow,
      addFollow,
      getProject,
      checkProjectName,
      copyProjectMsg
    }
  )
  @withRouter
  class ProjectCard extends Component {
    constructor(props) {
      super(props);
      this.add = debounce(this.add, 400);
      this.del = debounce(this.del, 400);
    }
  
    static propTypes = {
      projectData: PropTypes.object,
      uid: PropTypes.number,
      inFollowPage: PropTypes.bool,
      callbackResult: PropTypes.func,
      history: PropTypes.object,
      delFollow: PropTypes.func,
      addFollow: PropTypes.func,
      isShow: PropTypes.bool,
      getProject: PropTypes.func,
      checkProjectName: PropTypes.func,
      copyProjectMsg: PropTypes.func,
      currPage: PropTypes.number
    };
  
    copy = async projectName => {
      const id = this.props.projectData._id;
  
      let projectData = await this.props.getProject(id);
      let data = projectData.payload.data.data;
      let newData = produce(data, draftData => {
        draftData.preName = draftData.name;
        draftData.name = projectName;
      });
  
      await this.props.copyProjectMsg(newData);
      message.success('项目复制成功');
      this.props.callbackResult();
    };
  
    // 复制项目的二次确认
    showConfirm = () => {
      const that = this;
  
      confirm({
        title: '确认复制 ' + that.props.projectData.name + ' 项目吗？',
        okText: '确认',
        cancelText: '取消',
        content: (
          <div style={{ marginTop: '10px', fontSize: '13px', lineHeight: '25px' }}>
            <Alert
              message={`该操作将会复制 ${
                that.props.projectData.name
              } 下的所有接口集合，但不包括测试集合中的接口`}
              type="info"
            />
            <div style={{ marginTop: '16px' }}>
              <p>
                <b>项目名称:</b>
              </p>
              <Input id="project_name" placeholder="项目名称" />
            </div>
          </div>
        ),
        async onOk() {
          const projectName = trim(document.getElementById('project_name').value);
  
          // 查询项目名称是否重复
          const group_id = that.props.projectData.group_id;
          await that.props.checkProjectName(projectName, group_id);
          that.copy(projectName);
        },
        iconType: 'copy',
        onCancel() {}
      });
    };
  
    del = () => {
      const id = this.props.projectData.projectid || this.props.projectData._id;
      this.props.delFollow(id).then(res => {
        if (res.payload.data.errcode === 0) {
          this.props.callbackResult();
          // message.success('已取消关注！');  // 星号已做出反馈 无需重复提醒用户
        }
      });
    };
  
    add = () => {
      const { uid, projectData } = this.props;
      const param = {
        uid,
        projectid: projectData._id,
        projectname: projectData.name,
        icon: projectData.icon || constants.PROJECT_ICON[0],
        color: projectData.color || constants.PROJECT_COLOR.blue
      };
      this.props.addFollow(param).then(res => {
        if (res.payload.data.errcode === 0) {
          this.props.callbackResult();
          // message.success('已添加关注！');  // 星号已做出反馈 无需重复提醒用户
        }
      });
    };
  
    render() {
      const { projectData, inFollowPage, isShow } = this.props;
      return (
        <div className="card-container">
          <Card
            bordered={false}
            className="m-card"
            onClick={() =>
              this.props.history.push('/project/' + (projectData.projectid || projectData._id))
            }
          >
            <Icon
              type={projectData.icon || 'star-o'}
              className="ui-logo"
              style={{
                backgroundColor:
                  constants.PROJECT_COLOR[projectData.color] || constants.PROJECT_COLOR.blue
              }}
            />
            <h4 className="ui-title">{projectData.name || projectData.projectname}</h4>
          </Card>
          <div
            className="card-btns"
            onClick={projectData.follow || inFollowPage ? this.del : this.add}
          >
            <Tooltip
              placement="rightTop"
              title={projectData.follow || inFollowPage ? '取消关注' : '添加关注'}
            >
              <Icon
                type={projectData.follow || inFollowPage ? 'star' : 'star-o'}
                className={'icon ' + (projectData.follow || inFollowPage ? 'active' : '')}
              />
            </Tooltip>
          </div>
          {isShow && (
            <div className="copy-btns" onClick={this.showConfirm}>
              <Tooltip placement="rightTop" title="复制项目">
                <Icon type="copy" className="icon" />
              </Tooltip>
            </div>
          )}
        </div>
      );
    }
  }
  
  export default ProjectCard;
  