index.tsx

import React, {useState} from 'react';
import { history, useRequest } from 'umi';
import { Tabs, Card } from 'antd'
import {FormOutlined} from '@ant-design/icons'
import {BorderLeft} from '@/components/Customized/AutoTitle'
import _ from 'lodash'
import {fetDeviceDetail, fetchCameraInfo} from '@/services/device'
import InfoTab from './InfoTab'
import FileTab from './FileTab'
import ReportTab from './ReportTab'
import style from './style.less'

const {TabPane} = Tabs;

type DeviceInfoProps = {
  deviceId: string;
  accountType: 'device' | 'special' | 'camera';
  onUpdate?: () => void
}

const Index: React.FC<DeviceInfoProps> = (props) => {
  const {deviceId, accountType, onUpdate} = props
  const deviceDetail = useRequest(() => fetDeviceDetail(deviceId), {manual: accountType === 'camera'})

  const cameraDetail = useRequest(() => fetchCameraInfo(deviceId), {manual: accountType !== 'camera'})

  const cameraInfo = {...cameraDetail?.data, ...cameraDetail?.data?.device} || {}

  const deviceInfo = deviceDetail?.data || {}

  const [tab, setTab] = useState<string>('1')
  /**
   * @页面方法
   */
  const tabChange = (tabKey: string) => {
    setTab(tabKey)
  }
  /**
   * @页面数据
   */
  const tabData = [
    {tab: '基础信息', key: '1'},
    {tab: '设备文件', key: '2'},
    {show: accountType === 'special',tab: '检验报告', key: '3'},
  ]

  const testVal = deviceInfo.highestPriorityStatusCode;


  const className = {
    normal: "btn_success", malfunction: "btn_warning", alert: "btn_alarm",
    offline: "btn_disabled", deactivate: "btn_disabled", scrapped: 'btn_disabled'
  }[testVal]
  const title = {
    normal: '正常', malfunction: '故障', alert: '报警',
    offline: '离线', deactivate: '停用', scrapped: '报废'
  }[testVal]
  const tabExtra = <div className={className}>{title}</div>

  const editHref = () => {
    history.push(`/ops/book/account/edit/${deviceInfo?.type}/${deviceId}`)
  }

  const editUpdate = () => {
    onUpdate?.();
    deviceDetail.run()
  }

  return (
    <Card
      size="small"
      className={style.record_box}
      bodyStyle={{padding: '0 10px 10px'}}
      title={
        <div className="pos_aline_no_wrap">
          <BorderLeft title="设备信息"/>
          <div onClick={editHref} className={style.btn_primary}>
            编&nbsp;辑&nbsp;<FormOutlined />
          </div>
        </div>
      }
    >
      <Tabs
        activeKey={tab}
        onChange={tabChange}
        className={style.record_tab}
        tabBarExtraContent={tabExtra}
      >
        {tabData.map((item) => (_.isNil(item.show) || item.show) && (
          <TabPane tab={item.tab} key={item.key}/>
        ))}
      </Tabs>
      {tab === '1' && (
        <InfoTab update={editUpdate} deviceInfo={ accountType === 'camera' ? cameraInfo : deviceInfo} type="account"/>
      )}
      {tab === '2' && (
        <FileTab deviceInfo={deviceInfo}/>
      )}
      {tab === '3' && (
        <ReportTab deviceId={deviceId}/>
      )}
    </Card>
  );
};

export default Index;