import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Input,Editable } from 'amos-framework';
import OltSerUrl from 'CONSTS/urlConsts';
import UpLoadIcon from './upload/UpLoadIcon';
import { deviceCategoryEnum } from  './../../deviceManage/common/DeviceEnum';
import { stringUtil } from './../../deviceManage/common/DeviceLang';

const TextArea = Input.TextArea;
/**
 *
 *
 * @class DeviceBasicInfo
 * @extends {Component}
 */
class DeviceBasicInfo extends Component {
  constructor(props){
    super(props);
    let { updateBasicInfo,equipment,device } = this.props;
    let deviceBasicParam = { name: equipment ? equipment.name : '',descr: equipment ? equipment.descr : '',
      type: equipment ? equipment.type : '',eqpTmplId: device.id };
    updateBasicInfo(deviceBasicParam);
    this.state = {
      deviceBasicParam
    };
  }
  componentWillMount() {

  }

  componentDidMount(){

  }

  componentWillReceiveProps(nextProps) {

  }

  componentWillUnmount() {

  }

  onAttributeChange = (type,e) => {
    let { deviceBasicParam } = this.state;
    let { updateBasicInfo } = this.props;
    deviceBasicParam[type] = e.target.value;
    updateBasicInfo(deviceBasicParam);
    this.setState({ deviceBasicParam });
  }

  render() {
    let { device,setImgFile,equipment,enable } = this.props;
    let { deviceBasicParam } = this.state;
    // let defaultImg = equipment && equipment.logo ? `${OltSerUrl.fetchDeviceImg}/icon/${equipment.logo}` : undefined;
    let imgPath = `${OltSerUrl.fetchDeviceImg}/${device.img}`;
    return (
      <div className='add-device-left-basic'>
        <div className='template-basic-info-title'>设备信息</div>
        <div className='template-basic-icon'>
          <img src={imgPath} alt='' style={{ maxWidth: '159px',maxHeight: '81px',paddingTop: '14px' }} />
          {/*<UpLoadIcon
            enable={enable}
            style={{ top: '-18px','max-width': '100px','max-height': '26px' }}
            setImgFile={setImgFile}
            defaultImg={defaultImg}
          />*/}
        </div>
        <div className='template-basic-name'>
          <div className='ant-form-item-required property-label-name'>设备名称：</div>
          {enable ? <Input value={deviceBasicParam.name}
            onChange={(e) => this.onAttributeChange('name', e)}
            // showOkCancel={false}
            style={{ width: '150px',marginLeft: '10px' }}
            placeholder={'请输入'}
            // innerValueStyle={{ width: '150px','padding-left': '10px' }}
            // useOnBlur={!enable}
            // defaultEditing={enable}
          />
          : <div className='property-normal-label' title={deviceBasicParam.name}>{deviceBasicParam.name}</div>
        }
        </div>
        <div className='template-type-name'>
          <div className='property-label-name'>设备类型：</div>
          <div className='property-normal-label' title={device.name}>{device.name}</div>
        </div>
        <div className='template-basic-model'>
          <div className='property-label-name'>型号：</div>
          <div className='property-normal-label' title={device.model}>{device.model}</div>
        </div>
        <div className='template-basic-catalog'>
          <div className='property-label-name'>设备类别：</div>
          <div className='property-normal-label' title={stringUtil(deviceCategoryEnum, device.type)}>{stringUtil(deviceCategoryEnum, device.type)}</div>
        </div>
        <div className='template-basic-industry'>
          <div className='property-label-name'>所属行业：</div>
          <div className='property-normal-label' title={device.equipTemplateIndustry.name}>{device.equipTemplateIndustry.name}</div>
        </div>
        <div className='template-basic-descr'>
          <div className='property-label-name'>设备描述：</div>
          {enable ? <Input value={deviceBasicParam.descr}
            onChange={(e) => this.onAttributeChange('descr', e)}
            // showOkCancel={false}
            style={{ width: '150px' }}
            placeholder={'请输入'}
            // innerValueStyle={{ width: '150px' }}
            // useOnBlur={!enable}
            // defaultEditing={enable}
          />
          : <div className='property-normal-label' title={deviceBasicParam.descr}>{deviceBasicParam.descr}</div>
          }
        </div>
      </div>
    );
  }
}

DeviceBasicInfo.propTypes = {
  device: PropTypes.object,
  equipment: PropTypes.object,
  updateBasicInfo: PropTypes.func,
  setImgFile: PropTypes.func,
  enable: PropTypes.bool
};

DeviceBasicInfo.defaultProps = {
  enable: true
};

export default DeviceBasicInfo;
