import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text, Input, Radio, RadioGroup, Label } from '@tarojs/components'
import { AtInput, AtForm, AtImagePicker, AtTextarea, AtRadio, AtButton, Picker } from 'taro-ui'

import SearchBarComponent from '../../component/searchBarComponent/searchBarComponent'
import copyrightComponent from '../../component/copyrightComponent/copyrightComponent'


import './goodsPublish.scss'

class GoodsPublish extends Component {

    config = {
        navigationBarTitleText: '商品发布'
    }
    constructor() {
        super(...arguments)
        this.state = {
            selector: ['需求', '供应', '人才'],
            selectorChecked: '需求',
            files: [{
                url: 'https://jimczj.gitee.io/lazyrepay/aragaki1.jpeg',
            },
            {
                url: 'https://jimczj.gitee.io/lazyrepay/aragaki2.jpeg',
            },
            {
                url: 'https://jimczj.gitee.io/lazyrepay/aragaki3.png',
            }],
            list: [
                {
                    value: '美国',
                    text: '美国',
                    checked: false
                },
                {
                    value: '中国',
                    text: '中国',
                    checked: true
                },
                {
                    value: '巴西',
                    text: '巴西',
                    checked: false
                },
                {
                    value: '日本',
                    text: '日本',
                    checked: false
                }
                
            ]
        }
    }
    onChange1 = e => {
        this.setState({
            selectorChecked: this.state.selector[e.detail.value]
        })
    }
    onChange(files) {
        this.setState({
            files
        })
    }
    onFail(mes) {
        console.log(mes)
    }
    onImageClick(index, file) {
        console.log(index, file)
    }
  
    componentWillReceiveProps(nextProps) {
        console.log(this.props, nextProps)
    }

    componentWillUnmount() { }

    componentDidShow() { }

    componentDidHide() { }

    render() {
        return (
            <View className='goods-publish'>
                <SearchBarComponent></SearchBarComponent>
                
               
                
                <View className='goods-category'>
                    <View className='page-section'>

                        <View>
                            <Picker mode='selector' range={this.state.selector} onChange1={this.onChange}>
                                <View className='picker'>
                                    <View className='title-box'>
                                        <Text className='title'><Text className='require'>*</Text>商品分类:</Text> <Text className='selected'>{this.state.selectorChecked}</Text>
                                    </View>

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

                    <View className='input-box'>
                        <Text className='require'>*</Text>
                        <AtInput
                            name='value'
                            title='商品名称：'
                            type='text'
                            value={this.state.value}
                            onChange={this.handleChange.bind(this)}
                        />
                    </View>
                    <View className='input-box'>
                        <Text className='require'>*</Text>
                    <AtInput
                      name='value'
                      title='商品价格：'
                      type='text'
                      placeholder='￥'
                      value={this.state.value}
                      onChange={this.handleChange.bind(this)}
                    />
                </View>
                    <View className='input-box'>
                        <Text className='require'>*</Text>
                    <AtInput
                      name='value'
                      title='商品单位：'
                      type='text'
                      value={this.state.value}
                      onChange={this.handleChange.bind(this)}
                    />
                    </View>
                    
                    <View className='img-box'>
                        
                        <View className='title-box'>
                            <Text className='require'>*</Text>
                            <Text className='title'>上传图片:</Text>
                        </View>
                        
                        <View className='img-container'>
                     
                            <AtImagePicker
                              multiple
                              files={this.state.files}
                              onChange={this.onChange.bind(this)}
                              onFail={this.onFail.bind(this)}
                              onImageClick={this.onImageClick.bind(this)}
                            />

                        </View>
                        
                    </View>

                    <View className='shoptype-box'>
                        <View className='title-box'>
                            <Text className='require'>*</Text>
                            <Text className='title'>店铺分类:</Text>
                        </View>
                        <View className='shoptype-container'>
                            <View className='title-box'>
                                <Text className='title'>国家:</Text>
                            </View>
                            <View className='radio-box'>
                                <RadioGroup>
                                    {this.state.list.map((item, i) => {
                                        return (
                                            <Label className='radio-list__label' for={i} key={i}>
                                                <Radio color='#FF9500' className='radio-list__radio' value={item.value} checked={item.checked}>{item.text}</Radio>
                                            </Label>
                                        )
                                    })}
                                </RadioGroup>
                            </View>
                            <View className='title-box'>
                                <Text className='title'>国家:</Text>
                            </View>
                            <View className='radio-box'>
                                <RadioGroup>
                                    {this.state.list.map((item, i) => {
                                        return (
                                            <Label className='radio-list__label' for={i} key={i}>
                                                <Radio color='#FF9500' className='radio-list__radio' value={item.value} checked={item.checked}>{item.text}</Radio>
                                            </Label>
                                        )
                                    })}
                                </RadioGroup>
                            </View>
                            <View className='title-box'>
                                <Text className='title'>国家:</Text>
                            </View>
                            <View className='radio-box'>
                                <RadioGroup>
                                    {this.state.list.map((item, i) => {
                                        return (
                                            <Label className='radio-list__label' for={i} key={i}>
                                                <Radio color='#FF9500' className='radio-list__radio' value={item.value} checked={item.checked}>{item.text}</Radio>
                                            </Label>
                                        )
                                    })}
                                </RadioGroup>
                            </View>

                        </View>
                       
                    </View>
                   
                    <View className='description-box'>
                        <View className='title-box'>
                            <Text className='title'>商品简介:</Text>
                        </View>
                        
                        <AtTextarea
                          value={this.state.value}
                          onChange={this.handleChange.bind(this)}
                          maxlength='200'
                          placeholder='你的产品简介'
                        />

                    </View>
                </View>
                <View className='button-box'>
                    <View className='button'>
                        <AtButton type='primary' size='small'>发布</AtButton>
                    </View>
                    <View className='button'>
                        <AtButton type='primary' className='button-a'  size='small'>发布并新增</AtButton>
                    </View>
                    <View className='button'>
                        <AtButton type='primary' className='button-a'  size='small'>商品列表</AtButton>
                    </View>
                    
                    

                </View>

                <copyrightComponent></copyrightComponent>

            </View>
        )
    }
}

export default GoodsPublish