import React, { useState, useEffect } from "react";
import { Card, Table, Button, Tag, message, Select, Input } from "antd";
import { PageHeaderWrapper } from "@ant-design/pro-layout";

import usePagination from "@/hooks/usePagination";
import { getShopApi } from "@/common/api";
import { getListApi, ListResult, Staff } from "./api";

import ConfigModal from "./components/ConfigModal";

const { Option } = Select;
const { Column } = Table;

export default function ManhoursProportionConfig() {
  const { loading, setLoading, list, paginationConfig, setParams } = usePagination(getListApi, {});

  const [shops, setShops] = useState<CommonApi.OptionVO[]>([]);
  const [visible, setVisible] = useState(false);
  const [detail, setDetail] = useState<any>({});

  useEffect(() => {
    getShopApi({})
      .then((res) => {
        const { data = [] } = res;
        setShops(data);
      })
      .catch((e) => {
        message.error(e.message);
      });
  }, []);

  return (
    <PageHeaderWrapper title="机修组工时分成比例配置">
      <Card>
        <div style={{ display: "flex", marginBottom: "20px" }}>
          <Select
            style={{ width: 240 }}
            showSearch
            allowClear
            optionFilterProp="children"
            placeholder="请选择门店搜索"
            onChange={(value) => setParams({ shopId: value }, true)}
          >
            {shops.map((shop) => (
              <Option value={shop.id} key={shop.id}>
                {shop.name}
              </Option>
            ))}
          </Select>

          <Input.Search
            style={{ width: 240, marginLeft: 20 }}
            placeholder="请输入机修组名称搜索"
            allowClear
            onSearch={(value) => setParams({ keyword: value }, true)}
          />
        </div>

        <Table dataSource={list} loading={loading} pagination={paginationConfig} rowKey="teamId">
          <Column title="门店" dataIndex="shopName" width={200} />
          <Column title="机修组" dataIndex="teamName" width={200} />
          <Column
            title="分成比例"
            dataIndex="userInfoVOS"
            render={(users: Staff[]) => {
              return users.map((user) => (
                <Tag color="blue" key={user.id} style={{ marginRight: 10 }}>
                  {user.staffName}:{user.manHoursProp}
                </Tag>
              ));
            }}
          />
          <Column
            title="操作"
            dataIndex="teamId"
            align="center"
            width={150}
            render={(val, record: ListResult) => (
              <Button
                size="small"
                type="primary"
                onClick={() => {
                  setDetail(record);
                  setVisible(true);
                }}
              >
                编辑
              </Button>
            )}
          />
        </Table>
      </Card>

      <ConfigModal
        visible={visible}
        detail={detail}
        onCancel={() => {
          setVisible(false);
          setDetail({});
          setLoading(true);
        }}
      />
    </PageHeaderWrapper>
  );
}