management/src/pages/Contract/Content/Spending/components/TableContent/index.tsx

import { ZhSubmitButton } from '@/components/Button'
import OssUploadModal from '@/components/OssUpload'
import { contractPaidStore, tenderStore } from '@/store/mobx'
import { iIncomeTree, iShowTemplateState, iTemplateState } from '@/types/contract'
import { iFile } from '@/types/file'
import { apiSaveFileInfo } from '@/utils/common/api'
import { contractConsts } from '@/utils/common/constStatus'
import consts from '@/utils/consts'
import { Button, Input, message, Radio, Table, Tabs } from 'antd'
import Modal from 'antd/lib/modal/Modal'
import { RadioChangeEvent } from 'antd/lib/radio'
import { ColumnsType } from 'antd/lib/table'
import { observer } from 'mobx-react'
import React, { FocusEvent, KeyboardEvent, useEffect, useRef, useState } from 'react'
import { apiSetTemplate } from '../../../Income/components/Modal/api'
import { apiGetExpenditure, apiResfulContractTree, apiUpdateName, apiUpdateSerial } from '../../api'
import { apiContractExpenditure } from './api'
import Detail from '../Tabs/Detail'
import File from '../Tabs/File'
import Receivable from '../Tabs/Receivable'
import styles from './index.module.scss'
import { formatMoney } from '@/utils/util'
interface iTableContentPorps {
  changeModalType: (type: string) => void
  row: iIncomeTree
  setRow: (record: iIncomeTree) => void
  history: any
}


const GCsheet: React.FC<iTableContentPorps> = ({ changeModalType, row, setRow, history }) => {
  const [ sectionTemplate, setSectionTemplate ] = useState<iShowTemplateState>({
    isShow: false,
    template: '',
    loading: false
  })
  const [ tempalte, setTempalte ] = useState<{ template1: iTemplateState, template2: iTemplateState }>({
    template1: {
      attribution: '',
      children: undefined,
      depth: 0,
      id: 0,
      isEnd: false,
      leaf: false,
      name: '',
      parentId: 0,
      serial: ''
    },
    template2: {
      attribution: '',
      children: undefined,
      depth: 0,
      id: 0,
      isEnd: false,
      leaf: false,
      name: '',
      parentId: 0,
      serial: ''
    }
  })

  // 阿里oss弹窗控制器
  const [ visible, setVisible ] = useState<boolean>(false)

  const { TabPane } = Tabs

  useEffect(() => {
    initData()
  }, [])
  const initData = async () => {
    const data = await apiContractExpenditure(tenderStore.bid)
    if (data.code === consts.RET_CODE.SUCCESS) {
      if (data.isTemplate && data.isTemplate === 1) {
        setSectionTemplate({
          ...sectionTemplate,
          isShow: true
        })
        setTempalte({
          ...tempalte,
          template1: data.sectionTemplate1,
          template2: data.sectionTemplate2
        })
      } else {
        contractPaidStore.updateTree(data.sectionTree.children)
      }
    }
  }
  interface iLabelHandlerProps {
    id: string
    bidsectionId: string
    name?: string
  }

  const handleNewLabel = async (type: string, payload: iLabelHandlerProps) => {
    let RET_CODE: number = -1
    if (type === 'create') {
      payload.name = inputEl.current?.state.value
      const { code = -1 } = await apiResfulContractTree('add', payload)
      RET_CODE = code
    }
    if (type === 'edit') {
      const name = inputEl.current?.state.value
      const { code = -1 } = await apiUpdateName(payload.id, payload.bidsectionId, name)
      RET_CODE = code
    }
    if (RET_CODE === consts.RET_CODE.SUCCESS) {
      contractPaidStore.resetTree(tenderStore.tender.bidsectionId)
    }
  }

  const codeChange = async (row: iIncomeTree, value: string) => {
    const { code = -1 } = await apiUpdateSerial(row.id, row.bidsectionId, value)
    if (code === consts.RET_CODE.SUCCESS) {
      initData()
    }
  }
  const inputEl = useRef<Input>(null)
  const modalColumns: ColumnsType<iTemplateState> = [
    {
      title: '项目节',
      dataIndex: 'serial',
      width: '30%',
      // eslint-disable-next-line react/display-name
      render: (text: string, row: iTemplateState) => {
        const { attribution = '', serial = '' } = row
        return <span>{`${attribution}${serial}`}</span>
      }
    },
    {
      title: '名称',
      dataIndex: 'name',
      width: '70%'
    }
  ]

  const TableColumns: ColumnsType<iIncomeTree> = [
    {
      title: '编号',
      dataIndex: 'code',
      width: '15%',
      // eslint-disable-next-line react/display-name
      render: (text: string, row: iIncomeTree) => {
        if (row.isEdit) {
          return (
            <Input
              defaultValue={row.serial}
              addonBefore={row.attribution}
              size="small"
              style={{ width: 80 }}
              onPressEnter={(e: KeyboardEvent<HTMLInputElement>) => codeChange(row, e.currentTarget.value)}
              onBlur={(e: FocusEvent<HTMLInputElement>) => codeChange(row, e.currentTarget.value)}
            />)
        } else {
          return <span>{row.code}</span>
        }
        // return <span>{row.code}</span>
      }
    },
    {
      title: '项目名称',
      dataIndex: 'name',
      width: '25%',
      render: (text: any, record: iIncomeTree) => {
        if (record.isEdit || record.isNew) {
          const type = record.isEdit ? 'edit' : 'create'
          return (
            <Input
              defaultValue={record.name}
              size="small"
              type="text"
              ref={inputEl}
              onPressEnter={() => handleNewLabel(type, { id: type === 'edit' ? record.id : record.parentId, bidsectionId: record.bidsectionId })}
              onBlur={() => handleNewLabel(type, { id: type === 'edit' ? record.id : record.parentId, bidsectionId: record.bidsectionId })}
            />)
        } else {
          return <span>{text}</span>
        }
      }
    },
    {
      title: '合同名称',
      dataIndex: 'contractName',
      width: '15%'
    },
    {
      title: '合同编号',
      dataIndex: 'contractCode',
      width: '15%'
    },
    {
      title: '合同金额',
      dataIndex: 'contractPrice',
      align: 'right',
      width: '10%',
      // eslint-disable-next-line react/display-name
      render: (text: any, record: iIncomeTree) => record.contractCode ? <span>{formatMoney(text)}</span> : ''
    },
    {
      title: '支出金额',
      dataIndex: 'contractPaid',
      align: 'right',
      width: '10%',
      // eslint-disable-next-line react/display-name
      render: (text: string, record: iIncomeTree) => record.contractCode ? <span>{formatMoney(text)}</span> : ''
    },
    {
      title: '状态',
      dataIndex: 'contractStatus',
      width: '10%',
      // eslint-disable-next-line react/display-name
      render: (_: any, record: iIncomeTree) => record.contractCode ? <span className={contractConsts[record.contractStatus].className}>{contractConsts[record.contractStatus].text}</span> : ''
    }

  ]

  // modal 确认 - 回调
  const handleModalConfirm = async () => {
    setSectionTemplate({
      ...sectionTemplate,
      loading: true
    })
    if (!sectionTemplate.template) {
      setSectionTemplate({
        ...sectionTemplate,
        loading: false
      })
      return message.error('请选择项目节模板!')
    }
    const { code = -1 } = await apiSetTemplate(sectionTemplate.template, tenderStore.tender.bidsectionId, 1)
    if (code === consts.RET_CODE.SUCCESS) {
      await initData()
    }
    setSectionTemplate({
      ...sectionTemplate,
      loading: false,
      isShow: false
    })
  }


  // modal 关闭 - 回调
  const handleModalCancel = () => {
    history.push('/console/contract/content/summary')
  }


  // 模板选择radio切换回调
  const handleRadioEvent = (e: RadioChangeEvent) => {
    if (e.target.checked) {
      setSectionTemplate({
        ...sectionTemplate,
        template: e.target.value
      })
    }
  }

  const onClickRow = (record: iIncomeTree) => {
    return {
      onClick() {
        rowClickHandler(record.id, record.bidsectionId, record.isEdit, record.isNew)
      },
      onDoubleClick() {
        contractPaidStore.rowChange(row.id)
      }
    }
  }

  // 行点击回调
  const rowClickHandler = async (id: string, bid: string, isEdit?: boolean, isNew?: boolean) => {
    if (!isEdit && !isNew) {
      const { code = -1, section = {}, contract: newContract = {} } = await apiGetExpenditure(id, bid)
      if (code === consts.RET_CODE.SUCCESS) {
        setRow(section)
        contractPaidStore.updateContract(newContract)
      }
    }
  }
  const handleRowClass = (record: iIncomeTree) => {
    return record.id === row.id ? 'ant-table-row-selected' : ''
  }
  const tabOnClick = (key: string) => {
    contractPaidStore.changeUpdate(key)
  }

  // 阿里oss上传弹窗
  const onShow = (show: boolean) => setVisible(show)
  const onCreate = async (fileList: iFile[]) => {
    const { code = -1 } = await apiSaveFileInfo(fileList, consts.DATA_TYPE.CONTRACT_PAID, row.contractId)
    if (code === consts.RET_CODE.SUCCESS) {
      setVisible(false)
      contractPaidStore.changeUpdate('3')
    }
  }

  return sectionTemplate.isShow ?
    <Modal
      visible={sectionTemplate.isShow}
      maskClosable={false}
      title="选择合同项目节模板"
      okText="确定"
      confirmLoading={sectionTemplate.loading}
      cancelText="关闭"
      onCancel={handleModalCancel}
      closable={false}
      keyboard={false}
      onOk={() => handleModalConfirm()}
      width='70vw'
    >
      <div className={styles.modalWarnText}>默认项目节无法修改，可自行增加维护子节点</div>
      <div className={styles.modalTemplateContent}>
        <div className={[ styles.leftTemplate, sectionTemplate.template == '1' ? styles.active : '' ].join(' ')}>
          <div className="pi-pd-20">
            <Radio value="1" checked={sectionTemplate.template === '1'} onChange={(e: RadioChangeEvent) => handleRadioEvent(e)}><span className="pi-gray">项目节模板1</span></Radio>
          </div>
          <div className={styles.projectTable}>
            {
              tempalte.template1?.children && tempalte.template1?.children.length ?
                <Table
                  dataSource={tempalte.template1?.children}
                  columns={modalColumns}
                  pagination={false}
                  bordered
                  scroll={{ y: '300px' }}
                  rowKey={record => record.id}
                  defaultExpandAllRows={true}
                /> : ''
            }
          </div>

        </div>
        <div className={[ styles.rightTemplate, sectionTemplate.template == '2' ? styles.active : '' ].join(' ')}>
          <div className="pi-pd-20 pi-gray">
            <Radio value="2" checked={sectionTemplate.template === '2'} onChange={(e: RadioChangeEvent) => handleRadioEvent(e)}><span className="pi-gray">项目节模板2</span></Radio>
          </div>
          <div className={styles.projectTable}>
            {
              tempalte.template2?.children && tempalte.template2?.children.length ?
                <Table
                  dataSource={tempalte.template2?.children}
                  columns={modalColumns}
                  bordered
                  pagination={false}
                  scroll={{ y: '300px' }}
                  rowKey={record => record.id}
                  defaultExpandAllRows={true}
                />
                : ''
            }

          </div>
        </div>
      </div>
    </Modal>
    :
    <div className={styles.spreadContent}>
      <div className={styles.spreadSheets}>
        {
          contractPaidStore.showTable ?
            <Table<iIncomeTree>
              dataSource={contractPaidStore.tree}
              columns={TableColumns}
              bordered
              pagination={false}
              rowKey={record => record.id}
              defaultExpandAllRows={true}
              onRow={onClickRow}
              rowClassName={handleRowClass}
              style={{ height: '100%', overflowY: 'scroll' }}
            />
            : ''
        }
      </div>
      <div className={styles.extraControl}>
        <Tabs
          type="card"
          size="small"
          defaultActiveKey="1"
          onTabClick={(key: string) => tabOnClick(key)}
          tabBarExtraContent={{
            right:
              <div className="pi-mg-right-5 pi-flex-row">
                {
                  contractPaidStore.contract.id && contractPaidStore.contract.status === contractConsts.status.checking ?
                    <>
                      <Button type="primary" size="small" onClick={() => changeModalType('return')} >添加支出</Button>
                    </>
                    : null
                }
                {
                  contractPaidStore.contract.id && contractPaidStore.contract.status !== contractConsts.status.closed ?
                    <>
                      <Button type="primary" size="small" onClick={() => changeModalType('update')} className="pi-mg-left-5">编辑合同</Button>
                      <Button type="primary" size="small" onClick={() => setVisible(true)} className="pi-mg-left-5">上传文件</Button>
                    </>
                    : null
                }
                {
                  contractPaidStore.contract.id && contractPaidStore.contract.status === contractConsts.status.willClose ?
                    <Button type="primary" size="small" danger className="pi-mg-left-5" onClick={() => changeModalType('close')}>关闭合同</Button>
                    : null
                }
                {
                  contractPaidStore.contract.id && contractPaidStore.contract.status === contractConsts.status.closed ?
                    <ZhSubmitButton type="primary" size="small" danger className="pi-mg-left-5" onClick={() => changeModalType('unlock')}>解锁合同</ZhSubmitButton>
                    : null
                }
              </div>
          }}>
          <TabPane key="1" tab="合同详情">
            <Detail {...contractPaidStore.contract} />
          </TabPane>
          <TabPane key="2" tab="合同支出">
            <Receivable />
          </TabPane>
          <TabPane key="3" tab="合同文件">
            <File />
          </TabPane>
        </Tabs>
      </div>
      <OssUploadModal
        visible={visible}
        onCancel={() => setVisible(false)}
        onCreate={onCreate}
        onShow={onShow}
      />
    </div>
}

export default observer(GCsheet)