import React, { useCallback, useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import { useLocation } from 'react-router-dom'
import history, { urlParameter } from '@/utils/history'
import { auditObject7API, getObj7InfoTableAPI2, object7infoOutAPI } from '@/store/action/object7'
import { statusObj } from '@/utils/dataChange'
import { RootState } from '@/store'
import { MessageFu } from '@/utils/message'
import BreadTit from '@/components/BreadTit'
import LookObjTable from '@/components/LookObjTable'
import { Button, Select } from 'antd'
import TextArea from 'antd/es/input/TextArea'
const { Option } = Select

function AuditObject7() {
  const dispatch = useDispatch()
  // 获取地址栏参数
  const location = useLocation()
  const urlParamRef = useRef<any>({})
  useEffect(() => {
    urlParamRef.current = urlParameter(location.search)
    // console.log("地址栏参数", urlParamRef.current);
  }, [location])

  // 点击返回
  const cancelFu = () => {
    history.push({
      pathname: `/object`,
      state: {
        k: urlParamRef.current.k ? urlParamRef.current.k : '1',
        d: urlParamRef.current.d
      }
    })
  }

  const getInfo = useCallback(async () => {
    const id = urlParamRef.current.id
    const res1 = await object7infoOutAPI(id)
    const res2 = await getObj7InfoTableAPI2(id)
    const info = res1.data
    info.statusTxt = statusObj[info.status]
    const list = res2.data
    dispatch({ type: 'object7/getLookInfo', payload: { info, list } })
  }, [dispatch])

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

  const { info, list: tableList } = useSelector((state: RootState) => state.object7Store.lookInfo)

  // 审核结果筛选
  const [value, setValue] = useState(3)
  const valueChangeFu = (val: number) => {
    setValue(val)
  }

  // 审核说明
  const [value2, setValue2] = useState('')

  // 点击确定
  const btnOkFu = async () => {
    const txt = value2.replaceAll(' ', '').replaceAll('\n', '')
    if (txt === '') return MessageFu.warning('审核说明不能为空!')
    const res: any = await auditObject7API({
      id: Number(urlParamRef.current.id),
      reason: value2,
      status: value
    })
    if (res.code === 0) {
      MessageFu.success('操作成功!')
      cancelFu()
    }
  }

  return (
    <div className={styles.AuditObject7}>
      <div className='breadTit'>
        <BreadTit>
          <div className='breadTitRow'>征集管理</div>
          <div className='splitStr'>/</div>
          <div className='breadTitRow active'>审核</div>
        </BreadTit>
      </div>
      <div className='objectSonMain'>
        <div className='topTit'>征集信息</div>
        <div className='topInfo'>
          <div className='topInfoRow'>
            <div>
              <div className='one'>征集编号：</div>
              <div>{info.num}</div>
            </div>
            <div>
              <div className='one'>征集人员：</div>
              <div>{info.creatorName}</div>
            </div>
            <div>
              <div className='one'>征集方式：</div>
              <div>{info.sourceName}</div>
            </div>
          </div>
          <div className='topInfoTex' title={info.description}>
            <span>征集说明：</span>
            {info.description ? info.description : '-'}
          </div>
        </div>
        <br />
        <div className='topTit'>藏品信息</div>

        <div className='goodsInfo'>
          {/* 封装的表格信息 */}
          <LookObjTable isZj={true} data={tableList} y={245} />
          <br />
          <div className='inputBox1'>
            <div className='inputBoxTit'>
              <span>* </span>审核结果：
            </div>
            <Select style={{ width: 150 }} value={value} onChange={val => valueChangeFu(val)}>
              <Option value={3}>通过</Option>
              <Option value={2}>不通过</Option>
            </Select>
          </div>
          <div className='inputBox1 inputBox2'>
            <div className='inputBoxTit'>
              <span>* </span>审核说明：
            </div>
            <div className='inputBoxText'>
              <TextArea
                value={value2}
                onChange={e => setValue2(e.target.value)}
                rows={3}
                placeholder='请输入'
                showCount
                maxLength={255}
              />
            </div>
          </div>
        </div>

        <div className='backBtn'>
          <Button onClick={btnOkFu} type='primary'>
            提交
          </Button>
          &emsp;
          <Button onClick={cancelFu}>返回</Button>
        </div>
      </div>
    </div>
  )
}

const MemoAuditObject7 = React.memo(AuditObject7)

export default MemoAuditObject7
