import './AppointmentCard.scss';
import { View, Button, Image } from '@tarojs/components';
import { AppointOrder, AppointOrderStatus } from '@/api/washingMachine';
import TimeoutIcon from '../../../images/shower/img_shixiao@2x.png';

const AppointmentCard = (props: {
  data: AppointOrder;
  startHandle: (code: string) => void;
}) => {
  const {
    money,
    deviceCode,
    position,
    services,
    startDate,
    endDate,
    status,
  } = props.data;
  const { startHandle } = props;

  return (
    <View
      className={`AppointmentCard ${
        status === AppointOrderStatus.outtime ? 'disabled' : ''
      }`}>
      <View className='AppointmentCard-title'>
        <View className='AppointmentCard-titleText'>我的预约</View>
        <View className='AppointmentCard-titlePrice'>{money.toFixed(2)}元</View>
      </View>
      <View className='AppointmentCard-deviceInfo'>
        <View className='AppointmentCard-deviceItem'>
          <View className='AppointmentCard-deviceLabel'>设备编码:</View>
          <View className='AppointmentCard-deviceValue'>{deviceCode}</View>
        </View>
        <View className='AppointmentCard-deviceItem'>
          <View className='AppointmentCard-deviceLabel'>设备位置:</View>
          <View className='AppointmentCard-deviceValue'>{position}</View>
        </View>
        <View className='AppointmentCard-deviceItem'>
          <View className='AppointmentCard-deviceLabel'>洗衣功能:</View>
          <View className='AppointmentCard-deviceValue'>
            {services.map(service => (
              <View key={service.id} className='AppointmentCard-service'>
                <View className='AppointmentCard-serviceName'>
                  {service.name}
                </View>
                <View className='AppointmentCard-servicePrice'>
                  {service.price.toFixed(2)}元
                </View>
              </View>
            ))}
          </View>
        </View>
        <View className='AppointmentCard-time'>
          <View className='AppointmentCard-timeItem'>
            <View className='AppointmentCard-timeLabel'>预约生效时间:</View>
            <View className='AppointmentCard-timeValue'>{startDate}</View>
          </View>
          <View className='AppointmentCard-timeItem'>
            <View className='AppointmentCard-timeLabel'>预约失效时间:</View>
            <View className='AppointmentCard-timeValue'>{endDate}</View>
          </View>
        </View>

        {status === AppointOrderStatus.appointing && (
          <Button
            className='AppointmentCard-start'
            onClick={() => startHandle(deviceCode)}>
            开启洗衣
          </Button>
        )}
        {status === AppointOrderStatus.outtime && (
          <View className='AppointmentCard-timeoutIcon'>
            <Image src={TimeoutIcon} />
          </View>
        )}
      </View>
    </View>
  );
};
AppointmentCard.defaultProps = {
  data: {
    bluetoothMode: 0,
    deviceCode: '',
    deviceName: '',
    endDate: '',
    money: 0,
    orderCode: '',
    position: '',
    services: [],
    startDate: '',
    status: AppointOrderStatus.appointing,
  },
};
export default AppointmentCard;
