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

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


import './myNeedsView.scss'



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: '',
    }
  }
  //获取需求信息api 
  getSingleMyNeedInfo() {
    Taro.request({
      url: URL.EditMyNeeds,
      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()
        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,

        })

      }

      )
      .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_msg === "success") {
        Taro.showToast({
          title: '删除成功',
          icon: 'success',
          duration: 1500
        })
        setTimeout(() => {
          this.goToMyNeedsPage()
        }, 1500);
      } else {
        Taro.showToast({
          title: res.data.err_msg,
          icon: 'none',
          duration: 1500
        })
      }
    })

  }

  goMyNeedsPublishPage() {
    Taro.navigateTo({
      url: '/pages/myNeedsPublish/myNeedsPublish',
    })
  }
  goMyNeedEditPage() {
    console.log('edit page')
    console.log('id', this.state.sd_id)
    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%;' />
    })

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

        <View className='button-box'>
          <View className='button' onClick={this.goMyNeedsPublishPage.bind(this)}>
            <AtButton type='primary' size='small'>
              <AtIcon value='add' size='12' color='white'></AtIcon>
              新增</AtButton>
          </View>
          <View className='button' onClick={this.goToMyNeedsPage.bind(this)}>
            <AtButton type='primary' className='button' size='small'>
              <AtIcon value='' size='12' color='white'></AtIcon>
              我的需求</AtButton>
          </View>
          <View className='button' onClick={this.goMyNeedEditPage.bind(this)}>
            <AtButton type='primary' className='button' size='small'>
              <AtIcon value='settings' size='12' color='white'></AtIcon>
              修改</AtButton>
          </View>

          <View className='button' onClick={this.deleteButton.bind(this)}>
            <AtButton type='primary' className='button-a' size='small'>
              <AtIcon value='close' size='12' color='white'></AtIcon>
              删除</AtButton>
          </View>
        </View>
        <CopyrightComponent></CopyrightComponent>
      </View>



    )
  }
}

export default SupplyDemandView