<template>
    <div class="content">
        <van-nav-bar
                title="算力详情 "
                left-text="返回"
                left-arrow
                @click-left="onClickLeft"
                @click-right="onClickRight"
        />
        <div class="order-detail-content">
            <div class="order-detail-top">
            <span>{{detail.totalProfit==0?"未挖到区块": '+'+ detail.totalProfit}}
            </span>
            </div>
            <div>
                <div class="order-detail-top-item">
                    <span>算力:</span> {{detail.enName}} | {{detail.coinPackage.number}}{{detail.coinPackage.packageUnitName}}/S
                </div>
                <div class="order-detail-top-item">
                    <span>租用状态:</span>{{getLeaseStatus(detail.leaseStatus)}}
                </div>
                <div class="order-detail-top-item">
                    <span>租用时长:</span> {{detail.duration}} min(分钟)
                </div>
                <div class="order-detail-top-item">
                    <span>剩余时长:</span> {{getLeaseTime(detail.leaseEndTime)}} min(分钟)
                </div>
                <div class="order-detail-divider"></div>
            </div>
            <!--         算力监控   /-->
            <div>
                <div class="order-detail-title">
                    <span>算力监控</span>
                </div>
                <ve-line :data-empty="dataEmpty" :settings="chartSettings" :data="chartData" :resize-delay="1000"
                         :extend="extend" width="100%"
                         height="280px"></ve-line>
            </div>
            <!--         区块记录   /-->
            <div>
                <div class="order-detail-title">
                    <span>区块记录</span>
                </div>
                <div class="order-detail-record">
                    <div class="order-detail-record-left">
                        <span>时间</span>
                    </div>
                    <div class="order-detail-record-right">
                        <span>收益（单位）</span>
                    </div>
                </div>
                <div class="order-detail-divider" style="margin-top: 10px"></div>
                <van-list
                        style="margin-top: 10px"
                        v-model="loading"
                        :finished="finished"
                        @load="onLoad"
                >
                    <div class="order-detail-record-item" v-for="item in detail.blockList" :key="item.id">
                        <span>{{timestampToTime(item.created_at)}}</span>
                        <span class="order-detail-record-item-right">+{{item.rewards}} {{detail.enName}}</span>
                    </div>
                </van-list>
            </div>
        </div>

    </div>
</template>

<script>
    import {getOrderDetail} from '@/api/order'
    import 'v-charts/lib/style.css'

    export default {
        name: "OrderDetail",
        data() {
            this.extend = {
                darkMode: "auto",
                color: colorPalette,
                title: {
                    show: false,
                    padding: 0,
                    height: 0,
                },
                legend: {
                    show: false,
                    padding: 0,
                    height: 0,
                },
                series: {
                    type: "line",
                    smooth: false,
                },
                grid: {
                    top: 25,
                    bottom: 15,
                    show: false,
                },
                xAxis: {},
            };
            let colorPalette = ['#4992ff', '#7cffb2', '#fddd60', '#ff6e76', '#58d9f9', '#05c091', '#ff8a45', '#8d48e3', '#dd79ff', '#91ca8c', '#f49f42'];
            return {
                profit: "+12.3482 BTC",
                detail: {
                    coinPackage: {},
                    profit: [],
                },
                list: [],
                loading: false,
                finished: false,
                dataEmpty: true,
                chartSettings: {
                    area: true,//是否显示为面积图
                    xAxisType: "category",
                    yAxisType: "value",
                    yAxisName: "",
                    boundaryGap: false,
                    lineStyle: {// 使用深浅的间隔色
                        color: ['#B9B8CE'],
                    },
                    itemStyle: {
                        normal: {
                            color: '#100C2A',
                            color0: '#0CF49B',
                            borderColor: '#100C2A',
                            borderColor0: '#0CF49B'
                        }
                    }
                },
                chartData: {
                    columns: ["time", "hash"],
                    rows: [
                        {time: "12:00", hash: 1393},
                        {time: "12:30", hash: 3530},
                        {time: "12:40", hash: 2923},
                        {time: "12:50", hash: 3792},
                        {time: "13:00", hash: 4593}
                    ]
                },
            }
        },
        created() {
            // let params = this.$route.query.item
            // window.console.log('submit', params);
            // this.item = JSON.parse(params);
        },
        mounted() {
        },
        methods: {
            onClickLeft() {
                this.$router.go(-1)
            },
            onClickRight() {
            },
            onLogin() {
                this.$router.go(-1)
            },
            getLeaseStatus(status) {
                if (status == "0") {
                    return "待进行";
                } else if (status == "1") {
                    return "进行中";
                } else if (status == "2") {
                    return "已完成";
                }
                return "暂无"
            },
            onLoad() {
                const params = {
                    "orderSn": this.$route.query.orderSn
                }
                getOrderDetail(params).then(res => {
                    this.detail = res.data;
                    this.chartData.rows = res.data.hash
                    if (this.detail.hash.length > 0) {
                        this.dataEmpty = false;
                    }
                })
                this.loading = false;
                this.finished = true;
            },
            timestampToTime(timestamp) {
                var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                var D = date.getDate() + ' ';
                var h = date.getHours() + ':';
                var m = date.getMinutes() + ':';
                var s = date.getSeconds();
                return Y + M + D + h + m + s;
            },
            getLeaseTime(time) {
                let date = new Date(time);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
                let timestamp = date.getTime();
                if (this.detail.leaseStatus == "0") {
                    return this.detail.duration;
                } else if (this.detail.leaseStatus == "1") {
                    return timestamp - new Date().getTime()/1000;
                }
                return "0";
            }
        }
        ,
        setup() {
        }
    }
</script>

<style scoped>
    .order-detail-content {
        margin-right: 15px;
        margin-left: 15px;
        background: white;
    }

    .order-detail-top {
        margin-top: 35px;
        margin-left: 20px;
        margin-bottom: 20px;
        font-weight: bold;
        font-size: 16px;
        /*flex 布局*/
        display: flex;
        /*实现垂直居中*/
        align-items: center;
        /*实现水平居中*/
        justify-content: center;
    }

    .order-detail-top-item {
        height: 30px;
        margin-left: 20px;
        font-weight: normal;
        font-size: 14px;
    }

    .order-detail-title {
        height: 35px;
        line-height: 35px;
        margin-left: 20px;
        font-weight: bold;
        font-size: 18px;

    }

    .order-detail-divider {
        margin: 10px 20px;
        background-color: #f2f2f2;
        height: 1px;
        clear: both;

    }


    .order-detail-record {
        margin-left: 20px;
        margin-right: 20px;
    }

    .order-detail-record-left {
        float: left;
    }

    .order-detail-record-right {
        float: right;

    }

    .order-detail-record-item {
        margin-left: 20px;
        margin-right: 20px;
        min-height: 30px;
        line-height: 30px;
        /*实现垂直居中*/
        align-items: center;
    }

    .order-detail-record-item-right {
        right: 0;
        float: right;
    }

    .order-detail-item-title {
        margin-top: 8px;
        height: 30px;
        text-align: center;
        /*flex 布局*/
        display: flex;
        /*实现垂直居中*/
        align-items: center;
        clear: both;

    }


    .order-detail-item-title span {
        margin-left: 5px;
        margin-left: 20px;

        font-weight: bold;
    }

</style>
