import React, { useEffect, useState } from 'react';
import { connect } from 'umi';
import { Spin, Descriptions } from 'antd';
import { LeftOutlined } from '@ant-design/icons';

import './ContractContent.less';

import PreView from '@/components/PreView/PreViewTow';

const ContractDetail = (props: any) => {
  const { Contract, dispatch, FileImg, loading } = props;
  const { DataSaveDetail } = Contract;
  const RA = (index: any, values: any) => {
    dispatch({ type: 'Contract/RA', playload: { index: index, body: values } });
  };
  const goToReturn = () => {
    history.go(-1);
  };

  const [fileList, setFileList] = useState([] as any); // 图片列表

  // 带来信息
  useEffect(() => {
    if (DataSaveDetail == null) {
      console.log('返回列表');
    } else {
      let objData = {
        type: 'tosContractPreview',
        fileName: DataSaveDetail.contractFileName,
        extends: DataSaveDetail.communityName,
      };
      RA(47, objData);
    }
  }, [DataSaveDetail]);

  // 监听图片列表
  useEffect(() => {
    if (FileImg != null) {
      let obj = new Array();
      for (var i in FileImg) {
        let a = {
          uid: i,
          name: FileImg[i].fileName,
          status: 'done',
          type: FileImg[i].fileName.match(/\.([^\.]+)$/)[1].toLowerCase(),
          url: FileImg[i].fileUrl,
        };
        obj.push(a);
      }
      setFileList([...obj]);
    } else {
      setFileList([]);
    }
  }, [FileImg]);

  return (
    <Spin spinning={loading}>
      {DataSaveDetail ? (
        <div className="base">
          {/* 头部组件 */}
          <div className="box">
            <div className="item1">Detail Contract</div>
            <button className="item3" onClick={goToReturn}>
              <LeftOutlined />
              Back
            </button>
          </div>
          <div className="">
            <Descriptions title="" bordered layout="vertical">
              <Descriptions.Item label="Contract Number :">
                {DataSaveDetail.contractNumber}
              </Descriptions.Item>
              <Descriptions.Item label="Party A :">
                {DataSaveDetail.contractPartyA}
              </Descriptions.Item>
              <Descriptions.Item label="Party B :">
                {DataSaveDetail.contractPartyB}
              </Descriptions.Item>
              <Descriptions.Item label="Contract Title :" span={2}>
                {DataSaveDetail.contractTitle}
              </Descriptions.Item>
              <Descriptions.Item label="Community Name :">
                {DataSaveDetail.communityName}
              </Descriptions.Item>

              <Descriptions.Item label="Date :">
                {DataSaveDetail.contractValidStartDate} ~ {DataSaveDetail.contractValidEndDate}
              </Descriptions.Item>
              <Descriptions.Item label="Contacts :">
                {DataSaveDetail.communityAccount}
              </Descriptions.Item>
              <Descriptions.Item label="Phone :">{DataSaveDetail.communityPhone}</Descriptions.Item>

              <Descriptions.Item label="Contract Annex :" span={3}>
                {fileList.map((item: any, index: number) => {
                  return <PreView OpenUrl={item} key={index}></PreView>;
                })}
              </Descriptions.Item>
              <Descriptions.Item label="Contract Remarks :">
                {DataSaveDetail.contractRemindContent}
              </Descriptions.Item>
            </Descriptions>
          </div>
        </div>
      ) : (
        ''
      )}
    </Spin>
  );
};

function mapStateToProps(state: any) {
  const { Contract } = state;
  const { FileImg } = Contract;
  const loading = state.loading.models.Contract || false;
  return {
    Contract,
    FileImg,
    loading,
  };
}
export default connect(mapStateToProps)(ContractDetail);
