/**
 * 视频、图文问诊详情
 */

import React from 'react';
import {
    Card, Table, Input, Form, Select, Row, Col, Checkbox, Modal,
    DatePicker, Button, Popconfirm, Icon, Divider, message, Pagination,
} from 'antd';
import { Util, dayFormat } from 'tools/index';
import { $http } from 'containers/config/https';
import { callNumberSocket } from 'tools/callNumber.js';
import moment from 'moment';
import store from 'store';
import '../style/index.less';

const { RangePicker } = DatePicker;
const Search = Input.Search;
const Option = Select.Option;
var leftImg = require('../image/left.png');
var rightImg = require('../image/right.png');

class ShowConsultationDetailPage extends React.Component {

    constructor(props) {
        super(props);
        var date = new Date();
        var userData = JSON.parse(sessionStorage.getItem('userData'));
        var patientData = JSON.parse(sessionStorage.getItem('patientData'))
        this.state = {
            dataSource: [],
            total: 0,
            page: 1,
            pageSize: 10,
            size: 'small',
            userData: userData,
            patientData: patientData,
            rotaRight: 0,
            SS: 1,
            i: 0,
            S: 1,
            firstIndex: 0,
            f: 0,
            x: 100,
            y: 0,
            imageSource: []
        }
    }
    componentDidMount() {
        this.loadVideoChatMsg()
    }

    loadVideoChatMsg() {
        var params = {
            params: [{
                admID: this.state.patientData && this.state.patientData.admID,
            }]
        }
        $http.post('urlDeault', this, {
            code: "03100070",
            data: params,
            success: function (res) {
                if (res.errorCode == '0') {
                    var image = []
                    var source = []
                    if (!Util.isEmpty(res.result) && !Util.isEmpty(res.result.imageAddress)) {
                        image = (res.result.imageAddress).split('&');
                    }
                    if (!Util.isEmpty(image)) {
                        for (var i = 0; i < image.length; i++) {
                            if (!Util.isEmpty(image[i])) {
                                source.push(image[i])
                            }
                        }
                    }
                    this.setState({
                        detailMessage: res.result,
                        imageSource: source
                    })
                }
            }
        });
    }

    loadImageMsg() {
        var imageAddress = []
        //图片截取
        if (!Util.isEmpty(this.state.detailMessage) && !Util.isEmpty(this.state.detailMessage.imageAddress)) {
            var image = (this.state.detailMessage.imageAddress).split('&');
            image && image.map((item, index) => {
                if (!Util.isEmpty(item)) {
                    imageAddress.push(<img scr={item} key={index} className='img-bgd-style' style={{
                        width: '200px', height: 250, marginRight: 20, marginTop: 20, background: `url(${item})`, cursor: 'pointer'
                    }} alt=''
                        onClick={this.handleShowModal.bind(this, item, index)} />)
                }
            })
        }
        return imageAddress
    }

    //顺时针旋转
    rotateright = () => {
        this.setState({ rotaRight: this.state.rotaRight + 90 })
        this.refs.imgstyle.style.transform = "translate(-50% ,0%) rotate(" + this.state.rotaRight + "deg) scale(" + this.state.SS + "," + this.state.SS + ")"
    }

    //放大
    showbig = () => {
        if (this.state.i >= 0) {
            this.setState({ S: this.state.S + 1, i: this.state.i + 1, SS: 1 * (this.state.S + 1) })
        } else {
            this.setState({ S: this.state.S - 1, i: this.state.i + 1, SS: 1 / (this.state.S - 1) })
        }
        this.refs.imgstyle.style.transform = "translate(-50% ,0%) rotate(" + this.state.rotaRight + "deg) scale(" + this.state.SS + "," + this.state.SS + ")"
    }

    //缩小
    showmin = () => {
        if (this.state.i <= 0) {
            this.setState({ S: this.state.S + 1, i: this.state.i - 1, SS: 1 / (this.state.S + 1) })
        } else {
            this.setState({ S: this.state.S - 1, i: this.state.i - 1, SS: 1 * (this.state.S - 1) })
        }
        this.refs.imgstyle.style.transform = "translate(-50% ,0%) rotate(" + this.state.rotaRight + "deg) scale(" + this.state.SS + "," + this.state.SS + ")"
    }

    handleDisableBtn(flag) {
        this.setState({
            disableBtn: flag
        })
    } handleShowChangeImgBtn() {
        this.setState({
            showImg: true
        })
    }

    handleHideImgBtn() {
        this.setState({
            showImg: false
        })
    }

    //向左预览
    leftshow = () => {
        if (this.state.f == 0) {
            return
            this.setState({ f: this.state.imageSource.length, R: 0, S: 1, i: 0, SS: 1 })
        } else {
            this.setState({ f: this.state.f - 1, R: 0, S: 1, i: 0, SS: 1 })
        }
        this.refs.imgstyle.setAttribute('src', this.state.imageSource[this.state.f])
        this.setState({})
    }

    //向右预览
    rightshow = () => {
        if (this.state.f == this.state.imageSource.length - 1) {
            return
            this.setState({ f: 0, R: 0, S: 1, i: 0, SS: 1 })
        } else {
            this.setState({ f: this.state.f + 1, R: 0, S: 1, i: 0, SS: 1 })
        }
        this.refs.imgstyle.setAttribute('src', this.state.imageSource[this.state.f])
        this.setState({})
    }

    onWheel = () => {
        this.state.SS += event.wheelDelta / 1200;
        if (this.state.SS >= 0.2) {
            this.refs.imgstyle.style.transform = "scale(" + this.state.SS + ")";
        } else {
            this.state.SS = 0.2;
            this.refs.imgstyle.style.transform = "scale(" + this.state.SS + ")";
            return false;
        }
    }

    moveImg = (ev) => {

        const { x, y } = this.state

        ev.preventDefault()

        var disx = ev.pageX - x

        var disy = ev.pageY - y

        document.onmousemove = (ev) => {

            // this.setState({

            //     x: ev.pageX - disx,

            //     y: ev.pageY - disy

            // })
            this.state.x = ev.pageX - disx
            this.state.y = ev.pageY - disy
            this.refs.imgstyle.style.left = ev.pageX - disx + 'px'
            this.refs.imgstyle.style.top = ev.pageY - disy + 'px'

        }

        document.onmouseup = () => {

            document.onmousemove = null

            document.onmousedown = null

        }

    }

    handleShowModal = (imgPath, index) => {
        this.setState({ visible: true, imgPath, firstIndex: index, f: index })
    }

    handleClose = () => {
        this.setState({
            visible: false, rotaRight: 0, SS: 1,
            i: 0,
            S: 1,
            f: 0,
            x: 100,
            y: 0
        })
    }

    render() {

        return <div>
            <div style={{ textAlign: 'left', overflow: 'auto', width: '80%', marginLeft: '10%' }}>
                {
                    this.state.refuseCode == 'RR' ? <div>
                        <div>
                            <span style={{ color: '#999999' }}>当前状态：</span>
                            <span>{!Util.isEmpty(this.state.detailMessage) ? this.state.detailMessage.queueStatus : '--'}</span>
                        </div>
                        <div style={{ marginTop: 10 }}>
                            <span style={{ color: '#999999' }}>取消原因：</span>
                            <span>{!Util.isEmpty(this.state.detailMessage) ? this.state.detailMessage.reasonNote : '--'}</span>
                        </div>
                    </div> : null
                }
                {this.state.refuseCode == 'RR' ? null : <div style={{ marginTop: 10 }}>
                    <span style={{ color: '#999999' }}>距离取消：</span>
                    <span>{!Util.isEmpty(this.state.detailMessage) ? this.state.detailMessage.countdown : '--'}</span>
                </div>}
                <div style={{ marginTop: 10 }}>
                    <span style={{ color: '#999999' }}>预约时间：</span>
                    <span>{!Util.isEmpty(this.state.detailMessage) ? (this.state.detailMessage.admDate + '   ' + this.state.detailMessage.admTime) : '--'}</span>
                </div>
                <div style={{ marginTop: 10 }}>
                    <span style={{ color: '#999999' }}>问诊类型：</span>
                    <span>{!Util.isEmpty(this.state.detailMessage) ? this.state.detailMessage.admType : '--'}</span>
                </div>
                {/* <div style={{ marginTop: 10 }}>
                            <span style={{ color: '#999999' }}>患病时长：</span>
                            <span>{!Util.isEmpty(this.state.detailMessage) ? this.state.detailMessage.illnessTime : '--'}</span>
                        </div> */}
                <div style={{ marginTop: 10 }}>
                    <span style={{ color: '#999999' }}>病情描述：</span>
                    <span>{!Util.isEmpty(this.state.detailMessage) ? this.state.detailMessage.symptom : '--'}</span>
                </div>
                <div style={{ marginTop: 10 }}>
                    <span style={{ color: '#999999' }}>疾病描述：</span>
                    <span>{!Util.isEmpty(this.state.detailMessage) ? this.state.detailMessage.DiseaseDesc : '--'}</span>
                </div>
                <div style={{ marginTop: 10 }}>
                    <span style={{ color: '#999999' }}>过敏描述：</span>
                    <span>{!Util.isEmpty(this.state.detailMessage) ? this.state.detailMessage.AllergyDesc : '--'}</span>
                </div>
                <div style={{ marginTop: 10 }}>
                    {/* <img scr={!Util.isEmpty(this.state.detailMessage) ? this.state.detailMessage.imageAddress : ''} /> */}
                    {this.loadImageMsg()}
                </div>
            </div>
            <Modal
                visible={this.state.visible}
                title='图片预览' maskClosable={false}
                onCancel={this.handleClose}
                imageSource={this.state.imageSource}
                firstIndex={this.state.firstIndex}
                bodyStyle={{ padding: 5, overflow: 'hidden', maxHeight: '700px', maxWidth: '700px', minHeight: 500 }}
                footer={<div>
                    <Icon type="zoom-in" style={{ fontSize: '24px', cursor: 'pointer' }} onClick={this.showbig} title='放大' />
                    <Icon type="zoom-out" style={{ marginLeft: 10, fontSize: '24px', cursor: 'pointer' }} onClick={this.showmin} title='缩小' />
                    <Icon type='reload' style={{ marginLeft: 10, fontSize: '24px', cursor: 'pointer' }} onClick={this.rotateright} title='旋转' />
                    <a style={{ color: 'inherit' }} href={this.state.imgPath} target="_blank"><Icon type='download' style={{ marginLeft: 10, fontSize: '24px', cursor: 'pointer' }} title='下载' /></a>
                </div>}
                className="crc-modal"
            >
                <div className="crc-m-content" style={{ height: 680 }}>
                    <img onMouseDown={this.moveImg} onWheel={this.onWheel}
                        src={this.state.imageSource[this.state.f]} className="imgstyle" alt="" style={{
                            width: 'auto', cursor: 'pointer', height: 'auto', maxHeight: '100%', maxWidth: '100%',
                            transform: " rotate(" + this.state.rotaRight + "deg) scale(" + this.state.SS + "," + this.state.SS + ")",
                            left: this.state.x + 'px', top: this.state.y + 'px'
                        }}
                        className='imgstyle' ref='imgstyle' />
                    <div style={{ position: 'absolute', top: '50%', left: 10, zIndex: 20, cursor: 'pointer' }}
                        onClick={this.leftshow.bind(this)}>
                        <img src={leftImg} />
                    </div>
                    <div style={{ position: 'absolute', top: '50%', right: 10, zIndex: 20, cursor: 'pointer' }}
                        onClick={this.rightshow.bind(this)}>
                        <img src={rightImg} />
                    </div>
                </div>
            </Modal>
        </div>
    }
}

export default Form.create()(ShowConsultationDetailPage);