import { DownloadOutlined, DropboxOutlined, PlusOutlined } 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();
  const GetGoods = (e, b) => {
    console.log('我是选中', e);
    console.log('我是选中21', b);
    // 4.重新赋值
    // setColumns(columns1);
  };
  // 获取店铺分类、商品名称信息
  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 > 4) {
        Excelcolumns.push(item);
      }
    });
    option.fileName = '营业日报';
    option.datas = [
      {
        sheetData: dataList.map((item) => {
          const result = {};
          columns.forEach((c, index) => {
            if (index > 4) {
              result[c.dataIndex] = item[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: 'rowIndex',
      tip: '规则名称是唯一的 key',
      hideInSearch: true,
      hideInTable: true,
    },
    {
      title: '店铺分类',
      dataIndex: 'storeTypeId',
      hideInTable: true,
      valueType: 'select',
      valueEnum: srdTypeList,
    },
    {
      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: 'goodsId',
      hideInTable: true,
      valueType: 'select',
      renderFormItem: () => (
        <Select
          mode="multiple"
          showArrow
          optionFilterProp="label"
          placeholder="请选择商品"
          style={{ width: '100%' }}
          options={goodList}
          //  onChange={(e) => GetGoods(e, goodList)}
          //  onSelect={(e) => GetGoods(e)}
        />
      ),
    },
    {
      title: '统计时间',
      dataIndex: 'order_CreateTime',
      valueType: 'dateRange',
      width: 120,
      hideInTable: true,
      search: {
        transform: (value) => {
          return {
            order_CreateTime: value[0],
            order_EndTime: value[1],
          };
        },
      },
    },
    {
      title: '统计日期',
      dataIndex: 'order_CreateTime',
      valueType: 'date',
      fixed: 'left',
      width: 150,
      hideInSearch: true,
    },
    {
      title: '排骨面销量',
      dataIndex: 'pgmnum',
      hideInSearch: true,
      fixed: 'left',
      width: 150,
    },
    {
      title: '海味面销量',
      dataIndex: 'hwmnum',
      hideInSearch: true,
      fixed: 'left',
      width: 150,
    },
    {
      title: '清汤牛肉面销量',
      dataIndex: 'qtmnum',
      hideInSearch: true,
      fixed: 'left',
      width: 150,
    },
    {
      title: '笋子牛肉面销量',
      dataIndex: 'szmnum',
      hideInSearch: true,
      fixed: 'left',
      width: 150,
    },
    {
      title: '红烧牛肉面销量',
      dataIndex: 'hsmnum',
      hideInSearch: true,
      fixed: 'left',
      width: 150,
    },
    {
      title: '松茸炖鸡面销量',
      dataIndex: 'jsrmnum',
      hideInSearch: true,
      fixed: 'left',
      width: 150,
    },
    {
      title: '排骨面退单量',
      dataIndex: 'pgmtnum',
      hideInSearch: true,
    },
    {
      title: '排骨面废弃',
      dataIndex: 'pgmfnum',
      hideInSearch: true,
    },
    {
      title: '排骨面等待制作',
      dataIndex: 'pgmdnum',
      hideInSearch: true,
    },
    {
      title: '排骨面制作中',
      dataIndex: 'pgmznum',
      hideInSearch: true,
    },
    {
      title: '排骨面制作完成待取餐',
      dataIndex: 'pgmwcnum',
      hideInSearch: true,
    },
    {
      title: '松茸炖鸡面退单量',
      dataIndex: 'jsrmtnum',
      hideInSearch: true,
    },
    {
      title: '松茸炖鸡面废弃',
      dataIndex: 'jsrmfnum',
      hideInSearch: true,
    },
    {
      title: '松茸炖鸡面等待制作',
      dataIndex: 'jsrmdnum',
      hideInSearch: true,
    },
    {
      title: '松茸炖鸡面制作中',
      dataIndex: 'jsrmznum',
      hideInSearch: true,
    },
    {
      title: '松茸炖鸡面制作完成待取餐',
      dataIndex: 'jsrmwcnum',
      hideInSearch: true,
    },
    {
      title: '海味面退单量',
      dataIndex: 'hwmtnum',
      hideInSearch: true,
    },
    {
      title: '海味面废弃',
      dataIndex: 'hwmfnum ',
      hideInSearch: true,
    },
    {
      title: '海味面等待制作',
      dataIndex: 'hwmdnum',
      hideInSearch: true,
    },
    {
      title: '海味面制作中',
      dataIndex: 'hwmznum',
      hideInSearch: true,
    },
    {
      title: '海味面制作完成待取餐',
      dataIndex: 'hwmwcnum',
      hideInSearch: true,
    },

    {
      title: '清汤牛肉面退单量',
      dataIndex: 'qtmtnum',
      hideInSearch: true,
    },
    {
      title: '清汤牛肉面废弃',
      dataIndex: 'qtmfnum',
      hideInSearch: true,
    },
    {
      title: '清汤牛肉面等待制作',
      dataIndex: 'qtmdnum',
      hideInSearch: true,
    },
    {
      title: '清汤牛肉面制作中',
      dataIndex: 'qtmznum',
      hideInSearch: true,
    },
    {
      title: '清汤牛肉面制作完成待取餐',
      dataIndex: 'qtmwcnum',
      hideInSearch: true,
    },
    {
      title: '笋子牛肉面退单量',
      dataIndex: 'szmtnum',
      hideInSearch: true,
    },
    {
      title: '笋子牛肉面废弃',
      dataIndex: 'szmfnum',
      hideInSearch: true,
    },
    {
      title: '笋子牛肉面等待制作',
      dataIndex: 'szmdnum',
      hideInSearch: true,
    },
    {
      title: '笋子牛肉面制作中',
      dataIndex: 'szmdnum',
      hideInSearch: true,
    },
    {
      title: '笋子牛肉面制作完成待取餐',
      dataIndex: 'szmwcnum',
      hideInSearch: true,
    },
    {
      title: '红烧牛肉面退单量',
      dataIndex: 'hsmtnum',
      hideInSearch: true,
    },
    {
      title: '红烧牛肉面废弃',
      dataIndex: 'hsmfnum',
      hideInSearch: true,
    },
    {
      title: '红烧牛肉面等待制作',
      dataIndex: 'hsmdnum',
      hideInSearch: true,
    },
    {
      title: '红烧牛肉面制作中',
      dataIndex: 'hsmdnum',
      hideInSearch: true,
    },
    {
      title: '红烧牛肉面制作完成待取餐',
      dataIndex: 'hsmwcnum',
      hideInSearch: true,
    },
  ];

  return (
    <PageContainer>
      <ProTable
        headerTitle="营业日报"
        formRef={actionRef}
        rowKey="rowIndex"
        search={{
          labelWidth: 120,
        }}
        toolBarRender={() => [
          <Button type="primary" key="create" onClick={() => handleExport()}>
            <DownloadOutlined /> 导出
          </Button>,
        ]}
        scroll={{ x: 5000 }}
        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;
          }
          // 表单搜索项会从 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;
