import React, { useState } from "react";
import { Popconfirm, Table, message, Space } from "antd";
import { history } from 'umi';
import { SaveParams, fetchOperationApi, fetchDeleteConfigApi, List } from '../api';
import {useStore} from '../index';

const Column = Table.Column;

export default function Index() {
  const { statusData, setStatusData, data, setLoading } = useStore();
  function handleToEdit(value: List, operationType: number) {
    const state = {id: value.id, operationType};
    history.push({pathname: '/crm/addTragetProportion', state});
  }

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

  function handleToShopDetail(value?: List) {
    setStatusData({...statusData, shop: true, id: value?.id});
  }

  function handleToTargetDetail(value: List = {}) {
    setStatusData({...statusData, target: true, id: value?.id});
  }

  return (
    <div>
      <Table
        dataSource={data}
        pagination={false}
        loading={false}
        rowKey="id"
      >
        <Column
          title="适用门店"
          align="left"
          dataIndex="shopName"
          render={(_text, record: List) => <span style={{color: "#4189FD"}} onClick={() => handleToShopDetail(record)}>{record.shopName || '--'}</span>}
        />
        <Column
          title="目标占比"
          align="left"
          render={(_text, record: List) => <span style={{color: "#4189FD"}} onClick={() => handleToTargetDetail(record)}>查看</span>}
        />
        <Column
          title="操作"
          align="left"
          render={(_text, record: List) => {
            return (
              <Space>
                <a style={{color: "#4189FD"}} onClick={() => handleToEdit(record, 2)}>编辑</a>
                <Popconfirm
                  title="是否删除?"
                  okText="确定"
                  cancelText="取消"
                  onConfirm={() => handleToDelete(0, record.id)}
                >
                  <span>
                    <a style={{color: "red"}}>删除</a>
                  </span>
                </Popconfirm>
              </Space>
            );
          }}
        />
      </Table>
    </div>
  );
}