import { View, Image, Form, Input, Picker } from "@tarojs/components"
import Taro from "@tarojs/taro"
import { useEffect, useState } from "react"
import withLayout from '@/layouts'
import { useModel } from "@/store"
import addresss from '@/assets/mineImgaes/addresss.png'//地址
import timeImage from '@/assets/icons/comm/timeImage.png'//日期图片

import CustomNav from '@/components/CustomNav'
import ButtontWX from '@/components/ButtontWX'
import { generateOrder } from "@/services/order"
// import BottomMoadl from '@/components/BottomMoadl/index'
import { getMachineryInfo } from "@/services/homes"



import './style.less'

//为了调试，删除了withLayout 记得加上 如果我忘记的话

export default withLayout((props) => {
  //底部弹窗
  // const [showFrame, setShowFrame] = useState(false)
  // const setRecommend = () => {
  //   setShowFrame(!showFrame)
  // }

  const $instance = Taro.getCurrentInstance()
  const { id } = $instance.router.params
  const { sserLocation, setUserLocation } = useModel('userData')

  const [timeSel, setTimeSel] = useState('')
  const [carsInfo, setCarsInfo] = useState({})


  const formSubmit = (e) => {
    console.log('表单输入', e?.detail?.value);
    const { amount, appontmentDate, address } = e?.detail?.value
    // Taro.navigateTo({ url: `/pages/OrderInfo/index?goOrder=${id}` })
    generateOrder({
      charges: carsInfo?.price * amount,
      price: carsInfo?.price,
      amount: amount || '',
      machineryId: carsInfo?.machineryId,
      machineryName: carsInfo?.name,
      machineryType: carsInfo?.typeId,
      typeName: carsInfo?.typeName,
      address: address || '',
      orgId: carsInfo?.orgId,
      // appontmentDate: appontmentDate || '',
      appontmentDate: '2022-03-25 08:00:00',
    }).then((es) => {
      Taro.redirectTo({ url: `/pages/OrderInfo/index?orderId=${es.orderId}` })

    })
  }
  useEffect(() => {
    if (id) {
      getMachineryInfo(id, { location: sserLocation, attached: true }).then((e) => {
        setCarsInfo(e)
        console.log('e', e);
      })
    }
  }, [id, sserLocation])
  const onTimeChange = (e) => {
    console.log('时间选择器', e);
    setTimeSel(e?.detail?.value)

  }
  const cancelPay = () => {
    Taro.navigateBack({
      delta: 1
    })
  }




  return (
    <View className='page-index'>
      <View className='index-navbar'>
        <CustomNav title='订单确认' />
      </View>
      {/* <BottomMoadl frameTitle='支付方式' flag={showFrame} onRecommend={setRecommend} /> */}
      <View className='pagesBox'>
        <Form onSubmit={formSubmit} >
          <View className='example-body-WorkingArea'>
            <View>作业面积/公顷</View>
            <Input name='amount' type='number' className='aTextareaCentent' placeholder='请输入地址信息' />
          </View>
          <View className='example-body-WorkingTime'>
            <View>作业时间：</View>
            <View className='example-body-WorkingTime-TimePicker'>
              <Image src={timeImage} />
              {/* <mp-pickerTime tips='请选择时间' isChinese={1} onChange={myevent} /> */}

              <Picker mode='date' name='appontmentDate' onChange={onTimeChange}>
                <View className='picker' >
                  {timeSel || '请选择日期'}
                </View>
              </Picker>
            </View>

          </View>
          <View className='example-body-WorkingLocation'>
            <View>作业位置：</View>
            <View className='example-body-WorkingLocation-info' onClick={() => { console.log('111111',); }}>
              <Image src={addresss} />
              <Input name='address' disabled className='aTextareaCentent' value='1111111' placeholder='请输入地址信息' />

            </View>
          </View>
          <View className='BottomtBut-box'>
            <ButtontWX onClick={formSubmit} formType='submit' butText='确定' butWidth={315} butHeight={49} butFontSize={16} butBorderRadius={49} />
            <ButtontWX onClick={cancelPay} formType='submit' styleType butText='取消' butWidth={315} butHeight={49} butFontSize={16} butBorderRadius={49} />
          </View>
        </Form>
      </View>

    </View>
  )
})