//grabOrderPage
import Taro, { Component } from '@tarojs/taro'
import { View, Text, Button, Image } from '@tarojs/components'
import { AtModal, AtModalHeader, AtModalContent, AtModalAction, 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: '',
            images: [],
            isOpen: false, // 抢单消息提示
            grabOrderId: this.$router.params.orderId,
            stateId: '',
            stateName: '',
            userId: ''
        }
    }

    //获取抢单信息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.class_name,
                    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,
                    stateId: res.data.sdInfo.state,
                    stateName: res.data.sdInfo.state_name,
                    userId: res.data.sdInfo.user_id

                })
            }
            )
            .catch(error => {
                console.log('抢单详情获取失败', error)
            })
    }
    //抢单请求
    GrabDemand({ demandId = 218 }) {
        Taro.request({
            url: URL.GrabDemand,
            method: 'POST',
            dataType: 'json',
            data: {
                demandId: demandId
            },
            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') {
                    Taro.showToast({
                        title: '抢单成功',
                        icon: 'success',
                        duration: 1500
                    })
                    setTimeout(() => {
                        Taro.navigateTo({
                            url: '/pages/home/home'
                        })
                    }, 1500);

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


                console.log('抢单请求：', res)

            })

    }
    callPhoneNumber() {
        Taro.makePhoneCall({
            phoneNumber: this.state.contactNumber
        })
    }
    grabButtonHandler() {
        this.setState({ isOpen: true })
    }
    handleGrabModalClose() {
        this.setState({ isOpen: false })
    }
    handleGrabModalCancel() {
        this.setState({ isOpen: false })
    }
    handleGrabConfirm() {
        this.setState({ isOpen: false })
        // 确认抢单之后
        this.GrabDemand({ demandId: this.state.grabOrderId })
    }

    componentDidMount() {

        this.getGrabOrderInfo()
    }
    componentWillReceiveProps(nextProps) {
        console.log(this.props, nextProps)
    }

    componentWillUnmount() { }

    componentDidShow() { }

    componentDidHide() { }

    render() {
        const localStoageUserId = Taro.getStorageSync('userInfo').user_id
        let ButtonElement
        if (localStoageUserId === this.state.userId && this.state.stateId === '1') {
            ButtonElement = <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>
        } else if (localStoageUserId === this.state.userId && this.state.stateId != '1') {
            ButtonElement = <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>
        } else if (this.state.stateId === '1') {
            ButtonElement = <View className='button-box'><View className='button' onClick={this.grabButtonHandler.bind(this)}>
                <Button size='mini' className='button-orange'>抢单</Button>
            </View></View>

        } else if (this.state.stateId === '2') {
            ButtonElement = <View className='button-box'><View className='button'>
                <Button size='mini' className='button-orange blur'>{this.state.stateName}</Button>
            </View></View>
        } else if (this.state.stateId === '3') {
            ButtonElement = <View className='button-box'><View className='button'>
                <Button size='mini' className='button-orange blur'>{this.state.stateName}</Button>
            </View></View>
        }



        // 提示模态弹窗element
        const modalMessageGrabElement = <AtModal isOpened={this.state.isOpen}>
            <AtModalHeader>提示</AtModalHeader>
            <AtModalContent>
                确认抢单？
            </AtModalContent>
            <AtModalAction> <Button onClick={this.handleGrabModalCancel.bind(this)}>取消</Button> <Button className='orange' onClick={this.handleGrabConfirm.bind(this)}>确定</Button> </AtModalAction>
        </AtModal>
        const imageElementArray = this.state.images.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='grabOrderPage'>
                {modalMessageGrabElement}
                <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='image-container box'>
                    {this.state.images.length ? <Text className='title'>业主需求图片:</Text> : null}
                    {imageElementArray}
                </View>
                {ButtonElement}


                <CopyrightComponent></CopyrightComponent>

            </View>
        )
    }
}

export default GrabOrderPage