import { Button, Space, Modal, FormInstance } from "antd";
import { inject, observer } from "mobx-react";
import BTable from "@/components/b_table";
import { useEffect, useState } from "react";
import { Store } from "antd/lib/form/interface";
import SimpleForm from "@/components/form/simple_form";
import React from "react";
import { columns, defaultConfig } from "./political_column";

const PoliticalStudy = (props: Store) => {
  const { politicalStudyStore } = props;
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  const [projectConfig, setProjectConfig] = useState<any>([]);
  const formRef = React.useRef<FormInstance>(null);
  const [record, setRecord] = useState<any>(null);
  useEffect(() => {
    politicalStudyStore.getlist();
    setProjectConfig(defaultConfig);
  }, [politicalStudyStore]);
  const column_widget = (any, record) => {
    return (
      <Space wrap>
        <Button
          type="dashed"
          size="small"
          onClick={() => {
            edit(record);
          }}
        >
          编辑
        </Button>

        <Button
          type="dashed"
          danger
          size="small"
          onClick={() => {
            politicalStudyStore.deleteItem(record.id);
          }}
        >
          删除
        </Button>
      </Space>
    );
  };
  const edit = (record) => {
    setIsModalOpen(true);
    setRecord(record);
  };
  const onFinish = (values: any) => {
    let data = {
      ...values,
      score:Number(values.score)
    }
    if (values.file_url){
      data.file_url = values.file_url[0].url;
    }
    if (!record?.id) {
      politicalStudyStore.add(data);
    } else {
      politicalStudyStore.putItem(record.id,data);
    }
    setIsModalOpen(false);
  };

  const onFinishFailed = () => {};
  return (
    <div className="contentBox">
      <Space direction="vertical" size="middle" style={{ display: "flex" }}>
        <Space direction="horizontal" size={"middle"}>
          <Button
            type="default"
            onClick={() => {
              setRecord(null);
              setProjectConfig(defaultConfig);
              setIsModalOpen(true);
            }}
          >
            发布文章
          </Button>
        </Space>
        <BTable
          store={politicalStudyStore}
          columns={[
            ...columns,
            {
              title: "操作",
              dataIndex: "id",
              ellipsis: {
                showTitle: false,
              },
              render: (any, record) => column_widget(any, record),
            },
          ]}
          dataSource={politicalStudyStore.list}
        />
        <Modal
          title={!record?.id ? "添加文章" : "编辑文章"}
          width={1200}
          open={isModalOpen}
          afterClose={() => formRef.current?.resetFields()}
          onOk={() => formRef.current?.submit()}
          onCancel={() => {
            setIsModalOpen(false);
          }}
        >
          <SimpleForm
            formRef={formRef}
            createCallback={() => {
              if (record?.id) {
                formRef.current?.setFieldsValue(record);
              } else {
                formRef.current?.setFieldsValue(null);
              }
            }}
            formName="card_basic"
            colProps={25}
            subBtnName="提交"
            formDatas={projectConfig}
            onFinish={onFinish}
            initialValues={true}
            onFinishFailed={onFinishFailed}
          />
        </Modal>
      </Space>
    </div>
  );
};

export default inject("politicalStudyStore")(observer(PoliticalStudy));