import { View, Image } from '@tarojs/components';
import { WashingMachineDevice } from '@/api/washingMachine';
import './WasherCard.scss';

import StartIcon from '../../../images/washingmachine/ic_kaiqi@2x.png';
import RunningIcon from '../../../images/washingmachine/ic_fanmang@2x.png';

const WasherCard = (props: {
  data: WashingMachineDevice;
  goAppointmentOrder: (deviceCode: string) => void;
}) => {
  const { data, goAppointmentOrder } = props;
  return (
    <View className={`WasherCard ${data.isRunning ? 'disabled' : ''}`}>
      <View className='WasherCard-info'>
        <View className='WasherCard-item'>
          <View className='WasherCard-label'>设备编码</View>
          <View className='WasherCard-value'>{data.deviceCode}</View>
        </View>
        <View className='WasherCard-item'>
          <View className='WasherCard-label'>设备位置</View>
          <View className='WasherCard-value position'>{data.position}</View>
        </View>
      </View>
      <View className='WasherCard-btn'>
        {data.isRunning ? (
          <View className='WasherCard-isRunning'>
            <Image src={RunningIcon} />
          </View>
        ) : (
          <View
            className='WasherCard-start'
            onClick={() => goAppointmentOrder(data.deviceCode)}>
            <Image src={StartIcon} />
          </View>
        )}
      </View>
    </View>
  );
};

export default WasherCard;
