import Taro from '@tarojs/taro'
import useSave from "@/utils/hooks/useSave"
import { getShopDetail, getShopcity } from '@/services/home'
import { useState, useEffect } from 'react'
import Star from '@/components/Star/Star.jsx'
import position from '@/assets/icons/GuideCheck/position_logo.png'
import Pay from '@/assets/icons/GuideCheck/Pay_logo.png'

import starOn from '@/assets/icons/housemantj/onlove.png'
import starOff from '@/assets/icons/housemantj/景点爆赞.png'
import food from '@/assets/icons/ProCard/food.png'
import ProCard_hot from '@/assets/icons/ProCard/ProCard_hot.png'


//入住指引--老板推荐



import './style.less'

export default (props) => {
  const { item, cardNavigateTo } = props
  const { shopId } = props.item
  const [isSaved, toggleSave] = useSave(item.isSaved, 'shop_package', item.packageId)
  const [city, setCity] = useState({})
  const [detail, setDetail] = useState({})




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

  useEffect(() => {
    getShopDetail(item.shopId).then((res) => {
      setDetail(res)
      getShopcity(res.cityId).then((x) => {
        setCity(x)
      })
    })
  }, [])
  const star = parseFloat(((detail.sweetScore + detail.environmentScore + detail.serviceScore) / 3).toFixed(1));
  return (
    <view class='container'>
      <view class='wrapper'>
        <view class='left-complete-one'  >
          <image className='left-image-1' src={ProCard_hot}></image>
          <view className='left-viewText'>
            返现￥{(item.cashback / 100)?.toFixed(2)}
          </view>
          {/* 评分 */}
          <view className='card-box-star'>
            <Star star={star} />
            <text className='card-star-text' >{star}</text>
          </view>
          <view className='title-image' onClick={() => { goFood() }}>
            <image className='image-1' mode='scaleToFill' src={item.poster}></image>
            <image className='image-2' src={food}></image>
          </view>
          <view className='title-content'>
            <view className='Pro-title' onClick={() => { goFood() }} >
              <view className='title-text'>{(item.description).toString().length > 25 ? (item.description).substring(0, 25) + '...' : (item.description)}</view>
            </view>
            <text className='title-money' >￥{(item.actualPrice / 100)?.toFixed(2)}元<text className='title-money-2'>门市价{(item.standardPrice / 100)?.toFixed(2)}元</text></text>
            <view className='title-position-on'>
              <image className='title-position' src={position} />
              <text className='title-position-image'>{city.areaPName}/{city.areaName}</text>
              <view style={{ display: 'inline-block' }} onClick={toggleSave}>

                <image className='title-on' src={isSaved > 0 ? starOn : starOff} />
                <text className='title-on-text'>{isSaved > 0 ? '已收藏' : '加入收藏'}</text>
              </view>
            </view>
          </view>
        </view>
        <view class='right-complete-two'>
          <view className='right-content' onClick={() => { Taro.navigateTo({ url: `/pages/PayOrder/index?packageId=${item.packageId}` }); }}>
            {/* <view className='right-number'>×1</view> */}
            <image className='right-image' src={Pay} />
            <view className='right-title'>支付</view>
          </view>
        </view>
      </view>
    </view>


  )
}