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

import URL from '../../serviceAPI.config'

import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'


import './grabOrderPage.scss'


class GrabOrderPage extends Component {
    config = {
        navigationBarTitleText: '抢单页面'
    }
    constructor() {
        super(...arguments);
        this.state = {
            type: '',
            title: '',
            browsing: '',
            contactName: '',
            contactNumber: '',
            address: '',
            content: '',

        }
    }

    //获取抢单信息api supplyDemandDetails
    getGrabOrderInfo() {
        Taro.request({
            url: URL.supplyDemandDetails,
            method: 'GET',
            dataType: 'json',
            data: {
                demandId: this.$router.params.orderId,
            },
            header: {
                'content-type': 'application/x-www-form-urlencoded',
                'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
            .then(res => {
                console.log('抢单详情获取成功', res)



                this.setState({
                    type: res.data.sdInfo.sd_type,
                    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,

                })
            }
            )
            .catch(error => {
                console.log('抢单详情获取失败', error)
            })
    }
    callPhoneNumber(){
        Taro.makePhoneCall({
            phoneNumber: this.state.contactNumber
        })
    }

    componentDidMount() {
        console.log(this.$router.params.orderId)
        this.getGrabOrderInfo()
    }
    componentWillReceiveProps(nextProps) {
        console.log(this.props, nextProps)
    }

    componentWillUnmount() { }

    componentDidShow() { }

    componentDidHide() { }

    render() {
        return (
            <View className='grabOrderPage'>
                <View className='type box'>
                    <Text className='title'>行业分类：</Text>
                    <Text className='content'>{this.state.type}</Text>
                </View>
                <View className='sd-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' onClick={this.callPhoneNumber.bind(this)} >
                    <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='sd-content box'>
                    <Text className='title'>业主需求内容：</Text>
                    <Text className='content'>{this.state.content}</Text>
                </View>
                <View className='button-box'>
                    <View className='button' onClick={this.goToSDPublishPage.bind(this)}>
                        <AtButton type='primary' size='small'>
                            <AtIcon value='close' size='12' color='white'></AtIcon>
                            抢单</AtButton>
                    </View>
                </View>
                <CopyrightComponent></CopyrightComponent>

            </View>
        )
    }
}

export default GrabOrderPage