/*
 * Creator:     ML
 * CreatDate:   2020-03-13
 * descripts：  配送单 列表
 * */
import React from 'react';
import { Tabs, List, PickerView, Radio, Modal } from 'antd-mobile';
import "pages/common/style/index.less";
import './style/index.less';
import store from 'store'
import { $http } from "containers/config/https";

const Item = List.Item;

const RadioItem = Radio.RadioItem;

export default class DistributionSheet extends React.Component {
    constructor({ history }) {
        super();
        let userData = localStorage.getItem("userData") ? JSON.parse(localStorage.getItem("userData")) : {};
        let activeTabs = store.getState().electronicPrescription && store.getState().electronicPrescription.distributionTabsData ? store.getState().electronicPrescription.distributionTabsData : "1";
        this.state = {
            activeTabs,
            userData,
            NotDeliveredData: [], // 未配送
            DeliveredData: [], // 已配送
            completedData: [], // 已完成
            cancelledData: [], // 已取消
            radioData: [], // 医院数据
            admSelectData: [], // 就诊人下拉数据
            admData: {}, // 选中的就诊数据
            radioValue: 0,
        }
        this.history = history;
    }

    componentDidMount() {
        if (store.getState().electronicPrescription && store.getState().electronicPrescription.distributionTabsData) {
            // console.log("store.getState().electronicPrescription&&store.getState().electronicPrescription.distributionTabsData",store.getState().electronicPrescription.distributionTabsData)
            let num = store.getState().electronicPrescription.distributionTabsData
            this.geDeliveredData(num, num === "1" ? "NotDeliveredData" : num === "2" ? "DeliveredData" : num === "3" ? "completedData" : num === "4" ? "cancelledData" : "");
        } else {
            this.geDeliveredData("1", "NotDeliveredData");
        }
        this.getRadioData();
        this.getAdmSelectData();
    }
    // 获取医院数据
    getRadioData = () => {
        let { userData } = this.state;
        let hospID = userData.hospID ? userData.hospID : "";
        let hospDesc = "";
        let data = [
            {
                hospID: 99,
                hospDesc: "新元素医院"
            },
            {
                hospID: 1,
                hospDesc: "广东省深圳市宝安区第一中医院"
            },
            {
                hospID: 2,
                hospDesc: "宝安第三人民医院"
            }
        ];
        if (hospID) {
            for (var i = 0; i < data.length; i++) {
                if (data[i].hospID === hospID) {
                    hospDesc = data[i].hospDesc
                    break;
                }
            }
        } else {
            hospID = ""
        }
        this.setState({ radioData: data, radioVal: hospID, radioValue: hospID, headerTit: hospDesc, headerTitle: hospDesc })
    }
    // 获取就诊人下拉数据
    getAdmSelectData = () => {
        let { admID } = this.state;
        let admSelectData = [
            {
                label: '张三',
                value: 0,
            },
            {
                label: '李四',
                value: 1,
            },
            {
                label: '王二',
                value: 2,
            },
        ];
        this.setState({ admSelectData }, () => {
            let obj = {};
            for (var i = 0; i < this.state.admSelectData.length; i++) {
                if (this.state.admSelectData[i].value === admID) {
                    obj = admSelectData[i];
                    break;
                }
            }
            this.setState({ admData: obj })
        })
    }
    // 获取未配送 已配送 已完成 已取消
    geDeliveredData = (flag, data) => {
        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) {
                    this.setState({ [data]: res.result.data })
                }
            }
        });
    }

    // 搜索
    handleSearch = (val) => {
        console.log(val)
    }

    // tabs切换
    handleTabsChange = (tab) => {
        this.setState({ activeTabs: tab.key }, () => {
            let { activeTabs } = this.state;
            store.dispatch({
                type: "distributionTabs",
                value: activeTabs
            });
            if (activeTabs === "1") {
                this.geDeliveredData("1", "NotDeliveredData");
            } else if (activeTabs === "2") {
                this.geDeliveredData("2", "DeliveredData");
            } else if (activeTabs === "3") {
                this.geDeliveredData("3", "completedData");
            } else if (activeTabs === "4") {
                this.geDeliveredData("4", "cancelledData");
            }
        })
    }
    //查看详情
    handleDeail = (item) => {
        item["activeTabs"] = this.state.activeTabs
        this.history.push({
            pathname: "/0006/00000006",
            state: { ...item }
        });
    }
    //新增配送单
    handleAdd = () => {
        store.dispatch({
            type: "distributionStep",
            value: 0
        });
        store.dispatch({
            type: "precSubItems",
            value: []
        });
        this.history.push({
            pathname: "/0006/00000007",
            state: ""
        });
    }
    // 打开弹窗
    handleShowModal = () => {
        this.setState({ hospVisible: true })
    }

    // 关闭弹窗
    handleClose = () => {
        this.setState({
            hospVisible: false,
        });
    }
    // 打开选择就诊人弹窗
    handleShowAdmModal = () => {
        this.setState({ admVisible: true })
    }

    // 关闭就诊人弹窗
    handleAdmClose = () => {
        this.setState({ admVisible: false })
    }
    handleModalOK = () => {
        let { admID, admSelectData } = this.state;
        let obj = {};
        if (!admID) {
            obj = admSelectData[0]
        } else {
            for (var i = 0; i < admSelectData.length; i++) {
                if (admSelectData[i].value === admID) {
                    obj = admSelectData[i]
                }
            }
        }
        this.setState({ admData: obj }, () => {
            this.handleAdmClose();
            // let admObj = {
            //     admID: this.state.admData.value,
            //     admDesc: this.state.admData.label,
            // }
        })
    }
    handleRadioChange = item => {
        this.setState({ radioVal: item.hospID, headerTit: item.hospDesc })
    }
    // 确认
    handleOk = () => {
        let { radioVal, headerTit, userData } = this.state;
        this.setState({ radioValue: radioVal, headerTitle: headerTit }, () => {
            let obj = {
                hospID: this.state.radioValue,
                hospDesc: this.state.headerTitle
            }
            localStorage.setItem('userData', JSON.stringify({ ...userData, ...obj }));
            this.handleClose();
        })
    }
    // 选择就诊人
    handleAdmSelectChange = (val) => {
        this.setState({ admID: val[0] })
    }
    render() {
        let { activeTabs, NotDeliveredData, DeliveredData, completedData, cancelledData, refundData, admVisible, hospVisible, radioValue, radioData, admSelectData, admID, radioVal, headerTitle, admData } = this.state;
        let childItemData = activeTabs === "1" ? NotDeliveredData : (activeTabs === "2" ? DeliveredData : (activeTabs === "3" ? completedData : (activeTabs === "4" ? cancelledData : refundData)));
        const tabs = [
            { title: '未配送', key: '1' },
            { title: '已配送', key: '2' },
            { title: '已完成', key: '3' },
            { title: '已取消', key: '4' },
        ];

        let renderContent = () =>
            (<div className="sheet-itemInfo">
                {childItemData && childItemData.map((item, index) => {
                    return (
                        <List className="sheet-list" key={index}>
                            <Item extra={<span className="self-mention" style={{ color: "green" }}>{activeTabs === "3" ? item.ordStatus : ""}</span>}>物流单号: {item.expressNo}</Item>

                            <Item style={{ display: item.prescNum && item.prescNum ? "block" : "none" }} extra={<span className="self-mention" style={{ color: "#888" }}>x{item.prescNum}</span>}><span style={{ fontWeight: "600" }}>{item.prescNum && item.prescNum ? item.prescDescript : ""}</span></Item>

                            <Item style={{ display: item.cMPrescNum && item.cMPrescNum ? "block" : "none" }} extra={<span className="self-mention" style={{ color: "#888" }}>x{item.cMPrescNum}</span>}><span style={{ fontWeight: "600" }}>{item.cMPrescNum && item.cMPrescNum ? item.cMPrescDescript : ""}</span></Item>

                            <Item style={{ display: item.specOrCheckNum && item.specOrCheckNum ? "block" : "none" }} extra={<span className="self-mention" style={{ color: "#888" }}>x{item.specOrCheckNum}</span>}><span style={{ fontWeight: "600" }}>{item.specOrCheckNum && item.specOrCheckNum ? item.specOrCheckDescript : ""}</span></Item>


                            {/* <Item>
                                <p className="sheet-items" style={{display:item.prescNum&&item.prescNum?"block":"none"}}>
                                    <span>{item.prescNum&&item.prescNum?item.prescDescript:""}</span>
                                    <span>x{item.prescNum}</span>
                                </p>
                                <p className="sheet-items" style={{display:item.cMPrescNum&&item.cMPrescNum?"block":"none"}}>
                                    <span>{item.cMPrescNum&&item.cMPrescNum?item.cMPrescDescript:""}</span>
                                    <span>x{item.cMPrescNum}</span>
                                </p>
                                <p className="sheet-items" style={{display:item.specOrCheckNum&&item.specOrCheckNum?"block":"none"}}>
                                    <span>{item.specOrCheckNum&&item.specOrCheckNum?item.specOrCheckDescript:""}</span>
                                    <span>x{item.specOrCheckNum}</span>
                                </p>
                            </Item> */}
                            <Item>
                                <p>接收人:<span style={{ marginLeft: "4px" }}>{item.receiveName || "***"}</span> <span>{item.receiveMobile}</span></p>
                            </Item>
                            <Item >
                                <div className="detailBtn">
                                    <span onClick={() => this.handleDeail(item)}>订单详情</span>
                                </div>
                            </Item>

                        </List>
                    )
                })}

            </div>);
        return (
            <div className="sheet-dom">
                {/* <SearchBar 
          placeholder="输入就诊医院/药品名称搜索" 
          cancelText={<span>搜索</span>}
          onCancel={this.handleSearch}
          showCancelButton
        /> */}
                <h1 className="header" style={{ display: "flex", justifyContent: "space-around" }}>
                    <span onClick={this.handleShowModal}>
                        <i className="iconfont icon-yiyuan"></i>
                        {headerTitle || "-----"}
                    </span>
                    <span className="header-right" onClick={this.handleShowAdmModal}><i className="iconfont icon-qiehuan"></i>{admData.label || "-----"}</span>
                </h1>
                <div className="sheet-info tab-cont">
                    <Tabs tabs={tabs}
                        page={activeTabs}
                        onChange={this.handleTabsChange}
                        renderTabBar={props => <Tabs.DefaultTabBar {...props} page={4} />}
                    >
                        {renderContent}
                    </Tabs>

                    <div className="add-btn">
                        <span onClick={this.handleAdd}>+</span>
                    </div>
                </div>
                <Modal
                    visible={hospVisible}
                    transparent
                    maskClosable={radioValue ? true : false}
                    onClose={this.handleClose}
                    title="切换医院"
                    closable={radioValue ? true : false}
                    footer={[{ text: '确认', onPress: () => this.handleOk() }]}
                >
                    <div style={{ height: 200, overflow: 'scroll' }}>
                        <List className="hosp-list">
                            {radioData.map(i => (
                                <RadioItem key={i.hospID} checked={radioVal === i.hospID} onChange={() => this.handleRadioChange(i)}>
                                    {i.hospDesc}
                                </RadioItem>
                            ))}
                        </List>
                    </div>
                </Modal>
                <Modal
                    popup
                    visible={admVisible}
                    maskClosable={true}
                    onClose={this.handleAdmClose}
                    animationType="slide-up"
                >
                    <div className="modal-operating" style={{
                        display: "flex",
                        justifyContent: "space-around",
                        alignItems: "center",
                        height: "28px",
                        lineHeight: "28px"
                    }}><span className="float-left" style={{color:"#f4333c"}} onClick={this.handleAdmClose}>取消</span>选择就诊人<span className="float-right" style={{color:"#1e83ef"}} onClick={this.handleModalOK}>确认</span></div>
                    <PickerView
                        data={admSelectData}
                        value={admID}
                        cascade={false}
                        onChange={this.handleAdmSelectChange}
                    >
                        <List.Item arrow="horizontal">选择就诊人</List.Item>
                    </PickerView>
                </Modal>
            </div>
        )
    }
}