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

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


import './supplyDemandView.scss'



class SupplyDemandView extends Component {
  config = {
    navigationBarTitleText: '供求查看'
  }

  constructor() {
    super(...arguments)
    this.state = {
      demandingSupplyCate: [{name:'需求',id:'1'}, {name:'供求',id:'2'}, {name:'人才',id:'3'}], //供求类型选择
      type: '',
      title: '',
      browsing: '',
      contactName: '',
      contactNumber: '',
      address: '',
      content: '',
      images: [],
    }
  }
  //获取商品信息api GetProductInfo
  getSupplyDemandInfo() {
    Taro.request({
      url: URL.GetSupplyDemandInfo,
      method: 'GET',
      dataType: 'json',
      data: {
        sdID: this.$router.params.sdId,
      },
      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].name
        this.setState({
          type: selectedType,
          title: res.data.sdInfo.sd_title,
          browsing: res.data.sdInfo.browse_times,
          contactName: res.data.sdInfo.user_name,
          contactNumber: res.data.sdInfo.user_phone,
          address: res.data.sdInfo.user_address,
          content: res.data.sdInfo.sd_desc,
          images: res.data.sdInfo.file_path,
        })
        Taro.hideLoading()
      }
      )
      .catch(error => {
        console.log('供求详情获取失败', error)
      })
  }
  goToSDPublishPage() {
    Taro.navigateTo({
      url: '/pages/supplyDemandPublish/supplyDemandPublish',// 供求发布页面
    })
  }
  goToSDEditPage() {
    console.log('edit page')
    // Taro.navigateTo({
    //   url: 'pages/supplyDemandPublish/supplyDemandPublish',// 供求发布页面
    // })

  }
  goToMySDPage() {
    Taro.navigateTo({
      url: '/pages/mySupplyDemand/mySupplyDemand',//我的供求页面
    })

  }
  deleteSD() {
    console.log('删除供求')
  }

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

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  render() {
    const imageElementArray = this.state.images.map((item, index) => {
      return <View key={index} className='image-box'>
        <Image mode='aspectFit' style='width: 100%;'
          src={URL.Base + item.file_path}
        />
      </View>
    })
    return (
      <View className='SupplyDemandItemView'>
        <View className='type box'>
          <Text className='title'>供求类型：</Text>
          <Text className='content'>{this.state.type}</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='needed-content box'>
          <Text className='title'>需求图片：</Text>
          <View className='image-container'>
            {imageElementArray}
          </View>
        </View>

        <View className='button-box'>
          <View className='button' onClick={this.goToSDPublishPage.bind(this)}>
            <AtButton type='primary' size='small'>
              <AtIcon value='add' size='12' color='white'></AtIcon>
              新增</AtButton>
          </View>
          <View className='button' onClick={this.goToSDEditPage.bind(this)}>
            <AtButton type='primary' className='button' size='small'>
              <AtIcon value='settings' size='12' color='white'></AtIcon>
              修改</AtButton>
          </View>
          <View className='button' onClick={this.goToMySDPage.bind(this)}>
            <AtButton type='primary' className='button' size='small'>
              <AtIcon value='' size='12' color='white'></AtIcon>
              我的供求</AtButton>
          </View>
          <View className='button' onClick={this.deleteSD.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