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 './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: [],
      isDeleteModal:false
    }
  }
  //获取商品信息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,
          itemId:res.data.sdInfo.sd_id
        })
        Taro.hideLoading()
      }
      )
      .catch(error => {
        console.log('供求详情获取失败', error)
      })
  }
   // 删除我的供求api
   onDelete({ sdID = 0 }) {
    Taro.request({
        url: URL.DeleteDemandSupply,
        method: 'POST',
        dataType: 'json',
        data: {
            sdID: sdID
        },
        header: {
            'content-type': 'application/x-www-form-urlencoded',
            'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
        .then(res => {
            if (res.data.err_msg == 'success') {
                console.log('删除成功')
                Taro.showToast({
                    title: '删除成功',
                    icon:'success',
                    duration:1500
                }).then(() => {
                    setTimeout(() => {
                      this.goToMySDPage()
                    }, 1500);
                })

            } else {

                Taro.showToast({
                    title: res.data.err_msg,
                    icon: 'none'
                })

            }

        }
        )
        .catch(error => {

            Taro.showToast({
                title: '删除失败',
                icon: 'none'
            })
        })
}
  goToSDPublishPage() {
    Taro.navigateTo({
      url: '/pages/supplyDemandPublish/supplyDemandPublish',// 供求发布页面
    })
  }
  // 跳转到我的供求编辑页面
  goToMyDSEditPage() {
    Taro.navigateTo({
        url: '/pages/myDemandSupplyEdit/myDemandSupplyEdit?sdId=' + this.state.itemId
    })

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

  }
  makeAPhoneCall(){
    Taro.makePhoneCall({
      phoneNumber: this.state.contactNumber
    })
  }
 
  deleteButton() {
    this.setState({ isDeleteModal: true })
  }
  handleWindowModCancel() {
    this.setState({ isDeleteModal: false })
  }
  handleWindowConfirm() {
    this.setState({ isDeleteModal: false })
    this.onDelete({ sdID: this.state.itemId })
  }


  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='widthFix' style='width: 100%;'
          src={URL.Base + item.file_path}
        />
      </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='SupplyDemandItemView'>
      {deleteModalWindowElement}
        <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 highlight' onClick={this.state.makeAPhoneCall.bind(this)}>{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)}>
            <Button   className='button-green' size='mini'>
              <AtIcon value='add' size='12' color='white'></AtIcon>
              新增</Button>
          </View>
          <View className='button' onClick={this.goToMyDSEditPage.bind(this)}>
            <Button  className='button-orange' size='mini'>
              <AtIcon value='settings' size='12' color='white'></AtIcon>
              修改</Button>
          </View>
          <View className='button' onClick={this.goToMySDPage.bind(this)}>
            <Button  className='button-green' size='mini'>
              <AtIcon value='' size='12' color='white'></AtIcon>
              我的供求</Button>
          </View>
          <View className='button' onClick={this.deleteButton.bind(this)}>
            <Button  className='button-dark-red' size='mini'>
              <AtIcon value='close' size='12' color='white'></AtIcon>
              删除</Button>
          </View>
        </View>
        <CopyrightComponent></CopyrightComponent>
      </View>



    )
  }
}

export default SupplyDemandView