import React from 'react';
import { Table, Popconfirm, message, Space } from 'antd';
import { useStore } from '../index';
import {ShopVo, banConfigApi, ListResult} from '../api';
import { isNil } from 'lodash';
import moment from 'moment';

interface Props {
  addedValueType?: number // 附加值类型
}

const Column = Table.Column;

export default function LargeList({addedValueType} : Props) {
  const {list, paginationConfig, loading, setLoading, setCurrentData, setShopData} = useStore();

  const handleDeleteConfig = (id?:number) => {
    banConfigApi({id})
    .then(res => {
      message.success(res.result);
      setLoading(true);
    }).catch(e => {
      message.error(e.message);
    });
  };

  function handleRenderShop(value: ShopVo[] = []) {
    if (value.length === 0) {
      return '--';
    } else if (value.length > 2) {
      return `${value[0].shopName}等${value.length}个门店`;
    }
    return value.map(v => v.shopName).join(",");
  }

  function handleEdit(value: ListResult = {}) {
    setCurrentData({visible: true, title: "编辑", data: value});
  }
  return (
    <Table
      dataSource={list}
      loading={loading}
      rowKey="id"
      pagination={paginationConfig}
    >
      <Column
        title="单车附加值目标" 
        dataIndex="addedValueTask" 
        align="left"
        render={(_text) => (isNil(_text) ? '-' : <span style={{color: "#FF921C", fontSize: '14px'}}>{_text}元<span style={{color: "#333"}}>/台</span></span>)}
      />
      <Column 
        title="商业险产值目标" 
        dataIndex="vciOutputValueTask" 
        align="left"
        render={(_text) => (isNil(_text) ? '-' : <div style={{display: 'flex', flexDirection: 'column'}}><span style={{color: "#FF921C", fontSize: '14px'}}>{_text}元<span style={{color: "#333"}}>/台</span></span><span>(含驾意险)</span></div>)}
      />
      <Column 
        title={addedValueType === 2 ? "计算保险毛利" : "计算保险产值"}
        dataIndex="addedValueTask" 
        align="left"
        render={(_text, record: ListResult) => (
          <div style={{display: 'flex', flexDirection: 'column'}}>
            <span>商业险金额*{record.vciOutputValueRatio}%</span>
            <span>交强险金额*{record.tciOutputValueRatio}%</span>
            <span>架意险产值*{record.jcxOutputValueRatio}%</span>
          </div>
        )}
      />
      <Column 
        title="装潢产值目标" 
        dataIndex="decoOutputValueTask" 
        align="left"
        render={(_text) => (isNil(_text) ? '-' : <span style={{color: "#FF921C", fontSize: '14px'}}>{_text}元<span style={{color: "#333"}}>/台</span></span>)}
      />
      <Column
        title={addedValueType === 2 ? "计算装潢毛利" : "计算装潢产值"}
        dataIndex="decoOutputValueRatio"
        align="left"
        render={(_text, record: ListResult) => `装潢产值*${_text}%`}
      />
      <Column 
        title="适用门店" 
        dataIndex="shopList"
        align="left"
        render={(_text, record: ListResult) => <span style={{color: "#4189FD"}} onClick={() => setShopData({visible: true, data: record.shopList})}>{handleRenderShop(record.shopList)}</span>}
      />
      <Column 
        title="生效时间"
        dataIndex="beginTime"
        align="left"
        render={(_text, record: ListResult) => <span>{moment(record.beginTime).format("YYYY.MM")}-{moment(record.endTime).format("YYYY.MM")}</span>}
      />
      <Column
        title="操作"
        align="center"
        render={(text, record: ListResult) => (
          <Space>
            <a onClick={() => handleEdit(record)} style={{color: "#4189FD"}}>编辑</a>
            <Popconfirm
              title="是否删除?"
              onConfirm={() => handleDeleteConfig(record.id)}
              okText="确定"
              cancelText="取消"
            >
              <a style={{ color: 'red' }}>删除</a>
            </Popconfirm>
          </Space>
        )}
      />
    </Table>
  );
}