import { Image, Text, View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { memo } from 'react'
import classnames from 'classnames'
import styles from './index.module.scss'
import { formatDateTime, formatImgUrl } from '@/common/fotmat'

export interface orderStateItem {
  audit_remark: string
  audit_time: string
  delivery_appendix_url: string[]
  order_status: number
  order_status_name: string
}

export interface orderStateParam {
  onRefresh?: () => void
  list?: orderStateItem[]
}
const OrderState = (props: orderStateParam) => {
  const { list = [] } = props

  const onShowImage = (url: string, list: string[]) => {
    Taro.previewImage({
      current: formatImgUrl(url, '!w800'),
      urls: formatImages(list),
    })
  }
  const formatImages = (list: string[]) => {
    return list?.map(item => formatImgUrl(item, '!w800'))
  }
  return (
    <>
      <View className={styles.order_flow_state}>
        <View className={classnames(styles.order_status_list)}>
          {list?.map((item, index) => <View className={styles.order_status_item} key={index}>
            {(list?.length > 1) && <View className={classnames(styles.order_status_tail, (index == 0) && styles.order_status_tail_end)}></View>}
            {(list?.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.order_status_name}</View>
              <View className={classnames(styles.order_status_time, (index == 0) && styles.order_status_select)}>{formatDateTime(item.audit_time)}</View>
            </View>
            <Text className={classnames(styles.order_status_des, (index == 0) && styles.order_status_des_select)}>{item.audit_remark}</Text>
            {item.delivery_appendix_url?.length > 0 && <View className={styles.images}>
              {item.delivery_appendix_url?.map((citem, index) => {
                return <View key={index} onClick={() => onShowImage(citem, item.delivery_appendix_url)}><Image src={formatImgUrl(citem, '!w400')} ></Image></View>
              })}
            </View>}
          </View>)}
        </View>
      </View>
    </>
  )
}
export default memo(OrderState)
