import React, { useCallback, useEffect, useRef } from 'react'
import styles from './index.module.scss'
import {
  Button,
  Cascader,
  Form,
  FormInstance,
  Input,
  InputNumber,
  Modal,
  Radio,
  Select
} from 'antd'
import { A1ListType, A1select1 } from '../data'
import MyPopconfirm from '@/components/MyPopconfirm'
import { MessageFu } from '@/utils/message'
import { A1_APIsave } from '@/store/action/A1record'
import ZupOne from '@/components/ZupOne'
import { myCity } from '@/utils/history'
import { useSelector } from 'react-redux'
import { RootState } from '@/store'
import TextArea from 'antd/es/input/TextArea'

type Props = {
  sInfo: A1ListType
  closeFu: () => void
  upTableFu: () => void
}

function A1edit({ sInfo, closeFu, upTableFu }: Props) {
  // 表单的ref
  const FormBoxRef = useRef<FormInstance>(null)

  // 封面图的ref
  const ZupThumbRef = useRef<any>(null)

  // 编辑进来获取详情
  const getInfoFu = useCallback(() => {
    const obj: any = sInfo

    // 线索地址
    if (obj.province) obj.myCity = [obj.province]
    if (obj.city) obj.myCity.push(obj.city)
    if (obj.region) obj.myCity.push(obj.region)
    obj.dictVillageId = obj.dictVillageId || null

    FormBoxRef.current?.setFieldsValue(obj)

    // 设置封面图
    ZupThumbRef.current?.setFileComFileFu({
      fileName: '',
      filePath: sInfo.thumbPc,
      thumb: sInfo.thumb
    })
  }, [sInfo])

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

  // 没有通过校验
  const onFinishFailed = useCallback(() => {}, [])

  //  通过校验点击确定
  const onFinish = useCallback(
    async (values: any) => {
      const coverUrl1 = ZupThumbRef.current?.fileComFileResFu()
      // 没有传 封面图
      // if (!coverUrl1.filePath) return MessageFu.warning('请上传封面图')

      // 线索地址
      let province = ''
      let city = ''
      let region = ''

      if (values.myCity && values.myCity.length) {
        province = values.myCity[0] || ''
        city = values.myCity[1] || ''
        region = values.myCity[2] || ''
      }

      const obj = {
        ...values,
        id: sInfo.id > 0 ? sInfo.id : null,
        province,
        city,
        region,
        thumb: coverUrl1.thumb || '',
        thumbPc: coverUrl1.filePath || ''
      }

      // if (1 + 1 === 2) {
      //   console.log('------222', obj)
      //   return
      // }

      const res = await A1_APIsave(obj)

      if (res.code === 0) {
        MessageFu.success('编辑成功')
        upTableFu()
        closeFu()
      }
    },
    [closeFu, sInfo.id, upTableFu]
  )

  // 获取字典
  const listObj = useSelector((state: RootState) => state.A3dict.listObj)

  return (
    <Modal
      wrapClassName={styles.A1edit}
      open={true}
      title='编辑档案'
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className='A1Emain'>
        <Form
          ref={FormBoxRef}
          name='basic'
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete='off'
          scrollToFirstError
        >
          <div className='A1ERow A1ERowAll'>
            <Form.Item label='古桥名称' name='name'>
              <Input disabled />
            </Form.Item>
          </div>

          <div className='A1ERow'>
            <Form.Item
              label='结构形式'
              name='type'
              rules={[{ required: true, message: '请选择结构形式' }]}
            >
              <Radio.Group options={A1select1} />
            </Form.Item>

            <Form.Item label='建造年代' name='age'>
              <Input maxLength={30} showCount placeholder='请输入内容' />
            </Form.Item>
          </div>

          <div className='A1ERow'>
            <Form.Item label='所在位置' name='myCity'>
              <Cascader options={myCity} placeholder='请选择' allowClear changeOnSelect />
            </Form.Item>
            <Form.Item label='详细地址' name='address'>
              <Input maxLength={50} showCount placeholder='请输入内容' />
            </Form.Item>
          </div>

          <div className='A1ERow'>
            <Form.Item label='经度' name='lat'>
              <InputNumber stringMode placeholder='请输入' style={{ width: 568 }} />
            </Form.Item>
            <Form.Item label='纬度' name='lng'>
              <InputNumber stringMode placeholder='请输入' style={{ width: 568 }} />
            </Form.Item>
          </div>

          <div className='A1ERow'>
            <Form.Item label='所属乡镇' name='dictVillageId'>
              <Select
                allowClear
                placeholder='请选择'
                options={listObj.village.map(v => ({ value: v.id, label: v.name }))}
              />
            </Form.Item>
            <Form.Item label='所属村委会' name='village'>
              <Input maxLength={30} showCount placeholder='请输入内容' />
            </Form.Item>
          </div>

          <div className='A1ERow'>
            <Form.Item label='场景链接' name='sceneLink'>
              <TextArea placeholder='请输入' maxLength={200} showCount />
            </Form.Item>
            <Form.Item label='模型链接' name='moduleLink'>
              <TextArea placeholder='请输入' maxLength={200} showCount />
            </Form.Item>
          </div>

          <div className='A1ERow'>
            <div className='formRow'>
              <div className='formLeft'>封面图：</div>
              <div className='formRight'>
                <ZupOne
                  ref={ZupThumbRef}
                  isLook={false}
                  fileCheck={false}
                  size={5}
                  dirCode='A1record'
                  myUrl='cms/bridge/upload'
                  format={['image/jpeg', 'image/png']}
                  formatTxt='png、jpg和jpeg'
                  checkTxt='请上传封面图'
                  upTxt='最多1张'
                  myType='thumb'
                />
              </div>
            </div>
            <div className='A3fromRow'>
              <Form.Item
                label='排序值'
                name='sort'
                rules={[{ required: true, message: '请输入排序值' }]}
              >
                <InputNumber
                  style={{ width: 568 }}
                  min={1}
                  max={999}
                  precision={0}
                  placeholder='请输入'
                />
              </Form.Item>
              <div className='A3_6Frow'>
                请输入1~999的数字。数字越小，排序越靠前。数字相同时，更新发布的内容排在前面
              </div>
            </div>
          </div>

          {/* 确定和取消按钮 */}
          <Form.Item className='A1EBtn'>
            <Button type='primary' htmlType='submit'>
              提交
            </Button>
            <br />
            <br />
            <MyPopconfirm txtK='取消' onConfirm={closeFu} />
          </Form.Item>
        </Form>
      </div>
    </Modal>
  )
}

const MemoA1edit = React.memo(A1edit)

export default MemoA1edit
