miniapp-v2/src/components/foodCards/ShopNoteCard/index.jsx

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

import Taro from '@tarojs/taro'
import { View, Picker, Image, ScrollView, Text } 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 grassNO from '@/assets/icons/housemantj/grassNO.png'
import VideoStart from '@/assets/icons/housemantj/VideoStart.png'
import Popup from '@/components/Popup'
import { saveTravel, newTravelMine, getTravelMine } from '@/services/travel'

import './style.less'


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

//套餐卡片
export default (props) => {
  const { item, st, editable, setScroll, goshop, travelMine, resourceList, det, handelNoteList } = props
  // const travelId = travelMineContent?.records[0]?.travelId
  const targetId = props.item?.targetId
  const targetType = props.item?.targetType


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

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


  useEffect(() => {
    if (item == []) {
    }
    setValueList(travelMine?.records)


  }, [travelMine?.records, item])

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

  //列改变
  const [traveCoumun, setTraveCoumun] = useState()


  const numberTrave = (new Array(traveCoumun).fill()).map((_, index) => ({ id: index + 1, title: `第 ${index + 1} 天` }))

  const array = [valueList, travelMine?.records == '' ? [] : numberTrave]


  const handleColumn = e => {
    // console.log(e.detail.column);

    const { column, value } = e.detail


    const firstValue = valueList[value]
    setTraveCoumun(firstValue.dayNum)

  }


  const day = new Date();
  const y = day.getFullYear();
  const m = day.getMonth() + 1;
  const d = day.getDate();
  let number = 0
  const onChange = (e) => {



    if (travelMine?.records == '') {


      console.log('没有行程');
      newTravelMine({ title: `我的行程 ${y}-${m}-${d}` }).then(res => {
        handelNoteList()
        // 首先创建一个行程，然后才能拿到下面的这些数据

        const [firstInx, secondInx] = e.detail?.value

        const firstValue = valueList[firstInx] || ''
        console.log("🚀 ~ file: index.jsx ~ line 89 ~ newTravelMine ~ e.detail", firstValue)

        const secondValue = numberTrave[secondInx] || ''

        const { travelId } = firstValue

        //行程内容
        const { i } = secondValue//天数
        // saveTravel({})
        saveTravel(res.travelId, { dayOrder: i, targetId: targetId, targetType: targetType }).then((val) => {
          Taro.showToast({
            title: '添加成功',
            icon: 'none',
            duration: 1000
          })
          resourceList(travelId)
        })
      })
    } else {
      console.log('有行程', e);
      const [firstInx, secondInx] = e.detail.value

      const firstValue = valueList[firstInx]

      const secondValue = numberTrave[secondInx]

      const { travelId } = firstValue

      //行程内容
      const { i } = secondValue//天数

      saveTravel(travelId, { dayOrder: i, targetId: targetId, targetType: targetType }).then((res) => {
        Taro.showToast({
          title: '添加成功',
          icon: 'none',

          duration: 1000
        })
        resourceList(travelId)

        // setGrowGrass(grassNO)

      })
      // console.log('else');

    }
  }


  const handlePayClick = () => {
    if (travelMine?.records == '') {
      Taro.showToast({
        title: '暂无行程，已自动创建',
        icon: 'none',
        duration: 3000
      })

      newTravelMine({ title: `我的行程 ${y}-${m}-${d}` }).then(res => {
        handelNoteList()
        // 首先创建一个行程，然后才能拿到下面的这些数据
      })

    }



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

  }
  const PayAction = travelMine.total >= 1 ?
    <View className='view-picker'>
      <Picker
        className='picker-box'
        mode='multiSelector'
        range={array}
        range-key='title'
        onColumnChange={handleColumn}
        onChange={onChange}
        scrollType='link'
      // value={}
      >
        <Action.Icon icon={item.isVisited < 1 ? grassOFF : grassNO} text={item.isVisited < 1 ? '种草' : '已种草'} onClick={handlePayClick} />
      </Picker>
    </View>
    :
    <Action.Icon icon={item.isVisited < 1 ? grassOFF : grassNO} text={item.isVisited < 1 ? '种草' : '已种草'} 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={goFood}>
          <CouponMedia.Header
            cashback={item.cashback}
            image={compressImage(item.poster)}
            badge='note'
          />
          <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.targetId} />
              </View>
            </View>
          </CouponMedia.Body>
        </CouponMedia>
      </CouponCard>
    </View>
  )
}