<template>
    <div class='bomb'>
        <div class='bomb-line' :class='data.hasOwnProperty("isExecuted")?(data.isExecuted?"green":"red"):"gray"'></div>
        <div class='close' @click='$emit("close")'>
            <img src='../../assets/close.png' alt />
        </div>
        <div class='bomb-left'>
            <div class='bomb-left1'>当前策略</div>
            <div class='bomb-left2'>
                应执行时间
                <span v-if='data.onTime'>{{data.onTime?data.onTime.slice(0,2)+":"+data.onTime.slice(2,4):"--"}}</span>
                <span v-else-if='data.offTime'>{{data.offTime?data.offTime.slice(0,2)+":"+data.offTime.slice(2,4):"--"}}</span>
                <span v-else>{{data.executeTime?data.executeTime.slice(8,10)+":"+data.executeTime.slice(10,12):"--"}}</span>
            </div>
            <div class='bomb-left3'>策略可靠度</div>
            <div id='circleEcharts' style='width:170px;height:204px'></div>
        </div>
        <div class='bomb-right'>
            <water-unit :data='data' :type='2'></water-unit>
            <div class='snapshotss-center2'>
                <div class='snapshotss-cont2-box1 MicrYaHei'>
                    <span>数据传输情况</span>
                    <span :class='data.energyErrorFlag!=1?"span1":"span2"'>
                        能耗
                        <img v-if='data.energyErrorFlag!=1' src='../../assets/finish.png' alt />
                        <img v-else src='../../assets/wrong.png' alt />
                    </span>
                    <span :class='data.environmentErrorFlag!=1?"span1":"span2"'>
                        环境
                        <img v-if='data.environmentErrorFlag!=1' src='../../assets/finish.png' alt />
                        <img v-else src='../../assets/wrong.png' alt />
                    </span>
                    <span :class='data.baErrorFalg!=1?"span1":"span2"'>
                        BA
                        <img v-if='data.baErrorFalg!=1' src='../../assets/finish.png' alt />
                        <img v-else src='../../assets/wrong.png' alt />
                    </span>
                </div>
                <div class='snapshotss-cont2-box2 MicrYaHei'>
                    <span>实际冷量</span>
                    <span>
                        <font
                            :class='parseInt(data.nowPlantLoad)=="-9999"?"reds":""'
                        >{{(data.nowPlantLoad==undefined)?'--':(parseInt(data.nowPlantLoad)=='-9999'?'x':(parseInt(data.nowPlantLoad)=='-9998'?'--':parseInt(data.nowPlantLoad)))}}</font>
                        <font style='font-size:12px;'>kW</font>
                    </span>
                    <span>未来1小时预测冷量</span>
                    <span>
                        <font
                            :class='parseInt(data.predictedLoad1h)=="-9999"?"reds":""'
                        >{{(data.predictedLoad1h==undefined)?'--':(parseInt(data.predictedLoad1h)=='-9999'?'x':(parseInt(data.predictedLoad1h)=='-9998'?'--':parseInt(data.predictedLoad1h)))}}</font>
                        <font style='font-size:12px;'>kW</font>
                    </span>
                </div>
            </div>
            <div class='bomb-right-bottom'>
                <el-input placeholder='你可以在此处填写备注信息' v-model='remarks' @blur='saveRemarks'></el-input>
            </div>
        </div>
    </div>
</template>

<script>
import echarts from 'echarts'
import waterUnit from './waterUnit'
import { updateCommand } from '@/api/strategy/strategy.js'
import { timestamp2String } from '@/utils/helper.js'

export default {
    data() {
        return {
            timestamp2String,
            circle1: 0,
            circle2: 0,
            remarks: ''
        }
    },
    props: ['data'],
    components: { waterUnit },
    methods: {
        saveRemarks() {
            let postParams = {
                id: this.data.id,
                remarks: this.remarks
            }
            updateCommand({ postParams }).then(res => {
                if (res.result == 'success') {
                    this.$message.success('添加备注成功！')
                }
            })
        },
        getData() {
            this.circle1 = this.data.strategyReliability ? this.data.strategyReliability.toFixed(2) : 0
            this.circle2 = 100 - this.circle1
            this.drawCircle()
        },
        drawCircle() {
            var circleEcharts = echarts.init(document.getElementById('circleEcharts'))
            let option = {
                color: ['#E1F2FF', '#0091FF'],
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: ['50%', '60%'],
                        avoidLabelOverlap: false,
                        hoverAnimation: false,
                        label: {
                            normal: {
                                show: true,
                                position: 'center',
                                formatter: function(formatter) {
                                    return formatter.percent + '%'
                                }
                            },
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: [
                            { value: this.circle1, name: '' },
                            { value: this.circle2, name: '' }
                        ]
                    }
                ]
            }
            circleEcharts.setOption(option)
        }
    },
    mounted() {
        this.getData()
    }
}
</script>

<style lang='scss' scoped>
.bomb {
    .reds {
        color: #f54e45;
    }
    background: #cccccc;
    width: 98%;
    display: flex;
    align-items: center;
    border-left: 8px solid #fff;
    position: relative;
    border-radius: 8px 0 0 8px;
    box-shadow: 0 2px 10px 0 rgba(44, 48, 62, 0.16);
    .bomb-line {
        position: absolute;
        top: 0;
        left: -8px;
        width: 8px;
        height: 100%;
        border-radius: 8px 0 0 8px;
    }
    .red {
        background: #f54e45ff;
    }
    .green {
        background: #34c724ff;
    }
    .gray {
        background: #0091ff;
    }
    .close {
        cursor: pointer;
        margin-left: 10px;
    }
    .bomb-left {
        width: 180px;
        padding-left: 10px;
        .bomb-left1 {
            font-size: 16px;
            margin: 38px 0 16px 0;
        }
        .bomb-left2 {
            color: #646c73;
            font-size: 14px;
            margin-bottom: 16px;
        }
        .bomb-left3 {
            color: #646c73;
            font-size: 14px;
            margin-bottom: 22px;
        }
    }
    .bomb-right {
        flex: 1;
        margin-right: 30px;
        .snapshotss-center2 {
            margin-top: 20px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .snapshotss-cont2-box1,
            .snapshotss-cont2-box2 {
                flex: 1;
                height: 80px;
                background: url('../../assets/copy.png');
                background-size: 100% 100%;
                display: flex;
                align-items: center;
                padding-left: 24px;
            }
            .snapshotss-cont2-box1 {
                margin-right: 12px;
                span:nth-of-type(1) {
                    height: 22px;
                    font-size: 14px;
                    color: rgba(100, 108, 115, 1);
                    line-height: 19px;
                    margin-right: 20px;
                }
                span:not(:first-child) {
                    height: 28px;
                    background: rgba(255, 255, 255, 1);
                    border-radius: 16px;
                    font-size: 14px;
                    color: rgba(31, 36, 41, 1);
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 0 6px 0 12px;
                    margin-right: 20px;
                    img {
                        width: 20px;
                        height: 20px;
                        margin-left: 8px;
                    }
                }
                .span1 {
                    border: 1px solid rgba(52, 199, 36, 1);
                }
                .span2 {
                    border: 1px solid rgba(245, 78, 69, 1);
                }
            }
            .snapshotss-cont2-box2 {
                span:nth-of-type(1),
                span:nth-of-type(3) {
                    height: 22px;
                    font-size: 14px;
                    color: rgba(100, 108, 115, 1);
                    line-height: 19px;
                    margin-right: 16px;
                }
                span:nth-of-type(2),
                span:nth-of-type(4) {
                    height: 32px;
                    font-size: 24px;
                    font-family: Persagy;
                    color: rgba(31, 36, 41, 1);
                    line-height: 29px;
                    margin-right: 64px;
                }
                span:nth-of-type(3) {
                    margin-right: 16px;
                }
            }
        }
        .bomb-right-bottom {
        }
    }
}
</style>