import { Text, View } from '@tarojs/components'
import { memo, useCallback, useEffect, useRef, useState } from 'react'
import styles from './index.module.scss'
import UploadImage from '@/components/uploadImage'
import Popup from '@/components/popup'
import TextareaEnhance from '@/components/textareaEnhance'
import { ReturnApplyLogisticsApi } from '@/api/salesAfterOrder'
import { alert } from '@/common/common'

interface Param {
  show?: true|false
  onClose?: () => void
  onSubmit?: () => void
  id?: number // 订单id
}
export default memo(({ show = false, onClose, onSubmit, id = 0 }: Param) => {
  // 需要提交的数据
  const submitData = useRef({
    accessory_url: [],
    remark: '',
    id: 0,
  })
  useEffect(() => {
    if (id) { submitData.current.id = id }
  }, [id])

  // 获取图片列表
  const getImageList = useCallback((list) => {
    submitData.current.accessory_url = list
  }, [])

  // 备注
  const getOtherReason = useCallback((val) => {
    submitData.current.remark = val
  }, [])

  // 确定
  const { fetchData } = ReturnApplyLogisticsApi()
  const onSubmitEven = async() => {
    if (!id) { return alert.error('参数有误') }
    if (submitData.current.accessory_url.length <= 0) { return alert.error('请上传附件') }
    const res = await fetchData(submitData.current)
    if (res.success) {
      alert.success('上传成功')
    }
    else {
      alert.error('上传失败')
    }
  }

  return (
    <>
      <Popup show={show} title="上传物流" onClose={onClose}>
        <View className={styles.logistics_main}>
          <View className={styles.logistics_image}>
            <Text className={styles.title_desc}>上传附件：</Text>
            <View className={styles.upload_image}>
              <UploadImage onChange={getImageList} />
            </View>
          </View>
          <View className={styles.logistics_desc}>
            <TextareaEnhance onChange={getOtherReason} title="备注：" placeholder="请输入备注信息" />
          </View>
          <View className={styles.btns_two}>
            <View className={styles.verify_btn} onClick={() => onSubmitEven()}>保存</View>
          </View >
        </View>
      </Popup>
    </>
  )
})
