import React, { FC } from 'react'
import { Checkbox } from 'antd'
import { CheckboxChangeEvent } from 'antd/lib/checkbox'
import SkuList from './SkuList'
import { CheckedStatus, IProduct4Order, IProductItem4Cart } from './type'
import { multi } from '@/shared/common/utils'
import './index.scss'

type P = {
  checkable?: boolean
  dataSource: IProduct4Order[]
  onChange?(list: IProduct4Order[])
}

const NestTable: FC<P> = props => {
  const { dataSource, checkable } = props

  const _onChange = (product: IProduct4Order) => {
    const temp = []
    dataSource.forEach(i => {
      if (i.productId === product.productId) {
        temp.push(product)
      } else {
        temp.push(i)
      }
    })
    props.onChange && props.onChange(temp)
  }

  const getSelectedInfo = (item: IProduct4Order) => {
    let selectedCount = 0,
      selectedPrice = 0
    item.productItemDetails.forEach((i: IProductItem4Cart) => {
      if (i.checked) {
        selectedCount += i.quantity
        selectedPrice += multi(i.quantity, i.purchasePrice)
      }
    })
    return [selectedCount, selectedPrice]
  }

  if (!dataSource) {
    return null
  }
  return (
    <>
      {dataSource.map((item: IProduct4Order, index: number) => {
        const [selectedCount, selectedPrice] = getSelectedInfo(item)
        return (
          <div className="nest-table-wrapper" key={`spu-${index}`}>
            <div className="spu-item">
              <div className="spu-info">
                {checkable ? (
                  <Checkbox
                    indeterminate={CheckedStatus.INDETERMINATE === item.checkedStatus}
                    checked={CheckedStatus.All === item.checkedStatus}
                    onChange={(e: CheckboxChangeEvent) => {
                      const { checked } = e.target
                      const _list = item.productItemDetails.map(i => {
                        i.checked = checked
                        return i
                      })
                      const _item = Object.assign({}, item, {
                        checked,
                        checkedStatus: checked ? CheckedStatus.All : CheckedStatus.NON,
                        productItemDetails: _list,
                      })
                      _onChange(_item)
                    }}
                  />
                ) : null}

                <span>{item.name}</span>
                <span>{checkable ? selectedCount : item.totalQuantity}件</span>
                <span>小计：￥{checkable ? selectedPrice : item.totalAmount}</span>
              </div>
              <SkuList
                checkable={checkable}
                list={item.productItemDetails}
                onChange={(list, checkedStatus, totalQuantity, totalAmount) => {
                  const _item = Object.assign({}, item, {
                    productItemDetails: list,
                    checkedStatus,
                    totalQuantity,
                    totalAmount,
                  })
                  _onChange(_item)
                }}
              />
            </div>
          </div>
        )
      })}
    </>
  )
}

export default NestTable