import "./ShopCoupons.scss";
import { useState, useEffect } from "react";
import { post } from "../../js/helpers/data-helper";

const ShopCoupons = ({ onBack, shop, memberID }) => {
  const [coupons, setCoupons] = useState([]);
  const [receiving, setReceiving] = useState(false);
  const getList = async () => {
    try {
      const { code, data, msg } = await post(
        "/api/ar/v1/applet/ShopDetailCouponList",
        {
          paging: 0,
          memberID,
          shopCode: shop.code,
        }
      );
      if (code !== 200)
        window.weui.toast(msg, {
          className: "toast",
        });
      else setCoupons(data);
    } catch (error) {
      console.warn(error);
    }
  };
  useEffect(() => {
    getList();
  }, []);
  const receive = async (coupon) => {
    setReceiving(true);
    try {
      const { code, data, msg } = await post(
        "/api/ar/v1/applet/ShopCouponReceive",
        {
          couponCode: coupon.code,
          memberID,
        }
      );
      window.weui.toast(msg, {
        className: "toast",
      });
      if (code === 200) {
        getList();
      }
    } catch (error) {
      console.warn(error);
    } finally {
      setReceiving(false);
    }
  };
  return (
    <div className="ShopCoupons">
      <div className="header">
        <div
          className="back"
          onClick={() => {
            onBack && onBack();
          }}
        ></div>
        {shop.name}
      </div>
      <div className="list">
        {coupons.map((coupon, i) => (
          <div className="item" key={coupon.code}>
            <div className="left">
              <img className="avatar" src={shop.logoPath}></img>
            </div>
            <div className="right">
              <div className="r1">
                <div className="content">{coupon.title}</div>
                <div
                  className={
                    "btn " +
                    (coupon.detailReceived >= coupon.detailReceiveCount
                      ? "disabled"
                      : "")
                  }
                  onClick={() => {
                    if (
                      coupon.detailReceived >= coupon.detailReceiveCount ||
                      receiving
                    )
                      return;
                    receive(coupon);
                  }}
                >
                  {coupon.detailReceived >= coupon.detailReceiveCount
                    ? "已领取"
                    : "领券"}
                </div>
              </div>
              <div className="r2">
                <div>使用期限</div>
                <div>
                  {coupon.beginTime}至{coupon.endTime}
                </div>
                <div
                  className="desc"
                  onClick={() => {
                    coupon.isOpen = !coupon.isOpen;
                    setCoupons([...coupons]);
                  }}
                >
                  查看详情
                  <div
                    className={"icon " + (coupon.isOpen ? "open" : "")}
                  ></div>
                </div>
              </div>
              {!!coupon.isOpen && (
                <div className="r3">
                  <div className="title">使用规则</div>
                  <div className="content">{coupon.couponRules}</div>
                </div>
              )}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};
export default ShopCoupons;