import { Text, View } from '@tarojs/components'
import { memo, useCallback, useMemo } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'
import { AFTER_ORDER_STATUS, ORDER_STATUS, REFUND_STATUS } from '@/common/enum'
import { formatHashTag, formatPriceDiv, formatWeightDiv } from '@/common/fotmat'
import EstimatedAmount from '@/components/estimatedAmount'
import LabAndImg from '@/components/LabAndImg'

interface OrderParam {
  estimate_amount: number // 预估金额
  list: any[]
  product_list: any[]
  quality_check_pass_product: any[]
  sale_mode: number
  sale_mode_name: string
  unit: string
  total_colors: number
  total_fabrics: number
  total_number: number
  stage: number // 订单状态
  type: 1 | 2 // 1退货， 2退款
  refund_type: number // 退款状态
  total_sale_price: number // 销售金额
  total_should_collect_money: number // 应收金额
  total_weight_error_discount: number // 空差优惠
  the_previous_status: number // 取消订单时的订单状态
  actual_amount: number // 实付金额
  quality_check_pass_colors: number // 验布后的颜色总数
  quality_check_pass_fabrics: number // 验布后的面料数量
  quality_check_pass_number: number // 验布后的总数量
  is_quality_check: true | false // 是否质检过
}

interface Param {
  order: OrderParam
  comfirm?: boolean // 是否是确认订单页面使用
}

export default memo(({ order, comfirm = false }: Param) => {
  // 售后单状态枚举
  const {
    ReturnStageApplying, // 申请中
    ReturnStageWaitCheck, // 退货中
    ReturnStageChecked, // 待验布
    ReturnStageReturned, // 已退款
    ReturnStageCancel, // 已取消
    ReturnStageQualityCheckPendingRefund, // 已验布
    ReturnStageServiceOrderPendingRefund, // 待退款
    ReturnStageRejected, // 已拒绝
  } = AFTER_ORDER_STATUS

  // 金额列表枚举
  const priceList = [
    {
      id: 5,
      value: [ReturnStageReturned.value],
      label: '合计金额',
      field: 'total_refund_amount',
      message: '按原单价*退货重量的金额',
    },
    {
      id: 1,
      value: [ReturnStageReturned.value],
      label: '扣款金额',
      field: 'other_deduction_amount',
      message: '本次售后扣款金额',
    },
    {
      id: 3,
      value: [ReturnStageReturned.value],
      label: '退款金额',
      field: 'refund_amount',
      message: '本次售后应退款金额',
    },
    {
      id: 4,
      value: [ReturnStageReturned.value],
      label: '退款去向',
      field: 'refund_flow_name',
      message: '本次售后退款金额去向',
    },
  ]

  // 是否显示价格
  const showPrice = useCallback(
    (priceInfo) => {
      return priceInfo.value.includes(order?.stage)
    },
    [order],
  )

  const priceConDom = useMemo(() => {
    if (!order) { return }
    return (
      <>
        {priceList.map((item) => {
          return (
            <>
              {showPrice(item) && (
                <EstimatedAmount
                  messageTitle={item.message}
                  key={item.id}
                  number={order[item.field]}
                  numberFormat={item.id == 4 ? 'text' : 'number'}
                  title={item.label}
                />
              )}
            </>
          )
        })}
      </>
    )
  }, [order])

  // 对应数量
  const formatCount = useCallback(
    (item) => {
      return order?.sale_mode == 0 ? item.roll : Number(item.length / 100)
    },
    [order],
  )

  // 对应单价
  const standardPrice = useCallback(
    (price) => {
      return `${formatPriceDiv(price).toLocaleString()}/${order?.sale_mode == 1 ? 'm' : 'kg'}`
    },
    [order],
  )

  // 数量格式
  const numText = useMemo(() => {
    if (order) {
      if (!order?.is_quality_check) {
        const total_number = order?.sale_mode == 0 ? order?.total_number : order?.total_number / 100
        return `${order?.total_fabrics} 种面料，${order?.total_colors} 种颜色，共 ${total_number} ${order?.unit}`
      }
      else {
        const total_number = order?.sale_mode == 0 ? order?.quality_check_pass_number : order?.quality_check_pass_number / 100
        return `${order?.quality_check_pass_fabrics} 种面料，${order?.quality_check_pass_colors} 种颜色，共 ${total_number} ${order?.unit}`
      }
    }
  }, [order])

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

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

  // 单价显示判断
  const sale_price_show = useMemo(() => {
    return order?.stage != ReturnStageServiceOrderPendingRefund.value && order?.stage != ReturnStageQualityCheckPendingRefund.value
  }, [order])

  // 销售价格
  const formatPrice = useCallback(
    (colorItem) => {
      return (
        ReturnStageReturned.value == order?.stage && (
          <View className={styles.count_price}>
            <text>¥</text>
            {formatPriceDiv(colorItem.estimate_amount, 100, true)}
          </View>
        )
      )
    },
    [order],
  )

  return (
    <View className={styles.kindsList_main}>
      {list?.length > 0 && (
        <View className={styles.orders_list_con}>
          <View className={styles.orders_return_title}>{order?.type == 1 ? '退货信息' : '退款信息'}</View>
          {list?.map((item) => {
            return (
              <View key={item.product_code} className={styles.order_list}>
                <View className={styles.order_list_title}>
                  <View className={styles.tag}>{order.sale_mode_name}</View>
                  <View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
                  <View className={styles.num}>共{item?.product_colors?.length}种</View>
                </View>
                <View className={styles.order_list_scroll}>
                  {item?.product_colors?.map((colorItem) => {
                    return (
                      <View key={colorItem.id} className={styles.order_list_item}>
                        <View className={styles.order_list_item_img}>
                          <LabAndImg value={labAndRgbAndUrl(colorItem)} />
                        </View>
                        <View className={styles.order_list_item_con}>
                          <View className={styles.order_list_item_des}>
                            <View className={styles.order_list_item_title}>{`${colorItem.code} ${colorItem.name}`}</View>
                            <View className={styles.order_list_item_price}>
                              {sale_price_show && <Text>¥{standardPrice(colorItem.sale_price)}</Text>}
                              {order?.stage == ReturnStageReturned.value && <Text>总重{formatWeightDiv(colorItem.estimate_weight)}kg</Text>}
                            </View>
                          </View>
                          <View className={styles.order_list_item_count}>
                            <View className={styles.count_num}>
                              ×{formatCount(colorItem)}
                              <text>{order.unit}</text>
                            </View>
                            {formatPrice(colorItem)}
                          </View>
                        </View>
                      </View>
                    )
                  })}
                </View>
              </View>
            )
          })}
          <View className={styles.order_total}>
            <Text>合计</Text>
            <Text>{numText}</Text>
          </View>
          <View className={styles.order_estimated_amount}>{priceConDom}</View>
        </View>
      )}
      {list?.length <= 0 && order?.is_quality_check && (
        <View className={styles.inspection}>
          <View className={styles.inspection_title}>质检情况</View>
          <View className={styles.inspection_con}>
            <Text className={classnames('iconfont icon-zhuyi', styles.miconfont)}></Text>
            没有质检通过的商品，无法退款
          </View>
        </View>
      )}
    </View>
  )
})
