import { DropboxOutlined, PlusOutlined, DownloadOutlined } from '@ant-design/icons';
import { Button, message, Select, Input, Drawer } from 'antd';
import React, { useState, useRef, useEffect } from 'react';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import ProDescriptions from '@ant-design/pro-descriptions';
import ExportJsonExcel from 'js-export-excel';
import api from './service';

//页面 相当于 class
const Manage = () => {
  //获取店铺分类(店铺类型)
  const [srdTypeList, setsrdTypeList] = useState([]);
  //获取店铺(店铺信息)
  const [srdList, setsrdList] = useState([]);
  //商品
  const [goodList, setgoodList] = useState([]);
  // //加盟商
  // const [franchList, setfranchList] = useState([]);
  //商品类型
  const [goodsTypeList, setgoodsTypeList] = useState([]);
  const [dataList, setdataList] = useState([]);
  //绑定
  const actionRef = useRef();
  // 获取店铺分类、商品名称信息
  useEffect(() => {
    // //加盟商
    // function initfranchList() {
    //   api.franchList({ current: 1, pageSize: 20, status: '0' }).then((r) => {
    //     var arr2 = r.data.data;
    //     arr2.forEach((element) => {
    //       element.text = element.name;
    //       element.franchiseeId = element.id;
    //     });
    //     setfranchList(arr2);
    //   });
    // }
    //店铺分类（店铺类型）
    function initsrdTypeList() {
      api.srdTypeList().then((r) => {
        var arr = r.data;
        arr.forEach((element) => {
          element.storeTypeId = element.id;
          element.text = element.name;
        });
        setsrdTypeList(arr);
      });
    }
    //店铺名称（店铺信息）
    function initsrdList() {
      api.srdList().then((r) => {
        var arr = r.data;
        arr.forEach((element) => {
          element.value = element.id;
          element.label = element.name;
        });
        setsrdList(arr);
      });
    }
    //商品信息
    function initgoodsList() {
      api.goodsList().then((r) => {
        var arr1 = r.data;
        arr1.forEach((element) => {
          element.label = element.name;
          element.value = element.id;
        });
        setgoodList(arr1);
      });
    }

    //查询商品类型
    function initgoodsTypeList() {
      api.goodsTypeList().then((r) => {
        var arr2 = r.data;
        arr2.forEach((element) => {
          element.label = element.name;
          element.value = element.id;
        });
        setgoodsTypeList(arr2);
      });
    }
    //initfranchList();
    initsrdList();
    initsrdTypeList();
    initgoodsList();
    initgoodsTypeList();
  }, []);
  function handleExport() {
    const { ReqDetailList } = dataList; // 网络请求命名空间
    const option = {};
    var Excelcolumns = [];
    columns.map((item, index) => {
      if (index > 6) {
        Excelcolumns.push(item);
      }
    });
    option.fileName = '订单明细';
    option.datas = [
      {
        sheetData: dataList.map((item) => {
          const result = {};
          columns.forEach((c, index) => {
            if (index > 6) {
              result[c.dataIndex] = item[c.dataIndex];
            }
            // if (c.dataIndex==='payMode') { result[c.dataIndex] = "微信支付" }
            // if (c.dataIndex==='order_Status') { result[c.dataIndex] ="已付款" }
            // if (c.dataIndex==='placeMode') { result[c.dataIndex] = "正常" }
          });
          return result;
        }),
        sheetName: '订单明细', // Excel文件名称
        sheetFilter: Excelcolumns.map((item) => item.dataIndex),
        sheetHeader: Excelcolumns.map((item) => item.title),
        columnWidths: Excelcolumns.map(() => 10),
      },
    ];

    const toExcel = new ExportJsonExcel(option);
    toExcel.saveExcel();
  }
  /** 国际化配置 */

  const columns = [
    {
      title: '主键',
      dataIndex: 'id',
      tip: '规则名称是唯一的 key',
      hideInSearch: true,
      hideInTable: true,
    },
    // {
    //   title: '加盟商',
    //   dataIndex: 'franchiseeId',
    //   hideInTable: true,
    //   valueType: 'select',
    //   valueEnum: franchList,
    // },
    // {
    //   title: '加盟商',
    //   dataIndex: 'franchiseeName',
    //   hideInSearch: true,
    // },
    {
      title: '店铺分类',
      dataIndex: 'storeTypeId',
      hideInTable: true,
      valueType: 'select',
      valueEnum: srdTypeList,
    },
    {
      title: '订单时间',
      dataIndex: 'order_CreateTime',
      valueType: 'dateRange',
      hideInTable: true,
      search: {
        transform: (value) => {
          return {
            order_CreateTime: value[0],
            order_EndTime: value[1],
          };
        },
      },
    },
    {
      title: '商品名称',
      dataIndex: 'goodsId',
      hideInTable: true,
      valueType: 'select',
      renderFormItem: () => (
        <Select
          mode="multiple"
          showArrow
          optionFilterProp="label"
          placeholder="请选择商品"
          style={{ width: '100%' }}
          options={goodList}
        />
      ),
    },
    {
      title: '订单状态',
      dataIndex: 'status',
      hideInTable: true,
      valueType: 'select',
      renderFormItem: () => (
        <Select mode="multiple" showArrow placeholder="请选择商品" style={{ width: '100%' }}>
          <Option key={2}>支付成功</Option>
          <Option key={3}>等待制作</Option>
          <Option key={4}>制作中</Option>
          <Option key={5}>制作完成待取餐</Option>
          <Option key={6}>取餐完成</Option>
          <Option key={7}>受保护订单</Option>
          <Option key={8}>无主状态</Option>
          <Option key={9}>立即吃面</Option>
          <Option key={10}>无效订单</Option>
          <Option key={11}>废弃订单</Option>
          <Option key={20}>退款订单</Option>
          <Option key={21}>订单不可做</Option>
        </Select>
      ),
    },
    {
      title: '店铺名称',
      dataIndex: 'storeId',
      hideInTable: true,
      valueType: 'select',
      renderFormItem: () => (
        <Select
          mode="multiple"
          showArrow
          placeholder="请选择店铺"
          style={{ width: '100%' }}
          options={srdList}
        />
      ),
    },
    {
      title: '商品类型',
      dataIndex: 'goodsTypeId',
      hideInTable: true,
      valueType: 'select',
      renderFormItem: () => (
        <Select
          mode="multiple"
          showArrow
          placeholder="请选择商品类型"
          style={{ width: '100%' }}
          options={goodsTypeList}
        />
      ),
    },
    {
      title: '店铺分类',
      dataIndex: 'storeTypeName',
      hideInSearch: true,
    },

    {
      title: '店铺名称',
      dataIndex: 'storeName',
      hideInSearch: true,
    },

    {
      title: '商品类型',
      dataIndex: 'goodsTypeName',
      hideInSearch: true,
    },

    {
      title: '商品名称',
      dataIndex: 'goodsName',
      hideInSearch: true,
    },
    {
      title: '订单应付金额',
      dataIndex: 'order_OriginalMoney',
      renderText: (val) => `${val}¥`,
      hideInSearch: true,
    },
    {
      title: '订单实付金额',
      dataIndex: 'order_RealMoney',
      hideInSearch: true,
      renderText: (val) => `${val}¥`,
    },
    {
      title: '订单号',
      dataIndex: 'order_Number',
      hideInSearch: true,
    },
    {
      title: '支付方式',
      dataIndex: 'payMode',
      key: 'payMode',
      hideInSearch: true,
      valueEnum: {
        0: {
          text: '微信支付',
          status: 'Processing',
        },
      },
    },

    {
      title: '订单状态',
      dataIndex: 'order_Status',
      key: 'order_Status',
      hideInSearch: true,
      valueEnum: {
        1: {
          text: '待支付',
        },
        2: {
          text: '支付成功',
        },
        3: {
          text: '等待制作',
          status: 'processing',
        },
        4: {
          text: '制作中',
          status: 'processing',
        },
        5: {
          text: '制作完成，待取餐',
          status: 'processing',
        },
        6: {
          text: '取餐完成',
          status: 'Success',
        },
        7: {
          text: '受保护订单',
          status: 'processing',
        },
        8: {
          text: '无主状态',
          status: 'warning',
        },
        9: {
          text: '立即吃面',
          status: 'Success',
        },
        10: {
          text: '无效订单',
          status: 'warning',
        },
        11: {
          text: '废弃订单',
          status: 'warning',
        },
        20: {
          text: '退款订单',
          status: 'warning',
        },
        21: {
          text: '订单不可做',
          status: 'warning',
        },
      },
    },
    {
      title: '下单类型',
      dataIndex: 'placeMode',
      key: 'placeMode',
      hideInSearch: true,
      valueEnum: {
        0: {
          text: '正常订单',
          status: 'Success',
        },
        1: {
          text: '立即吃面',
          status: 'Processing',
        },
        2: {
          text: '盲盒下单',
          status: 'Default',
        },
      },
    },

    {
      title: '创建时间',
      sorter: true,
      dataIndex: 'order_CreateTime',
      valueType: 'dateTime',
      hideInSearch: true,
      renderFormItem: (item, { defaultRender, ...rest }, form) => {
        const status = form.getFieldValue('status');

        if (`${status}` === '0') {
          return false;
        }

        if (`${status}` === '3') {
          return <Input {...rest} placeholder="请输入异常原因！" />;
        }

        return defaultRender(item);
      },
    },
  ];

  return (
    <PageContainer>
      <ProTable
        headerTitle="订单明细"
        actionRef={actionRef}
        rowKey="id"
        search={{
          labelWidth: 120,
        }}
        toolBarRender={() => [
          <Button type="primary" key="create" onClick={() => handleExport()}>
            <DownloadOutlined /> 导出
          </Button>,
        ]}
        columns={columns}
        //数据绑定
        request={async (params, sorter, filter) => {
          // if (params.franchiseeId != null) {
          //   //加盟商
          //   params.franchiseeId = franchList[params.franchiseeId].franchiseeId;
          // }
          if (params.storeTypeId != undefined) {
            //店铺分类
            params.storeTypeId = srdTypeList[params.storeTypeId].storeTypeId;
          }
          // if (params.storeId != undefined) {
          //   //店铺名称
          //   params.storeId = srdList[params.storeId].storeId;
          // }
          // if (params.goodsId != undefined) {
          //   //商品名称
          //   params.goodsId = goodList[params.goodsId].goodsId;
          // }
          // if (params.goodsTypeId) {
          //   //商品类型
          //   params.goodsTypeId = goodsTypeList[params.goodsTypeId].goodsTypeId;
          // }
          // 表单搜索项会从 params 传入，传递给后端接口。
          const msg = await api.orderList(params);
          setdataList(msg.data.data);
          return {
            data: msg.data.data,
            // success 请返回 true，
            // 不然 table 会停止解析数据，即使有数据
            success: true,
            // 不传会使用 data 的长度，如果是分页一定要传
            total: msg.data.total,
          };
        }}
      ></ProTable>
    </PageContainer>
  );
};

export default Manage;
