import './AppointermentEquipment.scss';
import { View, Text, Image } from '@tarojs/components';
import { AppointDeviceResponse } from '@/api/shower';
import DisabledIcon from '@/images/shower/ic_jinyuyue@2x.png';

type PageOwnProps = {
  disabled: boolean;
  data: AppointDeviceResponse;
  appointingStart: (
    deviceCode: string,
    operationMode: number,
    location: string,
  ) => void;
};
const AppointermentEquipment = (props: PageOwnProps) => {
  const { data, appointingStart, disabled } = props;
  const clickHandle = () => {
    appointingStart &&
      appointingStart(data.code, data.operationMode, data.location);
  };
  return (
    <View
      className={`ShowerAppointment-Equipment ${
        data.appointable && !data.inPunishment && !disabled ? '' : 'disabled'
      }`}>
      <View className='ShowerAppointment-Equipment-row'>
        <Text className='ShowerAppointment-Equipment-name'>设备编码</Text>
        <Text className='ShowerAppointment-Equipment-value'>{data.code}</Text>
      </View>
      <View className='ShowerAppointment-Equipment-row'>
        <Text className='ShowerAppointment-Equipment-name'>设备位置</Text>
        <Text className='ShowerAppointment-Equipment-value location'>
          {data.location}
        </Text>
      </View>
      {data.appointable && !disabled ? (
        <View
          className='ShowerAppointment-Equipment-appoint'
          onClick={clickHandle}>
          可预约
        </View>
      ) : (
        <Image
          className='ShowerAppointment-Equipment-disabled'
          src={DisabledIcon}
        />
      )}
    </View>
  );
};

export default AppointermentEquipment;
