import PropTypes from "prop-types";
import React, { useEffect, useState, useRef } from "react";
import { connect } from "react-redux";
import { Button, Popconfirm } from "antd";
import ProTable from "@ant-design/pro-table";
import { postWaitUrl, postInWait,delCancel } from "../actions/article";
import moment from "moment";
import { push } from "react-router-redux";
import { Scroller } from "$components";
import ProjectModeal from "../components/modeal";
import ImportModeal from "../components/import_model";

export const Default = (props) => {
  const { dispatch } = props;
  const [state, setState] = useState(false); //状态
  const [counts, setCounts] = useState(); //数据
  const [visible, setVisible] = useState(false); //弹窗
  const [editData, setEditData] = useState(); //数据
  const tableActionRef = useRef();

  const columns = [
    {
      title: "项目",
      dataIndex: "name_project",
      key: "name_project",
      hideInSearch: true,
      render: (dom, record) => {
        return record.name_project;
      },
    },
    {
      title: "需求来源",
      key: "from_project",
      dataIndex: "from_project",
      hideInSearch: true,
      render: (dom, record) => {
        return record.from_project;
      },
    },
    {
      title: "对接人",
      key: "contacts",
      dataIndex: "contacts",
      hideInSearch: true,
      render: (dom, record) => {
        return record.contacts;
      },
    },
    {
      title: "处理进度",
      dataIndex: "progress",
      key: "progress",
      align: "center",
      hideInSearch: true,
    },
    {
      title: "操作",
      key: "since",
      dataIndex: "createdAt",
      valueType: "dateTime",
      hideInSearch: true,
      render: (dom, record) => {
        return (
          <div>
            <a
              onClick={() => {
                editor(record);
              }}
            >
              编辑
            </a>
            <Popconfirm
              title="确认删除?"
              onConfirm={() => {
                delDataList(record);
              }}
            >
              <Button type="link">删除</Button>
            </Popconfirm>
          </div>
        );
      },
    },
    {
      key: "direction",
      hideInTable: true,
      dataIndex: "direction",
      order: 6,
      renderFormItem: (item, { type, defaultRender, ...rest }, form) => {
        return (
          <Button
            type="primary"
            style={{ width: "200px" }}
            onClick={() => {
              editor();
            }}
          >
            添加
          </Button>
        );
      },
    },
  ];
  const handleCancel = () => {
    tableActionRef.current.reload();
    setVisible(false);
  };
  const handOk = (values) => {
    let query = null;
    if (state) {
      query = [
        {
          name_project: values.name_project,
          from_project: values.from_project,
          contacts: values.contacts,
          progress: values.progress,
          o_name_project: editData?.name_project,
        },
      ];
    } else {
      query = [
        {
          name_project: values.name_project,
          from_project: values.from_project,
          contacts: values.contacts,
          progress: values.progress,
        },
      ];
    }

    dispatch(postInWait(query)).then((res) => {
      if (res.success) {
        handleCancel();
        setEditData([]);
        tableActionRef.current.reload();
      }
    });
  };

  //删除资讯
  const delDataList = (record) => {
    const query = {
      delete: record.name_project,
      delete_state: record.progress,
      table_name: "test_waiting",
    };
    dispatch(delCancel(query)).then((res) => {
      if (res.success) {
        // 刷新
        // tableActionRef.current.reload();
        handleCancel()
      }
    });
  };
  //编辑
  const editor = (record) => {
    if (record) {
      setEditData(record);
    }
    setVisible(true);
  };
  return (
    <div style={{ height: "100%" }}>
      <Scroller containerId={"article-container-query"} height={"100%"}>
        <ProTable
          actionRef={tableActionRef}
          columns={columns}
          options={false}
          dataSource={counts || []}
          search={{
            optionRender: false,
            collapsed: false,
          }}
          request={async (params) => {
            const res = await dispatch(postWaitUrl());
            setCounts(res.payload.data.projects);
            return {
              ...res,
              total: res.payload.data ? res.payload.data.total : 0,
            };
          }}
          rowKey="id"
          pagination={{
            showSizeChanger: true,
          }}
        />
      </Scroller>
      <ProjectModeal
        visible={visible}
        handleOk={handOk}
        editData={editData}
        handleCancel={handleCancel}
        setEditData={setEditData}
      
        setState={setState}
      ></ProjectModeal>
    </div>
  );
};

Default.propTypes = {
  second: PropTypes.third,
};

const mapStateToProps = (state) => ({});

export default connect(mapStateToProps)(Default);

const data = [
  { name: "yongchu", age: "18", 任务1: "v1", 计划1: "time1" },
  { name: "yongchu", age: "18", 任务1: "v1", 计划1: "time1" },
  { name: "yongchu", age: "18", 任务1: "v1", 计划1: "time1" },
  { name: "大王", age: "18", 任务1: "v1", 计划1: "time1" },
  { name: "大王", age: "18", 任务1: "v1", 计划1: "time1" },
];