import React, { useState } from "react";
import { Button, Card, ConfigProvider, Divider, message, Popconfirm, Table } from "antd";
import { PageHeaderWrapper } from "@ant-design/pro-layout";
import zhCN from "antd/lib/locale-provider/zh_CN";
import usePagination from "@/hooks/usePagination";
import useInitial from "@/hooks/useInitail";
import { PlusOutlined } from "@ant-design/icons";
import AddModel from './components/AddModel';
import Filter from './components/Filter';
import * as API from './api';
import _ from "lodash";
import st from "./style.less";

interface Props {
}

const { Column } = Table;

function expressChargingStandard(props:Props) {
  const [visible, setVisible] = useState<boolean>(false);
  const {
    list: standardList,
    loading,
    paginationConfig,
    innerParams,
    setParams,
    setLoading
  } = usePagination<API.Item>(API.getStandardPage, {current: 1, pageSize: 10});
  const { data: cityList, loading: cityLoading } = useInitial(API.getCityLsit, [], {});
  const { data: compList, loading: compLoading } = useInitial(API.fetchComps, [], {types: '88'});
  const [row, setRow] = useState<API.Item>();
  /**
   * @description: 编辑
   * @param {*} _
   * @return {*}
   */
  const edit = _.debounce(async (row:API.Item) => {
    await setRow({...row});
    setVisible(true);
  }, 800); 

  /**
   * @description: 删除
   * @param {*} _
   * @return {*}
   */
  const _delete = _.debounce((row:API.Item) => {
    const {id} = row;
    if (!id) return;
    setLoading(true);
    API.delStandard({expressChargeStandardId: id})
    .then(res => {
      message.success("操作成功");
      setParams({...innerParams}, true);
      setLoading(false);
    }).catch(err => {
      message.error(err?.message);
      setLoading(false);
    });
  }, 800);

  return (
    <PageHeaderWrapper 
      loading={cityLoading || compLoading} 
      title="快递收费标准配置"
    >
      <ConfigProvider locale={zhCN}>
        <Card className={st.page}>
          <div className={st.header}>
            <Filter
              cityList={cityList || []}
              compList={compList || []}
              setParams={setParams}
              innerParams={innerParams}
            />
            <Button
              type="primary"
              icon={<PlusOutlined />}
              onClick={() => {
                  setVisible(true);
              }}
            >
              新增
            </Button>
          </div>
          <Table
            size="middle"
            loading={loading}
            dataSource={standardList}
            pagination={{ ...paginationConfig }}
            scroll={{ y: 800 }}
            rowKey={(item: API.Item) => `${item.id}`}
            onChange={(_pagination) => setParams({ ..._pagination }, true)}
          >       
            <Column title="快递公司" width={200} dataIndex="tradeCompName" render={(t:any) => t || "-"} /> 
            <Column title="寄件地区" width={200} dataIndex="sendAreaName" render={(t:any) => t || '-'} />
            <Column title="到达地区" width={200} dataIndex="arriveAreaName" render={(t:any) => t || '-'} />
            <Column title="首重(元)" width={200} dataIndex="firstWeight" render={(t:any) => t || '-'} />
            <Column title="续重(元/kg)" width={200} dataIndex="continuedWeight" render={(t:any) => t || '-'} />
            <Column 
              title="操作"
              width={100} 
              dataIndex="unit"
              render={(text, row:API.Item) => (
                <span>
                  <Popconfirm title="是否编辑?" onConfirm={() => edit(row)} okText="确定" cancelText="取消">
                    <a
                      onClick={(e) => {
                          e.preventDefault();
                      }}
                      style={{ color: "#FAAD14" }}
                    >
                      编辑
                    </a>
                  </Popconfirm>
                  <Divider type="vertical" />
                  <Popconfirm title="是否删除?" onConfirm={() => _delete(row)} okText="确定" cancelText="取消">
                    <a
                      onClick={(e) => {
                          e.preventDefault();
                      }}
                      style={{ color: "red" }}
                    >
                      删除
                    </a>
                  </Popconfirm>
                </span>
                
              )}
            /> 
          </Table>
          <AddModel 
            visible={visible}
            row={row}
            compList={compList || []}
            cityList={cityList || []}
            onCancel={() => {
              setVisible(false);
              setRow(undefined);
            }}
            onRefresh={() => setParams({ ...innerParams }, true)}
          />
        </Card>
      </ConfigProvider>
    </PageHeaderWrapper>
  );
}

export default expressChargingStandard;