import React, { useRef, useState } from 'react'
import styles from './index.module.scss'
import { Button, Cascader, Modal } from 'antd'
import MyPopconfirm from '@/components/MyPopconfirm'
import { KuIsTreeType } from '@/pages/D_storeManage/D4impStor/type'
import { MessageFu } from '@/utils/message'

type Props = {
  closeFu: () => void
  kuIsTree: KuIsTreeType[]
  succFu: (val: string, lastId: number) => void
}

function X1setStoreLocS({ closeFu, kuIsTree, succFu }: Props) {
  const [value, setValue] = useState('')
  const lastId = useRef<any>('')

  return (
    <Modal
      wrapClassName={styles.X1setStoreLocS}
      destroyOnClose
      open={true}
      title='批量设置存放位置'
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className='X1Main'>
        <Cascader
          style={{ width: 300 }}
          options={kuIsTree}
          placeholder='请选择'
          // fieldNames={{ label: 'name', value: 'id', children: 'children' }}
          allowClear={false}
          value={value ? value.split(',') : []}
          onChange={(e, e2) => {
            if (e2 && e2.length === 4) lastId.current = e2[3].lastId

            setValue(e ? e.join(',') : '')
          }}
        />
      </div>
      <div className='X1Btn'>
        <Button
          type='primary'
          disabled={!value}
          onClick={() => {
            succFu(value, lastId.current)
            MessageFu.success('设置成功')
            closeFu()
          }}
        >
          提交
        </Button>
        &emsp;
        <MyPopconfirm txtK='取消' onConfirm={closeFu} />
      </div>
    </Modal>
  )
}

const MemoX1setStoreLocS = React.memo(X1setStoreLocS)

export default MemoX1setStoreLocS
