import { useState, useEffect } from "react"
import { Image, View, Text, Swiper, SwiperItem } from "@tarojs/components"
import Taro from "@tarojs/taro"
import CustomNav from "@/components/CustomNav"
import withLayout from '@/layouts'
import ButtontWX from "@/components/ButtontWX"
import decorate from "@/assets/icons/comm/decorate.png"
import addresss from '@/assets/mineImgaes/addresss.png'//地址
import { getMachineryInfo } from "@/services/homes"
import TextContent from "./TextContent"


import './style.less'



export default withLayout((props) => {
  console.log("🚀 ~ file: index.jsx ~ line 14 ~ props", props)

  const $instance = Taro.getCurrentInstance()
  const { id, location } = $instance.router.params

  const [carsInfo, setCarsInfo] = useState({})
  const [imagesList, setImagesList] = useState([])
  const [contentList, setContentList] = useState([])


  useEffect(() => {
    if (id) {
      getMachineryInfo(id, { location: location, attached: true }).then((e) => {
        setImagesList(e.imagesList)
        setContentList(e.contentList)
        setCarsInfo(e)

        console.log('setCarsInfosetCarsInfosetCarsInfo', e);
      })
    }



  }, [$instance.router.params, id, location])

  console.log("🚀 ~ file: index.jsx ~ line 23 ~ carsInfo", carsInfo)


  const startReserve = () => {
    Taro.navigateTo({ url: `/pages/OrderConfirmation/index?id=${carsInfo?.machineryId}&location=${location}` })

  }

  const goMapInfo = (res) => {
    Taro.navigateTo({ url: `/pages/CheckMap/index?id=${carsInfo?.machineryId}&location=${location}` })

  }

  return (
    <View className='page-index'>

      <View className='index-navbar'>
        <CustomNav title='查看详情' />
      </View>
      <scroll-view scrollY style='height: 100%;' >

        <View >

          {/* <Image style={{ width: '100%' }} src='http://img3.jc001.cn/img/001/1/1512/15566fd0311736f.jpg' /> */}
          <Swiper
            mode='scaleToFill'
            className='swiper-box-info'

          >
            {imagesList.map((item, inx) => (
              <SwiperItem key={inx}>
                <Image src={item.url} className='storeImageinfo' />
              </SwiperItem>
            ))}
          </Swiper>

          <View className='CarsContent-TextBox'>
            <View className='CheckDetails-bottom-box-flaxBox-liftText'>
              <View className='CheckDetails-bottom-box-flaxBox-liftText-Titles'>{carsInfo?.name}</View>
              <View className='CheckDetails-bottom-box-flaxBox-liftText-price'>{carsInfo?.price}/<Text>公顷</Text></View>
            </View>
            <View className='content-header-box-map-Info' onClick={() => goMapInfo('222888')}>
              <View className='content-header-box-map-Info-liftCentent'>
                <Image src={addresss} />
                <View>距离当前位置8.8公里&gt;&gt;</View>
              </View>
            </View>
            <View className='content-header-box-map-Info-carsName'>{carsInfo?.orgName}</View>
            <View className='startReserve-centent'>
              <View className='articleTitle-box-Details'>
                <Image src={decorate} />
                <View>农机详情</View>
                <Image src={decorate} />
              </View>
              {
                contentList.map((item, index) => {

                  return (
                    <TextContent item={item} />
                  )


                })
              }


            </View>
            <View className='startReserve-Bottom-oen'>
              <ButtontWX butText='预约' onClick={startReserve} butWidth={300} butHeight={49} butFontSize={16} butBorderRadius={49} />

            </View>


          </View>
        </View>
      </scroll-view>

    </View >
  )
})