import React from 'react'
import { Image, Swiper, SwiperItem, Text, View } from '@tarojs/components'
import './index.scss'

import { useEffect } from 'react';
import { useState } from 'react';
import backNav from '@/images/backNav.png'
import next from '@/images/next.png'
import Taro from '@tarojs/taro';
import { useRouter } from '@tarojs/taro';
import { Button } from '@nutui/nutui-react-taro';
import { getAddress, mallDetail, order } from '../../utils/api';
import { GetData } from '../../utils/storage';
import { useDidShow } from '@tarojs/taro';
import { useLoad } from '@tarojs/taro';
import { closeLoading, loading } from '../../utils/utils';



function Index() {

  const param = useRouter().params
  const [id] = useState(param.id)
  const [aid, setAid] = useState(param.aid)
  const [scene] = useState('mall')
  const [addrData, setAddrData] = useState({})
  const [info, setInfo] = useState({})



  useEffect(() => {
    console.log(id, "xxx")
    if (!id) return
    mallDetail(id).then(re => {
      if (!re) return
      setInfo(re)
    })
    if (!aid && !!addrData.id) {
      return
    }
    getAddress().then(re => {
      if (!re) return
      const addr = re.items.filter(item => {
        if (aid) {
          return item.id == aid
        }
        return item.is_default
      })
      if (!!addr.length) {
        setAddrData(addr[0])
      }
    })


  }, [id, aid])

  useDidShow(() => {
    const aa = GetData(id)
    setAid(aa)
  })


  // 跳转
  const navDetailFn = async () => {
    if (!id) return
    loading('订单生成中，请稍后...')
    const re = await order(scene, {
      product_id: Number(id),
      address: addrData.address,
      recipient_name: addrData.recipient_name,
      recipient_phone: addrData.recipient_phone,
      province_id: addrData.province_id,
      city_id: addrData.city_id,
      county_id: addrData.county_id,
      zipcode: addrData.zipcode
    })
    closeLoading()
    console.log(re, "order")
    if (!re) return
    Taro.navigateTo({
      url: `/pages/pay-success/index?id=${re.id}`
    })
  }

  // 返回页面
  const backFn = () => {
    Taro.getCurrentPages().length > 0 && Taro.navigateBack()
  }

  // 选择地址
  const goAddr = (aid) => {
    Taro.navigateTo({
      url: `/pages/address/index?gid=${id}&id=` + aid
    })
  }

  return (
    <View className='settle-container'>
      <View className='settle-detail-title'>
        <Image src={backNav} className="square-35 absolute left-10 nav-icon" onClick={backFn} />
        填写订单
      </View>

      <View className='settle-body' >
        <View className='settle-address'>
          <View className='address-title'>选择收货地址</View>
          <View className='address-area' onClick={() => { goAddr('') }}>
            <View className='address-item'>
              {!!addrData.id && <View className='address-item-name'>{addrData.recipient_name} {addrData.recipient_phone}</View>}
              {!!addrData.id && <View className='address-info'>{addrData.province?.name}{addrData.city.name}{addrData.county.name}{addrData.address}</View>}
              {!addrData.id && <View className='address-item-name text-gold'>选择地址</View>}
            </View>
            <View className='address-next'>
              <Image src={next} />
            </View>
          </View>
        </View>

        <View className='settle-goods'>
          <View className='settle-goods-title'>商品信息</View>
          <View className='settle-goods-info'>
            <Image className='settle-goods-img' src={info.cover_image} />
            <View className='settle-goods-content'>
              <View className='settle-goods-content-title line-clamp-1'>{info.name}</View>
              <View className='settle-goods-content-price'>
                <View className='settle-goods-content-price-1'>¥{info.price}</View>
                <View className='settle-goods-content-price-num'>x1</View>
              </View>
            </View>
          </View>
        </View>

        <View className='settle-price-container'>
          <View>总价：</View>
          <View className='settle-price-p'>¥{info.price * 1}</View>
        </View>
      </View>
      <Button className='buy-btn' onClick={navDetailFn}>去支付</Button>
    </View>
  )
}

export default Index
