import PageContent from '@/components/PageContent';
import { Table } from 'antd';
import dayjs from 'dayjs';
import ReactZmage from 'react-zmage';
import styles from './detail.less';

const {
  DeviceCode,
  DeviceName,
  MaintainTime,
  EvaluationScore,
  Operators,
  RustRemoval,
  AntiCorrosive,
  MaterialConsumption,
  Fasten,
  Clean,
  Lubrication,
  Check,
  Note,
  Files = [],
} = JSON.parse(localStorage.maintain || '{}');

export default function DeviceMaintainDetail() {
  const columns = [
    {
      title: '保养资料',
      dataIndex: 'Name',
      render: (text, item) => {
        return (
          <ReactZmage
            controller={{
              // 关闭按钮
              close: true,
              // 缩放按钮
              zoom: false,
              // 下载按钮
              download: false,
              // 翻页按钮
              flip: false,
              // 多页指示
              pagination: false,
            }}
            backdrop="rgba(255,255,255,0.5)"
            style={{ width: '3.5rem' }}
            src={item.Url}
          />
        );
      },
    },
    {
      title: '创建时间',
      dataIndex: 'CreatedTime',
      render: (text) => {
        return text ? dayjs(text).format('YYYY年MM月DD日  HH:mm:ss') : null;
      },
    },
  ];

  function getUser(params) {
    let arr = [];
    if (!params) {
      return;
    } else {
      return (arr = params
        .map((item) => {
          return item.Operator?.CName;
        })
        .join(','));
    }
  }

  return (
    <PageContent closeable={false}>
      <div className={styles.detailBox}>
        <span>
          <label>设备位号:</label>
          {DeviceCode}
        </span>
        <span>
          <label>设备名称:</label>
          {DeviceName}
        </span>
        <span>
          <label>保养人:</label>
          {getUser(Operators)}
        </span>
        <span>
          <label>物料消耗:</label>
          {MaterialConsumption}
        </span>
        <span>
          <label>保养日期:</label>
          {MaintainTime}
        </span>
        <span>
          <label>是否润滑加油:</label>
          {Lubrication === 1 ? '是' : '否'}
        </span>
        <span>
          <label>是否拆检:</label>
          {Check === 1 ? '是' : '否'}
        </span>
        <span>
          <label>是否清洁:</label>
          {Clean === 1 ? '是' : '否'}
        </span>
        <span>
          <label>是否紧固:</label>
          {Fasten === 1 ? '是' : '否'}
        </span>
        <span>
          <label>是否除锈:</label>
          {RustRemoval === 1 ? '是' : '否'}
        </span>
        <span>
          <label>是否防腐:</label>
          {AntiCorrosive === 1 ? '是' : '否'}
        </span>

        <span>
          <label>评估分数:</label>
          {EvaluationScore * 100}
        </span>
        <span>
          <label>保养备注:</label>
          {Note?.split('|').map((item) => (
            <div>{item}</div>
          ))}
        </span>
      </div>
      <Table
        style={{ marginTop: '0.1rem' }}
        dataSource={Files}
        columns={columns}
        pagination={false}
      />
    </PageContent>
  );
}