import react, { useState, useEffect } from "react";
import Taro from "@tarojs/taro";
import { getOrderSub, getQrcode } from "@/services/payOrder";
import formatTime from "@/utils/formatTime";
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 Evaluation from "@/assets/icons/UserCenter/Evaluation.png";
import Null from "@/assets/icons/UserCenter/null_logo.png";
import QRcode from "@/assets/icons/UserCenter/QRcode.png";

import Pay from "@/assets/icons/GuideCheck/Pay_logo.png";
import starOn from "@/assets/icons/GuideCheck/starOn.png";
import starOff from "@/assets/icons/GuideCheck/starOff.png";
import AlreadyUsed from "../AlreadyUsed";
import "./style.less";

const scoreList = new Array(5).fill(0);
const score = "3.9";

const dict = {
  0: { status: 0 },
  1: { status: 1 },
  2: { isVerified: 1 },
  3: { status: 9 },
};
export default (props) => {
  const { type } = props;
  const [list, setList] = useState([]);
  const [IsPull, setPull] = useState(false);
  const [pageNum, setNumber] = useState(1);
  const [HasNextPage, setHasNextPage] = useState(true);

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

  const pageRefresh = () => {
    // 页面下拉刷新回调
    setPull(true);
  };

  const getList = () => {
    setHasNextPage(false);

    // let params = {};

    // if (type === 1) {
    // }
    getOrderSub({
      pageNum,
      pageSize: 10,
      ...(type !== undefined ? dict[type] : null),
    }).then((res) => {
      setList(
        pageNum === 1 ? res.records || [] : list.concat(res.records || [])
      );
      setHasNextPage(res.current < res.pages);
      setPull(false);
    });
  };

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

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

  //核销
  const onWriteOff = (item) => {
    Taro.scanCode({
      onlyFromCamera: true,
      success: (res) => {
        if (res.path) {
          getQrcode(res.result).then((result) => {
            Taro.navigateTo({
              url: `/${result.page}?${result.scene}`,
            });
          });
        } else {
          Taro.showToast({
            title: "非当前小程序生成二维码",
            icon: "none",
            duration: 2000,
          });
        }
      },
      fail: (err) => {
        console.log(err, "err");
      },
    });
  };

  return (
    <scroll-view
      scroll-y
      style="height: 90vh;"
      refresher-enabled
      refresher-triggered={IsPull}
      onrefresherrefresh={pageRefresh}
      refresher-background="#fff"
      onscrolltolower={pageLoadMore}
    >
      <view className="complete-boxs">
        {list.map((item, index) => {
          /* 待支付 */
          if (item.status === 0) {
            return (
              <view key={`${type}-${item.orderId}`}>
                <view className="OrderNumber">订单编号：{item.orderId}</view>

                <view class="wrapper">
                  <view class="left-complete-one">
                    <image className="left-image-1" src={ProCard_hot}></image>
                    <view className="left-viewText">
                      返现￥{item.cashback / 100}
                    </view>
                    <view className="title-image">
                      <image
                        className="image-1"
                        mode="scaleToFill"
                        src={item.poster || image}
                      ></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?.startTime, "yyyy/MM/dd")}-
                        {formatTime(item.endTime, "yyyy/MM/dd")}
                      </view>
                    </view>
                  </view>
                  <view class="right-complete-two">
                    <view
                      className="right-content"
                      onClick={() => {
                        Taro.navigateTo({
                          url: `/pages/PayOrder/index?orderId=${item.orderId}`,
                        });
                      }}
                    >
                      <image className="right-image" src={Pay} />
                      <view className="right-title">支付</view>
                    </view>
                  </view>
                </view>
              </view>
            );
          }
          /* 待核销 */
          if (item.status === 1 && item.isVerified == 0) {
            return (
              <view key={`${type}-${item.orderId}`}>
                <view className="OrderNumber">订单编号：{item.orderId}</view>
                <view class="wrapper">
                  <view class="left-complete-one">
                    <image className="left-image-1" src={ProCard_hot}></image>
                    <view className="left-viewText">
                      返现￥{item.cashback / 100}
                    </view>
                    <view className="title-image">
                      <image
                        className="image-1"
                        mode="scaleToFill"
                        src={item.poster || image}
                      ></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?.startTime, "yyyy/MM/dd")}-
                        {formatTime(item.endTime, "yyyy/MM/dd")}
                      </view>
                    </view>
                  </view>
                  <view class="right-complete-two">
                    <view
                      className="right-content"
                      onClick={() => onWriteOff(item)}
                    >
                      <image className="right-image" src={QRcode} />
                      <view className="right-title">扫码核销</view>
                    </view>
                  </view>
                </view>
              </view>
            );
          }
          /* 已过期 */
          if (item.status === 9) {
            return (
              <view key={`${type}-${item.orderId}`}>
                <view className="OrderNumber">订单编号：{item.orderId}</view>
                <view class="wrapper">
                  <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}</text>
                    </view>
                    <view className="title-image">
                      <image
                        className="image-1"
                        mode="scaleToFill"
                        src={item.poster || image}
                      ></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?.startTime, "yyyy/MM/dd")}-
                        {formatTime(item.endTime, "yyyy/MM/dd")}
                      </view>
                    </view>
                  </view>
                  <view class="right-complete-two">
                    <view className="right-content">
                      <image className="right-image-2" src={Null} />
                    </view>
                  </view>
                </view>
              </view>
            );
          }
          /* 已使用 */
          if (item.isVerified == 1) {
            return (
              <view key={`${type}-${item.orderId}`}>
                <view className="OrderNumber">订单编号：{item.orderId}</view>
                <view class="wrapper">
                  <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) => {
                        console.log(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}</text>
                    </view>
                    <view className="title-image">
                      <image
                        className="image-1"
                        mode="scaleToFill"
                        src={item.poster || image}
                      ></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.verifiedDate, "yyyy/MM/dd hh:mm")}
                      </view>
                    </view>
                  </view>
                  <view class="right-complete-two">
                    <view className="right-content">
                      <image className="right-image" src={Evaluation} />
                      <view className="right-title">评价</view>
                    </view>
                  </view>
                </view>
              </view>
            );
          }
        })}

        <view className="foot">已经到底了~</view>
      </view>
    </scroll-view>
  );
};

//  {/* 待核销 */}

//  {/* 待支付 */}

//  {/* 已过期 */}
