import React from "react";
import { message, Popconfirm, Table, Space } from "antd";
import { useStore } from '../index';
import { fetchDeleteConfigApi, List } from '../api';
import { isNil } from 'lodash';

const Column = Table.Column;

export default function TableList() {
  const {data, loading, setLoading, setVisible, setCurrent, setStatusData } = useStore();

  function handleDelete(id?: number) {
    fetchDeleteConfigApi(id)
    .then(res => {
      message.success(res.result);
      setLoading(true);
    })
    .catch(e => {
      message.error(e.message);
    });
  }

  function handleEdit(value?: List) {
    setCurrent(value || {});
    setVisible(true);
  }

  function handleLookShop(value: any = {}) {
    setStatusData({visible: true, data: value.shopList || []});
  }

  return (
    <div>
      <Table
        dataSource={data}
        pagination={false}
        loading={loading}
        rowKey="id"
      >
        <Column
          title="适用门店"
          align="left"
          dataIndex="displayName"
          render={(_text, record) => <span onClick={() => handleLookShop(record)} style={{color: "#4189FD"}}>{_text}</span>}
        />
        <Column
          title="线索到店零售台数占比"
          align="left"
          dataIndex="retailRate"
          render={(_text, record: any) => <span>{isNil(record?.retailRate) ? "--" : `${record.retailRate}%`}</span>}
        />
        <Column
          title="操作"
          align="left"
          render={(_text, record: any) => {
            return (
              <Space>
                <a onClick={() => handleEdit(record)} style={{ display: "block", color: "#4189FD" }}>编辑</a>
                <Popconfirm
                  title="是否删除？"
                  okText="确定"
                  cancelText="取消"
                  onConfirm={() => handleDelete(record.id)}
                >
                  <a style={{color: "#EC3F2F"}}>删除</a>
                </Popconfirm>
              </Space>
            );
          }}
        />
      </Table>
    </div>
  );
}