import React, { useState } from 'react';
import * as PropTypes from 'prop-types';
import { Card, Tabs, List} from '@tencent/tea-component-mobile';
import '@tencent/tea-component-mobile/dist/tea.css';
import './index.less';
import DashBoard from './dash-board';
import Healthy from './healthy/index';
import BasicInfo from './basic-info';
import ProjectExperience from './project-experience';

export default function DeviceDetail({
  text,
  size = 'default',
  type = 'primary',
  loading = false,
  disabled = false,
  plain = false,
  events,
  ...props
}) {
  return (
    <div className="page">
      <Card>
        <List.Item
          title="浙A - 123656 - 李四"
          description="CAT50吨挖机02"
          thumb="//imgcache.qq.com/open_proj/proj_qcloud_v2/tc-x/tea-ui/assets/image.svg"
        />
      </Card>
      <Tabs>
        <Tabs.Tab key="1" id="1" label="设备看板">
          <DashBoard></DashBoard>
        </Tabs.Tab>
        <Tabs.Tab key="2" id="2" label="设备健康">
          <Healthy></Healthy>
        </Tabs.Tab>
        <Tabs.Tab key="3" id="3" label="基础信息">
          <BasicInfo></BasicInfo>
        </Tabs.Tab>
        <Tabs.Tab key="4" id="4" label="项目经历">
          <ProjectExperience></ProjectExperience>
        </Tabs.Tab>
      </Tabs>
    </div>
  );
}

DeviceDetail.propTypes = {
  /**
   * 组件类型
   */
  type: PropTypes.oneOf(['primary', 'warn', 'default']),
  /**
   * 按钮大小
   */
  size: PropTypes.oneOf(['default', 'mini']),
  /**
   * 是否禁用
   */
  disabled: PropTypes.bool,

  /**
   * 加载中
   */
  loading: PropTypes.bool,

  /**
   * 镂空
   */
  plain: PropTypes.bool,

  /**
   * 按钮内容
   */
  text: PropTypes.string,

  /**
   * 低码平台注入的事件触发器
   */
  events: PropTypes.objectOf(PropTypes.func),
};

/**
 * 默认属性
 */
DeviceDetail.defaultProps = {
  type: 'primary',
  size: 'default',
};
