import { ScrollView, Text, View } from '@tarojs/components'
import { memo, useCallback, useEffect, useRef, useState } from 'react'
import classnames from 'classnames'
import ReasonPopup from '../reasonPopup'
import styles from './index.module.scss'
import TextareaEnhance from '@/components/textareaEnhance'
import Popup from '@/components/popup'
import { ApplyRefundApi, RefundExplainApi } from '@/api/salesAfterOrder'
import { alert } from '@/common/common'

interface Param {
  show?: true | false
  onClose?: () => void
  orderId?: number
  onSuccess?: () => void
}
const ApplyRefund = ({ show, onClose, orderId, onSuccess }: Param) => {
  // 提交的数据
  const submitData = useRef({
    return_explain: 0,
    sale_order_id: 0,
    reason_describe: '',
  })

  // 申请退款
  const { fetchData } = ApplyRefundApi()
  const getApplyRefund = async() => {
    if (!submitData.current.return_explain) { return alert.error('请选择说明原因') }
    const res = await fetchData(submitData.current)
    if (res.success) {
      alert.success('申请成功')
      onSuccess?.()
    }
    else {
      alert.error('申请失败')
    }
    onClose?.()
  }

  // 获取说明数据
  const [list, setList] = useState<any[]>([])
  const { fetchData: refundExplainFetchdata } = RefundExplainApi()
  const refundExplain = async() => {
    const res = await refundExplainFetchdata()
    setList(() => res.data.list)
  }

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

  // 显示说明
  const [showReason, setShowReason] = useState(false)
  const closeReason = useCallback(() => {
    setShowReason(false)
  }, [])
  const [reason, setReason] = useState({ id: 0, name: '' })
  const reasonSelect = useCallback((e) => {
    setReason({ ...reason, name: e.name, id: e.id })
    submitData.current.return_explain = e.id
    closeReason()
  }, [])
  // 提交
  const onSubmit = (val) => {
    if (val == 2) {
      getApplyRefund()
    }
    else {
      onClose?.()
      submitData.current = {
        return_explain: 0,
        sale_order_id: 0,
        reason_describe: '',
      }
    }
  }
  useEffect(() => {
    if (show && orderId) {
      submitData.current.sale_order_id = orderId
      refundExplain()
    }
  }, [orderId, show])
  return (
    <>
      <Popup show={show} title="申请退款" onClose={onClose}>
        <View className={styles.apply_after_sales_con}>
          <View className={styles.returnSaleInput_item}>
            <View className={styles.title}>退款说明</View>
            <View className={styles.select} onClick={() => setShowReason(true)}>
              <Text className={reason.name ? styles.selected : ''}>{reason.name || '请选择'}</Text>
              <Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
            </View>
          </View>
          <TextareaEnhance onChange={getOtherReason} title="备注" placeholder="请输入退款备注" />
          <View className={styles.btns_con}>
            <View className={styles.btns_two}>
              <View className={styles.rest_btn} onClick={() => onSubmit(1)}>
                取消
              </View>
              <View className={styles.verify_btn} onClick={() => onSubmit(2)}>
                确认
              </View>
            </View>
          </View>
        </View>
      </Popup>
      <ReasonPopup defaultValue={reason.id} show={showReason} onClose={closeReason} list={list} title="退款说明" onSelect={reasonSelect} />
    </>
  )
}
export default memo(ApplyRefund)