import { ComponentClass } from 'react';
import { View, Image, Text } from '@tarojs/components';
import LineImg from '@/images/shower/img_nor@2x.png';
import { Component } from '@tarojs/taro';
import './DeviceInfo.scss';

type PageOwnProps = {
  code: string;
  position: string;
  size: string;
};

interface DeviceInfo {
  props: PageOwnProps;
}

class DeviceInfo extends Component {
  static externalClasses = ['ex-class'];
  static defaultProps = {
    size: 'normal',
  };

  render() {
    const { size, code, position } = this.props;
    return (
      <View className={`DeviceInfo ex-class ${size}`}>
        <View className='equipment-info'>
          {code ? (
            <View className='equipment-title matched'>已匹配设备</View>
          ) : (
            <View className='equipment-title'>未匹配设备</View>
          )}

          <Image className='equipment-line' src={LineImg} />
          {code ? (
            <View className='equipment-list'>
              <View className='equipment-item'>
                <Text className='equipment-label'>设备编号：</Text>
                <Text className='equipment-value'>{code}</Text>
              </View>
              <View className='equipment-item'>
                <Text className='equipment-label'>设备位置：</Text>
                {position ? (
                  <Text className='equipment-value'>{position}</Text>
                ) : null}
              </View>
            </View>
          ) : (
            <View v-loading='loading' className='equipment-noCode'>
              点击左下角扫一扫完成匹配
            </View>
          )}
        </View>
      </View>
    );
  }
}

export default DeviceInfo as ComponentClass<PageOwnProps>;
