import { Radio } from 'antd-mobile'
import styled from 'styled-components'
import { ProductType } from '@/types/order'
// type statusType = 'pending' | 'complete'

interface OrderCardProp {
  children?: any
  orderNo: string
  status: string
  onChange?: (val: string) => void
}

const orderStatusMap: Record<string, string> = {
  WAIT_BUYER_PAY: '等待买家付款',
  WAIT_SELLER_SEND_GOODS: '等待卖家发货',
  SELLER_CONSIGNED_PART: '卖家部分发货',
  WAIT_BUYER_CONFIRM_GOODS: '等待买家确认收货',
  TRADE_BUYER_SIGNED: '买家已签收',
  TRADE_FINISHED: '交易成功',
  TRADE_CLOSED: '交易关闭',
  TRADE_CLOSED_BY_TAOBAO: '交易被淘宝关闭',
  TRADE_NO_CREATE_PAY: '没有创建支付宝交易',
  WAIT_PRE_AUTH_CONFIRM: '余额宝0元购合约中',
  PAY_PENDING: '外卡支付付款确认中',
  ALL_WAIT_PAY: '未付款',
  ALL_CLOSED: '交易关闭',
  PAID_FORBID_CONSIGN: '订单已付款但禁止发货'
}

const OrderCardBox = styled.div`
  background-color: #fff;
  border-radius: 16px;
  padding: 12px 12px 20px;
  &:not(:first-of-type) {
    margin-top: 8px;
  }
`
const OrderInfo = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  color: #999999;
`
const OrderLeft = styled.div`
  display: flex;
  align-items: center;
  .adm-radio-checked {
    .adm-radio-icon {
      border-color: transparent;
      background: linear-gradient(270deg, #ff5000 0%, #ff9000 100%);
    }
  }
`

const ProductBox = styled.div`
  display: flex;
  align-items: center;
  &:not(:first-of-type) {
    margin-top: 20px;
  }
  overflow: hidden;
`
const ProductLeft = styled.div`
  width: 56px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  img {
    width: 100%;
  }
  margin-right: 8px;
`
const ProductRight = styled.div`
  flex: 1;
  overflow: hidden;
`
const ProductRightTitle = styled.div`
  font-size: 14px;
  font-weight: 500;
  color: #111;
  overflow: hidden;
  text-overflow: ellipsis;
`
const OrderCard = (props: OrderCardProp) => {
  return (
    <>
      <OrderCardBox>
        <label htmlFor={props.orderNo}>
          <OrderInfo>
            <OrderLeft>
              <Radio
                id={props.orderNo}
                value={props.orderNo}
                style={{ '--icon-size': '20px' }}
              ></Radio>
              <div style={{ marginLeft: '12px' }}>订单号：{props.orderNo}</div>
            </OrderLeft>
            <div>{orderStatusMap[props.status]}</div>
          </OrderInfo>
          <div>{props.children}</div>
        </label>
      </OrderCardBox>
    </>
  )
}

const ProductItem = (props: ProductType) => {
  return (
    <>
      <ProductBox>
        <ProductLeft>
          <img src={props.picUrl} alt="" />
        </ProductLeft>
        <ProductRight>
          <ProductRightTitle>{props.title}</ProductRightTitle>
          <div style={{ marginTop: '8px', color: '#FF5000' }}>
            <span style={{ fontSize: '12px' }}>¥</span>
            <span
              style={{ fontSize: '18px', fontWeight: '500', marginLeft: '4px' }}
            >
              {props.price}
            </span>
          </div>
        </ProductRight>
      </ProductBox>
    </>
  )
}

OrderCard.ProductItem = ProductItem
export default OrderCard
export { OrderCard, ProductItem }