import React, { useState, useRef } from 'react';
import ProTable from '@ant-design/pro-table';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { notification } from 'antd';
import Detail from '../components/detail';
import ImgModal from '../components/imgModal';
import styles from './styles.less';
import { columns } from './staticdata';
import { query, getDetail } from './services';
import AuditModal from '../components/audit';

const Appeal = () => {
  const [detailModal, changeDetailModal] = useState(false);
  const [auditModal, changeAuditModal] = useState(false);
  const [imgModal, changeImgModal] = useState(false);
  const [selectedRow, getRow] = useState({});
  const [imgData, getImgData] = useState([]);
  const [imgTitle, changeImgTitle] = useState('');

  const table = useRef();
  const openDetail = async row => {
    const detailData = await getDetail({ appealNo: row.appealNo });
    changeDetailModal(true);
    getRow(detailData);
  };

  const openAudit = async row => {
    const detailData = await getDetail({ appealNo: row.appealNo });
    getRow(detailData);
    changeAuditModal(true);
  };
  const reload = () => {
    if (table && table.current) {
      table.current.reload();
    }
  };
  const openImgModal = imgStr => {
    const imgList = imgStr ? imgStr.split(',') : [];
    if (!imgList.length) {
      notification.error({
        message: $t('oops.no.data'),
      });
      return;
    }
    getImgData(imgList);
    changeImgModal(true);
    changeImgTitle($t('view.images'));
  };
  const closeModal = (params, isReload) => {
    if (params === 'Detail') {
      changeDetailModal(false);
      return;
    }
    if (params === 'Audit') {
      changeAuditModal(false);
      if (isReload) {
        reload();
      }
      return;
    }
    changeImgModal(false);
  };
  const res = {
    openAudit,
    openDetail,
    openImgModal,
  };

  return (
    <PageHeaderWrapper>
      <ProTable
        search={{
          collapsed: false,
          collapseRender: () => null,
        }}
        columns={columns(res)}
        request={params => query({ ...params })}
        rowKey={r => r.appealNo}
        expandIconColumnIndex={10}
        actionRef={table}
        bordered
        className={styles.table}
        toolBarRender={false}
        scroll={{ x: '100%', y: 400 }}
      />
      <Detail
        data={selectedRow}
        modalVisible={detailModal}
        onCancel={() => closeModal('Detail')}
      ></Detail>
      <AuditModal
        data={selectedRow}
        modalVisible={auditModal}
        onCancel={isReload => closeModal('Audit', isReload)}
      ></AuditModal>
      <ImgModal
        imgData={imgData}
        modalVisible={imgModal}
        title={imgTitle}
        onCancel={() => closeModal('imgModal')}
      ></ImgModal>
    </PageHeaderWrapper>
  );
};
export default Appeal;
