/*
 * @Author: your name
 * @Date: 2020-03-02 09:55:44
 * @LastEditTime: 2020-03-17 18:12:14
 * @LastEditors: your name
 * @Description: In User Settings Edit
 * @FilePath: \lingmou-frame\src\businessComponents\Tags\TabHeader\index.js
 */
import React, { useState, useMemo } from 'react';
import './index.less';

const typeArr = [
  {
    label: '找人',
    placeholder: '请输入人员各标签属性、经过的摄像机或场所查询',
    type: 'person',
  },
  {
    label: '找摄像机',
    placeholder: '请输入摄像机关键字查询，如摄像机名称',
    type: 'device',
  },
  {
    label: '找场所',
    placeholder: '请输入场所关键字查询，如场所名称',
    type: 'place',
  },
  {
    label: '找房屋',
    placeholder: '请输入场所关键字查询，如场所名称',
    type: 'house'
  },
  {
    label: '找车',
    placeholder: '请输入车牌号、经过场所和摄像机查询',
    type: 'vehicle',
  },
];

function TabHeader({ objectTypes = [], onTypeChange }) {
  const [type, setType] = useState(objectTypes[0]);
  const types = useMemo(() => typeArr.filter((v) => objectTypes.indexOf(v.type) > -1), [objectTypes]);

  const tabClick = function (t) {
    if (t !== type) {
      setType(t);
      onTypeChange(t);
    }
  };
  return (
    <div className="tab-header-view">
      {types.map((v) => {
        return (
          <div key={v.type} onClick={() => tabClick(v.type)} className={`tab-header-view-item ${v.type === type ? 'tab-header-view-item-active' : ''}`}>
            {v.label}
          </div>
        );
      })}
    </div>
  );
}

export default React.memo(TabHeader);
