import { Component } from '@tarojs/taro';
import { View, Text } from '@tarojs/components';
import './EquipmentItem.scss';
import { DeviceInfo } from '../../WaterDispenser';
import { ComponentClass } from 'react';

type PageOwnProps = {
  code: string;
  position: string;
  onClick: (e: DeviceInfo) => void;
};
interface EquipmentItem {
  props: PageOwnProps;
}
class EquipmentItem extends Component {
  static externalClasses = ['ex-class'];

  clickHandle() {
    const { code, position, onClick } = this.props;
    onClick &&
      onClick({
        code,
        position,
      });
  }

  render() {
    const { code, position } = this.props;
    return (
      <View className='EquipmentItem ex-class' onClick={this.clickHandle}>
        <View className='EquipmentItem-item'>
          <Text className='EquipmentItem-label'>设备编码</Text>
          <View className='EquipmentItem-value code'>{code}</View>
        </View>
        <View className='EquipmentItem-item'>
          <Text className='EquipmentItem-label'>设备位置</Text>
          {position ? (
            <View className='EquipmentItem-value'>{position}</View>
          ) : null}
        </View>
      </View>
    );
  }
}

export default EquipmentItem as ComponentClass<PageOwnProps>;
