import React from 'react';
import { Button, Card, Popconfirm } from 'antd';
import Page from '@/components/Page';
import Wangeditor from '@/components/Wangeditor';
import { getTaCheckStandById, putTaCheckStand } from '@/service/tacheckstand';

export default (props) => {

  const [loading, setLoading] = React.useState(false);
  const [editable, setEditAble] = React.useState(false);
  const [detail, setDetail] = React.useState(false);

  const onChange = (e) => {
    setDetail({
      ...detail || {},
      content: e,
    })
  }

  const onSubmit = (e) => {
    setLoading(true);
    putTaCheckStand(1, detail).then(() => {
      setLoading(false);
      setEditAble(false);
    }).catch(() => {
      setLoading(false);
    })
  }

  React.useEffect(() => {
    setLoading(true);
    getTaCheckStandById(1).then((res) => {
      setDetail(res);
      setLoading(false);
    }).catch(() => {
      setLoading(false);
    })
  }, []);

  return (
    <Page>
      <Card loading={loading} extra={(
        editable ? <Button type="primary" onClick={onSubmit}>提交</Button>
          : <Button type="primary" onClick={() => setEditAble(true)}>编辑</Button>
      )}>
        {
          editable ? (
            <Wangeditor
              value={detail?.content}
              toolbarConfig={{
                toolbarKeys: [
                  'headerSelect',
                  'blockquote',
                  '|',
                  'bold',
                  'underline',
                  'italic',
                  'color',
                  'fontSize',
                  '|',
                  'bulletedList',
                  'numberedList',
                ]
              }}
              onChange={onChange}
            />
          ) : (
            <div dangerouslySetInnerHTML={{ __html: detail?.content }}></div>
          )
        }
      </Card>
    </Page>
  )
}