import React, { useState, useEffect, useCallback } from 'react';
import {
  Table,
  Input,
  Select,
  Checkbox,
  Radio,
  Pagination,
  Button,
  Dialog,
  Form
} from '@alifd/next';
import IceContainer from '@icedesign/container';
import PageHead from '@/components/page-head';
import styles from './index.module.scss';
import lodashFind from 'lodash.find';
import getCustomHeader from '@/components/token-header';
import { ajax } from '@/utils';
const FormItem = Form.Item;
const formItemWidth = '500px';

const defaultData = {
  name: '运费模板',
  time: 1889778,
  data: [
    {
      method: '快递',
      destinationName: '全国',
      startStandard: 1,
      startFee: '12',
      addStandard: 1,
      addFee: '6'
    }
  ]
};
const GoodsTable = ({ tenantName, title }) => {
  const [isLoading, setLoading] = useState(false);
  const [data, setData] = useState([...defaultData.data]);
  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = useCallback(async () => {
    await setLoading(true);
    try {
      const responseData = await ajax({
        api: 'getTemplateList',
        method: 'get',
        data: {}
      });

      await setLoading(false);
      if (responseData.success) {
        await setData(responseData.result);
      } else {
      }
    } catch (e) {}
  });

  const handleDelete = item => {
    Dialog.confirm({
      title: '提示',
      content: '确认删除吗',
      onOk: async () => {
        try {
          const responseData = await ajax({
            api: 'deleteTemplateItem',
            method: 'post',
            type: 'json',
            data: JSON.stringify({ templateId: item.templateId }),
            contentType: 'application/json',
            headers: getCustomHeader()
          });
          if (responseData.success) {
            location.reload();
          } else {
            Dialog.alert({
              title: '操作失败！',
              content: responseData.message || `系统错误请稍后再试~`
            });
          }
        } catch (e) {
          Dialog.alert({
            title: '操作失败！',
            content: `系统错误请稍后再试~`
          });
        }
      }
    });
  };

  const handleDetail = item => {
    location.href =
      '/portal/delivery/template/edit?templateId=' + item.templateId;
  };

  const renderOper = item => {
    return (
      <div className={styles.templateOpt}>
        <Button
          type="primary"
          className={styles.btn}
          onClick={() => {
            handleDetail(item);
          }}
        >
          修改
        </Button>
        <Button
          type="normal"
          warning
          onClick={() => {
            handleDelete(item);
          }}
        >
          删除
        </Button>
      </div>
    );
  };
  const addTemplate = () => {
    location.href = '/portal/delivery/template/edit';
  };

  return (
    <div className={styles.container}>
      <PageHead title="运费模板设置" buttonText="添加" onClick={addTemplate} />
      <IceContainer>
        {data.map(item => {
          return (
            <div className={styles.templateItem} key={item.templateId}>
              <div className={styles.templateHead}>
                <h3>{item.templateName}</h3>
                <div className={styles.templateTime}>
                  更新时间：{item.lastUpdateDate}
                </div>
                {renderOper(item)}
              </div>
              <Table dataSource={item.templateDetailList} hasBorder={false}>
                <Table.Column
                  title="运送方式"
                  dataIndex="serviceProtocolName"
                />
                <Table.Column title="运送到" dataIndex="destinationName" />
                <Table.Column title="首件（个）" dataIndex="startStandard" />
                <Table.Column title="运费（元）" dataIndex="startFee" />
                <Table.Column title="续件（个）" dataIndex="addStandard" />
                <Table.Column title="运费（元）" dataIndex="addFee" />
              </Table>
            </div>
          );
        })}
      </IceContainer>
    </div>
  );
};
export default GoodsTable;