import BlackSpot from "@/assets/icons/GuideCheck/BlackSpot.png";
import Taro from "@tarojs/taro";
import { Button, Icon, Text, Textarea } from "@tarojs/components";
import formatPrice from "@/utils/formatPrice";

import { useState, useEffect } from "react";
import withLayout from "@/layouts";
import { getOrderSub, refund } from "@/services/payOrder";
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 CustomNav from "@/components/CustomNav";
import "./style.less";
import formatTime from "@/utils/formatTime";

const options = [
  {
    title: "计划有变,没时间消费",
    key: 1,
  },
  {
    title: "误认为是外卖",
    key: 2,
  },
  {
    title: "没看清楚使用规则,要用时才发现限制很多",
    key: 3,
  },
  {
    title: "预约不上",
    key: 4,
  },
  {
    title: "店里更优惠",
    key: 5,
  },
  {
    title: "网友/朋友评价不好",
    key: 6,
  },
];

export default withLayout((props) => {
  const { router, person } = props;
  const { id } = props.router.params;
  const [view, setView] = useState(true);
  const [view2, setView2] = useState(false);
  const [view3, setView3] = useState(false);
  const [view4, setView4] = useState(false);
  const [view5, setView5] = useState(false);
  const [view6, setView6] = useState(false);
  // 说明
  const [explain, setExplain] = useState();

  const [list, setList] = useState([]);
  // 总价 totalPrice
  const [totalPrice, setTotalPrice] = useState({});

  const [checkeds, setCheckeds] = useState([1]);

  const getData = (orderId) => {
    Taro.showLoading();
    getOrderSub({
      pageNum: 1,
      pageSize: 50,
      orderId: orderId,
    }).then((res) => {
      setList(res.records);
      Taro.hideLoading();
    });
  };

  useEffect(() => {
    getData(id);
  }, []);

  const viewOK = (e) => {
    if (checkeds.indexOf(e.key) > -1) {
      setCheckeds(checkeds.filter((x) => x != e.key));
    } else {
      let arr = checkeds;
      arr.push(e.key);
      setCheckeds([...arr]);
    }
  };

  const onRefund = () => {
    // console.log(explain, checkeds, "----onRefund----");
    refund(id, {
      refundDecription: checkeds?.map(x => options.filter(y => y.key == x)[0]?.title).join(';'),
      refundReason: explain,
    }).then((res) => {
      Taro.showToast({
        title: "退款成功",
        icon: "none",
        duration: 2000,
      });
      Taro.navigateBack({ delta: 1 })
    });
  };

  useEffect(() => {
    let total = {
      cashback: 0, //已获返现
      charges: 0, //实付金额
      refundPrice: 0, //退款金额
    };
    list.map((x) => {
      total.cashback += x.cashback;
      total.charges += x.charges;
      total.refundPrice += x.charges - x.cashback;
    });
    setTotalPrice(total);
  }, [list]);

  return (
    <view className="box-content">
      <CustomNav title="售后退款" />
      <view className="Refund-Content-box">
        <view className="title-image">
          <image
            mode="scaleToFill"
            className="title-image-cup"
            src={BlackSpot}
          />
          <text className="title-title-boss">商品信息</text>
        </view>
      </view>
      {/* 商品信息结束 */}
      <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">
                  返现￥{formatPrice(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.packageDescription}
                      <text className="title-money-2">
                        数量：{item.amount}张
                      </text>
                    </view>
                  </view>
                  <text className="title-money">
                    ￥{formatPrice(item.unitPrice)}元
                    <text className="title-money-2">
                      门市价{formatPrice(item.standardPrice)}元
                    </text>
                  </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"></view>
              </view>
            </view>
          );
        })}
      </view>

      {/* 卡片结束 */}
      <view className="Refund-Content-box">
        <view className="title-image">
          <image
            mode="scaleToFill"
            className="title-image-cup"
            src={BlackSpot}
          />
          <text className="title-title-boss">退款原因</text>
        </view>
        {/* 退款结束 */}
      </view>
      <view className="Refund-content">
        {options.map((x) => {
          return (
            <text
              className={`Refund-star-view${x.key} ${checkeds.indexOf(x.key) > -1
                  ? "bg2"
                  : `Refund-star-view${x.key}`
                }`}
              key={x.key}
              onClick={() => viewOK(x)}
            >
              {x.title}
            </text>
          );
        })}
      </view>

      <view className="Refund-Content-box">
        <view className="title-image">
          <image
            mode="scaleToFill"
            className="title-image-cup"
            src={BlackSpot}
          />
          <text className="title-title-boss">退款说明</text>
        </view>
      </view>
      <view class="section">
        <Textarea
          placeholder="请补充退款说明（选填）!"
          onInput={(e) => setExplain(e.detail.value)}
          confirm-type="done"
        />
      </view>
      <view className="money-title">
        实付金额:{" "}
        <text className="money-name">{formatPrice(totalPrice.charges)}元</text>
      </view>
      <view className="money-title">
        已获返现:{" "}
        <text className="money-name">{formatPrice(totalPrice.cashback)}元</text>
      </view>
      <view className="money-title">
        退款金额:{" "}
        <text className="money-name">{formatPrice(totalPrice.refundPrice)}元</text>
      </view>
      <view className="ul-li-text">
        <view className="ul-li-view"></view>
        <text className="ul-li-textname">退款金额不可修改</text>
      </view>
      <view className="ul-li-text">
        <view className="ul-li-view"></view>
        <text className="ul-li-textname">
          下单获得返现金额，会在退款时被扣除；
        </text>
      </view>
      <view className="ul-li-text">
        <view className="ul-li-view"></view>
        <text className="ul-li-textname">退款将在七个工作日内原路退还。</text>
      </view>

      <view className="button-info">
        <Button className="button-box" onClick={() => onRefund()}>
          提交申请
        </Button>
      </view>
    </view>
  );
});