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

const TraningUser = (props: Store) => {
  const { trainingStore } = props;
  const [keys, setKeys] = useState<Array<string>>([]);
  const [score, setScore] = useState<number | null>(0);
  const [isModalOpenUser, setIsModalOpenUser] = useState<boolean>(false);
  useEffect(() => {
    trainingStore.getUserListByTraning();
  }, [trainingStore]);

  const okhandler = () => {
    let arr: any[] = [];
    for (let index = 0; index < keys.length; index++) {
      arr.push({
        score: score,
        user_identity: keys[index],
        source: 2,
        source_identity: trainingStore.id,
      });
    }
    let res = trainingStore.setUserScore(arr);
    if (res) {
      message.success("积分设置成功");
      setIsModalOpenUser(false);
    }
  };
  const _columns: ColumnsType<UserDataType> = [
    { title: "民兵名称", dataIndex: "user_name" },
    { title: "民兵描述", dataIndex: "remark" },
    { title: "民兵账号", dataIndex: "account" },
    {
      title: "操作",
      dataIndex: "id",
      render: (any, record) => (
        <Space wrap>
          <Button
            type="dashed"
            size="small"
            onClick={() => {
              setKeys([record.identity]);
              setIsModalOpenUser(true);
            }}
          >
            设置积分
          </Button>
        </Space>
      ),
    },
  ];
  return (
    <>
      <div style={{ display: "flex", justifyContent: "space-between" }}>
        <p>训练人员</p>
        <Button
          disabled={keys.length === 0}
          type="primary"
          size="small"
          onClick={() => {
            setIsModalOpenUser(true);
          }}
        >
          批量设置
        </Button>
      </div>
      <Modal
        title="积分设置"
        width={300}
        open={isModalOpenUser}
        onOk={() => okhandler()}
        okText="确定"
        cancelText="取消"
        afterClose={() => setKeys([])}
        onCancel={() => {
          setIsModalOpenUser(false);
        }}
      >
        <InputNumber
          style={{ width: "200px" }}
          defaultValue={0}
          value={score}
          onChange={(e) => {
            setScore(e);
          }}
        />
      </Modal>
      <BTable
        store={trainingStore}
        columns={_columns}
        dataSource={trainingStore.userList}
        selectCallback={(e) => {
          setKeys(e);
        }}
      />
    </>
  );
};

export default inject("trainingStore")(observer(TraningUser));
