import BTable from "@/components/b_table";
import { FormType } from "@/components/form/interface";
import SimpleForm from "@/components/form/simple_form";
import { UserDataType } from "@/model/userModel";
import { Button, FormInstance, Modal, Space } from "antd";
import { Store } from "antd/es/form/interface";
import { ColumnsType } from "antd/lib/table";
import dayjs from "dayjs";
import { inject, observer } from "mobx-react";
import React, { useState } from "react";
import { useEffect } from "react";

const GloryPlaque = (props: Store) => {
  const { gpStore } = props;
  const formRef = React.useRef<FormInstance>(null);
  const [record, setRecord] = useState<any>(null);
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  useEffect(() => {
    gpStore.getlist();
  }, [gpStore]);
  const columns: ColumnsType<UserDataType> = [
    { title: "申请人", dataIndex: "user_name" },
    { title: "申请人手机号", dataIndex: "tel" },
    { title: "悬挂地址", dataIndex: "address" },
    {
      title: "申请时间",
      dataIndex: "created_at",
      render: (created_at) => (
        <span>{dayjs(created_at).format("YYYY-MM-DD")}</span>
      ),
    },
    {
      title: "申请原因",
      dataIndex: "abbr",
      render: (abbr) => <span>{abbr === 2 ? "更换" : "悬挂"}</span>,
    },
    { title: "申请描述", dataIndex: "desc" },
    {
      title: "审核状态",
      dataIndex: "status",
      render(value, record, index) {
        return record.status === 1
          ? "已通过"
          : record.status === 2
          ? "已驳回"
          : "待审批";
      },
    },
    {
      title: "操作",
      dataIndex: "id",
      ellipsis: {
        showTitle: false,
      },
      render: (any, record) => column_widget(any, record),
    },
  ];

  const edit = (record) => {
    setIsModalOpen(true);
    setRecord(record);
  };

  // 审核通过
  const access = (record) => {
    gpStore.access(record.identity, { status: 1 });
  };
  const onFinish = (values: any) => {
    let data = {
      ...values,
      status: 2,
    };
    // 驳回
    gpStore.access(record.identity, data);
    setIsModalOpen(false);
  };
  const column_widget = (any, record) => {
    if (record.status === 0) {
      return (
        <Space wrap>
          <Button
            type="dashed"
            size="small"
            onClick={() => {
              edit(record);
            }}
          >
            驳回
          </Button>
          <Button
            type="dashed"
            size="small"
            onClick={() => {
              access(record);
            }}
          >
            通过
          </Button>
        </Space>
      );
    }
    return <div></div>;
  };
  return (
    <div>
      <BTable store={gpStore} columns={columns} dataSource={gpStore.list} />
      <Modal
        title={"审批"}
        width={500}
        open={isModalOpen}
        afterClose={() => formRef.current?.resetFields()}
        onOk={() => formRef.current?.submit()}
        onCancel={() => {
          setIsModalOpen(false);
        }}
        okText="确定"
        cancelText="取消"
      >
        <SimpleForm
          formRef={formRef}
          formName="card_basic"
          colProps={25}
          subBtnName="提交"
          formDatas={[
            {
              type: FormType.input,
              label: "驳回原因",
              name: "reject_mark",
              value: "",
              rules: [{ required: true, message: "请输入驳回原因!" }],
            },
          ]}
          onFinish={onFinish}
          initialValues={true}
          onFinishFailed={() => {}}
        />
      </Modal>
    </div>
  );
};
export default inject("gpStore")(observer(GloryPlaque));
