//myNeeds
import Taro, { Component } from '@tarojs/taro'
import { View, Text, Button } from '@tarojs/components'
import { AtInput, AtButton, Picker, AtIcon, AtModal, AtModalHeader, AtModalContent, AtModalAction, AtPagination } from 'taro-ui'
import URL from '../../serviceAPI.config'

import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'


import './myNeeds.scss'


class MyNeeds extends Component {
  config = {
    navigationBarTitleText: '我的需求'
  }
  constructor() {
    super(...arguments)
    this.state = {
      title: '',
      startDateSel: '',
      endDateSel: '',
      industryType: '',
      needsType: [{ name: '业主需求', id: '4' }, { name: '效果图', id: '5' }],
      needsTypeSelected: { name: '业主需求', id: '4' },
      needsState: [
        { name: '全部', id: '' },
        { name: '作废', id: '0' }
        , { name: '在用', id: '1' },
        { name: '设计中', id: '2' },
        { name: '已设计', id: '3' }],
      needsStateSelected: { name: '全部', id: '' },
      allNeedsList: [],// 我的需求列表
      totalNeeds: 0,// 我的需求数量

    }
  }

  //请求我的需求列表 api GetMyNeedsList
  getGetMyNeedsList({ curr_page = 1, page_count = 10, sd_type = 4 }) {
    Taro.request({
      url: URL.GetMyNeedsList,
      method: 'POST',
      dataType: 'json',

      data: {
        param: JSON.stringify({
          curr_page: curr_page,
          page_count: page_count,
          sd_type: sd_type
        })
      },
      header: {
        'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
        'content-type': 'application/x-www-form-urlencoded',
        'X-Requested-With': 'XMLHttpRequest'
      }
    }).then(res => {
      if (res.data.err_msg === "success") {
        // 判断是否有res.data.supplys ， 如果没有就是空数组[]
        Taro.hideLoading()
        console.log('我的需求列表', res)

        this.setState({
          allNeedsList: res.data.supplys || [],
          totalNeeds: Number(res.data.count)
        })
      }
    })

  }
 // 行业分类筛选列表GetIndustryTypeList
 getGetMyNeedsList() {
  Taro.request({
    url: URL.GetIndustryTypeList,
    method: 'GET',
    dataType: 'json',

    
    header: {
      'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
      'content-type': 'application/x-www-form-urlencoded',
      'X-Requested-With': 'XMLHttpRequest'
    }
  }).then(res => {
    
      console.log('行业分类列表', res)

      // this.setState({
      //   allNeedsList: res.data.supplys || [],
      //   totalNeeds: Number(res.data.count)
      // })
    
  

})}

  // 搜索按钮
  onSearchButtonHandler() {
    Taro.showLoading({ title: '加载中' }).then(() => {
      setTimeout(() => {
        this.searchDemandSupply({})
        this.setState({ currentPage: 1 })
      }, 1000);

    })

  }
  // 新增我的需求
  addDemandSupply() {
    Taro.navigateTo({
      url: '/pages/supplyDemandPublish/supplyDemandPublish'
    })
  }
  titleChange(event) {
    this.setState({ title: event })
  }
  // 修改开始日期
  onStartDateChange = e => {
    this.setState({
      startDateSel: e.detail.value
    })
  }
  // 修改结束日期
  onEndDateChange = e => {
    this.setState({
      endDateSel: e.detail.value
    })
  }




  //   needsStateChange = e => {
  //     this.setState({
  //       needsStatesSelected: this.state.needsState[e.detail.value]
  //     })
  // }
  needsTypeChange = e => {
    this.setState({
      needsTypeSelected: this.state.needsType[e.detail.value]
    })
  }
  needsStateChange = e => {
    this.setState({
      needsStateSelected: this.state.needsState[e.detail.value]
    })
  }

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

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  render() {
    const myNeedsListArrayElement = this.allNeedsList.map((item, index) => {
      return <View className='needs-box' key={index}>
        <View className='industy-type box'>
          <Text classname='title'>行业分类：</Text>
          <Text classname='content'>{item.sd_type}</Text>

        </View>
        <View className='needs-title box'>
          <Text classname='title'>需求标题：</Text>
          <Text classname='content'>{item.sd_title}</Text>

        </View>
        <View className='needs-state box'>
          <Text classname='title'>需求状态：</Text>
          <Text classname='content'>{item.state}</Text>

        </View>
        <View className='update-time box'>
          <Text classname='title'>更新时间：</Text>
          <Text classname='content'>{item.update_date}</Text>

        </View>
        <View className='info-button-box'>
          <View className='button' onClick={this.goToSupplyDemandPage.bind(this, item.sd_id)}>
            <AtButton type='primary' size='small'>查看</AtButton>
          </View>
        </View>

      </View>
    })
    return (
      <View className='myNeeds'>
        {/* 需求标题 */}
        <View className='input-box'>

          <AtInput
            name='value'
            title='需求标题：'
            placeholder='需求标题·'
            type='text'
            value={this.state.title}
            onChange={this.titleChange.bind(this)}
          />
        </View>
        {/* 开始和结束日期 */}
        <View className='page-section'>
          <View className='picker-box'>
            <Picker mode='date' className='picker-container' onChange={this.onStartDateChange}>
              <View className='picker'>
                <View className='title-box'>
                  <Text className='title'>开始日期:</Text> <Text className='selected'>{this.state.startDateSel}</Text>
                </View>

              </View>
            </Picker>
            <Picker className='picker-container' mode='date' start={this.state.startDateSel} onChange={this.onEndDateChange}>
              <View className='picker'>
                <View className='title-box'>
                  <Text className='title'>结束日期:</Text> <Text className='selected'>{this.state.endDateSel}</Text>
                </View>
              </View>
            </Picker>

          </View>
        </View>
        {/* 行业分类 */}

        <View className='page-section'>
          <View>
            <Picker mode='selector' rangeKey='name' range={this.state.demandSupplyCate} onChange={this.demSupplyCateChange.bind(this)}>
              <View className='picker'>
                <View className='title-box'>
                  <Text className='title'>行业分类:</Text> <Text className='selected'>{this.state.demandSupplyCateSelected.name}</Text>
                </View>
              </View>
            </Picker>
          </View>
        </View>
        {/* 需求类型 */}
        <View className='page-section'>
          <View>
            <Picker mode='selector' rangeKey='name' range={this.state.needsType} onChange={this.needsTypeChange.bind(this)}>
              <View className='picker'>
                <View className='title-box'>
                  <Text className='title'>需求类型:</Text> <Text className='selected'>{this.state.needsTypeSelected.name}</Text>
                </View>
              </View>
            </Picker>
          </View>
        </View>
        {/* 需求状态 */}
        <View className='page-section'>

          <View>
            <Picker mode='selector' rangeKey='name' range={this.state.needsState} onChange={this.needsStateChange.bind(this)}>
              <View className='picker'>
                <View className='title-box'>
                  <Text className='title'> 需求状态:</Text> <Text className='selected'>{this.state.needsStateSelected.name}</Text>
                </View>

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



        <View className='button-box'>
          <View className='button' onClick={this.onSearchButtonHandler.bind(this)}>
            <AtButton type='primary' size='small'>
              <AtIcon value='search' size='12' color='white'></AtIcon>
              搜索</AtButton>
          </View>
          <View className='button' onClick={this.addDemandSupply.bind(this)}>
            <AtButton type='primary' className='button-a' size='small'>
              <AtIcon value='add' size='12' color='white'></AtIcon>
              新增</AtButton>
          </View>
        </View>
        <View className='total'>
          共<Text className='count'>{this.state.totalNeeds}</Text> 条记录
        </View>
        {/* 我的需求信息 */}
        <View className='info-box'>
          {myNeedsListArrayElement}
        </View>

        <View className='pagination-box'>
          <AtPagination
            total={this.state.totalDemandSupply}
            pageSize={10}
            current={this.state.currentPage}
            onPageChange={this.state.paginationNav.bind(this)}
          >
          </AtPagination>

        </View>

      </View>
    )
  }
}

export default MyNeeds