import React, {useState} from 'react';
import { history, useRequest, useAccess, Access } from 'umi';
import {Card, Row, Col, Button, Checkbox, Modal, Form, Tabs, message} from 'antd'
import moment from 'moment';
import {createSearchForm} from "@/utils/createForm";
import classNames from "classnames";
import utilsStyles from '@/utils/utils.less';
import StaffCard from '../components/StaffCard'
import {fetchShiftsListAudit, fetchShiftsListCreate, fetchShiftsRemove, fetchShiftsDelete} from '@/services/staff'


import style from '../index.less'
import useRequestTable from "@/useHooks/useRequestTable";

const { confirm } = Modal;
const { TabPane } = Tabs;

const Index = (props) => {
  /* 选中审批 */
  const [wordIds, setWorkIds] = useState([])
  const [tab, setTab] = useState('1')
  const access = useAccess()

  /**
   * @表单提交
   */
  const [form] = Form.useForm();

  const createList = useRequestTable(fetchShiftsListCreate, {
    form
  })
  const auditList = useRequestTable(fetchShiftsListAudit, {
    form, manual: true
  }, true)

  const tabAction = {
    1: createList, 2: auditList
  }[tab]

  const leaveDelete = useRequest(fetchShiftsDelete, {
    manual: true,
    onSuccess: () => {
      message.success('删除成功', 1)
      tabAction?.search?.refresh()
    }
  })
  const leaveRemove= useRequest(fetchShiftsRemove, {
    manual: true,
    onSuccess: () => {
      message.success('撤销成功', 1)
      tabAction?.search?.refresh()
    }
  })

  const searchChange = (val) => {
    // if (val?.adjustmentMonth){
    //   val.adjustmentMonth = moment(val.adjustmentMonth).format("YYYY-MM")
    // }
    if (val?.queryMonth){
      val.queryMonth = moment(val.queryMonth).format("YYYY-MM")
    }
    tabAction?.search?.submit(val)
  };

  /**
   * @页面方法
   */
  const tabChange = (requestType) => {
    setTab(requestType);
    const tabCurrentAction = {
      1: createList, 2: auditList
    }[requestType]
    tabCurrentAction?.search?.submit({pageNumber: 1, pageSize: 10})
  }
  const workConfirm = () => {
    confirm({
      centered: true,
      title: '审批提示',
      icon: null,
      content: wordIds.length > 1 ? '您选择多个审批项， 是否发起合并审批？' : '是否发起审批？',
      onOk() {
        console.log('OK');
      }
    });
  }
  const workDelete = (id) => {
    confirm({
      centered: true,
      title: '删除提示',
      icon: null,
      content: '是否删除此审批项',
      onOk() {
        leaveDelete.run(id)
      }
    });
  }
  const batchDelete = () => {
    confirm({
      centered: true,
      title: '删除提示',
      icon: null,
      content: '是否删除选中审批项',
      onOk() {
        tabAction?.search?.refresh()
      }
    });
  }
  const revocation = (id) => {
    confirm({
      centered: true,
      title: '撤回提示',
      icon: null,
      content: '是否撤回选中审批项',
      onOk() {
        leaveRemove.run(id)
      }
    });
  }

  /**
   * @页面数据
   */
  const searchData = [
    {autoLayout: {}, label: '时间', name: tab === '1' ? '' : 'queryMonth', type: 'singleDate', datePicker: 'month'},
    {autoLayout: {}, label: '审批状态', name: tab === '1' ? 'adjustmentState' : 'auditState', type: 'select',
      selectData: [
        {value: 0, label: '待提交'},
        {value: 1, label: '待审批'},
        {value: 2, label: '已审批'},
        {value: 3, label: '已驳回'},
      ]
    },
    {autoLayout: {}, label: '查询', name: 'adjustmentName', type: 'input'}
  ];

  const LeaveData = {
    1: createList.dataSource, 2: auditList.dataSource
  }[tab] || []

  const accessList = {
    info: access.insideAccess('EOahAhXcZZv'),
    edit: access.insideAccess('TqQwvsoCbuv'),
    cancel: access.insideAccess('SfSWRTWvAaZ'),
    delete: access.insideAccess('LZpNDvCznRV')
  }

  return (
    <div className={ classNames(utilsStyles.disFlexCol, utilsStyles.fullContainer) }>
      <Card style={{flex: 1}} bodyStyle={{padding: 0}}>
        {/* 顶部搜索 */}
        <Tabs activeKey={tab} style={{padding: '10px 20px 0'}} onChange={tabChange}>
          <TabPane tab='我发起的' key='1'/>
          <TabPane tab='待我审批' key='2'/>
        </Tabs>
        <div className={classNames("pos_btw", style.border_bottom)}>
          <Row style={{flex: 1}}>
            <Col span={18}>
              <Form className={style.work_search_form} form={form} onValuesChange={searchChange}>
                {searchData.map(item => createSearchForm(item))}
              </Form>
            </Col>
            <Col span={6}>
              {tab === '1' && (
                <Button type="primary" onClick={() => history.push(`/ops/staff/shifts/new/add`)}>新增调班</Button>
              )}
            </Col>
          </Row>
        </div>
        {/* 审批项 */}
        <Checkbox.Group style={{margin: '10px 0 40px', width: '100%', padding: 10}} onChange={setWorkIds}>
          <Row gutter={18}>
            {LeaveData?.map((item, index) => {
              const cardOptions = {
                scheduleNames: item?.adjustmentName || '',
                scheduleMonth: item?.creationTime && moment(item.creationTime).format("YYYY-MM-DD") || '',
                creationName: item?.applicantName || item?.creationName || '',
                infoUrl: item?.adjustmentState === 1 && tab === '2'
                  ? `/ops/staff/shifts/audit/${item.id}/audit`
                  : `/ops/staff/shifts/${item.id}`,
                editUrl: {
                  1: `/ops/staff/shifts/edit/${item.id}`,
                  2: `/ops/staff/shifts/audit/${item.id}/audit`
                }[tab],
                userUrl: item.applicantUrl
              }
              const status = {
                0: 'toSubmit', 1: 'pending', 2: 'approved', 3: 'rejected'
              }[item.adjustmentState]
              return (
                <Col key={index} md={{span: 8}} xxl={{span: 6}}>
                  <StaffCard
                    isAudit={tab !== '1'}
                    status={status}
                    id={item.id}
                    onDelete={workDelete}
                    onRevocation={revocation}
                    cardOptions={cardOptions}
                    accessList={accessList}
                  />

                </Col>
              )
            })}
          </Row>
        </Checkbox.Group>

        {/* 审批选择 */}
        <div className={classNames('pos_end', style.footer_btn)}>
          <Button
            disabled={wordIds.length === 0}
            onClick={batchDelete}
            style={{marginRight: 10}}
          >删除</Button>
          <Button
            disabled={wordIds.length === 0}
            onClick={workConfirm}
            type="primary"
          >发起审批</Button>
        </div>

      </Card>
    </div>
  );
};

export default Index