import { Image, Text, View } from '@tarojs/components'
import { memo, useEffect, useMemo, useRef, useState } from 'react'
import classnames from 'classnames'
import * as dayjs from 'dayjs'
import styles from './index.module.scss'
import { formatDateTime, formatImgUrl } from '@/common/format'
import { ORDER_STATUS, PAYMENT_METHOD } from '@/common/enum'

interface List {
  status: string
  time: string
  tag: string
  desc: string
  expire_time: string
}

interface Param {
  onRefresh?: () => void
  orderInfo?: {
    logistics_details: List[] // 订单状态列表
    payment_method: number // 支付方式
    status: number // 订单状态
    account_period?: number // 账期
    account_period_time?: string // 还款日期
  }
}
const OrderState = ({ orderInfo = { logistics_details: [], payment_method: 0, status: 0 }, onRefresh }: Param) => {
  useEffect(() => {
    console.log('orderInfo33::', orderInfo)
  }, [orderInfo])

  const [showMore, setShowMore] = useState(false)
  const changeMore = () => {
    setShowMore(() => !showMore)
  }
  const dataList = useMemo(() => {
    return orderInfo.logistics_details ? orderInfo?.logistics_details.reverse() : []
  }, [orderInfo.logistics_details])

  // 订单状态枚举
  const { SaleorderstatusWaitingPrePayment } = ORDER_STATUS

  // 支付方式枚举
  const {
    PaymentMethodAccountPeriod,
    PaymentMethodCashOnDelivery,
  } = PAYMENT_METHOD

  return (
    <>
      {(dataList?.length > 0) && <View className={styles.order_flow_state}>
        <View className={classnames(styles.order_status_list, showMore && styles.order_status_list_show)}>
          {dataList.map((item, index) => <View className={styles.order_status_item} key={index}>
            {(dataList.length > 1) && <View className={classnames(styles.order_status_tail, (index == 0) && styles.order_status_tail_end)}></View>}
            {(dataList.length != (index + 1)) && <View className={styles.order_status_line}></View>}
            <View className={styles.order_status_content}>
              <View className={classnames(styles.order_status_title, (index == 0) && styles.order_status_select)}>{item.status}</View>
              <View className={classnames(styles.order_status_time, (index == 0) && styles.order_status_select)}>{formatDateTime(item.time)}</View>
            </View>
            <Text className={classnames(styles.order_status_des, (index == 0) && styles.order_status_des_select)}>{item.desc}</Text>
          </View>)}
        </View>
        {(dataList.length > 2) && <View className={styles.more} onClick={() => changeMore()}>
          <Text>{showMore ? '收起详情' : '点击查看详情'}</Text>
          <Text className={classnames('iconfont icon-a-moreback', styles.miconfonts, showMore && styles.open_miconfonts)}></Text>
        </View>}
        <View className={styles.image_tag}>
          {(orderInfo.payment_method == PaymentMethodCashOnDelivery.value) && <Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image} />}
          {(orderInfo.payment_method == PaymentMethodAccountPeriod.value) && <Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status_day.png')} className={styles.image} />}
        </View>
      </View>}
      {(orderInfo.payment_method == PaymentMethodAccountPeriod.value) && <View className={styles.pay_title_tag}>
        <Text className={classnames(styles.miconfont, 'iconfont icon-zhuyi')}></Text>
                您使用了{orderInfo.account_period}天账期支付，还款日期为{formatDateTime(orderInfo.account_period_time)}
      </View>}
    </>
  )
}
export default memo(OrderState)
