import Taro from "@tarojs/taro";
import { useState, useEffect } from "react";
import withLayout from "@/layouts";
import CustomNav from "@/components/CustomNav";
import { getShopDetail, getShopPackage, getExtendContent } from '@/services/home'
import Popup from "@/components/Popup";
import LocationBig from "@/assets/icons/UserCenter/LocationBig.png";
import Perfection from "@/assets/icons/UserCenter/Perfection.png";
import Check_OK from "@/assets/icons/UserCenter/Check_OK.png";
import Check_NO from "@/assets/icons/UserCenter/Check_NO.png";
import BlackSpot from "@/assets/icons/GuideCheck/BlackSpot.png";
import image from "@/assets/icons/ProCard/8kb.jpg";
import food from "@/assets/icons/ProCard/food.png";
import ProCard_hot from "@/assets/icons/ProCard/ProCard_hot.png";
import { Button, Icon, Text, Textarea } from "@tarojs/components";
import { getVerifyTargetList, putVerifyTarget } from "@/services/payOrder";
import formatTime from '@/utils/formatTime'

import "./style.less";

export default withLayout((props) => {
  const { router, person } = props;
  console.log("🚀 ~ file: index.jsx ~ line 22 ~ withLayout ~ props", props)
  const { id, subOrderId } = props.router.params;
  const [showDialog, setShowDialog] = useState(false);
  //核销
  const [Consumption, setConsumption] = useState(false);

  const [checked, setChecked] = useState();
  const [shopContent, setShopContent] = useState([])

  const [list, setList] = useState([]);


  const getShop = () => {
    getShopDetail(id).then(e => {
      setShopContent(e)

    })
  }



  const getList = (params) => {
    getVerifyTargetList({
      shopId: id,
      isMine: true,
      isVerified: 0,
      pageNum: 1,
      pageSize: 50,
    }).then((res) => {
      if (res) {
        setList(res.records)

        setChecked(res?.records.filter(x => x.subOrderId == subOrderId)[0]?.verifyNo)

        // if(item.verifyNo==checked)
      }

    });
  };

  useEffect(() => {
    getList();
    getShop();
  }, []);

  const ShowMoldeOn = () => {
    setShowDialog(true);
  };
  const ButtonCancel = () => {
    setShowDialog(false);
  };
  const ButtonOK = (e) => {
    if (!checked) return
    // setShowDialog(false)
    if (showDialog === true) {
      Taro.showLoading({
        title: '核销中'
      })

      putVerifyTarget(checked).then(res => {
        Taro.hideLoading()
        setShowDialog(false);
        setConsumption(true);
      }).catch(e => {
        Taro.hideLoading()
        setShowDialog(false);
        Taro.showToast({
          title: '核销失败',
          icon: 'none',
          duration: 2000
        })
      })
    }
  };

  const PerfectionOK = () => {
    setConsumption(false);
    if (list?.length > 1) {
      getList()
    } else {
      Taro.navigateBack({ delta: 1 })
    }
  };

  return (
    <view className="shop-Eat">
      <CustomNav title="到店核销" />
      <Popup show={showDialog} maskClosable={false}>
        <view className="Consumption-Now">您即将核销1张套餐券！</view>
        <text className="Consumption-text">核销后套餐券不退不换</text>
        <text className="Consumption-text">请核对无误后再点击确认！</text>
        <view className="buy-button-box">
          <button className="button-Cancel" onClick={ButtonCancel}>
            取消
          </button>
          <button className="button-OK" onClick={ButtonOK}>
            确定
          </button>
        </view>
      </Popup>
      <Popup show={Consumption} maskClosable={false}>
        <view className="Perfection-image-view">
          <image src={Perfection} className="Perfection-image" />
        </view>
        <text>核销完成！请与店铺确认！</text>
        <view className="buy-button-box">
          <button className="button-OK" onClick={PerfectionOK}>
            完成
          </button>
        </view>
      </Popup>
      <view>
        <view className="position-header">
          <image className="position-LocationBig" src={LocationBig} />
          <text cla="position-LocationBig-text">
            当前所在店铺：{shopContent?.shopName || []}
          </text>
        </view>
        <view className="shop-image">
          <image
            mode="scaleToFill"
            className="shop-title-image-cup"
            src={BlackSpot}
          />
          <text className="shop-title-title">请选择你要核销的套餐</text>
        </view>
        <view>
          {(list||[]).map((item) => {

            return (
              <view class="wrapper" key={item.verifyNo} onClick={() => setChecked(item.verifyNo)}>
                <view class="left-complete-one">
                  <view className="Check_OK-box">
                    <image className="Check_OK-image" src={item.verifyNo == checked ? Check_OK : Check_NO} />
                  </view>
                  <image className="left-image-1" src={ProCard_hot}></image>
                  <view className="left-viewText">返现￥{item.cashback}</view>
                  <view className="title-image">
                    <image
                      className="image-1"
                      mode="scaleToFill"
                      src={item.poster}
                    ></image>
                    <image className="image-2" src={food}></image>
                  </view>
                  <view className="title-content">
                    <view className="Pro-title">
                      <view className="title-text">
                        {item.description}
                        <text className="title-money-2">数量：1张</text>
                      </view>
                    </view>
                    <text className="title-money">
                      ￥{item.actualPrice / 100}元<text className="title-money-2">门市价{item.standPrice / 100}元</text>
                    </text>
                    <view className="title-time">
                      有效期：{formatTime(item?.createDate, "yyyy/MM/dd")}-
                      {formatTime(item?.expireDate, "yyyy/MM/dd")}
                    </view>
                  </view>
                </view>
                <view class="right-complete-two">
                  <view className="right-content"></view>
                </view>
              </view>
            );
          })}
        </view>

        <view className="button-info">
          <Button className="button-box" disabled={!checked} onClick={ShowMoldeOn}>
            确定核销
          </Button>
        </view>
      </view>
    </view>
  );
});