import { Image, Text, View } from '@tarojs/components'
import classnames from 'classnames'
import { memo, useCallback, useMemo, useRef, useState } from 'react'
import OrderStatusTag from '../orderStatusTag'
import styles from './index.module.scss'
import { goLink } from '@/common/common'
import { AFTER_ORDER_STATUS, REFUND_STATUS_ORDER } from '@/common/enum'
import { formatHashTag, formatImgUrl, formatPriceDiv } from '@/common/fotmat'
import AfterOrderBtns from '@/components/afterOrderBtns'
import LabAndImg from '@/components/LabAndImg'
import { useSelector } from '@/reducers/hooks'

interface Param {
  value: {
    order_no: string
    return_order_no: string
    sale_mode: number
    sale_mode_name: string
    stage_name: string
    shipment_mode_name: string
    product_list: any[]
    total_fabrics: number
    total_colors: number
    total_number: number
    stage: 0
    id: number
    lab: { l: number; a: number; b: number }
    rgb: { r: number; g: number; b: number }
    texturl_url: string
    type: number // 2 退货 1 预收退款 3 销售
    return_apply_order_id: number // 退款申请单
    refund_amount: number // 退款金额
    is_quality_check: true | false
    accessory_url: string[] // 物流图片
    take_goods_remark: string // 物流备注
    quality_check_pass_product: any[]
    quality_check_pass_number: number
    quality_check_pass_fabrics: number
    quality_check_pass_colors: number
  }
  onClickBtn?: (val: { status: number; orderInfo: Param['value'] }) => void
}
export default memo(({ value, onClickBtn }: Param) => {
  const userInfo = useSelector(state => state.userInfo)
  // 对应数量
  const formatCount = useCallback(
    (item, sale_mode) => {
      return sale_mode == 0 ? `${item.roll}条` : `${Number(item.length / 100)}米`
    },
    [value],
  )
  // 对应单价
  const standardPrice = useCallback(
    (price, sale_mode) => {
      return `${formatPriceDiv(price).toLocaleString()}/${sale_mode == 1 ? 'm' : 'kg'}`
    },
    [value],
  )

  // 点击订单按钮
  const orderBtnsClick = useCallback(
    (status) => {
      onClickBtn?.({ status, orderInfo: value })
    },
    [value],
  )

  // 按钮所需数据
  const orderInfo = useMemo(() => {
    return value
  }, [value])

  // 整理颜色
  const labAndRgbAndUrl = useMemo(() => {
    return { lab: { ...value?.lab }, rgb: { ...value?.rgb }, texturl_url: value?.texturl_url }
  }, [value])

  const {
    ReturnApplyOrderTypeReturnForRefund, // 退货退款
  } = REFUND_STATUS_ORDER

  const numText = useMemo(() => {
    if (!value?.is_quality_check) {
      const total_number_new = value?.sale_mode == 0 ? value?.total_number : value?.total_number / 100
      return `${value?.total_fabrics} 种面料，${value?.total_colors} 种颜色，共 ${total_number_new}${value?.sale_mode == 0 ? ' 条' : ' 米'}`
    }
    else {
      const total_number_new = value?.sale_mode == 0 ? value?.quality_check_pass_number : value?.quality_check_pass_number / 100
      return `${value?.quality_check_pass_fabrics} 种面料，${value?.quality_check_pass_colors} 种颜色，共 ${total_number_new}${
        value?.sale_mode == 0 ? ' 条' : ' 米'
      }`
    }
  }, [value])

  // 售后单状态
  const { ReturnStageQualityCheckPendingRefund, ReturnStageServiceOrderPendingRefund, ReturnStageReturned } = AFTER_ORDER_STATUS
  const stage_name = useMemo(() => {
    return [ReturnStageQualityCheckPendingRefund.value, ReturnStageServiceOrderPendingRefund.value].includes(value?.stage) ? '待退款' : value?.stage_name
  }, [value])

  // 获取面料数组
  const list = useMemo(() => {
    const res = value?.is_quality_check ? value?.quality_check_pass_product : value?.product_list
    return res || []
  }, [value])

  return (
    <View className={styles.order_item}>
      <View className={styles.header} onClick={() => goLink('/pages/salesAfter/index', { id: value?.id })}>
        <View className={styles.user}>
          <Image src={`${userInfo?.adminUserInfo?.avatar_url}`} />
        </View>
        <View className={styles.order_con}>
          <Text className={styles.name}>{userInfo?.adminUserInfo?.user_name}</Text>
          <View className={styles.order_num}>
            <View className={styles.order_num_con}>
              <Text className={styles.order_no}>售后单号：{value?.return_order_no}</Text>
              <Text className={classnames(styles.miconfont, 'iconfont, icon-a-moreback')}></Text>
            </View>
            <OrderStatusTag status={value?.type} />
          </View>
        </View>
      </View>
      {list?.length > 0 && (
        <View className={styles.product_con} onClick={() => goLink('/pages/salesAfter/index', { id: value?.id })}>
          <View className={styles.product_title}>
            <View className={styles.product_tag}>{value?.sale_mode_name}</View>
            <View className={styles.product_name}>{formatHashTag(list?.[0].code, list?.[0].name)}</View>
            <View className={styles.product_status}>{stage_name}</View>
          </View>
          <View className={styles.product_list}>
            <View className={styles.image}>
              <LabAndImg value={labAndRgbAndUrl} />
              <View className={styles.color_num}>{list?.[0].product_colors?.[0].code}</View>
            </View>
            <View className={styles.color_list}>
              {list?.[0].product_colors?.map((itemColor, index) => {
                return (
                  index <= 1 && (
                    <View className={styles.color_item}>
                      <View className={styles.color_title}>{formatHashTag(itemColor.code, itemColor.name)}</View>
                      <View className={styles.color_price}>¥{standardPrice(itemColor.sale_price, value.sale_mode)}</View>
                      <View className={styles.color_num}>×{formatCount(itemColor, value.sale_mode)}</View>
                    </View>
                  )
                )
              })}
              {list?.[0].product_colors?.length > 2 && (
                <View className={styles.color_item}>
                  <View className={styles.color_more}>……</View>
                  <View className={styles.color_more}>……</View>
                  <View className={styles.color_more}>……</View>
                </View>
              )}
            </View>
          </View>
          <View className={styles.color_count_num}>
            <Text>{numText}</Text>
            {ReturnStageReturned.value == value?.stage && (
              <Text className={styles.refund_amount}>
                <Text>¥</Text>
                {formatPriceDiv(value?.refund_amount, 100, true)}
              </Text>
            )}
          </View>
          <View className={styles.order_number}>
            <Text>{value?.type == ReturnApplyOrderTypeReturnForRefund.value ? '已申请退货' : '已申请退款'}</Text>
            <Text>订单号：{value?.order_no}</Text>
          </View>
        </View>
      )}
      {list?.length <= 0 && value?.is_quality_check && (
        <View className={styles.inspection} onClick={() => goLink('/pages/salesAfter/index', { id: value?.id })}>
          <Text className={classnames('iconfont icon-zhuyi', styles.miconfont)}></Text>
          没有质检通过的商品，无法退款
        </View>
      )}
      <AfterOrderBtns orderInfo={orderInfo} onClick={orderBtnsClick} fixedBottom={false} />
    </View>
  )
})
