import React, { useState, useMemo, useEffect } from 'react'
import { Button, Modal, Spin, Popover, Table, Descriptions, Tooltip } from 'antd'

import { dispatch } from '../../../../model'
import { highlightSearchContentByTerms } from '../../../../util'

const FC = (props) => {
  const { id, terms } = props

  const [data, setData] = useState()
  const [loading, setLoading] = useState(false)

  const columns = [
    {
      title: '序号',
      dataIndex: 'key',
      editable: false,
      width: 60,
      fixed: 'left',
      render: (text, record, index) => {
        return (index+1).toString();
      }
    },
    {
      title: '中文名称',
      width: 200,
      dataIndex: 'cnName',
      editable: true,
      ellipsis: true,
      require: true,
      fixed: 'left',
      render: (text, _, __) => {
        return (
          <Tooltip title={text||''}>
          <span>
          {highlightSearchContentByTerms(text, terms)}
          </span>
          </Tooltip>
        )
      }
    },
    {
      title: '英文名称',
      width: 200,
      dataIndex: 'name',
      editable: true,
      ellipsis: true,
      require: true,
      render: (text, record, index) => {
        return (
          <Tooltip title={text||''}>
          <span style={{ fontWeight: 'bold' }} >{highlightSearchContentByTerms(text, terms)}</span>
          </Tooltip>
        )
      }
    },
    {
      title: '类型',
      width: 150,
      dataIndex: 'datatype',
      editable: true,
      ellipsis: true,
      require: true,
      render: (_, record, __) => {
        if (record?.datatype) {

          if ((record?.datatype?.name==='Char'||record?.datatype?.name==='Varchar') && record?.datatype?.parameterValues?.length>0) {

            return `${record?.datatype?.name||''}(${(record?.datatype?.parameterValues[0]?record.datatype.parameterValues[0]:0)})`;
          
          } else if ((record?.datatype?.name==='Decimal'||record?.datatype?.name==='Numeric') && record?.datatype?.parameterValues?.length>1) {
            return `${record?.datatype?.name||''}(${(record?.datatype?.parameterValues[0]?record.datatype.parameterValues[0]:0)},${(record?.datatype?.parameterValues[1]?record.datatype.parameterValues[1]:0)})`;
          }

          return record.datatype.name||'';
        }

        return '';
      }
    },
  ]

  useEffect(() => {
    getService()
  }, [])

  const getService = () => {
    setLoading(true)

    dispatch({
      type: 'pds.getDataService',
      payload: {
        id
      },
      callback: (data) => {
        setLoading(false)
        setData(data||[])
      },
      error: () => {
        setLoading(false)
      }
    })
  }

  return (
    <Spin spinning={loading}>
      <h3 className='mr-3' style={{ marginBottom: 0 }}>基本信息</h3>
      <Descriptions className='mt-3' column={3}>
        <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>中文名称</div>} >{highlightSearchContentByTerms(data?.cnName||'', terms)}</Descriptions.Item>
        <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>英文名称</div>}>{highlightSearchContentByTerms(data?.name||'', terms)}</Descriptions.Item>
        <Descriptions.Item label={<div style={{ textAlign: 'right', width: 85 }}>数据内容</div>}>{highlightSearchContentByTerms(data?.remark||'', terms)}</Descriptions.Item>
      </Descriptions>
      <h3 className='mr-3' style={{ marginBottom: 0 }}>字段列表</h3>
      <Table
        className='mt-3'
        dataSource={data?.pdsdataServiceAttributes||[]}
        columns={columns}
        size='small'
        rowKey='iid'
        pagination={false}
        sticky
      />
    </Spin>
  )

}

export default FC
