import { Tabs, Table, List, Row, Col } from 'antd'
import React, { useEffect } from 'react'
import { connect } from 'umi'
import useAutoTable from '@/hooks/useAutoTable'
import { dayjsFormat } from '@/utils/utils'

const ContanctLowerList = props => {
  const { log, servicelist, collapsed } = props
  useEffect(() => {
    // console.log(log)
    // const servicelisData = () => {
    //   const { dispatch } = props
    //   dispatch({
    //     type: 'servicelist/fetch'
    //   }) // 派发出这个action就会调用contact中的fetch函数，然后就会请求数据
    // }
    // servicelisData()
  }, [])
// console.log(servicelist)
  const { TabPane } = Tabs
  const needSubtractHeight = 48 + 48 + 48 + 64 + 24 // 需要被裁掉的高度
  // const needSubtractWidth = (collapsed ? 208 : 48) + 48 + 48 + 48 // 需要被裁掉的高度

  const [x, y] = useAutoTable(collapsed, needSubtractHeight)
  // const servicelist = [...servicelistName.lists]
  return (
    <div>
      <div className="zh-pd-left-15">
        <Tabs type="card">
          <TabPane tab="服务记录" key="服务记录">
            <div className="sheet-panel-record" style={{ height:y-250,overflowY:'auto' }}>
              <Row>
                <Col span="8">类型/时间</Col>
                <Col span="16">服务内容</Col>
              </Row>
              <List
                dataSource={servicelist}
                split={false}
                renderItem={item => (
                  <List.Item>
                    <Row className="zh-width-100P">
                      <Col span="8">
                        <a>@{item.staffName}</a> {item.status}上门服务
                        <List.Item.Meta
                          description={ dayjsFormat(item.date, 'MM-DD HH:mm:ss')}
                        />
                      </Col>
                      <Col span="16">{item.remarks}</Col>
                    </Row>
                  </List.Item>
                )}
              />
            </div>
          </TabPane>
          <TabPane tab="日志" key="日志">
            <div className="sheet-panel-record" style={{ height:y-250,overflowY:'auto' }}>
              <List
                dataSource={log}
                split={false}
                renderItem={item => (
                  <List.Item>
                    <a>@{item.clientName}</a>{item.content}
                    <List.Item.Meta
                      // avatar=
                      // title=
                      // description={ dayjsFormat(item.createTime, 'YYYY-MM-DD')}
                      description={ dayjsFormat(item.createTime)}
                    />
                  </List.Item>
                )}
              />
            </div>
          </TabPane>
        </Tabs>
      </div>
    </div>
  )
}

export default ContanctLowerList

// export default connect(({ journallist, servicelist, loading }) => ({
//   journalName: journallist,
//   servicelistName: servicelist,
//   getlist: loading.effects['journallist/fetch']
// }))(ContanctLowerList)