import React from 'react';
import { history } from 'umi';
import { Avatar, Checkbox } from 'antd';
import classname from 'classnames';
import moment from 'moment';
import style from './index.less';

const WorkCard = (props) => {
  const {
    scheduleNames,
    scheduleMonth,
    auditId,
    id,
    planState,
    businessName,
    accessList,
    type = 'workforce',
    onDelete,
    onRevocation,
    requestType,
    auditState,
    businessType,
  } = props;

  console.log('requestType', requestType);

  const titleClassName =
    requestType === '1'
      ? {
          0: style.bg_blue,
          1: style.bg_orange,
          2: style.bg_green,
          6: style.bg_green,
          7: style.bg_red,
        }[planState]
      : { 1: style.bg_orange, 2: style.bg_green, 3: style.bg_red }[auditState];

  const btnClassName =
    requestType === '1'
      ? {
          0: style.btn_blue,
          1: style.btn_orange,
          2: style.btn_green,
          6: style.btn_green,
          7: style.btn_red,
        }[planState]
      : { 1: style.btn_orange, 2: style.btn_green, 3: style.btn_red }[auditState];

  const targetUrl = () => {
    if (businessType && businessType === 'schedule_union') {
      return `/ops/staff/workforce/audit/union/${auditId}`;
    }
    return planState === 0 && requestType === '1'
      ? `/ops/staff/${type}/edit/${id}/${auditId || 0}`
      : `/ops/staff/workforce/audit/union/${auditId}?requestType=${requestType}`;
  };

  const targetDelete = () => {
    if ((planState === 0 || planState === 7) && accessList.delete) {
      onDelete(id);
    } else if (accessList.cancel) {
      onRevocation(requestType === '1' ? id : auditId, requestType);
    }
  };

  return (
    <div className={style.word_card}>
      <div className={classname(style.word_card_title, titleClassName)}>
        {planState === 0 && requestType === '1' && (
          <Checkbox style={{ color: '#fff', marginRight: 10 }} value={id} />
        )}
        <span
          style={{ cursor: 'pointer' }}
          onClick={() => (accessList.info ? history.push(targetUrl()) : null)}
        >
          {scheduleNames || businessName}
        </span>
      </div>
      <div className={classname(style.word_card_body)}>
        <div className="pos_btw" style={{ padding: 10, height: '100%' }}>
          <div className="pos_aline">
            <Avatar
              size={40}
              src={props?.applicantUrl}
              icon={<img src="/img/tempHead.png" />}
              style={{ marginRight: 5 }}
            />
            <span style={{ marginLeft: 16 }}>
              <p style={{ fontSize: 16 }}>{props?.applicantName || props?.creationName || ''}</p>
              <p>
                {scheduleMonth ||
                  (props?.creationTime && moment(props?.creationTime).format('YYYY-MM'))}
              </p>
            </span>
          </div>
          <div className={classname('pos_center', style.work_status, btnClassName)}>
            {requestType === '1'
              ? { 0: '待提交', 1: '待审批', 2: '已审批', 6: '已审批', 7: '已驳回' }[planState]
              : { 1: '待审批', 2: '已审批', 3: '已驳回' }[auditState]}
          </div>
        </div>
        {requestType === '1' &&
          planState === 2 &&
          (accessList.edit || accessList.delete || accessList.cancel) && (
            <div className={classname('pos_around', style.bottom_card)}>
              <div>
                <img
                  alt=""
                  src="/img/action/edit-gray.png"
                  className={style.bottom_btn}
                  onClick={() =>
                    accessList.edit
                      ? history.push(`/ops/staff/${type}/edit/${id}/${auditId || 0}`)
                      : null
                  }
                />
              </div>
            </div>
          )}
        {((requestType === '1' && planState !== 2 && planState !== 6) ||
          (requestType === '2' && auditState === '1')) &&
          (accessList.edit || accessList.delete || accessList.cancel) && (
            <div className={classname('pos_around', style.bottom_card)}>
              <div>
                <img
                  alt=""
                  src="/img/action/view.png"
                  className={style.bottom_btn}
                  onClick={() => (accessList.info ? history.push(targetUrl()) : null)}
                />
              </div>

              <div>
                <img
                  alt=""
                  src="/img/action/edit-gray.png"
                  className={style.bottom_btn}
                  onClick={() => (accessList.edit ? history.push(targetUrl()) : null)}
                />
              </div>
              <div>
                <img
                  alt=""
                  src={`/img/action/${
                    planState === 0 || planState === 7 ? 'delete-gray' : 'revocation'
                  }.png`}
                  className={style.bottom_btn}
                  onClick={targetDelete}
                />
              </div>
              <div>
                <img alt="" src="/img/action/more.png" className={style.bottom_btn} />
              </div>
            </div>
          )}
      </div>
    </div>
  );
};

export default WorkCard;