import React, { useState, useCallback, useEffect } from 'react';
import { Dialog, Button, Form, Input } from '@alifd/next';
import { Table, Pagination } from '@alifd/next';
import moment from 'moment';
// import CustomTable from '@/components/custom-table';
import SearchFilter from '../custom-table/search-filter';
import IceContainer from '@icedesign/container';
import PageHead from '@/components/page-head';
import styles from './index.module.scss';
import getCustomHeader from '@/components/token-header';
import Tools, { ajax } from '@/utils';
const DefaultPageSize = 20;
const formItemWidth = '300px';
const FormItem = Form.Item;
const btnArray = [
  'PAY',
  'SEND_GOOD',
  'CONFIRM_GODDS',
  'CANCEL',
  'RATE',
  'MODIFYFEE',
  'CLOSE',
  'DEL',
  'REFUND'
];
const formConfig = [
  {
    label: '订单编号',
    component: 'Input',
    componentProps: {
      placeholder: '请输入订单编号'
    },
    formBinderProps: {
      name: 'tradeOrderId',
      required: false,
      message: '请输入正确的订单编号'
    }
  },

  {
    label: '订单状态',
    component: 'Select',
    componentProps: {
      placeholder: '请选择',
      dataSource: [
        { label: '全部', value: 'ALL' },
        { label: '待付款', value: 'TO_PAY' },
        { label: '待发货', value: 'TO_SHIP' },
        { label: '待收货', value: 'TO_RECEIVE' },
        { label: '待评价', value: 'TO_RATE' }
      ]
    },
    formBinderProps: {
      name: 'selected'
    }
  },

  {
    label: '下单时间',
    component: 'RangePicker',
    componentProps: {
      placeholder: '请选择日期'
    },
    formBinderProps: {
      name: 'orderTime'
    }
  }
  // {
  //   label: '付款方式',
  //   component: 'Select',
  //   componentProps: {
  //     placeholder: '请选择',
  //     dataSource: [
  //       { value: 'alipay', label: '支付宝付款' }
  //       // { value: '2', label: '银行卡付款' },
  //       // { value: '3', label: '微信付款' },
  //       // { value: '4', label: '找人代付' }
  //     ]
  //   },
  //   formBinderProps: {
  //     name: 'payMethod'
  //   }
  // }
];
const dialogDefaultItem = {
  dialogTitle: '订单操作',
  fields: [{ name: 'reason', label: '填写理由' }]
};
const dialogModifyFeeItem = {
  dialogTitle: '改价',
  fields: [
    { name: 'newPrice', label: '填写价格' },
    { name: 'reason', label: '填写理由' }
  ]
};
function OrderList(props) {
  const [isLoading, setLoading] = useState(false);
  // const [searchQuery, setSearchQuery] = useState({});
  const [dialogVisible, setDialogVisible] = useState(false);
  const [dialogData, setDialogData] = useState({ ...dialogDefaultItem });
  const currentPage = parseInt(Tools.getUrlParam('pageNum'), 10) || 1;
  const currentTradeOrderId = Tools.getUrlParam('tradeOrderId') || '';
  // const currentKeyWord = Tools.getUrlParam('keyWord') || '';
  const currentStatus = Tools.getUrlParam('selected') || 'ALL';
  const currentStartTime = Tools.getUrlParam('gmtCreateStartTime') || '';
  const currentEndTime = Tools.getUrlParam('gmtCreateEndTime') || '';
  const searchQuery = {
    tradeOrderId: currentTradeOrderId,
    orderTime:
      currentStartTime && currentEndTime
        ? [
            moment(currentStartTime, 'YYYY-MM-DD', true),
            moment(currentEndTime, 'YYYY-MM-DD', true)
          ]
        : null,
    selected: currentStatus
  };
  // const currentPayMethod = Tools.getUrlParam('payMethod') || '';
  const [data, setData] = useState([]);
  const [totalPage, setTotalPage] = useState(0);
  useEffect(() => {
    fetchData({
      selected: currentStatus,
      gmtCreateStartTime: currentStartTime,
      gmtCreateEndTime: currentEndTime,
      // page: currentPage,
      // payMethod: currentPayMethod,
      // categoryId: currentCategoryId,
      // storeId: currentStoreId,
      // keyWord: currentKeyWord,
      tradeOrderId: currentTradeOrderId
    });
  }, []);

  const fetchData = useCallback(async data => {
    await setLoading(true);
    try {
      const queryData = {
        ...data,
        page: currentPage,
        pageSize: DefaultPageSize
      };
      const responseData = await ajax({
        api: 'getOrderList',
        method: 'post', //TODO: get
        data: JSON.stringify(queryData),
        contentType: 'application/json',
        headers: getCustomHeader()
      });

      await setLoading(false);
      if (responseData.success) {
        await setData(responseData.body.tradeOrderPortalVOS);
        await setTotalPage(responseData.body.totalPageNum * DefaultPageSize);
        // console.log('newdata', data);
      } else {
      }
    } catch (e) {}
  });
  const renderDialogWithData = dialogItem => {
    return (
      <Dialog
        title={dialogItem.dialogTitle}
        visible={dialogVisible}
        footer={false}
        // style={{ width: '60%' }}
        onClose={() => setDialogVisible(false)}
      >
        <Form labelAlign="top">
          {dialogData.fields.map(field => {
            return (
              <FormItem label={field.label} key={field.name}>
                <Input
                  placeholder={field.label}
                  name={field.name}
                  style={{ width: formItemWidth }}
                />
              </FormItem>
            );
          })}

          <FormItem>
            <Form.Submit
              type="primary"
              onClick={values =>
                editOrder(
                  values,
                  dialogItem.tradeOrderId,
                  dialogItem.apiName,
                  dialogItem.apiType
                )
              }
            >
              提交
            </Form.Submit>
          </FormItem>
        </Form>
      </Dialog>
    );
  };
  const editOrder = async (values, tradeOrderId, apiName, type) => {
    // console.log('edit', values, tradeOrderId);
    const submitData = { ...values, tradeOrderId, type };

    try {
      const responseData = await ajax({
        api: apiName,
        method: 'post',
        type: 'json',
        data: JSON.stringify(submitData),
        contentType: 'application/json',
        headers: getCustomHeader()
      });
      setDialogVisible(false);
      if (responseData.success) {
        location.reload();
      } else {
        Dialog.alert({
          title: '操作失败！',
          content: responseData.body || `系统错误请稍后再试~`
        });
      }
    } catch (e) {
      setDialogVisible(false);
      Dialog.alert({
        title: '操作失败！',
        content: `系统错误请稍后再试~`
      });
    }
  };
  const renderState = value => {
    return (
      <div className={styles.state}>
        <span className={styles.stateText}>{value}</span>
      </div>
    );
  };

  const objToUrl = obj => {
    let arr = [];
    for (let i in obj) {
      if (obj.hasOwnProperty(i) && obj[i] !== '') {
        arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(obj[i]));
      }
    }
    return arr.join('&');
  };
  const handleDetail = record => {
    location.href =
      '/portal/order/orderView?tradeOrderId=' + record.tradeOrderId;
  };
  const asyncPost = async (api, data) => {
    try {
      const responseData = await ajax({
        api: api,
        method: 'post',
        type: 'json',
        data: JSON.stringify(data),
        contentType: 'application/json',
        headers: getCustomHeader()
      });
      if (responseData.success) {
        location.reload();
      } else {
        Dialog.alert({
          title: '操作失败！',
          content: responseData.message || `系统错误请稍后再试~`
        });
      }
    } catch (e) {
      Dialog.alert({
        title: '操作失败！',
        content: `系统错误请稍后再试~`
      });
    }
  };

  const handleSendGood = (record, btnItem) => {
    if (btnItem.link) {
      location.href = btnItem.link;
    }
  };
  const renderModifyFeeDialog = (record, type) => {
    setDialogData({
      ...dialogModifyFeeItem,
      tradeOrderId: record.tradeOrderId,
      apiName: 'modifyFee',
      apiType: type
    });
    setDialogVisible(true);
  };
  const handleCancel = (record, type) => {
    Dialog.confirm({
      title: '提示',
      content: '确认取消订单？',
      onOk: async () => {
        await asyncPost('cancelOrder', {
          tradeOrderId: record.tradeOrderId,
          type: type
        });
      }
    });
  };
  const renderCloseOrderDialog = (record, type) => {
    setDialogData({
      ...dialogDefaultItem,
      dialogTitle: '关闭订单',
      tradeOrderId: record.tradeOrderId,
      apiName: 'closeOrder',
      apiType: type
    });
    setDialogVisible(true);
  };
  const handleDelete = (record, type) => {
    Dialog.confirm({
      title: '提示',
      content: '确认删除订单？',
      onOk: async () => {
        await asyncPost('deleteOrder', {
          tradeOrderId: record.tradeOrderId,
          type: type
        });
      }
    });
  };
  // const handleRefund = (record, type) => {};
  const onPaginationChange = destPage => {
    const stateData = {
      selected: currentStatus,
      // categoryId: currentCategoryId,
      gmtCreateStartTime: currentStartTime,
      gmtCreateEndTime: currentEndTime,
      tradeOrderId: currentTradeOrderId
      // selected:
      // payMethod: currentPayMethod
    };
    const url =
      location.protocol +
      '//' +
      location.host +
      location.pathname +
      '?' +
      objToUrl({ ...stateData, pageNum: destPage, pageSize: DefaultPageSize });
    location.href = url;
  };
  const renderOper = (value, index, record) => {
    const arr = [];
    if (Array.isArray(value)) {
      value.map(btnItem => {
        if (btnItem.type === 'SEND_GOOD') {
          arr.push(
            <Button
              text
              // type={btnItem.btnType}
              onClick={() => handleSendGood(record, btnItem)}
            >
              {btnItem.btn}
            </Button>
          );
        }
        if (btnItem.type === 'CANCEL') {
          arr.push(
            <Button
              text
              // type={btnItem.btnType}
              onClick={() => handleCancel(record, btnItem.type)}
            >
              {btnItem.btn}
            </Button>
          );
        }
        if (btnItem.type === 'MODIFYFEE') {
          arr.push(
            <Button
              text
              // type={btnItem.btnType}
              onClick={() => renderModifyFeeDialog(record, btnItem.type)}
            >
              {btnItem.btn}
            </Button>
          );
        }
        if (btnItem.type === 'CLOSE') {
          arr.push(
            <Button
              text
              // type={btnItem.btnType}
              onClick={() => renderCloseOrderDialog(record, btnItem.type)}
            >
              {btnItem.btn}
            </Button>
          );
        }
        if (btnItem.type === 'DEL') {
          arr.push(
            <Button
              text
              // type={btnItem.btnType}
              onClick={() => handleDelete(record, btnItem.type)}
            >
              {btnItem.btn}
            </Button>
          );
        }
        // if (btnItem.type === 'REFUND') {
        //   arr.push(
        //     <Button
        //       type={btnItem.btnType}
        //       onClick={() => handleRefund(record, btnItem.type)}
        //     >
        //       {btnItem.btn}
        //     </Button>
        //   );
        // }
      });
    }
    arr.push(
      <Button text onClick={() => handleDetail(record)}>
        查看详情
      </Button>
    );
    return <div className={styles.opts}>{arr}</div>;
  };

  const getTableColumns = () => {
    return [
      {
        title: '订单编号',
        dataIndex: 'tradeOrderId',
        key: 'tradeOrderId',
        lock: true
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: 200
      },
      {
        title: '买家账号名称',
        dataIndex: 'buyerUserName',
        key: 'buyerUserName'
      },
      {
        title: '订单总价',
        dataIndex: 'totalAmount',
        key: 'totalAmount'
      },
      {
        title: '包裹数量',
        dataIndex: 'packageCounts',
        key: 'packageCounts'
      },
      {
        title: '订单状态',
        dataIndex: 'status',
        key: 'status',
        cell: renderState
      },
      {
        title: '操作',
        dataIndex: 'operationVOS',
        key: 'operationVOS',
        cell: renderOper,
        width: 300
      }
    ];
  };

  const handleSubmit = data => {};
  const onSearchSubmit = async query => {
    const searchData = {};
    if (query.selected) {
      searchData.selected = query.selected;
    }
    if (query.orderTime) {
      searchData.gmtCreateStartTime = query.orderTime[0].format('YYYY-MM-DD');
      searchData.gmtCreateEndTime = query.orderTime[1].format('YYYY-MM-DD');
    }
    if (query.tradeOrderId) {
      searchData.tradeOrderId = query.tradeOrderId;
    }
    console.log(query);
    const url =
      location.protocol +
      '//' +
      location.host +
      location.pathname +
      '?' +
      objToUrl({ ...searchData, pageSize: DefaultPageSize });
    location.href = url;
    // await setSearchQuery(query);
    // fetchDataSource(query);
    // fetchData(searchData);
  };
  const onSearchReset = () => {
    // setSearchQuery(cloneDeep(props.searchQueryHistory));
  };
  return (
    <div className={styles.container}>
      {renderDialogWithData(dialogData)}
      <PageHead title="订单管理" />
      <IceContainer>
        <SearchFilter
          formConfig={formConfig}
          value={searchQuery}
          onSubmit={onSearchSubmit}
          onReset={onSearchReset}
        />
        <Table dataSource={data} hasBorder={false} loading={isLoading}>
          {getTableColumns().map(item => {
            return (
              <Table.Column
                title={item.title}
                dataIndex={item.dataIndex}
                key={item.key}
                sortable={item.sortable || false}
                cell={item.cell}
                width={item.width || 'auto'}
                lock={item.lock}
              />
            );
          })}
        </Table>
        {totalPage > 0 ? (
          <Pagination
            className={styles.pagination}
            current={currentPage}
            pageSize={DefaultPageSize}
            total={totalPage}
            onChange={onPaginationChange}
          />
        ) : null}
      </IceContainer>
    </div>
  );
}

export default OrderList;