<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"
                                       style="width: 160px;"
                                       :disabled="socketResponse.socketStatus!=='200'"
                                       @click="downLoadExcel">导出 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;height: 400px"
                                      placeholder="获取数据进度" readonly>
                            </el-input>
                        </el-col>
                        <el-col :span="4" style="margin-left: 40px;margin-top: 20px">
                            <el-progress type="circle" :percentage="proportion"
                                         :stroke-width="12"
                                         :color="customColors"
                                         :width="proportion>6?200:126">
                            </el-progress>
                        </el-col>
                    </el-row>
                </div>
            </el-card>
        </el-main>
    </el-container>
</template>

<script>

    import {getArrivalDataAnalysis, createArrivalExcel, downArrivalExcel} from "../../api/arrival_data_analysis";
    import ArrivalWebsocket from '@/utils/arrival_web_socket';

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


                /**
                 * 返回结果
                 */
                socketResponse: {
                    socketMessage: '',
                    socketStatus: '',
                    socketDataList: [],
                    socketCurrentNum: 1,
                    socketTotalNum: 1,
                },
                /**
                 * 查询列表
                 */
                queryInfo: {
                    //航班号
                    flightNo: 'CV4481',
                    //航班日期
                    flightDate: '2019-06-11',
                },

                /* 列表加载 */
                listLoading: false,
                downloadLoading: false,

                /**
                 * 百分比例
                 */
                proportion: 0,

                /**
                 * 百分比例，颜色
                 */
                customColors: [
                    {color: '#6f7ad3', percentage: 20},
                    {color: '#f56c6c', percentage: 40},
                    {color: '#e6a23c', percentage: 60},
                    {color: '#5cb87a', percentage: 80},
                    {color: '#1989fa', percentage: 100},
                ],
                /**
                 * 下载路径的参数
                 */
                fileName: "test.xls",
                ipAddress: "",
                url: "",
            }
        },
        methods: {
            /**
             * 获取出港信息列表
             */
            getExitInfoList() {
                let _this = this;
                if (_this.queryInfo.flightNo === '') {
                    if (_this.queryInfo.flightDate === '' || _this.queryInfo.flightDate === null) {
                        return _this.$message.warning('航班号与航班日期，不能同时为空');
                    }
                }
                _this.$message.success('开始获取统计数据');
                getArrivalDataAnalysis(_this.queryInfo).catch(error => {
                    // _this.$message.info("即将结束！请您稍候");
                });
            },

            /**
             * 下载excel
             */
            downLoadExcel() {
                downArrivalExcel().then((response) => {
                    this.downloadLoading = true;
                    let res = response.data;
                    if (res.code !== '200') {
                        return this.$message.error('下载失败');
                        this.downloadLoading = false;
                    }
                    // console.log(res.msg)
                    //获取地址
                    this.ipAddress = res.msg;
                    this.url = this.ipAddress + this.fileName;
                    console.log(this.url)
                    // console.log(this.ipAddress)
                    this.down();
                    this.downloadLoading = false;
                }).catch(error => {
                    this.downloadLoading = false;
                    console.log(error.toString())
                    this.$message.error(error.toString());
                });

            },

            down() {
                // 创建a标签
                const link = document.createElement('a');
                // download属性
                link.setAttribute('download', 'excel.xls');
                // href链接
                link.setAttribute('href', this.url);

                document.body.appendChild(link);
                // 自执行点击事件
                link.click()
            },

            /**
             * 生成excel
             */
            generateExcel() {
                createArrivalExcel(this.socketResponse.socketDataList).then((response) => {
                    let res = response.data;
                    if (res.code !== '200') {
                        return this.$message.error('生成excel失败');
                    }
                    this.fileName = res.msg;
                    console.log(this.fileName)
                    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.generateExcel();
                }
            },

            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() {
            ArrivalWebsocket.onopen = this.socket_onopen;
            ArrivalWebsocket.onmessage = this.socket_onmessage;
            ArrivalWebsocket.init();
        },
        destroyed() {
        },
        watch: {},
    }
</script>

<style scoped>

</style>