import React, { useState, useEffect } from 'react'
import ShowTitleMenu from './components/ShowTitleMenu'
import { useRequest } from 'umi'
import { Plus, Delete } from '@icon-park/react'
import { Table, Tag, Popconfirm, Popover, Button, Alert } from 'antd'
import { fetchAttendanceList, unlinkAttendance, deleteAttendance } from '@/services/user/system'
import ConnectModal from '@/pages/role/System/components/ConnectModal'
import ProForm, { ProFormText } from '@ant-design/pro-form'

const titleOptions = [
  { label: '加班申请人', value: '0' },
  { label: '销假参数', value: '1' }
]
export enum modalType {
  addobjectModal = 0,
  linkAttendance = 1
}
const Attendance: React.FC = () => {
  const [state, setState] = useState({
    id: '0',
    attendanceList: [],
    visible: false,
    type: modalType.addobjectModal
  })

  const onSelect = (id: string) => {
    setState({ ...state, id })
  }

  const { run: tryGetRoleStaffList } = useRequest(fetchAttendanceList, {
    manual: true,
    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)
    }
  }, [state.id])

  const columns: ColumnsType<API.AttendanceItem> = [
    {
      title: '申请人名称',
      dataIndex: 'applicantStaffName',
      width: '15%'
    },
    {
      title: '申请对象',
      dataIndex: 'staff',
      align: 'left',
      width: '70%',
      render: (_, record: API.AttendanceItem) => {
        return (
          <div>
            {record.staff.map(item => (
              <Tag
                key={item.staffId}
                closable={true}
                onClose={() => tryunlinkAttendance({ staffId: item.staffId, id: record.id })}>
                {item.staffName}
              </Tag>
            ))}
            <span
              className="hover:text-hex-886ab5 cursor-pointer text-purple-500"
              onClick={() =>
                setState({
                  ...state,
                  id: record.id,
                  visible: true,
                  type: modalType.linkAttendance
                })
              }>
              <Plus />
              添加
            </span>
          </div>
        )
      }
    },
    {
      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">
              <Delete fill="#fd3995" />
            </span>
          </Popconfirm>
        </Popover>
      )
    }
  ]

  return (
    <div className="h-full w-full flex flex-row">
      <ShowTitleMenu onSelect={onSelect} option={titleOptions} selectDefaultValue="0" />
      <div className="w-max-3/4">
        <div className="ml-8 bg-white p-4 shadow-md shadow-hex-3e2c5a relative">
          {state.id === '0' ? (
            <>
              <div className="absolute right-7 top-7 z-100">
                <Button
                  type="primary"
                  onClick={() =>
                    setState({ ...state, visible: true, type: modalType.addobjectModal })
                  }>
                  添加新申请人
                </Button>
                <ConnectModal
                  dataId={state.id}
                  show={state.visible}
                  onShowChange={(visible: boolean) => setState({ ...state, visible })}
                  onReload={() => tryGetRoleStaffList(state.id)}
                  postUrl={
                    state.type === modalType.addobjectModal
                      ? '/attendance/add'
                      : '/attendance/linkStaff'
                  }
                  showButton={false}
                />
              </div>
              <Table
                bordered
                title={() => '加班申请人'}
                columns={columns}
                dataSource={state.attendanceList}
                rowKey={row => row.id}
              />
            </>
          ) : null}
          {state.id === '1' ? (
            <>
              <div>
                <ProForm onFinish={async values => console.log(values)}>
                  <h3 className="font-bold">销假参数</h3>
                  <div className="mt-4 mb-4">
                    <Alert
                      type="warning"
                      message="超过当前设置销假参数（不包含当前所写的）不计算考勤"
                    />
                  </div>
                  <ProForm.Group>
                    <span>每月</span>
                    <ProFormText name="CLD_parameters" label="" initialValue={5} />
                    <span>号</span>
                  </ProForm.Group>
                </ProForm>
              </div>
            </>
          ) : null}
        </div>
      </div>
    </div>
  )
}

export default Attendance