import { message, Tabs } from 'antd'
import React, { useEffect, useState, useRef } from 'react'
import consts from '@/consts'
import { apiAddService } from '@/services/customer'
import LocksDetail from '@/pages/Product/Lock/LockStore/components/LocksDetail'
import { useModal } from '@/components/Modal'
import AddRecord from './AddRecord'
import { useDispatch } from 'dva'
import ProTable from '@ant-design/pro-table'

const ContanctTabList = ({ clientId, software }) => {
  // console.log(clientId)
  const dispatch = useDispatch()
  const { toggleDrawer, setDrawerProps } = useModal()
  const [state, setState] = useState({
    params: {},
    visible: false
  })
  const tRef = useRef()
  // 展示软件锁drawer
  const showLongleDrawer = id => {
    toggleDrawer()
    setDrawerProps({
      zIndex: 1040,
      closable: true,
      onClose: () => toggleDrawer(),
      bodyStyle: {
        height: '100vh',
        overflowY: 'hidden'
      },
      children: <LocksDetail dataId={id} orderIds={state.orderIds} />
    })
    toggleDrawer()
  }
  const columns = [
    {
      title: '锁号',
      dataIndex: 'keyNum',
      width: '20%',
      render: (clientName, record) => (
        <span
          onClick={() => showLongleDrawer(record.id)}
          className="text-primary cursor-pointer hover:text-[#967bbd]">
          {clientName}
        </span>
      )
    },
    {
      title: '产品',
      dataIndex: 'product',
      width: '50%',
      ellipsis: true
    },
    {
      title: '状态',
      dataIndex: 'statusT',
      width: '10%',
      ellipsis: true
    },
    {
      title: '责任人',
      dataIndex: 'responsible',
      width: '15%',
      ellipsis: true
    }
  ]
  const [addService, setAddService] = useState({
    visible: false,
    loading: false
  })

  const handleAddService = async values => {
    setAddService({ ...addService, loading: true })
    const { code = -1 } = await apiAddService({ ...values, clientId })
    if (code === consts.RET_CODE.SUCCESS) {
      message.success('新增成功')
      setState({ ...state, data: values })
    }
    // 请求完了
    setAddService({ ...addService, loading: false, visible: false })
    // 刷新数据
    dispatch({
      type: 'refresh/commitAction',
      payload: 'client'
    })
    // await initData()
  }
  useEffect(() => {
    setState({ ...state, params: { ...state.params, clientId } })
  }, [clientId])
  const { TabPane } = Tabs
  return (
    <div>
      <div className="pl-15px">
        {/* <Tabs onChange={callback} type="card"> */}
        <Tabs>
          {/* <TabPane tab="养护云造价" key="养护云造价">
            <div className="sheet-right-panel">
              养护云造价
              <Table columns={curingcolumns} dataSource={curinglist} pagination={false} />
            </div>
          </TabPane>
          <TabPane tab="大司空云计价" key="大司空云计价">
            <div className="sheet-right-panel">大司空云计价</div>
          </TabPane> */}
          <TabPane tab="软件锁" key="软件锁">
            <div className="sheet-right-panel">
              <ProTable
                columns={columns}
                search={false}
                toolBarRender={false}
                params={state.params}
                actionRef={tRef}
                rowKey={record => record.id}
                dataSource={software.longle}
                pagination={false}
              />
            </div>
          </TabPane>
          {/* <TabPane tab="通行账号" key="通行账号">
            <div className="sheet-right-panel">通行账号</div>
          </TabPane> */}
        </Tabs>
      </div>
      <div className="sheet-btns pl-15px pt-15px :not-first:ml-1">
        <AddRecord onConfirm={handleAddService} />
      </div>
    </div>
  )
}

export default ContanctTabList