import { PageContainer } from '@ant-design/pro-layout'
import React, { useEffect, useRef, useState } from 'react'
import { useRequest } from '@umijs/max'
import ShowTitleMenu from '../Attendance/components/ShowTitleMenu'
import type { FormInstance } from 'antd'
import { message } from 'antd'
import classNames from 'classnames'
import ProForm, { ProFormDigit } from '@ant-design/pro-form'
import { fetchParametersDetail, updateParametersTime } from '@/services/user/system'

const titleOptions = [{ label: '通用设置', value: 0 }]

const CommonSetting: React.FC = () => {
  const formRef = useRef<FormInstance>(null)
  const [state, setState] = useState({
    parametersType: 2,
    menuId: 0
  })

  const onSelect = (menuId: string) => {
    setState({ ...state, menuId })
  }
  const { run: tryGetParametersDetail } = useRequest(
    () => {
      return fetchParametersDetail({ parametersType: 2 })
    },
    {
      manual: true,
      onSuccess: (result: API.ParametersDetailResult) => {
        const contentObject = JSON.parse(result.content)
        formRef.current?.setFieldsValue({
          clientTimeList: contentObject.clientTimeList,
          unitTimeList: contentObject.unitTimeList,
          softTimeList: contentObject.softTimeList
        })
      }
    }
  )
  const { run: tryUpdateParametersTime } = useRequest(
    (params: API.UpdateParametersTime) => {
      return updateParametersTime(params)
    },
    {
      manual: true,
      onSuccess: () => {
        message.success('更新成功')
      }
    }
  )
  useEffect(() => {
    tryGetParametersDetail(state.parametersType)
  }, [])
  return (
    <PageContainer title={false} breadcrumb={false}>
      <div className="h-full w-full flex flex-row">
        <ShowTitleMenu onSelect={onSelect} options={titleOptions} defaultValue={0} />
        <div className={classNames('w-max-3/4 w-3/4')}>
          <div className="ml-8 bg-white p-4 shadow-md  relative">
            <div>
              <div className="text-xl font-bold">服务记录编辑删除限时</div>
              <div className="my-4 text-gray-500 text-opacity-50">
                用户新建记录和备注后，可在设置的时间（小时）内进行[编辑]和[删除]操作。
              </div>
              <ProForm
                formRef={formRef}
                layout="horizontal"
                onFinish={async values => {
                  await tryUpdateParametersTime(values)
                  return true
                }}
                initialValues={{ parametersType: 1 }}>
                <ProForm.Group>
                  <ProFormDigit label="客户服务记录：" width="xs" name="clientTimeList" />
                  <ProFormDigit label="单位服务记录：" width="xs" name="unitTimeList" />
                  <ProFormDigit label="软件锁备注：" width="xs" name="softTimeList" />
                </ProForm.Group>
              </ProForm>
            </div>
          </div>
        </div>
      </div>
    </PageContainer>
  )
}

export default CommonSetting