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'
import Tag from '@/components/tag'

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 { obj } = props
  const navTo = (e) => {
    Taro.navigateTo({
      url: `/pages/orderDetails/index?id=${obj?.id}`,
    })
  }

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

  // 待接单、配布中、已配布状态时，叫预估金额，其他状态叫合计金额。
  const monyFont = useMemo(() => {
    if (obj?.status === 0 || obj?.status === 1) {
      return '预估金额'
    }
    else {
      return '合计金额'
    }
  }, [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}>单号：{obj?.order_no}</View>
        <View className={styles.status}>{obj?.status_name}</View>
      </View>
      <View className={styles.flexBox}>
        <View className={styles.flexBox}>
          <View className={styles.pussName}>{obj?.purchaser_name}</View>
          {
            obj?.platform_source_name
            && <Tag type="primary" size="small" circle plain customClassName={styles.platform_name}>
              { obj?.platform_source_name }
            </Tag>
          }
        </View>
        {
          obj?.is_modify && <View className={styles.editFont}>已修改</View>
        }
      </View>
      <View className={styles.line}></View>
      <View className={styles.contBox}>
        <View style={{ minWidth: '24%' }}>
          <View className={styles.leftCont}>
            <LabAndImg value={labAndImgObj(obj?.product_list?.[0])} />
            <View className={styles.leftContNums}>颜色 ({obj?.total_colors})</View>
          </View>
        </View>

        <View className={styles.rightCont}>
          <View className={styles.rightTop}>
            <View className={styles.productBox}>
              <View className={styles.productName}>{obj?.product_list[0]?.code} {obj?.product_list[0]?.name}</View>
              <View className={styles.productMode}>{obj?.sale_mode === 0 ? '大货' : obj?.sale_mode === 1 ? '剪版' : '散剪'}</View>
            </View>
            <View className={styles.shipMode}>{obj?.shipment_mode_name}</View>
          </View>
          <View className={styles.colorsBox}>
            <View className={styles.colorNameOne}>{obj?.product_list[0]?.product_colors[0]?.code} {obj?.product_list[0]?.product_colors[0]?.name}</View>
            <View className={styles.colorName}>x{obj?.sale_mode === 0 ? obj?.product_list[0]?.product_colors[0]?.roll : obj?.product_list[0]?.product_colors[0]?.length / 100} {obj?.sale_mode === 0 ? '条' : 'm'}</View>
            <View className={styles.colorNameTwo}>¥ {obj?.product_list[0]?.product_colors[0]?.sale_price / 100}/{obj?.sale_mode == 1 ? 'm' : 'kg'}</View>
          </View>
          {
            obj?.product_list[0]?.product_colors?.length > 1 && <>
              <View className={styles.colorsBox}>
                <View className={styles.colorNameOne}>{obj?.product_list[0]?.product_colors[1]?.code} {obj?.product_list[0]?.product_colors[1]?.name}</View>
                <View className={styles.colorName}>x{obj?.sale_mode === 0 ? obj?.product_list[0]?.product_colors[1]?.roll : obj?.product_list[0]?.product_colors[1]?.length / 100} {obj?.sale_mode === 0 ? '条' : 'm'}</View>
                <View className={styles.colorNameTwo}>¥ {obj?.product_list[0]?.product_colors[1]?.sale_price / 100}/{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}>{obj?.total_fabrics} 种面料，{obj?.total_colors} 种颜色，共 {obj?.sale_mode === 0 ? obj?.total_number : obj?.total_number / 100} {obj?.sale_mode === 0 ? '条' : 'm'}</View>
      </View>
      {
        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={obj}
          cancle={e => props?.cancle?.(e, obj)}
          nextBuy={e => props?.nextBuy?.(e, obj)}
          toPay={e => props?.toPay?.(e, obj)}
        ></BottomBtns>
      </View>
    </View >
  )
}
export default memo(ItemList)
