import withLayout from '@/layouts'
import image from '@/assets/icons/ProCard/8kb.jpg'
import AuthPage from '@/components/AuthPage'
import Taro from '@tarojs/taro'
import { useState, useEffect, useRef } from 'react'
import { Button, Radio, Input } from '@tarojs/components'
import food from '@/assets/icons/ProCard/food.png'
import ProCard_hot from '@/assets/icons/ProCard/ProCard_hot.png'
import CustomNav from '@/components/CustomNav'
import PayOrderCard from '@/components/PayOrderCard'
import { PaysOrder, getMineOrder } from '@/services/payOrder' //创建订单
import { getShopPackage, } from '@/services/home'
import './style.less'

export default withLayout((props) => {
  const { router, person } = props
  const { id, shopId, packageId } = props.router.params
  const [shopPackage, setShopPackage] = useState([])
  const [buttonDisabled, setButtonDisabled] = useState(true)
  const [totalCost, setTotalCost] = useState(0)
  const [cashBack, setCashBack] = useState(0)
  const [realPrice, setRealPrice] = useState(0)

  console.log('----------shopId-------', props, shopId, id);

  const handelButton = () => {
    setButtonDisabled(false)
  }

  const goRules = () => {
    Taro.navigateTo({ url: `/pages/MineUserAll/Rules/index` })

  }


  const handeList = () => {
    shopPackage.map((item) => {
      //总价
      let CostSum = (item.actualPrice / 100) * (item.BuyNumber || 1)
      setTotalCost(totalCost + CostSum)
      //返现价
      let backSum = (item.cashback / 100) * (item.BuyNumber || 1)
      setCashBack(cashBack + backSum)
      //实际价
      let PriceSum = (item.standardPrice / 100) * (item.BuyNumber || 1)
      setRealPrice(realPrice + PriceSum)

    })
  }




  useEffect(() => {


    getShopPackage(shopId, { packageId: packageId }).then((res) => {
      const itemShop = res.records
      setShopPackage(itemShop)
    })


  }, [])





  const shopContent = (item) => {
    const lst = shopPackage.map((pack) => {
      if (pack.packageId === item.packageId) {
        return item
      } else {
        return pack
      }
    })

    setShopPackage(lst)
  }

  const submit = (data) => {
    PaysOrder(data, {
      amount: 2,
      itemId: id,
      price: totalCost

    }).then((res) => {
      console.log("🚀 ~ file: index.jsx ~ line 33 ~ submit ~ res", res)

      Taro.requestPayment({
        timeStamp: '',
        nonceStr: '',
        package: '',
        signType: 'MD5',
        paySign: '',
        success: val => {
          console.log(val);
        },
        fail: err => {

        }

      })

    }).catch(err => {
      console.log("🚀 ~ -------------支付错误------------", err)

    });
  }



  return !person.phone ? <AuthPage /> : (

    <view class='container'>
      <CustomNav title='订单' />
      {
        shopPackage?.map((item, index) => <PayOrderCard onShopContent={shopContent} onShopNumber={handeList} key={(index)} item={item} />)
      }

      <view className='view-button'>
        <view className='Card-number-box'>
          <view className='Card-number'>
            <text style='left:29px;position: absolute; padding-top:20px'>手机号码:</text>
            <text style='right:29px;position: absolute;padding-top:20px'>{person.phone}</text>
          </view>
          <view className='Card-user'>
            <Radio onClick={handelButton} style='padding-left:20px; position: relative; top:24px;' value='我已阅读知晓并同意' >我已阅读知晓并同意 <text style='color:#274190;text-decoration:underline;font-weight:400' onClick={goRules} >《平台用户服务协议》</text></Radio>
          </view>
        </view>
        <view className='button-box-button-box'>
          <view className='button-text-image' >
            <text className='button-text-money-hot'>返现￥{cashBack}</text>
            <image className='button-image' src={ProCard_hot}></image>
            <view className='button-text-money'>门店市面价：{realPrice / 100}元</view>
          </view>
          <Button onClick={submit} disabled={buttonDisabled} className='button-box-one'>￥{totalCost}元 <text className='button-text-one'>支付订单</text> </Button>
        </view>

      </view>
    </view>


  )

})

