<template>
    <el-container>
        <el-main>
            <el-card style="background-color: #F5F7FA">
                <!-- 搜素区域 -->
                <div>
                    <el-row :gutter="24">
                        <el-col :span="5">
                            <el-input v-model="queryInfo.flightNo" prefix-icon="el-icon-search"
                                      placeholder="请输入航班号" clearable style="width:220px">
                            </el-input>
                        </el-col>
                        <el-col :span="5">
                            <el-date-picker v-model="queryInfo.flightDate" type="date" value-format="yyyy-MM-dd"
                                            placeholder="请选择航班日期"
                                            style="width: 220px">
                            </el-date-picker>
                        </el-col>
                        <el-col :span="10">
                            <el-button type="primary" @click="getExitInfoList" style="width: 160px;" icon="el-icon-search">
                                数据统计查询
                            </el-button>
                            <el-button :loading="downloadLoading" type="success" icon="el-icon-s-home"
                                       :disabled="socketResponse.socketStatus!=='200'" style="width: 160px;"
                                       @click="downExcel">导出 Excel
                            </el-button>
                        </el-col>
                    </el-row>
                    <!--  显示区域   -->
                    <el-row :gutter="24" style="margin-top: 30px">
                        <el-col :span="11" style="margin-top: 10px">
                            <el-progress :text-inside="true" :stroke-width="15" :percentage="proportion"
                                         :color="customColors"
                                         style="width: 455px"></el-progress>
                            <el-input v-model="message" type="textarea"
                                      :autosize="{ minRows: 6, maxRows: 10}"
                                      style="width: 455px;"
                                      placeholder="获取数据进度" readonly>
                            </el-input>
                        </el-col>
                        <el-col :span="4" style="margin-left: 40px;margin-top: 20px">
                            <el-progress type="circle" :percentage="proportion"
                                         :color="customColors"
                                         :width="proportion>6?200:126"></el-progress>
                        </el-col>
                    </el-row>

                </div>

            </el-card>
        </el-main>
    </el-container>
</template>

<script>

    import {downExcel, getExitDataAnalysis} from "../../api/exit_data_analysis";
    import VueWebsocket from '@/utils/websocket';

    export default {
        name: "ExitAnalysis",
        data() {
            return {
                /**
                 * 出港业务统计列表
                 */
                exitInfoList: [],
                resultStatus: '0',
                message: '',

                proportion: 0,
                socketResponse: {
                    socketMessage: '',
                    socketStatus: '',
                    socketDataList: [],
                    socketCurrentNum: 1,
                    socketTotalNum: 1,
                },
                /**
                 * 查询列表
                 */
                queryInfo: {
                    //航班号
                    flightNo: 'RU186',
                    //航班日期
                    flightDate: '2019-10-31',
                },

                /* 列表加载 */
                listLoading: false,
                downloadLoading: false,
                customColors: [
                    {color: '#6f7ad3', percentage: 20},
                    {color: '#f56c6c', percentage: 40},
                    {color: '#e6a23c', percentage: 60},
                    {color: '#5cb87a', percentage: 80},
                    {color: '#1989fa', percentage: 100},
                ]
            }
        },
        methods: {
            /**
             * 获取出港信息列表
             */
            getExitInfoList(onfulfilled) {
                let _this = this;
                _this.$message.success('开始获取统计数据');
                getExitDataAnalysis(_this.queryInfo).catch(error => {
                    _this.$message.info("即将结束！请您稍候");
                });
            },
            /**
             * 下载excel
             */
            downExcel() {

            },
            /**
             * 生成excel
             */
            downExcelExit() {
                downExcel(this.socketResponse.socketDataList).then((response) => {
                    this.$message.success("Excel准备就绪")
                }).catch(error => {
                    this.$message.error(error.toString());
                });
            },
            socket_onmessage: function (e) {
                console.log("从websocket接收到新的消息-->>" + e.data);
                //this.message = this.message + e.data + "\n";
                let msgJson = JSON.parse(e.data);
                this.message = this.message + this.dataFormat(new Date()) + " -> " + msgJson.message + "\n";
                this.socketResponse = JSON.parse(e.data);
                this.socketResponse.socketMessage = msgJson.message;
                this.socketResponse.socketCurrentNum = msgJson.currentNum;
                this.socketResponse.socketTotalNum = msgJson.totalNum;
                console.log(this.socketMessage);
                this.socketResponse.socketStatus = msgJson.status;
                this.socketResponse.socketDataList = msgJson.data;
                console.log(msgJson);
                if (this.socketResponse.socketTotalNum !== null && this.socketResponse.socketTotalNum !== 0) {
                    this.proportion = this.toPercent(this.socketResponse.socketCurrentNum / this.socketResponse.socketTotalNum);
                }
                if (this.socketResponse.socketCurrentNum === this.socketResponse.socketTotalNum &&
                    this.socketResponse.socketTotalNum !== 0 && this.socketResponse.socketCurrentNum !== 0) {
                    this.downExcelExit();
                }
            },
            socket_onopen: function (e) {
                console.log("websocket->>链接已链接");
            },
            /**
             *  重写日期函数格式化日期
             */
            dataFormat(time) {
                return `${time.getFullYear()}-${time.getMonth() + 1 >= 10 ? (time.getMonth() + 1) : '0' + (time.getMonth() + 1)}-${time.getDate() >= 10 ? time.getDate() : '0' + time.getDate()} ${time.getHours() >= 10 ? time.getHours() : '0' + time.getHours()}:${time.getMinutes() >= 10 ? time.getMinutes() : '0' + time.getMinutes()}:${time.getSeconds() >= 10 ? time.getSeconds() : '0' + time.getSeconds()}`;
            },
            /**
             * 将小数转换成百分比
             * @param point
             * @returns {string|number}
             */
            toPercent(point) {
                if (point == 0) {
                    return 0;
                }
                let str = Number(point * 100).toFixed();
                // str+="%";
                return parseInt(str);
            }
        },
        created() {
            VueWebsocket.onopen = this.socket_onopen;
            VueWebsocket.onmessage = this.socket_onmessage;
            VueWebsocket.init();
        },
        destroyed() {
        },
        watch: {},
    }
</script>

<style scoped>

</style>