import './AppointermentCard.scss';
import { View, Text, Image } from '@tarojs/components';
import DisabledIcon from '../../../../images/shower/img_shixiao@2x.png';
import { AppointmentRecordsResponse } from '@/api/shower';

type PageOwnProps = {
  data: AppointmentRecordsResponse;
};

const AppointermentCard = (props: PageOwnProps) => {
  const { data } = props;
  return (
    <View
      className={`AppointermentCard ${
        data.status === 5 || data.status === 8 ? 'disabled' : ''
      }`}>
      <View className='AppointermentCard-Title'>我的预约</View>
      <View className='AppointermentCard-row'>
        <Text>设备编码:</Text>
        <Text>{data.deviceCode}</Text>
      </View>
      <View className='AppointermentCard-row'>
        <Text>设备位置:</Text>
        <Text className='AppointermentCard-row-location'>
          {data.deviceLocation}
        </Text>
      </View>
      <View className='AppointermentCard-row'>
        <Text>预约生效时间:</Text>
        <Text>{data.appointTime ? data.appointTime : ''}</Text>
      </View>
      <View className='AppointermentCard-Time'>
        <Text>预约失效时间:</Text>
        <Text>{data.expireTime ? data.expireTime : ''}</Text>
        {/* <Text>{data.expireTime ? data.expireTime : ''}</Text> */}
      </View>
      {(data.status === 5 || data.status === 8) && (
        <Image className='AppointermentCard-Dis-Icon' src={DisabledIcon} />
      )}
    </View>
  );
};

export default AppointermentCard;
