import React, { useState, useEffect } from 'react'
import AttendanceMenu from './components/AttendanceMenu/attendanceMenu'
import { useRequest } from 'umi'
import Icon from '@/components/IconPark'
import AddObjectModal from './components/AddObjectModal'
import ApplicantModal from './components/ApplicantModal'
import { Table, Tag, Popconfirm, Popover } from 'antd'
import { fetchAttendanceList, unlinkAttendance, deleteAttendance } from '@/services/user/system'

const Attendance = () => {
  const [state, setState] = useState({
    id: '',
    attendanceList: []
  })

  const { run: tryGetRoleStaffList } = useRequest(fetchAttendanceList, {
    onSuccess: result => {
      setState({ ...state, attendanceList: result })
    }
  })

  const { run: tryunlinkAttendance } = useRequest(
    (params: API.LinkAttendance) => {
      return unlinkAttendance(params)
    },
    {
      manual: true,
      onSuccess: () => {
        tryGetRoleStaffList(state.id)
      }
    }
  )

  const { run: tryDeleteAttendance } = useRequest(
    (params: API.DeleteAttendance) => {
      return deleteAttendance(params)
    },
    {
      manual: true,
      onSuccess: () => {
        tryGetRoleStaffList(state.id)
      }
    }
  )

  useEffect(() => {
    if (state.id) {
      tryGetRoleStaffList(state.id)
    }
    return () => {
      // formRef.current?.resetFields()
    }
  }, [state.id])

  const columns: ColumnsType<API.AttendanceItem> = [
    {
      title: '申请人名称',
      dataIndex: 'applicantStaffName',
      width: '15%'
    },
    {
      title: '申请对象',
      dataIndex: 'staff',
      align: 'left',
      width: '70%',
      render: (_, record) => (
        <>
          {record.staff.map(item => (
            // console.log(item.staffName)
            <span key={item.staffId} className="zh-mg-bottom-5 zh-block">
              <Tag
                closable={true}
                onClose={() => tryunlinkAttendance({ staffId: item.staffId, id: record.id })}>
                {item.staffName}
              </Tag>
            </span>
          ))}
          <ApplicantModal dataId={record.id} />
        </>
      )
    },
    {
      title: '操作',
      dataIndex: 'opreate',
      width: '10%',
      render: (_, record) => (
        // console.log(record.id)
        <Popover>
          <Popconfirm
            title="确认删除吗？"
            okText="确认"
            cancelText="取消"
            onConfirm={() => tryDeleteAttendance({ id: record.id })}>
            <span className="hover:text-hex-e7026e cursor-pointer">
              <Icon type="delete" fill="#fd3995" />
            </span>
          </Popconfirm>
        </Popover>
      )
    }
  ]

  return (
    <div className="h-full w-full flex flex-row">
      <AttendanceMenu />
      <div className="w-max-3/4">
        <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a relative">
          <div className="absolute right-7 top-7 z-100">
            <AddObjectModal title="添加新申请人" />
          </div>
          <Table
            bordered
            title={() => '加班申请人'}
            columns={columns}
            dataSource={state.attendanceList}
            rowKey={row => row.id}
          />
        </div>
      </div>
    </div>
  )
}

export default Attendance