import React, { useEffect, useState } from 'react';
import TagCom from './IOTCardMultiText';

const Build: React.FC<any> = (props: any) => {
  const { attrData, uiStreams} = props;
  const [attr, setAttr] = useState<any>({});

  useEffect(() => {
    let list:any = [];
    const listObj = attrData['list'].map((item: any) => {
      if(JSON.stringify(item) === '{}') return {};
      const streamId = item['streamId'];
      let text: any = ''
      const curValue = uiStreams[streamId];
      const cardType = item['valueDef']['type'];
      if (cardType === 'bool') {
        const specs = item['valueDef']['specs']
        text = specs[curValue]
      } else if (cardType === 'enum') {
        const specs = item['valueDef']['specs']['values']
        text = specs[curValue]
      } else {
        text = curValue
      }
      let unit = '';
      try {
        unit = item['valueDef']['specs']['unit'];
        unit = unit ? unit : ''
      } catch (e) {
        console.error('IOTCardMultiText 解析异常');
      }
      let obj = {
        title: item['functionName'] + (item['label'] === '7' ? '' : unit),
        unit: item['unit'] ? item['unit'] : 'min',
        text: text ? text : '',
        label: item['label'],
        unitConvertFlag: item['unitConvertFlag'],
      };
      return obj
    });

    listObj.map((items:any)=>{
      if(JSON.stringify(items) !== '{}') {
        list.push(items)
      }
    })
    setAttr({ list });
  }, [uiStreams,attrData]);

  return (<>
    {
      JSON.stringify(attr) === "{}" ?
        (<div></div>) :
        (<TagCom {...attr} />)
    }
  </>)
}

export default Build;