import {useEffect, useState} from "react";
import {ConfigProvider} from '@nutui/nutui-react-taro'
import Taro, {getCurrentInstance} from '@tarojs/taro'
import {updateUserInfo} from "@/api/layout";
import {Uploader} from '@nutui/nutui-react-taro'

const {router} = getCurrentInstance()
import {
  Form,
  Button,
  Input
} from '@nutui/nutui-react-taro'
import {CmsWebsite} from "@/api/cms/cmsWebsite/model";
import {getSiteInfo} from "@/api/layout";

function Modify() {
  const formId = Number(router?.params.id)

  const [form] = Form.useForm()
  const [FormData, setFormData] = useState<CmsWebsite>(
    {
      websiteId: undefined,
      websiteName: undefined,
      websiteLogo: undefined,
      websiteCode: undefined,
      phone: undefined,
      address: undefined,
      comments: undefined
    }
  )
  const reload = () => {
    // 获取用户信息
    getSiteInfo().then((data) => {
      setFormData(data)
    })
  }

  // 提交表单
  const submitSucceed = (values: any) => {
    console.log(values, 'values')
    console.log(formId, 'formId>>')
    if (values.type === 1 && values.name == '') {
      Taro.showToast({
        title: '请填写单位名称',
        icon: 'error'
      });
      return false;
    }
    updateUserInfo(values).then(() => {
      Taro.showToast({title: `保存成功`, icon: 'success'})
      return Taro.navigateBack()
    }).catch(() => {
      Taro.showToast({
        title: '保存失败',
        icon: 'error'
      });
    })
  }
  const submitFailed = (error: any) => {
    console.log(error, 'err...')
    // Taro.showToast({ title: error[0].message, icon: 'error' })
  }

  useEffect(() => {
    reload()
  }, [form]);

  return (
    <>
      <ConfigProvider>
        <Form
          divider
          initialValues={FormData}
          labelPosition="left"
          onFinish={(values) => submitSucceed(values)}
          onFinishFailed={(errors) => submitFailed(errors)}
          footer={
            <div
              style={{
                display: 'flex',
                justifyContent: 'center',
                width: '100%'
              }}
            >
              <Button nativeType="submit" block type="info">
                提交
              </Button>
            </div>
          }
        >
          <Form.Item
            label="LOGO"
            name="websiteLogo"
            initialValue={[
              {
                name: 'file1.png',
                url: FormData.websiteLogo,
                status: 'success',
                message: 'success',
                type: 'image',
                uid: '122',
              },
            ]}
          >
            <Uploader url={FormData.websiteLogo}/>
          </Form.Item>
          <Form.Item
            label={'店铺名称'}
            name="websiteName"
            initialValue={FormData.websiteName}
            rules={[{message: '请输入店铺名称'}]}
          >
            <Input placeholder="请输入姓名或单位名称" type="text"/>
          </Form.Item>
          <Form.Item
            label={'详细地址'}
            name="address"
            initialValue={FormData.address}
            rules={[{message: '请输入详细地址'}]}
          >
            <Input placeholder="请输入详细地址" type="text"/>
          </Form.Item>
          <Form.Item
            label="备注信息"
            name="comments"
            initialValue={FormData.comments}
            rules={[{message: '备注信息'}]}
          >
            <Input
              placeholder={'可注明身份，如:家长、小学教师、公务员等'}/>
          </Form.Item>
        </Form>
      </ConfigProvider>
      {/*<Cascader*/}
      {/*  popupProps={{*/}
      {/*    className: 'cascader-popup',*/}
      {/*  }}*/}
      {/*  visible={navBarState.visible}*/}
      {/*  optionKey={{valueKey: 'name', textKey: 'name', childrenKey: 'children'}}*/}
      {/*  title="选择所在班级"*/}
      {/*  options={classList}*/}
      {/*  closeable*/}
      {/*  onChange={change6}*/}
      {/*  onClose={() => {*/}
      {/*    changeNarBar(false)*/}
      {/*  }}*/}
      {/*/>*/}
    </>
  )
}

export default Modify
