import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, Button } from '@tarojs/components'
import { AtIcon, AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui'

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


import './myNeedsView.scss'
import loginExpired from '../../util/loginExpired';



class SupplyDemandView extends Component {
  config = {
    navigationBarTitleText: '需求查看'
  }
  constructor() {
    super(...arguments)
    this.state = {
      industryTypeSelected: '',
      needsType: [{ name: '业主需求', id: '4' }, { name: '效果图', id: '5' }],
      needsTypeSelected: { name: '业主需求', id: '4' },
      needsState: [
        { name: '作废', id: '0' },
        { name: '在用', id: '1' },
      ],
      needsStateSelected: { name: '全部', id: '' },
      title: '',
      browsing: '',
      sd_id: '', //需求id
      contactName: '',
      contactNumber: '',
      contactAddress: '',
      content: '',//描述
      pickerImageUrl: [],
      ImagesInfo: [],
      isShowAllButtons: true// 是否显示所有按钮
    }
  }
  //获取需求信息api 
  getSingleMyNeedInfo() {
    Taro.request({
      // url: URL.EditMyNeeds,
      url: URL.supplyDemandDetails,
      method: 'GET',
      dataType: 'json',
      data: {
        demandId: this.$router.params.id,
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded',
        'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
        'X-Requested-With': 'XMLHttpRequest'
      }
    })
      .then(res => {
        console.log('需求详情获取成功', res)
        // const selectedType = this.state.demandingSupplyCate.filter(item => item.id == res.data.sdInfo.sd_type)[0]
        // const selectedState = this.state.needsState.filter(item => item.id == res.data.sdInfo.state)[0]
        Taro.hideLoading()
        if (res.data.err_code === 0) {
          let industryType = {}
          const classId = res.data.sdInfo.class_id
          for (let outter of res.data.supplyTree) {
            if (outter.children) {
              for (let inner of outter.children) {
                if (inner.class_id === classId) {
                  industryType.name = inner.class_name
                  industryType.id = inner.class_id
                  break
                }
              }
            }
            if (outter.class_id === classId) {
              industryType.name = outter.class_name
              industryType.id = outter.class_id
              break
            }
          }

          // const needsType = this.state.needsType.filter(item => {
          //   return item.id === res.data.sdInfo.sd_type
          // })[0]
          // const imageFile = res.data.sdInfo.file_path.map(item => { return { url: URL.Base + item.file_path } })
          // const needsState = this.state.needsState.filter(item => {
          //   return item.id === res.data.sdInfo.state
          // })[0]
          this.setState({
            sd_id: res.data.sdInfo.sd_id,
            industryTypeSelected: industryType,
            needsTypeSelected: needsType,
            title: res.data.sdInfo.sd_title,
            browsing: res.data.sdInfo.browse_times,
            contactName: res.data.sdInfo.user_name,
            contactNumber: res.data.sdInfo.user_phone,
            contactAddress: res.data.sdInfo.user_address,
            content: res.data.sdInfo.sd_desc,
            needsStateSelected: needsState,
            pickerImageUrl: imageFile,
            ImagesInfo: res.data.sdInfo.file_path,
            isDeleteModal: false,
          })
        } else if (res.data.err_code === 88888) {
          loginExpired(res)
        } else {
          this.setState({
            isShowAllButtons: false
          })
          Taro.showToast({
            title: res.data.err_msg,
            icon: 'none'
          })
        }


      }

      )
      .catch(error => {
        console.log('供求详情获取失败', error)
      })
  }
  //删除我的需求 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_code === 0) {
        Taro.showToast({
          title: '删除成功',
          icon: 'success',
          duration: 1500
        })
        setTimeout(() => {
          Taro.navigateBack({
            delta:-1
          })
        }, 1500);
      } else if (res.data.err_code === 88888) {
        loginExpired(res)
      } else {
        Taro.showToast({
          title: res.data.err_msg,
          icon: 'none',
          duration: 1500
        })
      }
    })

  }

  goMyNeedsPublishPage() {
    Taro.navigateTo({
      url: '/pages/myNeedsPublish/myNeedsPublish',
    })
  }
  goMyNeedEditPage() {
  
    Taro.navigateTo({
      url: '/pages/myNeedsEdit/myNeedsEdit?id=' + this.state.sd_id
    })

  }
  goToMyNeedsPage() {
    Taro.navigateTo({
      url: '/pages/myNeeds/myNeeds'
    })
  }
  deleteButton() {
    this.setState({ isDeleteModal: true })
  }
  handleWindowModCancel() {
    this.setState({ isDeleteModal: false })
  }
  handleWindowConfirm() {
    this.setState({ isDeleteModal: false })
    this.deleteMyNeeds({ demandId: this.state.sd_id })
  }

  componentDidMount() {
    Taro.showLoading({ title: '加载中' })
    this.getSingleMyNeedInfo()
  }
  componentWillReceiveProps(nextProps) {
    console.log(this.props, nextProps)
  }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  render() {
    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>
    // const imageArrayElement = this.state.ImagesInfo.map((item, index) => {
    //   return <Image key={index} className='image' mode='widthFix' src={URL.Base + item.file_path} style='max-width: 100%; max-height:100%;' />
    // })
    const imageArrayElement = this.state.ImagesInfo.map((item, index) => {
      return <View className='image-wrapper' key={index}>
        <Image mode='aspectFit' src={URL.Base + item.file_path} style='max-width:100%; max-height:100%;' />
      </View>
    })


    return (
      <View className='SupplyDemandItemView'>
        {/* 删除模态框 */}
        {deleteModalWindowElement}
        <View className='type box'>
          <Text className='title'>行业分类：</Text>
          <Text className='content'>{this.state.industryTypeSelected.name ? this.state.industryTypeSelected.name : '--'}</Text>
        </View>
        <View className='needed-title box'>
          <Text className='title'>需求标题：</Text>
          <Text className='content'>{this.state.title}</Text>
        </View>
        <View className='browsing-amount box'>
          <Text className='title'>浏览量：</Text>
          <Text className='content'>{this.state.browsing}</Text>
        </View>
        <View className='contact-name box'>
          <Text className='title'>联系人：</Text>
          <Text className='content'>{this.state.contactName}</Text>
        </View>
        <View className='phone-number box'>
          <Text className='title'>联系电话：</Text>
          <Text className='content'>{this.state.contactNumber}</Text>
        </View>
        <View className='address box'>
          <Text className='title'>联系地址：</Text>
          <Text className='content'>{this.state.address}</Text>
        </View>
        <View className='needed-content box'>
          <Text className='title'>业主需求内容：</Text>
          <Text className='content'>{this.state.content}</Text>
        </View>
        <View className='image-container box'>
          {this.state.ImagesInfo.length ? <Text className='title'>业主需求图片:</Text> : null}
          {imageArrayElement}
        </View>




        {/* {this.state.ImagesInfo.length?<View className='needed-image box'>
          <Text className='title'>业主需求图片：</Text>
          <View className='img-box'>
            {imageArrayElement}
          </View>
        </View>:null
} */}

        {this.state.isShowAllButtons ? <View className='button-box'>
          <View className='button' onClick={this.goMyNeedsPublishPage.bind(this)}>
            <Button size='mini' className='button-green'>
              <AtIcon value='add' size='12' color='white'></AtIcon>
              新增</Button>
          </View>
          <View className='button' onClick={this.goToMyNeedsPage.bind(this)}>
            <Button size='mini' className='button-green'>
              <AtIcon value='' size='12' color='white'></AtIcon>
              我的需求</Button>
          </View>
          <View className='button' onClick={this.goMyNeedEditPage.bind(this)}>
            <Button size='mini' className='button-orange'>
              <AtIcon value='settings' size='12' color='white'></AtIcon>
              修改</Button>
          </View>

          <View className='button' onClick={this.deleteButton.bind(this)}>
            <Button size='mini' className='button-dark-red'>
              <AtIcon value='trash' size='12' color='white'></AtIcon>
              删除</Button>
          </View>
        </View> : <View className='button-box'>
            <View className='button' onClick={this.goMyNeedsPublishPage.bind(this)}>
              <Button size='mini' className='button-green'>
                <AtIcon value='add' size='12' color='white'></AtIcon>
                新增</Button>
            </View>
            <View className='button' onClick={this.goToMyNeedsPage.bind(this)}>
              <Button size='mini' className='button-green'>
                <AtIcon value='' size='12' color='white'></AtIcon>
                我的需求</Button>
            </View>
          </View>}
        <CopyrightComponent></CopyrightComponent>
      </View>



    )
  }
}

export default SupplyDemandView