import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { AtInput, AtImagePicker, AtTextarea, AtButton, Picker, AtToast } from 'taro-ui'

import copyrightComponent from '../../component/copyrightComponent/copyrightComponent'
import URL from '../../serviceAPI.config'


import './supplyDemandPublish.scss'



class SupplyDemand extends Component {

    config = {
        navigationBarTitleText: '供求发布'
    }
    constructor() {
        super(...arguments)
        this.state = {
            demandingSupplyCate: ['需求', '供应', '人才'], //供求类型选择
            demandingSupplyCateSelected: '需求',// 当前供求类型
            demandingSupplyState: ['上架', '下架'], // 状态选择
            demandingSupplyStateSelected: '上架',// 当前状态
            title: '',
            contactName: '',
            contactNumber: '',
            contactAddress: '',
            content: '',
            pickerImageUrl: [], // 上传的图片
            ImagesInfo: [],// 后台传回来的图片信息
            isUploadImageSuccess: false,
            uploadImageTextTip: '',
            isFormCompleted: false,
            isUploadDemSupSuccess: false,
            uploadDemSupTextTip: '',

        }
    }

    // 上传供求api
    uploadSupplyDemand() {
        console.log(this.state.ImagesInfo)
        if (this.state.demandingSupplyCateSelected && this.state.title && this.state.contactName && this.state.contactNumber && this.state.contactAddress && this.state.content && this.state.demandingSupplyStateSelected) {
            this.uploadDemSup({
                sd_type:"2",
                sd_title:this.state.title,
                user_name:this.state.contactName,
                user_phone:this.state.contactNumber,
                user_address:this.state.contactAddress,
                sd_desc:this.state.content,
                state:"1"})
        } else {
            this.setState({ uploadDemSupTextTip: '请填写完表格', isUploadDemSupSuccess: true }, () => {
                setTimeout(() => {
                    this.setState({ isUploadDemSupSuccess: false })
                }, 2000)
            })
        }

   
    }

    // 这个需要写一个uploadDemSup 上传供求 的api
    uploadDemSup({sd_type="2",sd_title="第4方",user_name="郑燕彬",user_phone="13509302402",user_address="",sd_desc="但是发射点",state="1"}){
            const file_path=[];
            this.state.ImagesInfo.forEach((item)=>{
                file_path.push({
                    file_name: item.file_name,
                    file_size: item.file_size, 
                    file_path: item.file_path,
                    thumb_path:item.thumb_path
                })
            })
            Taro.request({
            url: URL.UploadSupplyDemand,
            method: 'POST',
            dataType: 'json',
            data: {
                action: 1,
                sdInfo: JSON.stringify({
                    sd_type: sd_type,
                    sd_title: sd_title,
                    user_name: user_name, 
                    user_phone: user_phone,
                    user_address: user_address,
                    sd_desc: sd_desc,
                    state: state, 
                    file_path:file_path})
            },
            header: {
                'content-type': 'application/x-www-form-urlencoded',
                'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
            .then(res => {
                console.log('上传供求', res)
                if(res.data.err_msg==='success'){
                    console.log(11111)
                    this.setState({ uploadDemSupTextTip: '上传成功', isUploadDemSupSuccess: true }, () => {
                        setTimeout(() => {
                            this.setState({ isUploadDemSupSuccess: false })
                            Taro.navigateTo({
                                 url: '/pages/mySupplyDemand/mySupplyDemand'
                              })
                        }, 2000)
                    })
                }else{
                    console.log('上传供求失败')
                }

            }
            )

    }


    // 上传图片
    onChangeImg(files, operationType, index) {
        const that = this
        if (operationType === 'add') {
            Taro.uploadFile({
                url: URL.UploadDSPorductImage,
                filePath: files[files.length - 1].url,
                name: 'file',
                
                header: {
                    'content-type': 'multipart/form-data; boundary=----WebKitFormBoundaryAWxeadaAVmRVQCiz',
                    'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
                    'X-Requested-With': 'XMLHttpRequest'
                },
                success(response) {
                    const data = JSON.parse(response.data)
                    const imagePath = URL.Base + data.file_path
                    const newPickerImageUrl = that.state.pickerImageUrl.concat({ url: imagePath })
                    const newImageInfo = that.state.ImagesInfo.concat(data)
                    that.setState({ pickerImageUrl: newPickerImageUrl, isUploadImageSuccess: true, uploadImageTextTip: '图片上传成功', ImagesInfo: newImageInfo }, () => {
                        setTimeout(() => {
                            that.setState({ isUploadImageSuccess: false })
                        }, 2000)
                    })
                }
            })
        }
        if (operationType === 'remove') {
            this.state.pickerImageUrl.splice(index, 1);
            this.setState({ files: this.state.pickerImageUrl });
            that.setState({ isUploadImageSuccess: true, uploadImageTextTip: '删除成功' }, () => {
                setTimeout(() => {
                    that.setState({ isUploadImageSuccess: false })
                }, 2000)
            })
        }
    }
    // 修改供求类型
    demandingSupplyCate = e => {
        this.setState({
            demandingSupplyCateSelected: this.state.demandingSupplyCate[e.detail.value]
        })
    }
    // 修改供求状态
    demSupplyStateChange = e => {
        this.setState({
            demandingSupplyStateSelected: this.state.demandingSupplyState[e.detail.value]
        })
    }
    //改标题
    titleChange(event) {
        this.setState({ title: event })
    }
    contactNameChange(event) {
        this.setState({ contactName: event })
    }
    contactNumberChange(event) {
        this.setState({ contactNumber: event })
    }
    contactAddressChange(event) {
        this.setState({ contactAddress: event.target.value })
    }
    contentChange(event) {
        this.setState({ content: event.target.value })
    }
    goToMyDemSupPage(){
        Taro.navigateTo({
             url: '/pages/mySupplyDemand/mySupplyDemand'
          })
    }


    componentDidMount() {
        // this.uploadSupplyDemand()
    }
    componentWillReceiveProps(nextProps) {
        console.log(this.props, nextProps)
    }

    componentWillUnmount() { }

    componentDidShow() { }

    componentDidHide() { }

    render() {
        const imageUploadSuccessElement = <AtToast
          isOpened={this.state.isUploadImageSuccess}
          text={this.state.uploadImageTextTip}
          duration={2000}
        ></AtToast>
        const demandSupplyUploadSuccessElement = <AtToast
          isOpened={this.state.isUploadDemSupSuccess}
          text={this.state.uploadDemSupTextTip}
          duration={2000}
        ></AtToast>
       
        return (
            <View className='supply-demand'>
                {/* 图片上传模态框 */}
                {imageUploadSuccessElement}
                {/* 商品发布模态框 */}
                {demandSupplyUploadSuccessElement}
               
                <View className='page-section'>
                    <View>
                        <Picker mode='selector' range={this.state.demandingSupplyCate} onChange={this.demandingSupplyCate.bind(this)}>
                            <View className='picker'>
                                <View className='title-box'>
                                    <Text className='title'><Text className='require'>*</Text>供求类型:</Text> <Text className='selected'>{this.state.demandingSupplyCateSelected}</Text>
                                </View>

                            </View>
                        </Picker>
                    </View>
                </View>
                <View className='border-box'>
                    <Text className='require'>*</Text><AtInput
                      name='value'
                      title='需求标题：'
                      type='text'
                      value={this.state.title}
                      onChange={this.titleChange.bind(this)}
                    />
                </View>
                <View className='input-box'>
                    <Text className='require'>*</Text>
                    <AtInput
                      name='value'
                      title='联系人：'
                      type='text'
                      value={this.state.contactName}
                      onChange={this.contactNameChange.bind(this)}
                    />
                </View>
                <View className='input-box'>
                    <Text className='require'>*</Text>
                    <AtInput
                      name='value'
                      title='联系电话：'
                      type='number'
                      value={this.state.contactNumber}
                      onChange={this.contactNumberChange.bind(this)}
                    />
                </View>
                <View className='demanding-box'>
                    <View className='title-box'>
                        <Text className='title'><Text className='require'>*</Text>联系地址:</Text>
                    </View>

                    <AtTextarea
                      value={this.state.contactAddress}
                      onChange={this.contactAddressChange.bind(this)}
                      maxlength='200'
                      placeholder='联系地址'
                    />
                </View>
                <View className='demanding-box'>
                    <View className='title-box'>
                        <Text className='title'><Text className='require'>*</Text>需求内容:</Text>
                    </View>
                    <AtTextarea
                      value={this.state.content}
                      onChange={this.contentChange.bind(this)}
                      maxlength='200'
                      placeholder=''
                    />
                </View>
                <View className='img-box'>
                    <View className='title-box'>
                        <Text className='title'>需求图片:</Text>
                        <View className='warn'>(最多4张)</View>
                    </View>

                    <View className='img-container'>
                        <AtImagePicker
                          multiple
                          showAddBtn={this.state.pickerImageUrl.length<4}
                          files={this.state.pickerImageUrl}
                          onChange={this.onChangeImg.bind(this)}
                          onFail={this.onFail.bind(this)}
                          onImageClick={this.onImageClick.bind(this)}
                        />
                    </View>

                </View>
                <View className='page-section'>

                    <View>
                        <Picker mode='selector' range={this.state.demandingSupplyState} onChange={this.demSupplyStateChange}>
                            <View className='picker'>
                                <View className='title-box'>
                                    <Text className='title'> <Text className='require'>*</Text>状态:</Text> <Text className='selected'>{this.state.demandingSupplyStateSelected}</Text>
                                </View>

                            </View>
                        </Picker>
                    </View>
                </View>

                <View className='button-box'>
                    <View className='button' onClick={this.uploadSupplyDemand.bind(this)}>
                        <AtButton type='primary' size='small'>发布</AtButton>
                    </View>
                    {/* <View className='button'>

                        <AtButton type='primary' className='button-a' size='small'>发布并新增</AtButton>
                    </View> */}
                    <View className='button' onClick={this.goToMyDemSupPage.bind(this)}>
                        <AtButton type='primary' className='button-a' size='small'>我的供求</AtButton>
                    </View>
                </View>
                <copyrightComponent></copyrightComponent>


            </View>
        )
    }
}

export default SupplyDemand