management/src/components/RuleModal/index.tsx

import { ZhButton } from '@/components/Button'
import { apiGetRule } from '@/pages/Safe/Content/List/api'
import { tenderStore } from '@/store/mobx'
import { ruleOption } from '@/types/rule'
import consts from '@/utils/consts'
import { dayjsFomrat } from '@/utils/util'
import { Form, Input, InputNumber, Modal, Select, Tabs, Tag } from 'antd'
import { TweenOneGroup } from 'rc-tween-one'
import React, { useEffect, useState } from 'react'
import styles from './index.module.scss'
const { TabPane } = Tabs
const { Option } = Select


interface iTags {
  ruleArr: ruleOption[]
  setRuleArr: (arr: ruleOption[]) => void
}
const RenderTags:React.FC<iTags> = ({ ruleArr, setRuleArr }) => {
  const handleClose = (removedTag: ruleOption) => {
    const tags = ruleArr.filter(tag => tag.value !== removedTag.value)
    setRuleArr(tags)
  }
  return (
    <div>
      <TweenOneGroup
            enter={{
              scale: 0.8,
              opacity: 0,
              type: 'from',
              duration: 100
              // onComplete: (e: ) => {
              //   e.target.style = ''
              // }
            }}
            leave={{ opacity: 0, width: 0, scale: 0, duration: 200 }}
            appear={false}
          >
            {
              ruleArr.map((tag, idx) => {
                return (
                  <span key={idx} style={{ display: 'inline-block' }}>
                    <Tag closable onClose={(e: Event) => {e.preventDefault();handleClose(tag)}}>
                      {tag.value}
                    </Tag>
                  </span>
                )
              })
            }
          </TweenOneGroup>
    </div>
  )
}

interface iSafeCreateFormProps {
  type: string;
  visible: boolean;
  loading: boolean;
  title: string;
  onCreate: (values: any) => void;
  onCancel: () => void;
  positionTab?: React.ReactNode
}

const SafeCreateForm: React.FC<iSafeCreateFormProps> = ({
  type,
  visible,
  loading,
  onCreate,
  title,
  onCancel,
  positionTab
}) => {
  const [ form ] = Form.useForm()
  const [ ruleType, setRuleType ] = useState<string>('3')
  const [ ruleArr, setRuleArr ] = useState<ruleOption[]>([])
  useEffect(() => {
    form.setFieldsValue({ bidsectionId: tenderStore.tender.bidsectionId })
  }, [ visible, type ])
  const ruleHandler = () => {
    switch (ruleType) {
      case '0':
        setRuleArr([ ...ruleArr, { type: 'name', value: tenderStore.tender.name } ])
        break
      case '1':
        setRuleArr([ ...ruleArr, { type: 'text', value: form.getFieldValue('ruleText') } ])
        break
      case '2':
        setRuleArr([ ...ruleArr, { type: 'date', value: dayjsFomrat(new Date(), 'YYYYMM') } ])
        break
      default:
        setRuleArr([ ...ruleArr, { type: 'code', value: form.getFieldValue('initCode') } ])
        break
    }
  }
  // 处理自动位数编号 -> 联动起始编号
  const digitHandler = (value: any) => {
    if (value) {
      const length = form.getFieldValue('digits')
      const code = parseInt(form.getFieldValue('initCode'))
      const newCode = (Array(length).join('0') + code).slice(-length)
      form.setFieldsValue({ initCode: newCode })
    }
  }

  // 初始化
  const ruleModalIniter = async () => {
    const { code, data } = await apiGetRule(tenderStore.tender.bidsectionId)
    if (code === consts.RET_CODE.SUCCESS) {
      if (data[type]) {
        const obj = JSON.parse(data[type])
        const newRule = []
        delete obj.eg
        for (const key in obj) {
          if (Object.prototype.hasOwnProperty.call(obj, key)) {
            let value = obj[key]
            if (key === 'code') {
              // const code = parseInt(form.getFieldValue('initCode'))
              value = (Array(value.length).join('0') + parseInt(value)).slice(-value.length)
            }
            newRule.push({ type: key, value })
          }
        }
        setRuleArr(newRule)
      }

    }
  }

  useEffect(() => {
    if (visible) {
      ruleModalIniter()
    }
  }, [ visible, type ])
  // useActivate(() => ruleModalIniter())
  return (
    <Modal
      getContainer={false}
      visible={visible}
      title={title}
      okText="确认添加"
      cancelText="取消"
      onCancel={onCancel}
      confirmLoading={loading}
      okButtonProps={{ size: 'small' }}
      cancelButtonProps={{ size: 'small' }}
      onOk={() => {
        form
          .validateFields()
          .then(() => {
            form.resetFields()
            onCreate(ruleArr)
          })
          .catch(info => {
            console.log('Validate Failed:', info)
          })
      }}
    >
      <Form form={form} layout="vertical" size="middle" className={styles.SafeModalForm}>
      <Tabs defaultActiveKey="1" type="card" size="small">
              <TabPane tab="编号规则设置" key="1">
              <div className={styles.ruleContaniner}>
                <h5 className={styles.ruleText}>当前规则：{ruleArr.map(item => item.value).join('-')}</h5>
                <div><RenderTags ruleArr={ruleArr} setRuleArr={setRuleArr}></RenderTags></div>
              </div>
                <Form.Item label="添加新组建规则" name="ruleType" initialValue="3">
                  <Select onChange={(value: string) => setRuleType(value)}>
                    <Option value="0">标段名</Option>
                    <Option value="1">文本</Option>
                    <Option value="2">当前年月</Option>
                    <Option value="3">自动编号</Option>
                  </Select>
                </Form.Item>
                {
                  ruleType === '3' ?
                    <>
                      <Form.Item label="自动编号位数" name="digits" initialValue="3">
                        <InputNumber size="small" min={1} style={{ width: '100%' }} onChange={(value) => digitHandler(value)}></InputNumber>
                      </Form.Item>
                      <Form.Item label="起始编号" name="initCode" initialValue="001">
                        <Input type="number"></Input>
                      </Form.Item>
                    </>
                  : ''
                }
                {
                  ruleType === '1' ?
                  <>
                    <Form.Item label="规则文本" name="ruleText">
                      <Input></Input>
                    </Form.Item>
                  </>
                  : ''
                }
                <ZhButton size="small" onClick={() => ruleHandler()}>添加组件</ZhButton>
              </TabPane>
              {
                positionTab ? { positionTab } : ''
              }
              {/* <TabPane tab="部位设置" key="2"></TabPane> */}
            </Tabs>
      </Form>
    </Modal>
  )
}


export default SafeCreateForm