//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 Interaction from '../../component/interaction/interaction'
import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'


import './myNeeds.scss'


class MyNeeds extends Component {
  config = {
    navigationBarTitleText: '我的需求'
  }
  constructor() {
    super(...arguments)
    this.state = {
      title: '',
      startDateSel: '',
      endDateSel: '',
      industryType: '',
      industryTypeSelected: { name: '', id: '' },
      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: '' },
      pageCount: 10,// 列表数量
      allNeedsList: [],// 我的需求列表
      totalNeeds: 0,// 我的需求数量
      currentPage: 1,
      ///---行业分类 开始
      objectMultiArray: [],
      multiIndex: [0, 0],
      formatInWindow: [],
      ///---行业分类 结束
      needsItem: '',// 确认框提示时 使用的供求名
      isDeleteModal:false,
      IndustryTypeList:[]

    }
  }
 

  //请求我的需求列表 api GetMyNeedsList
  getMyNeedsList({ curr_page = 1,
    page_count = 10,
    sd_type = 4,
    sd_title = '',
    update_dateL = '',
    update_dateU = '',
    class_id = '',
    state = ""
  }) {
    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,
          sd_title: sd_title,
          update_dateL: update_dateL,
          update_dateU: update_dateU,
          class_id: class_id,
          state: state
        })
      },
      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)
        })
      }
    })

  }
  //删除我的需求 api DeleteMyNeeds
  deleteMyNeeds({ demandId = 10 }) {
    Taro.request({
      url: URL.DeleteMyNeeds,
      method: 'POST',
      dataType: 'json',
      data: {

        demandId: demandId

      },
      header: {
        'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
        'content-type': 'application/x-www-form-urlencoded',
        'X-Requested-With': 'XMLHttpRequest'
      }
    }).then(res => {
      console.log('删除我的列表', res)
      if (res.data.err_msg === "success") {
        Taro.showToast({
          title: '删除成功',
          icon: 'success',
          duration: 1500
        })
        setTimeout(() => {
          this.getMyNeedsList({
          })
        }, 1500);
      } else {
        Taro.showToast({
          title: res.data.err_msg,
          icon: 'none',
          duration: 1500
        })
      }
    })

  }
  // 行业分类筛选列表GetIndustryTypeList
  getIndustryTypeList() {
    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({IndustryTypeList:res.data.data})


      this.formatIndustryType(res.data.data)
      this.formatIndustryTypei(res.data.data)

    }).catch(err => {
      console.log('行业分类列表获取失败', err)
    })
  }

  // 第一种formate 用于底部弹层滚动时的数据
  formatIndustryType(data) {
    const newIndustryType = []
    for (let outter of data) {
      let outterObject = { name: outter.class_name, id: outter.class_id, child: [] }
      if (outter.child.length) {
        for (let inner of outter.child) {
          outterObject.child.push({ name: inner.class_name, id: inner.class_id })
        }
      } else {
        outterObject.child.push({ name: '', id: '' })
      }
      newIndustryType.push(outterObject)
    }
    this.setState({ formatInWindow: newIndustryType })
    console.log('newIndustryType1', newIndustryType)

  }
  //第二种format 用于底部弹层的初始化数据
  formatIndustryTypei(data) {
    const firstArray = []
    const secondArray = []
    for (let outter of data) {
      firstArray.push({ name: outter.class_name, id: outter.class_id })
      if (outter.child.length) {
        for (let inner of outter.child) {
          secondArray.push({ name: inner.class_name, id: inner.class_id })
        }
      }
    }
    this.setState({ objectMultiArray: [firstArray, secondArray] }, () => {
      console.log('newIndustryType2', this.state.objectMultiArray)
    })


  }

  // 搜索按钮
  onSearchButtonHandler() {
    Taro.showLoading({ title: '加载中' }).then(() => {
      setTimeout(() => {
        this.getMyNeedsList({
          curr_page: this.currentPage,
          page_count: this.state.pageCount,
          sd_type: this.state.needsTypeSelected.id,
          sd_title: this.state.title,
          update_dateL: this.state.startDateSel,
          update_dateU: this.state.endDateSel,
          class_id: this.state.industryTypeSelected.id,
          state: this.state.needsStateSelected.id
        })
        this.setState({ currentPage: 1 })
      }, 1000);

    })

  }
  // 新增我的需求
  addNeeds() {
    Taro.navigateTo({
      url: '/pages/myNeedsPublish/myNeedsPublish'
    })
  }
  titleChange(event) {
    this.setState({ title: event })
  }
  // 修改开始日期
  onStartDateChange = e => {
    this.setState({
      startDateSel: e.detail.value
    })
  }
  // 修改结束日期
  onEndDateChange = e => {
    this.setState({
      endDateSel: 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]
    })
  }
  goToMyNeedsViewPage() {
    Taro.navigateTo({
      url: '/pages/myNeedsView/myNeedsView'
    })
  }
  goToMyNeedsEditPage() {
    Taro.navigateTo({
      url: '/pages/myNeedsEdit/myNeedsEdit'
    })
  }
  deleteButton(item) {
    this.setState({isDeleteModal:true,needsItem:item})
  
  }
  handleWindowModCancel(){
    this.setState({isDeleteModal:false})
  }
  handleWindowConfirm(){
    this.setState({isDeleteModal:false})
    this.deleteMyNeeds({ demandId: this.state.needsItem.sd_id })
  }


  // 翻页导航
  paginationNav(type) {
    console.log(type.current)
    this.setState({ currentPage: type.current, }, () => {
      this.getMyNeedsList({
        curr_page: this.state.currentPage,
        page_count: this.state.pageCount,
        sd_type: this.state.needsTypeSelected.id,
        sd_title: this.state.title,
        update_dateL: this.state.startDateSel,
        update_dateU: this.state.endDateSel,
        class_id: this.state.industryType,
        state: this.state.needsStateSelected.id
      })
    })

  }
  //--------------------开始-行业分类picker
  bindMultiPickerChange(e) {
    //判断如果formatInWindow 的子类为空 那就取父类， 反之取子类
    let industryTypeSelected
    if( this.state.formatInWindow[e.detail.value[0]].child[e.detail.value[1]].id===''){
      industryTypeSelected = this.state.formatInWindow[e.detail.value[0]]
    }else{
      industryTypeSelected = this.state.formatInWindow[e.detail.value[0]].child[e.detail.value[1]]
    }
   
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setState({
      multiIndex: e.detail.value, industryTypeSelected: industryTypeSelected
    })


  }
  bindMulPickerColChge(e) {
    console.log('修改的列为', e.detail.column, '，值为', e.detail.value)
    const data = {
      objectMultiArray: this.state.objectMultiArray,
      multiIndex: this.state.multiIndex
    }
    data.multiIndex[e.detail.column] = e.detail.value
    switch (e.detail.column) {
      case 0:
        switch (data.multiIndex[0]) {
          case 0:
            data.objectMultiArray[1] = this.state.formatInWindow[0].child
            break
          case 1:
            data.objectMultiArray[1] = this.state.formatInWindow[1].child
            break
          case 2:
            data.objectMultiArray[1] = this.state.formatInWindow[2].child
            break
          case 3:
            data.objectMultiArray[1] = this.state.formatInWindow[3].child
            break
          case 4:
            data.objectMultiArray[1] = this.state.formatInWindow[4].child
            break
          case 5:
            data.objectMultiArray[1] = [{ name: '' }]
            break
          case 6:
            data.objectMultiArray[1] = this.state.formatInWindow[6].child
            break
          case 7:
            data.objectMultiArray[1] = this.state.formatInWindow[7].child
            break
          case 8:
            data.objectMultiArray[1] = this.state.formatInWindow[8].child
            break
          case 9:
            data.objectMultiArray[1] = this.state.formatInWindow[9].child
            break
          case 10:
            data.objectMultiArray[1] = this.state.formatInWindow[10].child
            break
          case 11:
            data.objectMultiArray[1] = this.state.formatInWindow[11].child
            break
          case 12:
            data.objectMultiArray[1] = this.state.formatInWindow[12].child
            break
          case 13:
            data.objectMultiArray[1] = this.state.formatInWindow[13].child
            break
          case 14:
            data.objectMultiArray[1] = this.state.formatInWindow[14].child
            break
        }
        data.multiIndex[1] = 0
        data.multiIndex[2] = 0
        break

    }
    console.log(data.multiIndex)
    this.setState({
      multiIndex: data.multiIndex,
      objectMultiArray: data.objectMultiArray
    })
  }

  //--------------------结束-行业分类picker

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

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }


  getDataFromChild(value){
    console.log('从子组件传回来的值',value)
  }
  render() {
    const myNeedsListArrayElement = this.state.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_name}</Text>
        </View>
        <View className='update-time box'>
          <Text className='title'>更新时间：</Text>
          <Text className='content'>{item.update_date}</Text>
        </View>
        {item.state === '1' ? <View className='info-button-box'>
          <View className='button' onClick={this.goToMyNeedsViewPage.bind(this, item.sd_id)}>
            <AtButton type='primary' size='small'>查看</AtButton>
          </View>
          <View className='button' onClick={this.goToMyNeedsEditPage.bind(this, item.sd_id)}>
            <AtButton type='primary' size='small'>编辑</AtButton>
          </View>
          <View className='button-a' onClick={this.deleteButton.bind(this, item)}>
            <AtButton type='primary' size='small'>删除</AtButton>
          </View>
        </View > :
          <View className='info-button-box'>
            <View className='button' onClick={this.goToMyNeedsViewPage.bind(this, item.sd_id)}>
              <AtButton type='primary' size='small'>查看</AtButton>
            </View>
          </View>
        }

      </View>
    })
    const deleteModalWindowElement= <AtModal isOpened={this.state.isDeleteModal}>
    <AtModalHeader>提示</AtModalHeader>
    <AtModalContent>
      确认删除{this.state.needsItem.sd_title}？
    </AtModalContent>
    <AtModalAction>  <Button onClick={this.handleWindowModCancel.bind(this)}>取消</Button> <Button className='orange' onClick={this.handleWindowConfirm.bind(this)}>确定</Button>  </AtModalAction>
  </AtModal>
    return (
      <View className='myNeeds'>
        {/* 删除模态框 */}
        {deleteModalWindowElement}
        {/* 需求标题 */}
        <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='selected date'>{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='selected date'>{this.state.endDateSel}</Text>
                </View>
              </View>
            </Picker>

          </View>
        </View>
        {/* 行业分类 */}
        {/* 行业分类开始 */}
        <Interaction data={this.state.IndustryTypeList} onPassDataToChild={this.getDataFromChild.bind(this)}></Interaction>
        {/* <View class='page-section'>
          <Picker
            rangeKey='name'
            mode='multiSelector'
            onChange={this.bindMultiPickerChange.bind(this)}
            onColumnchange={this.bindMulPickerColChge.bind(this)}
            value={this.state.multiIndex}
            range={this.state.objectMultiArray}
          >
            <View class='picker type'>
              <View className='title-box'>
                <Text className='title'>行业分类：</Text>
                {this.state.objectMultiArray.length? <Text> <Text className='first-col'> {this.state.objectMultiArray[0][this.state.multiIndex[0]].name}</Text>
                <Text className='second-col'> {this.state.objectMultiArray[1][this.state.multiIndex[1]].name}</Text></Text>:null}
               
              </View>
            </View>
          </Picker>
        </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.addNeeds.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>
        {/* 我的需求信息 */}
        {this.state.totalNeeds != "0" ? <View className='info-box'>
          {myNeedsListArrayElement}
        </View> : <View className='nomore' >
            没有更多了....
    </View >}

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

        </View>
        <CopyrightComponent name='Wallace'></CopyrightComponent>

      </View>
    )
  }
}

export default MyNeeds