/*
 * @Author: your name
 * @Date: 2020-03-02 10:05:41
 * @LastEditTime: 2020-03-26 00:14:48
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \lingmou-frame\src\businessComponents\Tags\TagPortal\index.js
 */
import React from 'react';
import KeywordsList from './KeywordsList';
import { SingleTag, MutipleTag } from '../TagItem';
import _ from 'lodash';
import Portal from '../Portal'
import Box from '../Box'
import QueueAnim from '../QueueAnim'
// import { Shared, Dict } from '@zenview/micro-basic-library'
// import { Dict } from '@zenview/micro-components';
import Service from '../service'
import { formartTagCodes, mapLabelType, mapGeneration } from '../utils/index'
import { getVehicleTagList } from '../utils/utils'
import './index.less';

const { PaddingBox } = Box

const labelType = _.cloneDeep(mapLabelType);
const generation = _.cloneDeep(mapGeneration);
//const vehicleTags = _.cloneDeep(Dict.map.behaviorAttr)

function TagBox({ title, children }) {
  return (
    <div className="tag-search-label-item">
      <div className="tag-box-desc">{title}：</div>
      <div className="tag-item-box">{children}</div>
    </div>
  );
}

export default class TagPortal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      personTags: [],
      placeTags: props.dictMap['119100'],
      deviceTags: props.dictMap['119100'],
      houseTags: window.dictMap['164110'],
      vehicle: [],
    };
  }

  componentDidMount() {
    this.getPersonTags();
    this.getVehicleTags();
  }
  async getPersonTags() {
    let tagGroups = _.flattenDeep(labelType.map((v) => v.value));
    const res = await Service.getTagsByCondition({ tagGroups });
    this.setState({
      personTags: formartTagCodes(res.data),
    });
  }
  async getVehicleTags() {
    const tags = await getVehicleTagList() //await Shared.getVehicleTagList(true);
    this.setState({
      vehicle: tags || [],
    });
  }
  render() {
    const { keywordsList = [], getContainer, visible, keywords, onSelect, selectTags, type } = this.props;
    const selectKeys = selectTags.map((v) => v.code);
    const tags = this.state[`${type}Tags`] || [];
    const { vehicle } = this.state;
    const houseTag = window.dictMap["114100"]

    // console.log(selectTags, 'uuuuuuuuu')
    return (
      <Portal getContainer={getContainer} visible={visible}>
        <QueueAnim type="top" leaveReverse={true}>
          <PaddingBox className="tag-portal-box" style={{ padding: 20 }} key="tag-select">
            <KeywordsList list={keywordsList} keywords={keywords} onClick={onSelect} selectKeys={selectKeys} />
            {tags.length ? (
              <TagBox className="tag-search-label-item" title="试试标签快速查">
                {tags.map((item) =>
                  item.children ? (
                    <MutipleTag selectKeys={selectKeys} key={item.code} item={item} isMultiple={item.tagGroup !== '119905'} onSelect={(item)=> {
                      console.log(item)
                      onSelect(item)
                    }}/>
                  ) : (
                    <SingleTag selectKeys={selectKeys} key={item.code} item={item} onSelect={(item)=> {
                      console.log(item)
                      onSelect(item)
                    }} />
                  )
                )}
              </TagBox>
            ) : null}

            {type === 'person' && (
              <TagBox className="tag-search-label-item" title="年龄段">
                {generation.map((item) => (
                  <SingleTag key={item.code} selectKeys={selectKeys} item={item} onSelect={()=> {
                    item.tagName = item.name
                    onSelect(item)
                  }} />
                ))}
              </TagBox>
            )}
            {type === 'vehicle' && (
              <TagBox className="tag-search-label-item" title="车辆标签">
                {vehicle.map((item) => (
                  <SingleTag key={item.code} selectKeys={selectKeys} item={item} onSelect={onSelect} />
                ))}
              </TagBox>
            )}
            {type === 'house' && (
              <TagBox className="tag-search-label-item" title="房屋用途">
                {houseTag.map((item) => (
                  <SingleTag key={item.code} selectKeys={selectKeys} item={item} onSelect={onSelect} />
                ))}
              </TagBox>
            )}
          </PaddingBox>
        </QueueAnim>
      </Portal>
    );
  }
}
