import { ScrollView, View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { memo, useCallback, useEffect, useMemo, useState } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'
import BottomBtns from '@/components/BottomBtns'
import { formatPriceDiv } from '@/common/format'
import LabAndImg from '@/components/LabAndImg'

interface propsObj {
  obj: any
  cancle?: (arg: any, obj: any) => void
  nextBuy?: (arg: any, obj: any) => void
  toPay?: (arg: any, obj: any) => void
}
const ItemList = (props: propsObj) => {
  const navTo = (e) => {
    Taro.navigateTo({
      url: `/pages/orderDetails/index?id=${props?.obj?.id}`,
    })
  }

  const totalMoney = useMemo(() => {
    if (props?.obj.status == 0 || props?.obj.status == 1 || props?.obj.status == 2) {
      return props?.obj?.estimate_amount
    }
    else {
      return props?.obj?.bill_total_sale_price
    }
  }, [props?.obj])

  // 待接单、配布中、已配布状态时，叫预估金额，其他状态叫合计金额。
  const monyFont = useMemo(() => {
    if (props?.obj?.status === 0 || props?.obj?.status === 1) {
      return '预估金额'
    }
    else {
      return '合计金额'
    }
  }, [props?.obj])

  const labAndImgObj = useCallback((item) => {
    return { lab: item.lab, rgb: item.rgb, texture_url: item.texture_url }
  }, [])

  return (
    <View className={styles.itemBox} onClick={e => navTo(e)}>
      <View className={styles.topItem}>
        <View className={styles.orderNo}>单号：{props?.obj?.order_no}</View>
        <View className={styles.status}>{props?.obj?.status_name}</View>
      </View>
      <View className={styles.pussName}>{props?.obj?.purchaser_name}</View>
      <View className={styles.line}></View>
      <View className={styles.contBox}>
        <View style={{ minWidth: '24%' }}>
          <View className={styles.leftCont}>
            <LabAndImg value={labAndImgObj(props?.obj?.product_list?.[0])} />
            <View className={styles.leftContNums}>颜色 ({props?.obj?.total_colors})</View>
          </View>
        </View>

        <View className={styles.rightCont}>
          <View className={styles.rightTop}>
            <View className={styles.productBox}>
              <View className={styles.productName}>{props?.obj?.product_list[0]?.code} {props?.obj?.product_list[0]?.name}</View>
              <View className={styles.productMode}>{props?.obj?.sale_mode === 0 ? '大货' : props?.obj?.sale_mode === 1 ? '剪版' : '散剪'}</View>
            </View>
            <View className={styles.shipMode}>{props?.obj?.shipment_mode_name}</View>
          </View>
          <View className={styles.colorsBox}>
            <View className={styles.colorNameOne}>{props?.obj?.product_list[0]?.product_colors[0]?.code} {props?.obj?.product_list[0]?.product_colors[0]?.name}</View>
            <View className={styles.colorName}>x{props?.obj?.sale_mode === 0 ? props?.obj?.product_list[0]?.product_colors[0]?.roll : props?.obj?.product_list[0]?.product_colors[0]?.length / 100} {props?.obj?.sale_mode === 0 ? '条' : 'm'}</View>
            <View className={styles.colorNameTwo}>¥ {props?.obj?.product_list[0]?.product_colors[0]?.sale_price / 100}/{props?.obj?.sale_mode == 1 ? 'm' : 'kg'}</View>
          </View>
          {
            props?.obj?.product_list[0]?.product_colors?.length > 1 && <>
              <View className={styles.colorsBox}>
                <View className={styles.colorNameOne}>{props?.obj?.product_list[0]?.product_colors[1]?.code} {props?.obj?.product_list[0]?.product_colors[1]?.name}</View>
                <View className={styles.colorName}>x{props?.obj?.sale_mode === 0 ? props?.obj?.product_list[0]?.product_colors[1]?.roll : props?.obj?.product_list[0]?.product_colors[1]?.length / 100} {props?.obj?.sale_mode === 0 ? '条' : 'm'}</View>
                <View className={styles.colorNameTwo}>¥ {props?.obj?.product_list[0]?.product_colors[1]?.sale_price / 100}/{props?.obj?.sale_mode == 1 ? 'm' : 'kg'}</View>
              </View>
            </>
          }
        </View>
      </View>
      <View className={styles.lineOne}></View>
      <View className={styles.bottomMsg}>
        <View className={styles.msgLeft}>布料信息：</View>
        <View className={styles.msgRight}>{props?.obj?.total_fabrics} 种面料，{props?.obj?.total_colors} 种颜色，共 {props?.obj?.sale_mode === 0 ? props?.obj?.total_number : props?.obj?.total_number / 100} {props?.obj?.sale_mode === 0 ? '条' : 'm'}</View>
      </View>
      {
        props?.obj.status != 5 && <View className={styles.bottomMsg}>
          <View className={styles.msgLeft}>{monyFont}</View>
          <View className={styles.msgRightOne}>¥{formatPriceDiv(totalMoney)}</View>
        </View>
      }
      <View className={styles.bottomBox}>
        <BottomBtns
          obj={props?.obj}
          cancle={e => props?.cancle?.(e, props?.obj)}
          nextBuy={e => props?.nextBuy?.(e, props?.obj)}
          toPay={e => props?.toPay?.(e, props?.obj)}
        ></BottomBtns>
      </View>
    </View >
  )
}
export default memo(ItemList)
