import { useState, useEffect, useRef } from 'react'

import Taro from '@tarojs/taro'
import { deleteTravel, deleteTravelItem } from '@/services/travel'

import { View, Text, Image, ScrollView } from '@tarojs/components'
import CouponCard from '@/components/CouponCard'
import { compressImage } from '@/utils'
import SaveIcon from '@/components/SaveIcon'
import Location from '@/components/Location'

import grassOFF from '@/assets/icons/housemantj/grassOFF.png'
import DeleteTravel from '@/assets/icons/Travel/delete.png'

import grassNO from '@/assets/icons/housemantj/grassNO.png'
import Popup from '@/components/Popup'

import './style.less'


const CouponMedia = CouponCard.Media
const Action = CouponCard.Action

//套餐卡片
export default (props) => {
  const { item, st, editable, setScroll, goshop, det, onDay, onDelete } = props
  // const travelId = travelMineContent?.records[0]?.travelId
  const { targetId, itemId } = props.item
  const goDetail = () => {
    Taro.navigateTo({ url: `/pages/details/mjDetails/sceneryDetails?id=${targetId}` })

  }
  const goFood = () => {
    Taro.navigateTo({ url: `/pages/details/foodDetails/foodDetails?id=${targetId}` })

  }
  const [showCutover, setShowCutover] = useState(false)
  const [valueList, setValueList] = useState([])









  // useEffect(() => {

  // }, [item])

  const onClose = () => {
    //关闭当前套餐详情弹窗
    setShowCutover(false)
    //使父组件恢复滚动
    setScroll(true)
  }




  const handlePayClick = (e) => {

    onDelete(itemId)

    // Taro.navigateTo({ url: `/pages/PayOrder/index?packageId=${item.packageId}&scene=${scene || ''}&subOrderId=${subOrderId}&id=${id}` })

  }
  const PayAction = <Action.Icon icon={DeleteTravel} text='删除' onClick={handlePayClick} />




  return (
    <View style={{ margin: '15px 5px' }} >
      <View className='packageDetail' style={{ display: goshop ? '' : 'none' }}>
        <Popup show={showCutover} maskClosable={showCutover} onClose={onClose}>
          <ScrollView
            scrollY
            style={{ maxHeight: '60vh' }}
          >
            <Image mode='widthFix' src={item.details ? item.details : item.poster} />
          </ScrollView>
        </Popup >
      </View>
      <CouponCard action={PayAction}>
        <CouponMedia onClick={item.targetType === 'tourist' ? goDetail : goFood}>
          <CouponMedia.Header
            cashback={item.cashback}
            image={compressImage(item.poster)}
          // badge='food'
          />
          <CouponMedia.Body star={st}>
            <View className='foodCard'>
              <View className='cpn-card-text'>
                {(item.title).toString().length > 25 ? (item.title).substring(0, 25) + '...' : (item.title)}
              </View>
              <View className='cpn-card-text' style={{ marginTop: '10rpx' }}>
                <Text className='cpn-card-text_mn'>￥{`${(item.averagePrice == '' ? '0.00' : item.averagePrice / 100)?.toFixed(2)}元`}</Text>
                {/* <Text className='cpn-card-text_rm'>{`门市价${(item.standardPrice / 100)?.toFixed(2)}元`}</Text> */}
              </View>
              <View className='cpn-md-act'>
                <Location {...det} />
                <SaveIcon saved={item.isSaved > 0} targetType='shop_package' editable={editable} targetId={item.packageId} />
              </View>
            </View>
          </CouponMedia.Body>
        </CouponMedia>
      </CouponCard>
    </View>
  )
}