import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _regeneratorRuntime from "@babel/runtime/regenerator";
import React, { useState, useEffect } from 'react';
import styles from "./index.module.scss";
import { getGroupBookingData } from "../../api/base";
;
var GroupBooking = function GroupBooking(_ref) {
  var ideaId = _ref.ideaId,
    endDate = _ref.endDate,
    handlerBuy = _ref.handlerBuy;
  var DEFAULT_IMG_URL = '//img.maimairen.com/low-code/components/shops/shop1.jpg';
  var ADD_ICON = '//img.maimairen.com/low-code/components/groupBooking/add_icon.png';

  // 无ideaId传入只会存在编辑器环境，此时展示模拟数据
  var initGoodsData = ideaId ? {} : {
    ideaProductData: {
      teamMaxNum: 5,
      teamPrice: 88.88,
      teamStatus: 'WAIT'
    },
    productList: [{
      productId: 0,
      title: "商品标题",
      mainImg: DEFAULT_IMG_URL,
      specs: "1份",
      salesWord: "商品描述",
      sellingPrice: 99.99,
      marketPrice: 200
    }],
    buyerList: []
  };
  var initCountDown = {
    hour: '23',
    minute: '59',
    second: '59'
  };
  var _useState = useState(initGoodsData),
    goodsData = _useState[0],
    setGoodsData = _useState[1];
  var _useState2 = useState(initCountDown),
    countDown = _useState2[0],
    setCountDown = _useState2[1];
  var _useState3 = useState(false),
    ftFix = _useState3[0],
    setFtFix = _useState3[1];
  var _useState4 = useState(0),
    bottom = _useState4[0],
    setBottom = _useState4[1];

  // 计时器
  var timer = null;
  useEffect(function () {
    var pathname = window.location.pathname;
    // 预览页时底部购买按钮区固定页面底部
    if (pathname === '/preview.html' || pathname === '/preview2.html') {
      if (pathname === '/preview2.html') {
        document.querySelector('.lowcode-plugin-sample-preview').setAttribute('padding-bottom', '113px');
        setBottom(78);
      } else {
        setBottom(0);
      }
      document.body.setAttribute('padding-bottom', '113px');
      setFtFix(true);
    }
    if (ideaId) {
      fetchData();
    }
    if (endDate && +endDate > 0) {
      isCountDown();
    }
  }, [ideaId, endDate]);
  var getDefaultUserList = function getDefaultUserList(data) {
    var defaultNum = data.ideaProductData.teamMaxNum - data.buyerList.length;
    var resultArr = [];
    for (var i = 0; i < defaultNum; i++) {
      resultArr.push(i);
    }
    return resultArr;
  };

  // 获取拼团信息
  var fetchData = /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var _yield$getGroupBookin, code, data;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            _context.next = 2;
            return getGroupBookingData({
              ideaId: ideaId
            });
          case 2:
            _yield$getGroupBookin = _context.sent;
            code = _yield$getGroupBookin.code;
            data = _yield$getGroupBookin.data;
            if (code === 10200 && data) {
              setGoodsData(data);
            }
          case 6:
          case "end":
            return _context.stop();
        }
      }, _callee);
    }));
    return function fetchData() {
      return _ref2.apply(this, arguments);
    };
  }();
  var timeFormatter = function timeFormatter(time) {
    if (!time) {
      setCountDown({
        hour: '00',
        minute: '00',
        second: '00'
      });
      return false;
    }
    ;
    var t = time;
    var ss = t % 60;
    t = (t - ss) / 60;
    if (t < 1) {
      setCountDown({
        hour: '00',
        minute: '00',
        second: ss < 10 ? "0" + ss : "" + ss
      });
      return false;
    }
    var mm = t % 60;
    t = (t - mm) / 60;
    if (t < 1) {
      setCountDown({
        hour: '00',
        minute: mm < 10 ? "0" + mm : "" + mm,
        second: ss < 10 ? "0" + ss : "" + ss
      });
      return false;
    }
    ;
    var hh = t % 24;
    t = (t - hh) / 24;
    if (t < 1) {
      setCountDown({
        hour: hh < 10 ? "0" + hh : "" + hh,
        minute: mm < 10 ? "0" + mm : "" + mm,
        second: ss < 10 ? "0" + ss : "" + ss
      });
      return false;
    } else {
      var _h = hh + t * 24;
      setCountDown({
        hour: _h < 10 ? "0" + _h : "" + _h,
        minute: mm < 10 ? "0" + mm : "" + mm,
        second: ss < 10 ? "0" + ss : "" + ss
      });
      return false;
    }
  };

  // 倒计时
  var isCountDown = function isCountDown() {
    timer && clearTimeout(timer);
    // 当前时间戳
    var curTime = new Date().getTime();
    var durationTime = Math.floor((+endDate * 1000 - curTime) / 1000);
    timeFormatter(durationTime);
    if (+endDate * 1000 > curTime) {
      timer = setTimeout(function () {
        isCountDown();
      }, 1000);
    } else {
      timer && clearTimeout(timer);
    }
  };
  return /*#__PURE__*/React.createElement("div", {
    className: styles.group_booking_wrap
  }, /*#__PURE__*/React.createElement("div", {
    className: styles.goods_info
  }, /*#__PURE__*/React.createElement("div", {
    className: styles.goods_image_box
  }, /*#__PURE__*/React.createElement("div", {
    className: styles.goods_image,
    style: {
      background: "url(" + goodsData.productList[0].mainImg + ") no-repeat center/contain"
    }
  })), /*#__PURE__*/React.createElement("div", {
    className: styles.goods_title
  }, goodsData.productList[0].title), /*#__PURE__*/React.createElement("div", {
    className: styles.goods_desc
  }, goodsData.productList[0].salesWord), /*#__PURE__*/React.createElement("div", {
    className: styles.price
  }, /*#__PURE__*/React.createElement("div", {
    className: styles.sale_price
  }, /*#__PURE__*/React.createElement("div", {
    className: styles.sale_price_unit
  }, "\uFFE5"), /*#__PURE__*/React.createElement("div", {
    className: styles.sale_price_num
  }, goodsData.productList[0].sellingPrice), /*#__PURE__*/React.createElement("div", {
    className: styles.sale_price_unit
  }, "/", goodsData.productList[0].specs)), /*#__PURE__*/React.createElement("div", {
    className: styles.line_price
  }, "\uFFE5", goodsData.productList[0].marketPrice))), /*#__PURE__*/React.createElement("div", {
    className: styles.group_infos
  }, /*#__PURE__*/React.createElement("div", {
    className: styles.group_head
  }, /*#__PURE__*/React.createElement("div", {
    className: styles.head_icon
  }), /*#__PURE__*/React.createElement("p", {
    className: styles.head_text
  }, "\u53D1\u8D77\u591A\u4EBA\u56E2"), /*#__PURE__*/React.createElement("div", {
    className: styles.arrow_icon
  }), /*#__PURE__*/React.createElement("p", {
    className: styles.head_text
  }, "\u62FC\u6EE1\u4EBA\u6570"), /*#__PURE__*/React.createElement("div", {
    className: styles.arrow_icon
  }), /*#__PURE__*/React.createElement("p", {
    className: styles.head_text
  }, "\u6210\u56E2\u53D1\u8D27")), /*#__PURE__*/React.createElement("div", {
    className: styles.group_content
  }, /*#__PURE__*/React.createElement("div", {
    className: styles.count_down
  }, /*#__PURE__*/React.createElement("p", {
    className: styles.count_down_title
  }, "\u8DDD\u79BB\u7ED3\u675F\u8FD8\u5269"), /*#__PURE__*/React.createElement("p", {
    className: styles.count_down_num
  }, countDown.hour, ":", countDown.minute, ":", countDown.second)), /*#__PURE__*/React.createElement("p", {
    className: styles.count_desc
  }, "\u8FD8\u5269", /*#__PURE__*/React.createElement("span", {
    className: styles.count_num
  }, goodsData.ideaProductData.teamMaxNum - goodsData.buyerList.length), "\u4E2A\u4F4D\u7F6E"), /*#__PURE__*/React.createElement("div", {
    className: styles.image_list
  }, initGoodsData.buyerList.map(function (item) {
    return /*#__PURE__*/React.createElement("div", {
      className: styles.image_item + " " + styles.active,
      style: {
        background: "#f3f3f3 url(" + item.buyerAvatar + ")no-repeat center/contain"
      }
    });
  }), getDefaultUserList(goodsData).map(function () {
    return /*#__PURE__*/React.createElement("div", {
      className: styles.image_item,
      style: {
        background: "#f3f3f3 url(" + ADD_ICON + ")no-repeat center/20px"
      }
    });
  }))), /*#__PURE__*/React.createElement("div", {
    className: styles.group_fix_ft + " " + (ftFix && styles.fixed),
    style: {
      'bottom': bottom + "px"
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: styles.ft_btns
  }, /*#__PURE__*/React.createElement("div", {
    className: styles.bag_btn
  }, /*#__PURE__*/React.createElement("p", {
    className: styles.bag_num
  }, goodsData.productList.length), /*#__PURE__*/React.createElement("div", {
    className: styles.bag_icon + " xiatu-rich xt-bag"
  }), /*#__PURE__*/React.createElement("p", {
    className: styles.bag_text
  }, "\u8D2D\u7269\u888B")), /*#__PURE__*/React.createElement("div", {
    className: styles.buy_btn
  }, /*#__PURE__*/React.createElement("p", {
    className: styles.buy_num
  }, "\uFFE5", goodsData.productList[0].sellingPrice), /*#__PURE__*/React.createElement("p", {
    className: styles.buy_text,
    onClick: function onClick() {
      return handlerBuy('buy');
    }
  }, "\u76F4\u63A5\u8D2D\u4E70")), /*#__PURE__*/React.createElement("div", {
    className: styles.group_btn
  }, /*#__PURE__*/React.createElement("p", {
    className: styles.group_num
  }, "\uFFE5", goodsData.ideaProductData.teamPrice), /*#__PURE__*/React.createElement("p", {
    className: styles.group_text,
    onClick: function onClick() {
      return handlerBuy('group');
    }
  }, "\u62FC\u56E2"), /*#__PURE__*/React.createElement("p", {
    className: styles.group_tips
  }, "\u66F4\u5212\u7B97"))), /*#__PURE__*/React.createElement("div", {
    className: styles.ft_tips
  }, /*#__PURE__*/React.createElement("p", {
    className: styles.tip_text
  }, "\u4E0D\u6210\u56E2\u81EA\u52A8\u9000\u6B3E")))));
};
export default GroupBooking;