import { Tabs, List, Row, Col } from 'antd'
import React from 'react'
import { dayjsFormat } from '@/utils/utils'

export const servicelogEnum = {
  1: '上门服务',
  2: '电话拜访',
  3: '其他事项',
  4: '在线服务'
}

const ContanctLowerList = props => {
  const {
    log: { log: logs = [] },
    servicelist
  } = props
  const { TabPane } = Tabs
  return (
    <div>
      <div className="pl-4">
        <Tabs>
          <TabPane tab="服务记录" key="服务记录">
            <div className="sheet-panel-record">
              <Row>
                <Col span="8">类型/时间</Col>
                <Col span="16">服务内容</Col>
              </Row>
              <List
                dataSource={servicelist}
                split={false}
                renderItem={item => (
                  <List.Item>
                    <Row className="w-full">
                      <Col span="8">
                        <a className="mr-1">@{item.staffName}</a>
                        {servicelogEnum[item.status]}
                        <List.Item.Meta description={dayjsFormat(item.date, 'YYYY-MM-DD')} />
                      </Col>
                      <Col span="16" className="whitespace-pre-line">
                        {item.mark}
                      </Col>
                    </Row>
                  </List.Item>
                )}
              />
            </div>
          </TabPane>
          <TabPane tab="日志" key="日志">
            <div className="sheet-panel-record">
              <List
                dataSource={logs}
                split={false}
                renderItem={item => (
                  <List.Item>
                    <a>@{item.operatorName}</a> {item.content}
                    <List.Item.Meta description={dayjsFormat(item.createTime)} />
                  </List.Item>
                )}
              />
            </div>
          </TabPane>
        </Tabs>
      </div>
    </div>
  )
}

export default ContanctLowerList