import { Image, Text, View } from '@tarojs/components'
import { useRouter } from '@tarojs/taro'
import classnames from 'classnames'
import { memo, useCallback, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import { goLink } from '@/common/common'
import { ORDER_STATUS } from '@/common/enum'
import { formatHashTag, formatImgUrl, formatPriceDiv } from '@/common/fotmat'
import LabAndImg from '@/components/LabAndImg'
import OrderBtns from '@/components/orderBtns'
import Payment from '@/pages/order/components/payment'
import { useSelector } from '@/reducers/hooks'

interface Param {
  value: {
    order_no: string
    sale_mode: number
    sale_mode_name: string
    status_name: string
    shipment_mode: number
    shipment_mode_name: string
    product_list: any[]
    total_fabrics: number
    total_colors: number
    total_number: number
    status: 0
    id: number
    lab: any
    rgb: any
    texture_url: string
    payment_method: number // 支付方式
    actual_amount: number // 实付金额
    wait_pay_amount: number // 待付金额
    should_collect_order_id: number // 应付单id
    av_return_roll: number
    total_sale_price: number
    estimate_amount: number
    is_return: true | false
  }
  onClickBtn?: (val: { status: number; orderInfo: Param['value'] }) => void
}
const Order = ({ 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 { SaleOrderStatusTaking, SaleOrderStatusWaitingReceipt } = ORDER_STATUS

  // 订单状态
  // const orderStatus = useCallback((item) => {
  //     return item.status == SaleOrderStatusTaking.value?'装车中':item.status_name
  // }, [value])

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

  // 总条数
  const numText = useMemo(() => {
    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 ? ' 条' : ' 米'}`
  }, [value])

  // 订单状态
  const orderStatus = useMemo(() => {
    if (value.status == SaleOrderStatusWaitingReceipt.value && value.shipment_mode == 1) {
      return '待提货'
    }
    else {
      return value?.status_name
    }
  }, [value])

  return (
    <View className={styles.order_item}>
      <View className={styles.header} onClick={() => goLink('/pages/order/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?.order_no}</Text>
              <Text className={classnames(styles.miconfont, 'iconfont, icon-a-moreback')}></Text>
            </View>
            <View className={styles.product_status}>{orderStatus}</View>
          </View>
        </View>
      </View>
      <View className={styles.product_con} onClick={() => goLink('/pages/order/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(value?.product_list?.[0].code, value?.product_list?.[0].name)}</View>
          <View className={styles.tag}>{value?.shipment_mode_name}</View>
        </View>
        <View className={styles.product_list}>
          <View className={styles.image}>
            <LabAndImg
              value={{
                lab: value?.product_list?.[0].product_colors?.[0].lab,
                rgb: value?.product_list?.[0].product_colors?.[0].rgb,
                texture_url: value?.product_list?.[0].product_colors?.[0].texture_url,
              }}
            />
            <View className={styles.color_num}>{value?.product_list?.[0].product_colors?.[0].code}</View>
          </View>
          <View className={styles.color_list}>
            {value?.product_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) + (value.sale_mode == 0 ? ' 条' : ' 米')}</View>
                  </View>
                )
              )
            })}
            {value?.product_list?.[0].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>
          <Text className={styles.price}>
            <Text>¥</Text>
            {value.total_sale_price ? formatPriceDiv(value.total_sale_price, 100, true) : formatPriceDiv(value.estimate_amount, 100, true)}
          </Text>
        </View>
      </View>
      <OrderBtns orderInfo={orderInfo} onClick={orderBtnsClick} showStatus="list" />
    </View>
  )
}
export default memo(Order)
