import { useState, useEffect } from "react";
import Taro from "@tarojs/taro";
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 withLayout from "@/layouts";

import Null from "@/assets/icons/UserCenter/null_logo.png";
import Refund from "@/assets/icons/UserCenter/Refund.png";

import starOn from "@/assets/icons/GuideCheck/starOn.png";
import starOff from "@/assets/icons/GuideCheck/starOff.png";

import { getOrderSub } from "@/services/payOrder";
import formatTime from '@/utils/formatTime'
import CustomNav from "@/components/CustomNav";
import "./style.less";

const scoreList = new Array(5).fill(0);
const score = "3.9";
export default withLayout((props) => {
  const { router, person } = props;
  const [list, setList] = useState([]);
  const [IsPull, setPull] = useState(false);
  const [pageNum, setNumber] = useState(1);
  const [HasNextPage, setHasNextPage] = useState(true);

  const getList = () => {
    setHasNextPage(false);
    getOrderSub({
      pageNum,
      pageSize: 10,
      status: 1,
      isVerified: 0,
    }).then((res) => {
      setList(
        pageNum === 1 ? res.records || [] : list.concat(res.records || [])
      );
      setHasNextPage(res.current < res.pages);
      setPull(false);
    });
  };

  const handleRefund2 = (item) => {
    Taro.navigateTo({
      url: `/pages/MineUserAll/RefundMoney/CheckRefund/index?id=${item.orderId}`,
    });
  };
  const pageRefresh = () => {
    // 页面下拉刷新回调
    setPull(true);
  };

  const pageLoadMore = () => {
    // 页面上拉加载更多
    if (HasNextPage) {
      setNumber(pageNum + 1);
    }
  };

  useEffect(() => {
    // 下拉刷新触发
    if (IsPull) {
      if (pageNum === 1) {
        getList();
      } else {
        setNumber(1);
      }
    }
  }, [IsPull]);

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

  return (
    <view className="box-content">
      <CustomNav title="售后退款" />
      <scroll-view
        scroll-y
        style="height: calc(100vh - 176rpx);"
        refresher-enabled
        refresher-triggered={IsPull}
        onrefresherrefresh={pageRefresh}
        refresher-background="#fff"
        onscrolltolower={pageLoadMore}
      >
        <view>
          {(list||[]).map((item) => {
            return (
              <view class="wrapper" key={item.orderId}>
                <view class="left-complete-one">
                  <image className="left-image-1" src={ProCard_hot}></image>

                  <view className="left-viewText">
                    返现￥{item.cashback / 100}
                  </view>
                  {/* 评分 */}
                  <view className="card-box-star">
                    {scoreList.map((_, index) => {
                      const src = index + 1 < item.score ? starOn : starOff;
                      return (
                        <image
                          className="card-star-image"
                          key={index}
                          src={src}
                        />
                      );
                    })}
                    <text className="card-star-text">
                      {item.score?.toFixed(1)}
                    </text>
                  </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.packageDescription}
                        <text className="title-money-2">
                          数量：{item.amount}张
                        </text>
                      </view>
                    </view>
                    <text className="title-money">
                      ￥{item.unitPrice / 100}元
                    </text>
                    <view className="title-time">有效期：{formatTime(item?.endTime, "yyyy/MM/dd")}</view>
                  </view>
                </view>
                <view class="right-complete-two" onClick={()=>handleRefund2(item)}>
                  <view className="right-content">
                    {/* <image className='right-image-two' src={Null} /> */}
                    <image className="right-image" src={Refund} />
                    <view className="right-title">售后</view>
                  </view>
                </view>
              </view>
            );
          })}
          <view className="foot">已经到底了~</view>
        </view>
      </scroll-view>
    </view>
  );
});