import useSave from "@/utils/hooks/useSave"
import Taro from "@tarojs/taro"
import { getShopDetail, getShopcity } from '@/services/home'
import { useState, useEffect } from 'react'
import Star from '@/components/Star/Star.jsx'
import pay from '@/assets/icons/housemantj/pay.png'
import msTip from '@/assets/icons/housemantj/foodtip.png'
import wz from '@/assets/icons/housemantj/location.png'
import hongxin from '@/assets/icons/housemantj/已收藏.png'
import baixin from '@/assets/icons/housemantj/收藏.png'
import './style.less'



//套餐卡片
export default (props) => {
  const { item } = props
  const [isSaved, toggleSave] = useSave(item.isSaved, 'shop_package', item.packageId)
  const [city, setCity] = useState({})
  const [detail, setDetail] = useState({})

  const goToPay = () => {
    Taro.navigateTo({
      url: `/pages/PayOrder/index?packageId=${item.packageId}&shopId=${item.shopId}`,
    })
  }

  useEffect(() => {
    getShopDetail(item.shopId).then((res) => {
      setDetail(res)
      getShopcity(res.cityId).then((res2) => {
        setCity(res2)
      })
    })
  }, [])
  const star = parseFloat(((detail.sweetScore + detail.environmentScore + detail.serviceScore) / 3).toFixed(1));

  return (
    <view className='foodCard'>
      <view className='fCleft'>
        <view className='backMoney'>
          返现￥{item.cashback / 100}
        </view>
        <view className='appraise'>
          <Star star={star} />
          <text className='storezf'>{star}</text>
        </view>
        <view>
          <view className='contentImg'>
            <image src={item.poster} className='img1'></image>
            <image src={msTip} className='mstip'></image>
          </view>
          <view className='neirong'>
            <view className='textword'>{(item.description).toString().length > 25 ? (item.description).substring(0, 25) + '...' : (item.description)}</view>
            <view className='jiage'>
              <text className='rmb' >￥&nbsp;&nbsp;</text>
              <text className='p1'><text className='price' >{item.actualPrice / 100}</text>元&nbsp;&nbsp;</text>
              <text className='p2'>门市价<text className='oldprice' >{item.standardPrice / 100}</text>元</text>
            </view>
            <view className='address'>
              <image className='dw' src={wz} />
              <text className='wz'>{city.areaPName}/{city.areaName}</text>
              <view style={{ display: 'inline-block' }} onClick={toggleSave}>
                <image className='star' src={isSaved > 0 ? hongxin : baixin}></image>
                <text className='collection'>{isSaved > 0 ? '已收藏' : '加入收藏'}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view className='fCright' onClick={() => { goToPay() }}>
        <image src={pay} />
        <view>支付</view>
      </view>
      <view className='columnLine'></view>
    </view>

  )
}