import React, { useState, useEffect } from 'react';
import { connect } from 'umi';
import { Button, Table, Popconfirm, message } from 'antd';
import { CzqkList } from '@/utils/constants';
import FormModal from './FormModal';
import styles from './index.less';

const CZBtn = (props) => {
  const {
    id,
    sysToken,
    fetchAJCZtable,
    fetchAddAJCZ,
    fetchDeleteAJCZ,
    fetchDownloadFile,
    fetchOrgTreeData,
    fetchOrgDataByName,
    CZLX,
    onlyRead,
    loading,
  } = props;
  const [visible, setVisible] = useState(false);
  const [tableData, setTableData] = useState([]);
  // const [CZLX, setCZLX] = useState([]);
  const handleOpenModal = () => {
    // fetchDictCZLX(sysToken).then((res) => {
    //   if (res && res.resCode === 0) {
    //     setCZLX(res.data);
    //     setVisible(true);
    //   }
    // });
    setVisible(true);
  };
  const handleCloseModal = () => {
    setVisible(false);
  };
  const handleGetTable = () => {
    fetchAJCZtable({ id, sysToken }).then((res) => {
      setTableData(res);
    });
  };
  const handleDelete = (id) => {
    fetchDeleteAJCZ({ id, sysToken }).then((res) => {
      if (res && res.resCode === 0) {
        message.success(res.resMsg);
        handleGetTable();
      } else {
        message.error(res.resMsg);
      }
    });
  };
  useEffect(() => {
    handleGetTable();
    // fetchCzlx();
  }, []);

  // 下载文件
  const handleDownload = (file) => {
    const params = {
      mc: file.wjMc,
      path: file.wjPath,
      url: file.wjUrl,
    };
    fetchDownloadFile({ params, sysToken });
  };

  const getCZLXMc = (text) => {
    const p = [];
    CZLX?.forEach((item) => {
      if (item.id === Number(text)) {
        p.push(item.mc);
      }
    });

    return p[0];
  };
  const columns = [
    {
      title: '处置类型',
      dataIndex: 'czlx',
      key: '',
      render: (text) => {
        return <span>{getCZLXMc(text)}</span>;
      },
    },
    {
      title: '处置情况',
      dataIndex: 'czqk',
      width: '10%',
      render: (text) => CzqkList.filter((i) => i.value === String(text))[0]?.text,
    },
    {
      title: '情况说明',
      dataIndex: 'qksm',
      width: '15%',
    },
    {
      title: '姓名',
      dataIndex: 'czMc',
      key: 'czMc',
    },
    {
      title: '身份证号',
      dataIndex: 'czSfz',
      key: 'czSfz',
    },
    {
      title: '警号',
      dataIndex: 'czJh',
      key: 'czJh',
    },
    {
      title: '单位',
      dataIndex: 'czDw',
      key: 'czDw',
    },
    {
      title: '法律文书',
      dataIndex: 'flwsMc',
      key: 'flwsMc',
      render: (text, record) => {
        return record?.wjList?.map((file, index) => {
          return (
            <a key={file.id} onClick={() => handleDownload(file)}>
              {file.wjMc}
              {index === record?.wjList?.length - 1 ? '' : ';'}
            </a>
          );
        });
      },
    },
    {
      title: '操作',
      key: 'action',
      render: (text, record) => {
        if (onlyRead) {
          return (
            <a type="text" disabled={onlyRead}>
              删除
            </a>
          );
        } else {
          return (
            <Popconfirm
              placement="left"
              title="确定删除吗？"
              onConfirm={() => handleDelete(record.id)}
              okText="确定"
              cancelText="取消"
            >
              <a type="text" disabled={onlyRead}>
                删除
              </a>
            </Popconfirm>
          );
        }
      },
    },
  ];
  return (
    <div>
      <div className={styles.titleAndButton}>
        <div className={styles.title}>处置明细</div>
        {!onlyRead && (
          <div className={styles.button}>
            <Button onClick={handleOpenModal} type="primary" disabled={onlyRead} loading={loading}>
              添加处置信息
            </Button>
          </div>
        )}
      </div>
      <div>
        <Table
          rowKey="id"
          columns={columns}
          dataSource={tableData || []}
          pagination={false}
          scroll={{ x: 1400 }}
        />
      </div>
      {visible && (
        <FormModal
          id={id}
          sysToken={sysToken}
          visible={visible}
          CZLXList={CZLX}
          handleClose={handleCloseModal}
          getTable={handleGetTable}
          fetchAddAJCZ={fetchAddAJCZ}
          fetchOrgTreeData={fetchOrgTreeData}
          fetchOrgDataByName={fetchOrgDataByName}
          loading={loading}
        />
      )}
    </div>
  );
};

const mapStateToProps = ({ doing, global, loading }) => ({
  ...doing,
  ...global,
  loading: loading.effects['doing/fetchAddAJCZ'] || false,
});

const mapDispatchToProps = (dispatch) => ({
  fetchAJCZtable(params) {
    return dispatch({ type: 'doing/fetchAJCZtable', payload: { ...params } });
  },
  fetchAddAJCZ(params) {
    return dispatch({ type: 'doing/fetchAddAJCZ', payload: { ...params } });
  },
  fetchDeleteAJCZ(params) {
    return dispatch({ type: 'doing/fetchDeleteAJCZ', payload: { ...params } });
  },
  fetchDownloadFile(params) {
    return dispatch({ type: 'doing/fetchDownloadFile', payload: { ...params } });
  },
  fetchOrgTreeData(params) {
    return dispatch({ type: 'global/fetchOrgTreeData', payload: { ...params } });
  },
  fetchOrgDataByName(params) {
    return dispatch({ type: 'global/fetchOrgDataByName', payload: { ...params } });
  },
});

export default connect(mapStateToProps, mapDispatchToProps)(CZBtn);