import { useState, useEffect } 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 Popup from '@/components/Popup'
import { saveTravel, newTravelMine } 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
  console.log("🚀 ~ file: index.jsx ~ line 24 ~ resourceList", resourceList)
  // 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([])

  const [traveCoumun, setTraveCoumun] = useState()

  useEffect(() => {

    setValueList(travelMine?.records)
    setTraveCoumun(travelMine?.records[0].dayNum)

  }, [travelMine?.records, item])

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

  //列改变


  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("🚀 ~ file: index.jsx ~ line 63 ~ e", e)
    // console.log(e.detail.column);
    const { column, value } = e.detail

    if (column == 0) {

      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 hanleChange = (e) => {
    console.log("🚀 ~ file: index.jsx ~ line 63 ~ e", e)

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


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

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

      //   const firstValue = valueList[firstInx] || ''

      //   const secondValue = numberTrave[secondInx] || ''

      //   const { travelId } = firstValue

      //   //行程内容
      //   const { id } = secondValue//天数
      //   // saveTravel({})
      //   saveTravel(res.travelId, { dayOrder: id, targetId: targetId, targetType: targetType }).then((val) => {
      //     Taro.showToast({
      //       title: '添加成功',
      //       icon: 'none',
      //       duration: 1000
      //     })
      //     resourceList(travelId)
      //   })
      // })

      return;
    } else {
      const [firstInx, secondInx] = e.detail.value

      const firstValue = valueList[firstInx]

      const secondValue = numberTrave[secondInx]

      const { travelId } = firstValue


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

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

          duration: 1000
        })
        resourceList(travelId)

        // setGrowGrass(grassNO)

      })
    }
  }


  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={hanleChange}
        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 / 100 : 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>
  )
}