/*
 * Creator:     ML
 * CreatDate:   2020-03-13
 * descripts：  配送单 列表
 * */
import React from 'react';
import { List, WhiteSpace, Modal, Result, Icon } from 'antd-mobile';
import "../common/style/index.less";
import './style/index.less';
import { $http } from "containers/config/https";
import DistributionList from "./componts/DistributionList";
import store from "store";
import CancelBtn from './componts/CancelBtn';
// const alert = Modal.alert;
const Item = List.Item;
export default class DistributionSheetDeatail extends React.Component {
    constructor({ history }) {
        super();
        this.state = {
            activeTabs: "1",
            expressModal: false
        }
        this.history = history;
    }

    componentDidMount() {
        // console.log("store.getState().electronicPrescription.distributionTabsData", store.getState().electronicPrescription.distributionTabsData)
        // console.log("--", this.props.info)
    }
    showModal = (e, key) => {
        e.preventDefault(); // 修复 Android 上点击穿透
        this.setState({
            [key]: true,
        });
    }
    onClose = key => () => {
        this.setState({
            [key]: false,
        });
    }
    //查看全部配送单
    handleCheckAllOrder = () => {
        store.dispatch({
            type: "distributionTabs",
            value: "2"
        });
        this.history.push({
            pathname: "/0006/00000005",
            state: ""
        });
    }
    //获取已取消订单
    geDeliveredData = (flag, orderID) => {
        let datas = {
            params: [{
                patID: "1",
                hospID: "1",
                ordStatusID: flag || "5",
            }],
        }
        $http.post("urlS", this, {
            code: "03030067",
            data: datas,
            success: function (res) {
                if (+res.errorCode === 0) {
                    let data = res.result && res.result.data && res.result.data.length > 0 ? res.result.data : [];
                    for (var i = 0; i < data.length; i++) {
                        if (data[i].orderID === orderID) {
                            this.history.push({
                                pathname: "/0006/00000008",
                                state: { ...data[i] }
                            });
                            break;
                        }
                    }
                    // res.result.data && res.result.data.map((i, s) => {
                        
                    // })

                }
            }
        });
    }
    //未配送 / 新增完配送单  取消订单
    handleCancelOrder = () => {
        let data = {
            params: [{
                orderID: this.props.location.state && this.props.location.state.orderID,
            }],
        }
        $http.post("urlS", this, {
            code: "03030037",
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    // let obj = this.props.location.state
                    this.geDeliveredData("4", res.result);
                }
            }
        });
    }
    handlePush=(i)=>{
        this.history.push({
            pathname: "/0006/00000008",
            state: { ...i }
        });
        store.dispatch({
            type: "distributionStep",
            value: 0
        });
        store.dispatch({
            type: "precSubItems",
            value: []
        });
    }
    render() {
        // let { } = this.state;
        return (
            <div className="detail-dom">
                {
                    store.getState().electronicPrescription && store.getState().electronicPrescription.distributionTabsData === "1" ? "" : <div>
                        <Item>
                            <div className="btn-check-tips">
                                {
                                    store.getState().electronicPrescription && store.getState().electronicPrescription.distributionTabsData === "4" ? <Result
                                        img={<Icon type="cross-circle" className="spe" style={{ fill: 'red' }} />}
                                        title={
                                            <span style={{ color: "red" }}>
                                                该配送订单已取消
                                        </span>
                                        }
                                    /> : <Result
                                            img={<Icon type="check-circle-o" className="spe" style={{ fill: '#1F90E6' }} />}
                                            title="该配送订单已完成"
                                        />
                                }
                            </div>
                            <div className="btn-check-info">
                                <span onClick={this.handleCheckAllOrder}>查看全部配送单</span>
                            </div>
                        </Item>
                        <WhiteSpace />
                    </div>
                }
                <div className="adress-info">
                    <Item className="adress-item">
                        <p>
                            {this.props.location.state && this.props.location.state.receiveDetailArea}
                        </p>
                        <p>
                            {this.props.location.state && this.props.location.state.receiveDetailAdress}
                        </p>
                        <p>
                            <span>{(this.props.location.state && this.props.location.state.receiveName) || "***"}</span>
                            <span>{this.props.location.state && this.props.location.state.receiveMobile}</span>
                        </p>
                    </Item>

                    {
                        (store.getState().electronicPrescription && store.getState().electronicPrescription.distributionTabsData === "4")||(store.getState().electronicPrescription && store.getState().electronicPrescription.distributionTabsData === "1") ? <Item>
                            <div>
                                物流单号:<span>未配送</span>
                            </div>
                            <div>
                                物流动态:<span>正在加紧为您安排配送，请耐心等待。</span>
                            </div>
                        </Item> : <div className="express-info" onClick={(e) => this.showModal(e, "expressModal")}>
                                <Item>
                                    <div >
                                        物流单号:<span>{this.props.location.state && this.props.location.state.expressNo}</span>
                                    </div>
                                    <div>
                                        物流动态:<span className="space-info">你的快件已签收，如有以为请电联小哥【xxx，电话：13956842555】。</span>
                                    </div>
                                </Item>
                                <span className="icon-array">{">"}</span>
                            </div>
                    }

                </div>
                <WhiteSpace />
                <DistributionList info={this.props.location.state} data={this.props.location.state && this.props.location.state.pres} activeTabs={store.getState().electronicPrescription && store.getState().electronicPrescription.distributionTabsData}></DistributionList>
                <CancelBtn handlePush={this.handlePush} info={this.props.location.state}></CancelBtn>
                <Modal
                    popup
                    visible={this.state.expressModal}
                    onClose={this.onClose('expressModal')}
                    animationType="slide-up"
                >
                    <div>
                        <Item extra={<span className="self-mention" style={{ color: "blue" }}>{"确定"}</span>}><span className="order-title">物流信息</span></Item>
                        <Item >
                        </Item>
                    </div>

                </Modal>
            </div>
        )
    }
}