import React, { useEffect, useMemo, useState } from 'react'
import Taro from "@tarojs/taro";
import { useSelector } from 'react-redux'
import { View, Input, Text, Image, Form } from '@tarojs/components'
import Layout from '../../../layout/index'
import Tab from '../../../compents/tab/index'
import Container from '../../../compents/container/index'
import locationicon from '../../../assets/locationicon.png'
import uploadicon from '../../../assets/uploadicon.png'
import request, { uploadFiles } from '../../../util/request'
import './index.scss'


const index = (props) => {

    const user = useSelector(state => state.user)
    const { shopKeeperList = [] } = user
    const shopId = shopKeeperList[0].shopId || ''
    const [userRole, setUserRole] = useState('1')
    const [pageState, setPageState] = useState('1')
    const [list, setList] = useState([])
    const [imgUrl, setImgUrl] = useState('')
    const [address, setAddress] = useState({})
    const [parking, setParking] = useState({})


    useEffect(() => {


    }, [])


    const onChooseLocation = (type) => {
        console.log(333)
        wx.chooseLocation({
            success: (res) => {
                console.log(res)
                if (type == 'address') {
                    setAddress(res)
                } else {
                    setParking(res)
                }


            }
        })
    }
    const formSubmit = (e) => {
        // console.log(e.detail, 'formSubmit')


        if(!e.detail.value?.title){
            wx.showToast({
                title: '请完善房源信息',
                icon: 'none',
                duration: 2000
              })
            return
        }

        const value = e.detail.value
        const data = {
            ...value,
            // address: `${value.address}____${value.addressdetail}`,
            // parking: `${value.parking}____${value.parkingdetail}`,
            lngLat: `${address.latitude},${address.longitude}`,
            parkLngLat: `${address.latitude},${address.longitude}`,
            
            desc:imgUrl,
        }
        console.log(data,e.detail.value,'formSubmit')
        request({ url: '/taHouse', method: 'post', data:{...data} }).then((res) => {
            if (res.data.code == 1000)
                Taro.navigateBack({
                    delta: 1
                })
        })

    }

    const formReset = () => {
        console.log('formReset')
    }

    const onAdderssChange = (e) => {
        console.log(e,'formReset')
        setAddress({
            ...address,
            address:e.detail.value
        })
    }

    const onParkingAdderssChange = (e) => {
        console.log(e,'formReset')
        setParking({
            ...parking,
            address:e.detail.value
        })
    }
    

    return <View className='addnewhouse'>

        <Form onSubmit={formSubmit} onReset={formReset}>
            {/* <Form onSubmit={this.formSubmit} onReset={this.formReset} >
        <View className='example-body'>
          <Switch name='switch' className='form-switch'></Switch>
        </View>
      </Form> */}

            <Layout>

                <View className='inputstyle-view'>
                    <Text className='title'>房源名称</Text>
                    <Container className='inputstyle-view-card ' style={{ borderRadius: '20rpx', padding: '0 40rpx' }} >
                        <Input name='title' placeholderClass='placeholderinput' className='input' type='text' placeholder='' />
                    </Container>
                </View>
                {/* <View className='inputstyle-view'>
                    <Text className='title'>房屋名称</Text>
                    <Container className='inputstyle-view-card ' style={{ borderRadius: '20rpx', padding: '0 40rpx' }} >
                        <Input name='title' placeholderClass='placeholderinput' className='input' type='text' placeholder='' />
                    </Container>
                </View> */}
                <View className='inputstyle-view'>
                    <Text className='title'>位置信息</Text>
                    <View style={{ display: 'flex' }}>
                        <Container className='inputstyle-view-card' style={{ width: '100%', borderRadius: '20rpx', padding: '0 40rpx' }}>
                            <Input name='shortAddress' value={address.name} disabled placeholderClass='placeholderinput' className='input' type='text' placeholder='' />

                        </Container>
                        <Container className='map-view-icon' onClick={() => onChooseLocation('address')}>
                            <Image className='icon' mode='widthFix' style={{ width: '100%' }} style={{ width: '40rpx' }} src={locationicon} />

                        </Container>
                    </View>
                </View>
                <View className='inputstyle-view'>
                    <Text className='title'>具体地址</Text>
                    <Container className='inputstyle-view-card ' style={{ borderRadius: '20rpx', padding: '0 40rpx' }} >
                        <Input name='address' value={address.address} onInput={onAdderssChange} placeholderClass='placeholderinput' className='input' type='text' placeholder='' />
                    </Container>
                </View>
                <View className='inputstyle-view'>
                    <Text className='title'>停车场地址</Text>
                    <View style={{ display: 'flex' }}>
                        <Container className='inputstyle-view-card' style={{ width: '100%', borderRadius: '20rpx', padding: '0 40rpx' }}>
                            <Input name='shortParking' value={parking.name} disabled placeholderClass='placeholderinput' className='input' type='text' placeholder='' />

                        </Container>
                        <Container className='map-view-icon' onClick={() => onChooseLocation('parking')}>
                            <Image className='icon' mode='widthFix'  style={{ width: '100%' }} style={{ width: '40rpx' }} src={locationicon} />

                        </Container>
                    </View>
                </View>
                <View className='inputstyle-view'>
                    <Text className='title'>具体地址</Text>
                    <Container className='inputstyle-view-card ' style={{ borderRadius: '20rpx', padding: '0 40rpx' }} >
                        <Input name='parking' value={parking.address} onInput={onParkingAdderssChange} placeholderClass='placeholderinput' className='input' type='text' placeholder='' />
                    </Container>
                </View>
                <View className='inputstyle-view'>
                    <Text className='title'>WiFi名称</Text>
                    <Container className='inputstyle-view-card ' style={{ borderRadius: '20rpx', padding: '0 40rpx' }} >
                        <Input name='wifiName' placeholderClass='placeholderinput' className='input' type='text' placeholder='' />
                    </Container>
                </View>

                <View className='inputstyle-view'>
                    <Text className='title'>WiFi密码</Text>
                    <Container className='inputstyle-view-card ' style={{ borderRadius: '20rpx', padding: '0 40rpx' }} >
                        <Input name='wifiPassword' placeholderClass='placeholderinput' className='input' type='text' placeholder='' />
                    </Container>
                </View>
                <View className='inputstyle-view'>
                    <Text className='title'>其他指引</Text>
                    <Container className='inputstyle-view-card ' style={{ borderRadius: '20rpx',textAlign:'center', padding: '0 40rpx' }} >
                        {imgUrl&&<Image className='guide-view-img' mode='widthFix' onClick={() => Taro.chooseImage({
                            count: 1,
                            // sizeType: ['original', 'compressed'],
                            sourceType: ['album'],
                            success: (res) => {
                                // tempFilePath可以作为img标签的src属性显示图片
                                const tempFilePaths = res.tempFilePaths

                                uploadFiles(tempFilePaths).then((res) => {
                                    console.log(res, 'uploadFiles')
                                    setImgUrl(res[0])
                                }).catch((e) => {
                                    console.log(e, 'err')
                                })

                                // setImgurl(tempFilePaths[0])
                            }
                        })} src={imgUrl}></Image>}
                        {!imgUrl&&<View style={{minHeight:'400rpx',paddingTop:'150rpx'}}>
                            <Image className='guide-view-img' mode='widthFix' style={{width:'100rpx'}} onClick={() => Taro.chooseImage({
                            count: 1,
                            // sizeType: ['original', 'compressed'],
                            sourceType: ['album'],
                            success: (res) => {
                                // tempFilePath可以作为img标签的src属性显示图片
                                const tempFilePaths = res.tempFilePaths

                                uploadFiles(tempFilePaths).then((res) => {
                                    console.log(res, 'uploadFiles')
                                    setImgUrl(res[0])
                                }).catch((e) => {
                                    console.log(e, 'err')
                                })

                                // setImgurl(tempFilePaths[0])
                            }
                        })} src={uploadicon}></Image>
                        <View>上传图片</View>
                        </View>}
                        
                        {/* <Input placeholderClass='placeholderinput' className='input' type='text' placeholder='小区/写字楼/大厦等' /> */}
                    </Container>
                </View>


            </Layout>
            <Tab formType="submit" className='addhousetab' pageState='3' value={['取消', '确认新增']} onClick={[(e) => {
                Taro.navigateBack({
                    delta: 1
                })
            }, () => { console.log('33') }]}></Tab>
        </Form>

        {/* Taro.chooseImage({
            sourceType: ['album'],
            success: (res) => {
                const tempFilePaths = res.tempFilePaths
                uploadFiles(tempFilePaths).then((res) => {
                    console.log(res, 'uploadFiles')
                    setImgUrl(res[0])
                })
            }
        }) */}


    </View>
}

export default index