import {Image, Text, View, Picker} from '@tarojs/components';
import icon from '@assets/goods/sending.svg';
import {Button} from '@antmjs/vantui';
import {TextGroup as Item} from '@components';
import {useDate} from './hooks';
import dayjs from 'dayjs';
import {useScanOrder} from '@hooks';

export default function DeliverGoods() {
  const [{goodsList, customerNo, truckNo}, onScan] = useScanOrder();
  const [date, onDateChagne] = useDate(customerNo);

  return (
    <View className='h-screen overflow-auto bg-gray-100 flex flex-col'>
      <View className='py-4 bg-white'>
        <Image src={icon} mode='widthFix' className='w-14 mx-auto' />

        <Text className='px-3 text-center mt-2 block text-lg font-semibold text-[#333]'>
          上传发货单
        </Text>
      </View>

      <View className='mt-px bg-white px-4 py-2'>
        <Item title='卡车号' content={truckNo} />
        <Item title='客户号' content={customerNo} />
        <Picker
          mode='date'
          value={date}
          onChange={onDateChagne}
          start={dayjs().format('YYYY-MM-DD')}
        >
          <Item title='到货时间' content={date} />
        </Picker>
      </View>

      {goodsList.length > 0 ? (
        <View className='mt-px bg-white p-4 mb-10'>
          <Text className='text-lg font-semibold'>货品信息</Text>

          <View className='mt-3'>
            {goodsList.map(function ({no, num}) {
              return (
                <View
                  key={no}
                  className='border-0 border-b border-dashed border-gray-100 last:border-none'
                >
                  <Item title='品号' content={no} />
                  <Item title='数量' content={Number(num)} />
                </View>
              );
            })}
          </View>
        </View>
      ) : null}

      <View className='flex mt-auto justify-around pb-12'>
        <Button className='w-36' onClick={onScan} round>
          扫码
        </Button>
        <Button type='primary' className='w-36' color='#58C6EA' round>
          发货
        </Button>
      </View>
    </View>
  );
}