import _Button from "@alifd/next/es/button";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import * as React from 'react';
import { useEffect, useState } from 'react';
import { MultiSelect } from 'react-multi-select-component';
import DefaultItemRenderer from "./view2";
import { getShopList } from "../../../../api/base";
import styles from "./css/view1.module.scss";
// import json from './utils/loacal.json'

var Example = function Example(props) {
  var getSelectList = props.getSelectList,
    sendData = props.sendData;
  var _useState = useState([]),
    selected = _useState[0],
    setSelected = _useState[1];
  var _useState2 = useState([]),
    options = _useState2[0],
    setOptions = _useState2[1];

  // const sendAddArray = (x) => {
  //   const add = addArray;
  //   setaddArray([...x])
  //   getSelectList(add.push(...addArray))
  // }

  // const options = [
  //   // { label: "电饭锅", value: "grapes", name: "周杰伦" },
  //   // { label: "电饭煲", value: "mango", name: "周杰伦xx" },
  //   // { label: "偶像", value: "strawberry", name: "周杰伦xxx" },
  //   // { label: "电饭锅", value: "grapes", name: "周杰伦" },
  //   // { label: "电饭煲", value: "mango", name: "周杰伦xx" },
  //   // { label: "偶像", value: "strawberry", name: "周杰伦xxx" },
  //   // { label: "电饭锅", value: "grapes", name: "周杰伦" },
  //   // { label: "电饭煲", value: "mango", name: "周杰伦xx" },
  //   // { label: "偶像", value: "strawberry", name: "周杰伦xxx" },
  //   // { label: "电饭锅", value: "grapes", name: "周杰伦" },
  //   // { label: "电饭煲", value: "mango", name: "周杰伦xx" },
  //   // { label: "偶像", value: "strawberry", name: "周杰伦xxx" },
  //   // { label: "电饭锅", value: "grapes", name: "周杰伦" },
  //   // { label: "电饭煲", value: "mango", name: "周杰伦xx" },
  //   // { label: "偶像", value: "strawberry", name: "周杰伦xxx" },
  //   // { label: "电饭锅", value: "grapes", name: "周杰伦" },
  //   // { label: "电饭煲", value: "mango", name: "周杰伦xx" },
  //   // { label: "偶像", value: "strawberry", name: "周杰伦xxx" },
  // ];

  useEffect(function () {
    var fn = /*#__PURE__*/function () {
      var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
        return _regeneratorRuntime.wrap(function _callee$(_context) {
          while (1) {
            switch (_context.prev = _context.next) {
              case 0:
                _context.next = 2;
                return echoData();
              case 2:
                _context.next = 4;
                return getDataList();
              case 4:
              case "end":
                return _context.stop();
            }
          }
        }, _callee);
      }));
      return function fn() {
        return _ref.apply(this, arguments);
      };
    }();
    fn();
  }, []);

  // 回显子数据
  function echoData() {
    return _echoData.apply(this, arguments);
  }
  function _echoData() {
    _echoData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
        while (1) {
          switch (_context2.prev = _context2.next) {
            case 0:
              if (sendData) {
                setSelected([].concat(sendData));
                getSelectList(sendData);
              }
            case 1:
            case "end":
              return _context2.stop();
          }
        }
      }, _callee2);
    }));
    return _echoData.apply(this, arguments);
  }
  function getDataList() {
    return _getDataList.apply(this, arguments);
  }
  function _getDataList() {
    _getDataList = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
      var data, temArray, itemArray;
      return _regeneratorRuntime.wrap(function _callee3$(_context3) {
        while (1) {
          switch (_context3.prev = _context3.next) {
            case 0:
              data = {
                f: 1,
                // 1零售2金融
                pageNum: 0,
                pageSize: 0,
                // b: searchValue || null,
                reasonable: true
              };
              temArray = [];
              itemArray = [];
              _context3.next = 5;
              return getShopList(data);
            case 5:
              temArray = _context3.sent;
              temArray.data.rows.map(function (item) {
                var _item$xc$, _item$xa$;
                itemArray.push({
                  value: item.a,
                  // 标题
                  label: item.b,
                  // 图片
                  shopImg: item === null || item === void 0 ? void 0 : (_item$xc$ = item.xc[0]) === null || _item$xc$ === void 0 ? void 0 : _item$xc$.c,
                  // 奖品里面每个奖项的ID
                  // shopID:1111,
                  // 价格
                  price1: item === null || item === void 0 ? void 0 : (_item$xa$ = item.xa[0]) === null || _item$xa$ === void 0 ? void 0 : _item$xa$.n,
                  // 数量
                  num: 0,
                  // 中奖概率
                  winProbility: 0
                });
                return itemArray;
              });
              setOptions([].concat(itemArray));
            case 8:
            case "end":
              return _context3.stop();
          }
        }
      }, _callee3);
    }));
    return _getDataList.apply(this, arguments);
  }
  var customValueRenderer = function customValueRenderer() {
    return selected.length ? selected.map(function (_ref2) {
      var label = _ref2.label;
      return '✔️ ' + label;
    }) : '请选择奖品';
  };
  var jsonObj = {
    allItemsAreSelected: '已选择全部奖品',
    clearSearch: '清空搜索',
    clearSelected: '清空所选奖品',
    noOptions: '暂无奖品',
    search: '搜索',
    selectAll: '选择全部',
    selectAllFiltered: '已选择过滤的奖品',
    selectSomeItems: '请选择奖品',
    create: 'Create'
  };
  return /*#__PURE__*/React.createElement("div", {
    className: styles.rows
  }, /*#__PURE__*/React.createElement("div", {
    className: styles.selectStyle
  }, /*#__PURE__*/React.createElement(MultiSelect, {
    shouldToggleOnHover: true,
    options: options,
    value: selected,
    onChange: setSelected,
    valueRenderer: customValueRenderer,
    labelledBy: "\u8BF7\u9009\u62E9\u5956\u54C1",
    ItemRenderer: DefaultItemRenderer,
    overrideStrings: jsonObj
  })), /*#__PURE__*/React.createElement("div", {
    className: styles.btn
  }, /*#__PURE__*/React.createElement(_Button, {
    onClick: function onClick() {
      getSelectList(selected);
    }
  }, "\u6DFB\u52A0")));
};
export default Example;