import Taro from "@tarojs/taro";
import { Button, Textarea, View } from "@tarojs/components";
import formatPrice from "@/utils/formatPrice";
import SpinBox from "@/components/Spin/SpinBox";

import { useState, useEffect } from "react";
import OrderCard from '@/components/CompoentsOrder/OrderCard'
import withLayout from "@/layouts";
import { getOrderSub, refund } from "@/services/payOrder";
import CustomNav from "@/components/CustomNav";
import BlackSpot from "@/assets/icons/GuideCheck/BlackSpot.png";
import "./style.less";

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 [loading, setLoading] = useState(false)

  // 说明
  const [explain, setExplain] = useState();

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

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

  const getData = (orderId) => {
    setLoading(true)

    getOrderSub({
      pageNum: 1,
      pageSize: 50,
      orderId: orderId,
    }).then((res) => {
      setList(res.records);
      setLoading(false)

    }).catch(e => {
      setLoading(false)
    })
  };

  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 = () => {
    Taro.showLoading({
      title: '退款中',
    })
    refund(id, {
      refundDecription: checkeds?.map(x => options.filter(y => y.key == x)[0]?.title).join(';'),
      refundReason: explain,
    }).then((res) => {
      Taro.hideLoading();
      Taro.navigateBack({
        delta: 1
      })
      Taro.showToast({
        title: "退款成功",
        icon: "none",
        duration: 3000,
      });
    });
  };
  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='page-index'>
      <view className='index-navbar'>
        <CustomNav title='售后退款' />
      </view>
      <View className='index-container'>
        <View className='box-content'>
          <scroll-view scroll-y style='height: 100%;' >
            <SpinBox loading={loading}>

              <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 (
                    <OrderCard item={item} key={item.orderId} kkp='1' />
                  );
                })}
              </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-view1 ${checkeds.indexOf(x.key) > -1
                        ? "bg2"
                        : `Refund-star-view2`
                        }`}
                      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>
            </SpinBox>

          </scroll-view>
        </View>
      </View>

    </view >
  );
});