import { View } from '@tarojs/components'
import Taro, { useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro'
import type { ReactNode } from 'react'
import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
import classnames from 'classnames'
import OfflinePay from '../order/components/offlinePay'
import PayPopup from '../order/components/PayPopup'
import styles from './index.module.scss'
import AdvanceOrderState from './components/advanceOrderState'
import AddressDetailBox from './components/addressDetailBox'
import BottomApply from './components/BottomApply'
import OrderState from './components/orderState'
import Remark from '@/components/textareaEnhance'
import Popup from '@/components/popup'
import BottomBtns from '@/components/BottomBtns'
import { debounce } from '@/common/util'
import {
  GetPayCode,
  MpSaleOrder,
  MpSaleOrderAddress,
  MpSaleOrderCancel,
  MpSaleOrderPut,
  MpSaleOrderReceive,
  MpSaleOrderShipmentMode,
  MpShoppingCartProductColorList,
  OrderPaymentOrderPaymentMethodInfo,
  OrderPaymentOrderPaymentSubmission,
  OrderPaymentPreCollectOrderOrderPaymentMethodInfo,
  OrderPaymentPreCollectOrderOrderPaymentSubmission,
} from '@/api/order'
import { alert, goLink } from '@/common/common'
import { formatDateTime, formatHashTag, formatPriceDiv, formatRemoveHashTag, formatWeightDiv } from '@/common/format'
import IconFont from '@/components/iconfont/iconfont'
import { IMG_CND_Prefix, PAY_H5_CODE_URL } from '@/common/constant'
import SaleCodeList from '@/components/SaleCodeList'
import LabAndImg from '@/components/LabAndImg'
import Tag from '@/components/tag'

// 卡片盒子元素
interface Obs {
  title?: string
  modeName?: string
  showMode?: boolean
  children?: ReactNode
  clickNode?: () => void
}

const DefaultBox = (props: Obs) => {
  const {
    title = '标题',
    modeName = '大货',
    showMode = false,
    children,
    clickNode,
  } = props

  return (
    <View className={styles.defaltBox}>
      <View className={styles.titleBox}>
        <View className={styles.title}>{title}</View>
        {
          showMode && <View className={styles.modeName} onClick={() => clickNode?.()}>{modeName}</View>
        }
      </View>
      <View className={styles.modeLine}></View>
      {children}
    </View>
  )
}
const DefaultBoxWithMemo = memo(DefaultBox)

// 产品商品元素
interface PropGoods {
  // item?: {
  //     code?: string | number
  // }
  list: any[]
  obj: {
    sale_mode?: number | string
  }
}
const GoodsItem = (porps: PropGoods) => {
  const { list = [], obj = {} } = porps
  const labAndImgObj = useCallback((item) => {
    return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url }
  }, [])
  return (
    <>
      {
        list.map((item, index) => {
          return (
            <View className={styles.goodsBox} key={index}>
              <View className={styles.goodsProduct}>{item.code}# {item.name}</View>
              <View className={styles.goodsLine}></View>
              {
                item.product_colors.map((it, inx) => {
                  return (
                    <View className={styles.itemGoods} key={inx}>
                      <View className={styles.itemPic}>
                        <LabAndImg value={labAndImgObj(it)} />
                      </View>
                      {/* <View className={styles.itemPic} style={{ backgroundColor: `rgb(${it?.rgb?.r} ${it?.rgb?.g} ${it?.rgb?.b})` }}></View> */}
                      <View className={styles.itemRight}>
                        <View className={styles.item_right_top}>
                          <View className={styles.itemName}>{formatHashTag(it.code, it.name)}</View>
                          <View className={styles.itemNums}>x{obj?.sale_mode === 0 ? it.roll : it.length / 100}{obj?.sale_mode === 0 ? '条' : 'm'}</View>
                        </View>
                        <View className={styles.item_right_Bottom}>
                          <View className={styles.flexBox}>
                            <View className={styles.itemMoney}>¥{formatPriceDiv(it.sale_price)}/{obj?.sale_mode === 1 ? 'm' : 'kg'}</View>
                            {
                              obj?.sale_mode === 0 && it?.sale_price !== it?.standard_sale_price && <View className={styles.lastBox}>¥{it?.standard_sale_price / 100}/{obj?.sale_mode === 1 ? 'm' : 'kg'}</View>
                            }
                          </View>
                          <View className={styles.itemMoneyOne}>¥{formatPriceDiv(it.total_sale_price)}</View>
                        </View>
                      </View>
                    </View>
                  )
                })
              }
            </View>
          )
        })
      }
    </>

  )
}
const GoodsItemWithMemo = memo(GoodsItem)

const OrderDetails = () => {
  const router = useRouter()
  // useEffect(() => {
  //     getDetail()
  // }, [])

  // 收货方法,1:自提，2物流
  const [receivingStatus, setReceivingStatus] = useState(null)
  // 切换自提或者物流
  const { fetchData: selectFetch } = MpSaleOrderShipmentMode()
  const onReceivingStatus = debounce(async(e, value) => {
    if (infoObj.status === 8 || infoObj.status === 9 || infoObj.status === 4 || infoObj.status === 5 || infoObj.status === 3 || infoObj.status === 11) {
      alert.error('不允许更改')
      return false
    }
    e.stopPropagation()
    if (receivingStatus === value) {
      alert.error('不能选择相同的方式')
      return false
    }
    Taro.showLoading({
      title: '请稍等...',
      mask: true,
    })
    const res = await selectFetch({ id: Number(infoObj.id), shipment_mode: value })
    if (res.msg === 'success') {
      Taro.hideLoading()
      Taro.showToast({
        title: '成功',
        icon: 'success',
      })
      setReceivingStatus(value)
      getDetail()
    }
    else {
      if (res.data.code == 70029) {
        Taro.hideLoading()
        Taro.showToast({
          title: res.msg,
          icon: 'error',
        })
      }
      else {
        Taro.hideLoading()
        Taro.showToast({
          title: '请先去新增地址',
          icon: 'error',
        })
      }
    }
  }, 300)

  const { fetchData: infoFetch } = MpSaleOrder()
  const [infoObj, setInfoObj] = useState<any>({})
  // 获取订单详情
  const getDetail = async() => {
    Taro.showLoading({
      title: '加载中...',
      mask: true,
    })
    const res = await infoFetch({ id: router.params.id })

    orderMsg.map((it) => {
      if (it.leftTitle === '订单编号：') {
        it.rightTitle = res.data.order_no
      }
      if (it.leftTitle === '创建时间：') {
        it.rightTitle = formatDateTime(res.data.create_time)
      }
      if (it.leftTitle === '发货时间：') {
        it.rightTitle = formatDateTime(res.data.delivery_time)
      }
      if (it.leftTitle === '业务员：') {
        it.rightTitle = res.data.sale_user_name
      }
      if (res.data.change_time !== '') {
        if (it.leftTitle === '编辑时间：') {
          it.rightTitle = formatDateTime(res.data.change_time)
        }
      }
      else {
        if (it.leftTitle === '编辑时间：') {
          it.showFont = false
        }
      }
    })
    res.data.picUrl = res.data.delivery_appendix_url?.map((item) => {
      item = IMG_CND_Prefix + item
      return item
    })
    res.data.logistics_details?.map((item) => {
      if (item.status == '待收货') {
        item.delivery_appendix_url = res.data.delivery_appendix_url?.map((item) => {
          item = IMG_CND_Prefix + item
          return item
        })
      }
      return item
    })
    setInfoObj(res.data)
    setOrderMsg([...orderMsg])
    setReceivingStatus(res.data.shipment_mode)
    // 小程序提供的api，通知页面停止下拉刷新效果
    Taro.stopPullDownRefresh()
    Taro.hideLoading()
  }
  // 复制功能
  const clipboardData = () => {
    Taro.setClipboardData({
      data: infoObj?.order_no || '',
      success(res) {
        Taro.showToast({
          icon: 'none',
          title: '复制成功',
        })
      },
    })
  }

  // useEffect(() => {
  //     setReceivingStatus(receivingStatus)
  // }, [receivingStatus])
  // 订单信息文字数组
  const [orderMsg, setOrderMsg] = useState<any[]>([
    {
      leftTitle: '订单编号：',
      rightTitle: '------',
      showBtn: true,
      showFont: true,
    },
    {
      leftTitle: '创建时间：',
      rightTitle: '------',
      showFont: true,
    },
    {
      leftTitle: '发货时间：',
      rightTitle: '------',
      showFont: true,
    },
    {
      leftTitle: '业务员：',
      rightTitle: '------',
      showFont: true,
    },
    {
      leftTitle: '编辑时间：',
      rightTitle: '------',
      showFont: true,

    },
  ])

  // 备注操作
  const [showDesc, setShowDesc] = useState(false)
  const { fetchData: remarkFetch } = MpSaleOrderPut()
  const getRemark = async() => {
    const res = await remarkFetch({ remark: infoObj.remark, id: Number(router.params.id) })
    if (res.msg === 'success') {
      Taro.showToast({
        title: '成功',
        icon: 'success',
      })
      setShowDesc(false)
      getDetail()
    }
  }

  // 更多按钮查看操作
  const [showMore, setShowMore] = useState(false)

  // 刷新页面
  const refresh = useCallback(() => {
    alert.loading('刷新中')
    getDetail()
  }, [])

  const { fetchData: cancelFetch } = MpSaleOrderCancel()
  // 取消订单
  const cancle = async(e, item) => {
    e.stopPropagation()
    Taro.showModal({
      content: '确定要取消吗？',
      confirmText: '确认',
      cancelText: '取消',
      async success(res) {
        if (res.confirm) {
          Taro.showLoading({
            title: '请稍等...',
            mask: true,
          })
          const res = await cancelFetch({ id: item.id })
          if (res.msg === 'success') {
            Taro.showToast({
              title: '取消成功',
            })
            Taro.hideLoading()
            getDetail()
          }
          else {
            Taro.showToast({
              title: res.msg,
              icon: 'error',
            })
          }
        }
      },
    })
  }
  // 再次购买
  const { fetchData: buyFetch } = MpShoppingCartProductColorList()
  const nextBuy = async(e, item) => {
    e.stopPropagation()
    Taro.showLoading({
      title: '请稍等...',
      mask: true,
    })
    const arr: any = []
    item.product_list.forEach((item) => {
      item.product_colors.forEach((it) => {
        arr.push({
          length: it.length,
          roll: it.roll,
          product_color_id: it.id,
        })
      })
    })
    const query = {
      purchaser_id: item.purchaser_id,
      sale_mode: item.sale_mode,
      color_list: arr,
    }
    const res = await buyFetch(query)
    if (res.msg === 'success') {
      Taro.showToast({
        title: '加入购物车成功!',
      })
      Taro.hideLoading()
      getDetail()
    }
    else {
      Taro.showToast({
        title: res.msg,
        icon: 'error',
      })
    }
  }

  // 扫码支付
  const [showSide, setShowSide] = useState(true)
  const [title, setTitle] = useState('')
  const [picUrl, setPicUrl] = useState('')

  // 显示支付
  const [showPay, setShowPay] = useState(false)
  // 去支付逻辑
  const { fetchData: infoOneFetch } = OrderPaymentOrderPaymentMethodInfo()
  const { fetchData: infoTwoFetch } = OrderPaymentPreCollectOrderOrderPaymentMethodInfo()
  const [payList, setPayList] = useState<any[]>([
    {
      id: 2,
      iconfont: 'icon-yufukuan1',
      name: '预存款',
      fonts: '可用额度 ',
      money: '',
      isCheck: false,
    },
    {
      id: 5,
      iconfont: 'icon-xianxiahuizong',
      name: '货到付款',
      fonts: '发货后3天内付款',
      isCheck: false,
      money: '',
      color: '#ffffff',
    },
    {
      id: 3,
      iconfont: 'icon-a-0tianzhangqi',
      name: 'x天账期',
      fonts: '可用额度 ',
      money: '',
      isCheck: false,
    },
    {
      iconfont: 'icon-yue',
      name: '线下汇款',
    },
    {
      iconfont: 'icon-saomiao',
      name: '扫码支付',
      color: '#ffffff',
    },
  ])
  const toPay = async(e, item) => {
    e.stopPropagation()

    if (item.status !== 10) {
      const res = await infoOneFetch({ id: item.should_collect_order_id })
      setmd5Key(res.data.md5_key)
      payList.map((item) => {
        if (item.id === 3) {
          item.name = `${res.data.account_period}天账期`
          item.fonts = `可用额度${formatPriceDiv(
            res.data.account_period_credit_available_line,
          ).toLocaleString()}`
        }
        if (item.id === 2) {
          item.fonts = `可用额度${formatPriceDiv(
            res.data.advance_deposit_balance,
          ).toLocaleString()}`
        }
        return item
      })
      setPayList([...payList])
      if (item.is_shipper_picks_up) {
        const obj = payList.filter((item) => {
          return item.id === 6
        })
        console.log(obj, '456456')
        if (obj.length === 0) {
          payList.unshift({
            id: 6,
            iconfont: 'icon-huozhuziti',
            name: '货主自提',
            color: '#ffffff',
            fonts: '',
            money: '',
            isCheck: false,
          })
          setPayList([...payList])
        }
      }
    }
    else {
      const res = await infoTwoFetch({ id: item.pre_collect_order_id })
      setmd5Key(res.data.md5_key)
      const arr: any = []
      arr.push(
        {
          id: 2,
          iconfont: 'icon-yufukuan1',
          name: '预存款',
          fonts: `可用额度${formatPriceDiv(
            res.data.advance_deposit_balance,
          ).toLocaleString()}`,
          money: '',
          isCheck: false,
        },
        {
          iconfont: 'icon-yue',
          name: '线下汇款',
        },
        {
          iconfont: 'icon-saomiao',
          name: '扫码支付',
          color: '#ffffff',
        },
      )
      if (item.is_shipper_picks_up) {
        const obj = arr.filter((item) => {
          return item.id === 6
        })
        if (obj.length === 0) {
          arr.unshift({
            id: 6,
            iconfont: 'icon-huozhuziti',
            name: '货主自提',
            fonts: '',
            money: '',
            isCheck: false,
            color: '#ffffff',
          })
        }
      }
      setPayList([...arr])
    }
    setShowSide(true)
    setTitle('待支付款项')
    setShowPay(true)
  }

  useDidShow(() => {
    getDetail()
  })
  // 页面下拉刷新
  usePullDownRefresh(() => {
    getDetail()
  })

  const [md5Key, setmd5Key] = useState('')

  const { fetchData: payFetch } = GetPayCode()
  const handScanpay = async() => {
    const list: any = []
    infoObj.product_list.forEach((item) => {
      item.product_colors.forEach((it) => {
        list.push({
          product_code: item.code,
          product_name: item.name,
          product_color_code: formatRemoveHashTag(it.code),
          product_color_name: it.name,
          num: it.roll.toString(),
          weight: formatWeightDiv(it.actual_weight).toString(),
          sale_price: (it.sale_price / 100).toString(),
          total_price:
                        it.total_sale_price !== 0
                          ? (it.total_sale_price / 100).toString()
                          : (it.estimate_amount / 100).toString(),
          length: (it.length / 100).toString(),
          weight_error: formatWeightDiv(it.weight_error).toString(),
        })
      })
    })
    const query = {
      list,
      title: '面料销售电子确认单',
      show_qrcode: true,
      show_barcode: true,
      order_type: infoObj.sale_mode_name,
      shipment_mode: infoObj.shipment_mode_name,
      company: infoObj.title_purchaser_name,
      sale_user: infoObj.sale_user_name,
      order_created_time: formatDateTime(infoObj.create_time),
      order_no: infoObj.order_no,
      target_user_name: infoObj.target_user_name,
      target_address: infoObj.address_detail,
      target_description: infoObj.remark,
      pay_account: infoObj.transfer_remittance_account,
      bank_account_name: infoObj.account_name,
      bank_name: infoObj.bank_of_deposit,
      pay_type: infoObj.settle_mode_name,
      client: infoObj.purchaser_name,
      phone: infoObj.target_user_phone,
      order_total_length: (infoObj.total_number / 100).toString(),
      order_total_price: (
        infoObj.bill_total_sale_price / 100
      ).toString(),
      total_weight_error_discount: (
        infoObj.total_weight_error_discount / 100
      ).toString(),
      order_total_num: infoObj.total_number.toString(),
      qrcode: `${PAY_H5_CODE_URL}?key=${md5Key}`,
      order_total_weight: (infoObj.total_weight / 1000).toString(),
      estimate_amount: (infoObj.estimate_amount / 100).toString(),
      total_sale_price: (infoObj.total_sale_price / 100).toString(),
      actual_amount: (infoObj.actual_amount / 100).toString(),
      wait_pay_amount: (infoObj.wait_pay_amount / 100).toString(),
      order_total_weight_error: (
        infoObj.total_weight_error / 1000
      ).toString(),
      show_sale_price: infoObj?.sale_mode === 0 && infoObj?.is_display_price ? true : !!((infoObj?.sale_mode === 1 || infoObj?.sale_mode === 2)),
      show_total_price: infoObj?.sale_mode === 0 && infoObj?.is_display_price ? true : !!((infoObj?.sale_mode === 1 || infoObj?.sale_mode === 2)),
      show_estimate_amount: infoObj?.sale_mode === 0 && infoObj?.is_display_price ? true : !!((infoObj?.sale_mode === 1 || infoObj?.sale_mode === 2)),
      show_total_sale_price: infoObj?.sale_mode === 0 && infoObj?.is_display_price ? true : !!((infoObj?.sale_mode === 1 || infoObj?.sale_mode === 2)),
      show_total_weight_error_discount: infoObj?.sale_mode === 0 && infoObj?.is_display_price ? true : !!((infoObj?.sale_mode === 1 || infoObj?.sale_mode === 2)),
      show_actual_amount: infoObj?.sale_mode === 0 && infoObj?.is_display_price ? true : !!((infoObj?.sale_mode === 1 || infoObj?.sale_mode === 2)),
      show_wait_pay_amount: infoObj?.sale_mode === 0 && infoObj?.is_display_price ? true : !!((infoObj?.sale_mode === 1 || infoObj?.sale_mode === 2)),
      show_tips: true,
      tips: `请核对本单后验收， <b>如发现质量问题，请于收到货之日起3天内与平台客服联系协商解决，</b>逾期不作处理即表示购方默认对货物无异议；<b>购方确认无任何问题方可裁剪/加工，一经裁剪，缩水等工艺，平台概不负责；</b>
      看布购货，请先试缩水，并注意分缸裁布！如需撞色拼接，请先试色牢度。非质量问题，恕不退换，谢谢合作！`,
    }
    const res = await payFetch(query)
    if (res.data) {
      console.log(res.data.base64)
      setShowSide(false)
      setTitle('查看销售码单')
      setPicUrl(res.data.base64)
    }
  }

  // 确认交易
  const { fetchData: payOneFetch } = OrderPaymentOrderPaymentSubmission()
  const { fetchData: payTwoFetch } = OrderPaymentPreCollectOrderOrderPaymentSubmission()
  const handsurePay = (obj) => {
    let arr: any = []
    // if (obj.status !== 10) {
    arr = payList.filter((item) => {
      return item.checked
    })
    if (!arr.length) {
      Taro.showToast({
        title: '请选择后再提交',
        icon: 'error',
      })
      return false
    }

    Taro.showModal({
      content: '确定交易吗？',
      confirmText: '确认',
      cancelText: '取消',
      async success(res) {
        if (res.confirm) {
          Taro.showLoading({
            title: '请稍等...',
            mask: true,
          })
          const restult = await (obj.status !== 10 ? payOneFetch({ id: Number(obj.should_collect_order_id), payment_method: Number(arr[0]?.id) }) : payTwoFetch({ id: Number(obj.pre_collect_order_id), payment_method: Number(arr[0]?.id) }))
          if (restult?.msg === 'success') {
            Taro.showToast({
              title: '交易成功',
            })
            Taro.hideLoading()
            setShowPay(false)
            getDetail()
          }
          else {
            Taro.hideLoading()
            Taro.showToast({
              title: restult?.msg,
              icon: 'error',
            })
          }
        }
      },
    })

    // }
  }

  // 显示线下汇款
  const [showOffline, setShowOffline] = useState(false)
  // 选择地址
  const handSelect = (obj) => {
    if (receivingStatus === 1 || (infoObj.status === 8 || infoObj.status === 9 || infoObj.status === 4 || infoObj.status === 5 || infoObj.status === 11 || infoObj.status === 3)) {
      alert.error('不允许更改')
      return false
    }
    Taro.navigateTo({
      url: `/pages/addressManager/index?orderId=${obj.id}&purchaser_id=${obj.purchaser_id}`,
    })
  }

  // 是否显示按钮
  const showBtn = useMemo(() => {
    if ((infoObj.status === 8 || infoObj.status === 9 || infoObj.status === 4 || infoObj.status === 5 || infoObj.status === 11 || infoObj.status === 3)) {
      return false
    }
    else {
      return true
    }
  }, [infoObj])

  const showWhatFont = useMemo(() => {
    if (infoObj.shipment_mode === 1) {
      return '自提商品'
    }
    else {
      return '物流'
    }
  }, [infoObj])

  // 申请退货
  const handApplyGood = () => {
    if (infoObj.av_return_product.length == 0) {
      return alert.error('暂无货物退')
    }
    else {
      Taro.navigateTo({
        url: `/pages/applyGoods/index?orderId=${infoObj.id}`,
      })
      setShowMore(false)
    }
  }

  // 申请退款
  const handApplyMoney = () => {
    // 三种类型的   待收货，已收货后申请退货退款，需要选择质量/非质量问题
    if (infoObj?.status == 8 || infoObj?.status == 9) {
      Taro.navigateTo({
        url: `/pages/applyGoods/index?orderId=${infoObj.id}`,
      })
    }
    else {
      Taro.navigateTo({
        url: `/pages/applyMoney/index?orderId=${infoObj.id}`,
      })
    }
    setShowMore(false)
  }

  // 确认收货
  const { fetchData: receveFetch } = MpSaleOrderReceive()
  const handSureGoods = async() => {
    Taro.showModal({
      content: '确认收货吗？',
      confirmText: '确认',
      cancelText: '取消',
      async success(res) {
        if (res.confirm) {
          Taro.showLoading({
            title: '请稍等...',
            mask: true,
          })
          const res = await receveFetch({ sale_order_id: Number(infoObj.id) })
          if (res?.msg === 'success') {
            Taro.showToast({
              title: '成功',
            })
            Taro.hideLoading()
            setShowMore(false)
            getDetail()
          }
          else {
            Taro.hideLoading()
            Taro.showToast({
              title: res?.msg,
              icon: 'error',
            })
          }
        }
      },
    })
  }

  const onChange = (e) => {
    setInfoObj(val => ({ ...val, remark: e }))
  }
  // 选择支付方式
  const clickItem = (item) => {
    if (item.name === '扫码支付') { handScanpay() }
    if (item.name === '线下汇款') { setShowOffline(true) }
    payList.map((it) => {
      if (item.id === it.id) {
        it.checked = true
      }
      else {
        it.checked = false
      }
      return it
    })
    setPayList([...payList])
  }
  useEffect(() => {
    setInfoObj(infoObj)
  }, [infoObj])
  const showRemarkFont = useMemo(() => {
    if (infoObj.status === 10 || infoObj.status == 0 || infoObj.status == 1 || infoObj.status == 2 || infoObj.status == 7) {
      return `${'填写/修改备注'} >`
    }
    else {
      return ''
    }
  }, [infoObj])

  const BottomBtnsRef = useRef<any>()
  const [showOther, setshowOther] = useState(false)
  useMemo(() => {
    Taro.nextTick(() => {
      if (BottomBtnsRef.current?.btnList.length > 3) {
        setshowOther(true)
        return true
      }
      else {
        setshowOther(false)
        return false
      }
    })
  }, [infoObj])
  // 待接单、配布中、已配布状态时，叫预估金额，其他状态叫合计金额。
  const payFont = useMemo(() => {
    if (infoObj?.status === 0 || infoObj?.status === 1 || infoObj?.status === 2) {
      return '预估金额'
    }
    else {
      return '合计金额'
    }
  }, [infoObj])

  const [showCodeList, setshowCodeList] = useState(false)
  // 展示码单
  const handShowCodeList = () => {
    setshowCodeList(true)
  }

  // 修改订单
  const handEdit = () => {
    Taro.navigateTo({
      url: `/pages/orderEdit/index?orderId=${infoObj.id}`,
    })
  }

  return (
    <View className={styles.mainBox}>
      {(infoObj?.status != 10 && <OrderState picUrl={infoObj?.picUrl} orderInfo={infoObj} />)}
      {
        infoObj.status === 10 && <AdvanceOrderState orderInfo={infoObj} onRefresh={() => refresh()} />
      }
      <AddressDetailBox
        showBtn={showBtn}
        showWhatFont={showWhatFont}
        navSelect={obj => handSelect(obj)}
        obj={infoObj}
        receivingStatus={receivingStatus}
        onReceivingStatus={(e, value) => onReceivingStatus(e, value)}
      ></AddressDetailBox>
      <DefaultBox
        showMode
        title="客户信息"
        modeName={infoObj.sale_mode_name}
      >
        <View className={styles.pussBox}>
          <View className={styles.pussName}>{infoObj.purchaser_name}</View>
          <View className={styles.pussName}>
            {
              infoObj?.platform_source !== 1 && <Tag type="primary" size="normal" circle customClassName={styles.platform_name} plain>
                {infoObj?.platform_source_name || '暂无'}
              </Tag>
            }
          </View>
          <View className={styles.pussPhone}>{infoObj.purchaser_phone}</View>
        </View>
      </DefaultBox>
      <View className={styles.total}> {infoObj.total_fabrics} 种面料，{infoObj.total_colors} 个颜色，共 {infoObj.sale_mode === 0 ? infoObj.total_number : infoObj.total_number / 100} {infoObj.sale_mode === 0 ? '条' : 'm'}</View>
      <View className={styles.productBox}>
        <GoodsItem list={infoObj?.product_list} obj={infoObj}></GoodsItem>
        <View className={styles.flexMoney}>
          <View className={styles.flexTotalBox}>
            <View className={styles.totalFont}>{payFont}</View>
            {/* <IconFont name={'icon-tishi'} size={28} ></IconFont> */}
          </View>
          <View className={styles.shoudPay}>¥{formatPriceDiv(infoObj.bill_total_sale_price)}</View>
        </View>
        <View className={styles.flexMoney}>
          <View className={styles.flexTotalBox}>
            <View className={styles.totalFont}>实付金额</View>
            {/* <IconFont name={'icon-tishi'} size={28} ></IconFont> */}
          </View>
          <View className={styles.shoudPay}>¥{formatPriceDiv(infoObj.actual_amount)}</View>
        </View>
        {
          infoObj?.wait_pay_amount < 0 && <View className={styles.flexMoney}>
            <View className={styles.flexTotalBox}>
              <View className={styles.totalFont}>{infoObj?.wait_pay_amount?.toString().indexOf('-') !== -1 ? '退款金额' : '待付金额'}</View>
              {/* <IconFont name={'icon-tishi'} size={28} ></IconFont> */}
            </View>
            <View className={styles.shoudPay}>¥{formatPriceDiv(infoObj.refund_amount)}</View>
          </View>
        }
        {
          infoObj?.wait_pay_amount > 0 && <View className={styles.flexMoney}>
            <View className={styles.flexTotalBox}>
              <View className={styles.totalFont}>{infoObj?.wait_pay_amount?.toString().indexOf('-') !== -1 ? '退款金额' : '待付金额'}</View>
              {/* <IconFont name={'icon-tishi'} size={28} ></IconFont> */}
            </View>
            <View className={styles.shoudPay}>¥{formatPriceDiv(infoObj.wait_pay_amount)}</View>
          </View>
        }

      </View>
      <DefaultBox title="订单信息">
        {
          orderMsg.map((item, index) => {
            return (

              item.showFont && <View className={styles.detailBox} key={index}>
                <View className={styles.detailFont}>
                  {item.leftTitle}
                </View>
                <View className={styles.detailRightFlex}>
                  <View className={styles.detailRight}>{item.rightTitle}</View>
                  {item.showBtn && <View className={styles.detailBtn} onClick={() => clipboardData()}>复制</View>}
                </View>

              </View>
            )
          })
        }

      </DefaultBox>
      <DefaultBox title="备注信息" showMode modeName={showRemarkFont} clickNode={() => setShowDesc(showRemarkFont != '')}>
        <View className={styles.remarkFont}>{infoObj.remark === '' ? '暂无' : infoObj.remark}</View>
      </DefaultBox>

      <Popup show={showDesc} title="填写/编辑备注" showTitle onClose={() => setShowDesc(false)}>
        <View style={{ margin: '24rpx' }}>
          <Remark
            //  onSave={(e) => getRemark(e)}
            onChange={e => onChange(e)}
            defaultValue={infoObj.remark}
          />
          <View className={styles.order_save_address} onClick={() => getRemark()}>保存</View>
        </View>

      </Popup>
      <View className={styles.safeBottom}></View>
      <View className={styles.bottomBox}>
        {
          showOther
                    && <>
                      {
                        !showMore && <View className={styles.moreFontBox}> <View className={styles.moreFont} onClick={() => setShowMore(true)}>更多</View></View>
                      }
                      {
                        showMore && <View className={styles.moreFontBox}>  <View className={styles.moreFont} onClick={() => setShowMore(false)}>关闭</View></View>
                      }
                      {
                        showMore && <View className={styles.posssBox}>
                          <BottomApply
                            obj={infoObj}
                            goodsObj={infoObj}
                            handApplyGoods={() => handApplyGood?.()}
                            handApplyMoney={() => handApplyMoney?.()}
                            nextBuy={e => nextBuy?.(e, infoObj)}
                            handSureGoods={() => handSureGoods?.()}
                            handShowCodeList={() => handShowCodeList?.()}
                            cancle={e => cancle?.(e, infoObj)}
                          ></BottomApply>
                        </View>
                      }
                    </>
        }

        <BottomBtns
          ref={BottomBtnsRef}
          showDetail
          goodsObj={infoObj}
          obj={infoObj}
          showTuiGoods
          cancle={e => cancle?.(e, infoObj)}
          nextBuy={e => nextBuy?.(e, infoObj)}
          toPay={e => toPay?.(e, infoObj)}
          handShowCodeList={() => handShowCodeList?.()}
          handSureGoods={() => handSureGoods?.()}
          handApplyGoods={() => handApplyGood?.()}
          handApplyMoney={() => handApplyMoney?.()}
          handEdit={() => handEdit?.()}
        ></BottomBtns>
      </View>
      <PayPopup
        list={payList}
        obj={infoObj}
        showPopup={showPay}
        popupClose={() => setShowPay(false)}
        clickItem={infoObj => clickItem(infoObj)}
        handsurePay={infoObj => handsurePay(infoObj)}
        showSide={showSide}
        title={title}
        picUrl={picUrl}
      ></PayPopup>
      <OfflinePay showKong={false} show={showOffline} onClose={() => setShowOffline(false)} offlineInfo={infoObj}></OfflinePay>
      <SaleCodeList obj={infoObj} showPopup={showCodeList} popupClose={() => setshowCodeList(false)}></SaleCodeList>
    </View >
  )
}
export default OrderDetails