import React, { useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss'
import { Z3_APIgetInfo, Z3_APIsave } from '@/store/action/Z3flowSet'
import { Button, Radio, Select } from 'antd'
import TextArea from 'antd/es/input/TextArea'
import MyPopconfirm from '@/components/MyPopconfirm'
import { MessageFu } from '@/utils/message'
import { UserTableListType } from '@/types'
import { Z3tableType } from '../type'

type Props = {
  sId: number
  closeFu: () => void
  succFu: () => void
  userList: UserTableListType[]
}

function Z3edit({ sId, closeFu, succFu, userList }: Props) {
  const [info, setInfo] = useState({} as Z3tableType)

  const getInfoFu = useCallback(async (id: number) => {
    const res = await Z3_APIgetInfo(id)
    if (res.code === 0) {
      const data: Z3tableType = res.data

      const copyUserIds = (
        data.copyUserIds ? data.copyUserIds.split(',').map(v => Number(v)) : ''
      ) as string

      setInfo({
        ...data,
        copyUserIds
      })
    }
  }, [])

  useEffect(() => {
    getInfoFu(sId)
  }, [getInfoFu, sId])

  const formChange = useCallback(
    (key: 'enabled' | 'remark' | 'isCopy' | 'copyUserIds', val: any) => {
      setInfo({
        ...info,
        [key]: val
      })
    },
    [info]
  )

  // 点击确定
  const btnOk = useCallback(async () => {
    let copyUserIds: any = info.copyUserIds
    copyUserIds = copyUserIds ? copyUserIds.join(',') : ''

    const obj = {
      ...info,
      copyUserIds
    }

    if (info.isCopy === 1) {
      if (!copyUserIds) return MessageFu.warning('请选择抄送对象')
    } else obj.copyUserIds = ''

    const res = await Z3_APIsave(obj)
    if (res.code === 0) {
      MessageFu.success('编辑成功')
      succFu()
      closeFu()
    }
  }, [closeFu, info, succFu])

  return (
    <div className={styles.Z3edit}>
      <div className='Z3main'>
        <div className='Z3RowBox'>
          <div className='Z3row'>
            <div className='Z3row1'>流程类型：</div>
            <div className='Z3row2'>{info.typeKey}</div>
          </div>
          <div className='Z3row'>
            <div className='Z3row1'>流程名称：</div>
            <div className='Z3row2'>{info.name}</div>
          </div>

          <div className='Z3row'>
            <div className='Z3row1'>
              <span> * </span> 流程状态：
            </div>
            <div className='Z3row2'>
              <Radio checked={info.enabled === 1} onClick={() => formChange('enabled', 1)}>
                启用
              </Radio>
              &emsp;
              <Radio checked={info.enabled === 0} onClick={() => formChange('enabled', 0)}>
                禁用
              </Radio>
            </div>
          </div>

          <div className='Z3row'>
            <div className='Z3row1'>
              <span> * </span> 抄送规则：
            </div>
            <div className='Z3row2'>
              <Radio checked={info.isCopy === 0} onClick={() => formChange('isCopy', 0)}>
                无需抄送
              </Radio>
              &emsp;
              <Radio checked={info.isCopy === 1} onClick={() => formChange('isCopy', 1)}>
                完成时抄送
              </Radio>
            </div>
          </div>

          <div className='Z3row' hidden={info.isCopy !== 1}>
            <div className='Z3row1 Z3row1_2'>
              <span> * </span> 抄送对象：
            </div>
            <div className='Z3row2'>
              <Select
                showSearch={false}
                mode='multiple'
                allowClear
                style={{ width: '100%' }}
                placeholder='请选择'
                value={info.copyUserIds ? info.copyUserIds : []}
                onChange={value => formChange('copyUserIds', value)}
                options={userList}
                fieldNames={{ value: 'id', label: 'realName' }}
              />
            </div>
          </div>

          <div className='Z3row'>
            <div className='Z3row1'>流程说明：</div>
            <div className='Z3row2'>
              <TextArea
                maxLength={500}
                showCount
                placeholder='请输入内容'
                value={info.remark}
                onChange={e => formChange('remark', e.target.value)}
              />
            </div>
          </div>
        </div>

        {/* 右侧按钮 */}
        <div className='Z3btn'>
          <Button type='primary' onClick={btnOk}>
            保存
          </Button>{' '}
          &emsp;
          <MyPopconfirm txtK='取消' onConfirm={closeFu} />
        </div>
      </div>
    </div>
  )
}

const MemoZ3edit = React.memo(Z3edit)

export default MemoZ3edit
