<template>
    <div class="fire-water">
        <!--        <h4 class="title">B超室电气火灾</h4>-->
        <div class="top">
            <h4 class="title">{{data.deviceName}}</h4>
            <!--            <div class="status" v-if="data.viewInfo.smokeState == 0">-->
            <!--                正常-->
            <!--            </div>-->
            <!--            <div class="status status-danger" v-else>-->
            <!--                报警-->
            <!--            </div>-->
            <div class="status">
                正常
            </div>
        </div>
        <p>安装位置：{{data.installAddr}}</p>
        <div class="chart1El" style="width: 100vw;height: 150px"></div>
        <p>预警范围：<0.1Mpa br或>0.5Mpa</p>
        <p>安装时间：{{data.viewInfo.addTime|dateFilter}}</p>
        <p>SIM卡余期：247天</p>
        <div class="chart2El" style="width: 100vw;height: 150px"></div>
        <table class="table" cellspacing="0">
            <thead>
            <tr>
                <td>时间</td>
                <td>水压</td>
                <td>状态</td>
                <td>处理情况</td>
            </tr>
            </thead>
            <tbody v-if="!true">
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            </tbody>
            <tbody v-else>
               <tr>
                   <td colspan="4">
                       <p>暂无数据</p>
                   </td>
               </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    import * as echarts from "echarts";
    import 'echarts-liquidfill/src/liquidFill.js'
    import {dateUtils} from 'happy-utils'

    export default {
        name: "FireWater",
        props: {
            el: [String, Number],
            data: Object,
            chart1Type: {
                type: Number,
                default: 1
            }
        },
        filters: {
            dateFilter(str) {
                return dateUtils.dateFormat(new Date(str), 'yyyy-MM-dd')
            }
        },
        data() {
            return {
                pageData: {
                    limit: 1,
                    size: 10
                },
                tableData: []
            }
        },
        mounted() {
            this.initChart1()
            this.initChart2()
        },
        methods: {
            initChart1() {
                let chart1 = echarts.init(document.getElementsByClassName('chart1El')[this.el]);
                let option;
                let val = this.data.viewInfo.value.replace(this.data.viewInfo.unit, '');
                let unit = this.data.viewInfo.unit;
                if (this.chart1Type === 1) {
                    option = {
                        series: [{
                            type: 'gauge',
                            startAngle: 180,
                            endAngle: 0,
                            min: 0,
                            max: 0.5,
                            splitNumber: 8,
                            progress: {
                                show: true,
                                width: 2,
                                itemStyle: {
                                    borderColor: '#00E8FF',
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    width: 2,
                                    color: [
                                        [0, '#116081'],
                                        [1, '#116081']
                                    ]
                                }
                            },
                            pointer: {
                                offsetCenter: [0, '10%'],
                                icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
                                length: '95%',
                                itemStyle: {
                                    color: '#00E8FF'
                                }
                            },
                            splitLine: {
                                distance: -18,
                                length: 18,
                                lineStyle: {
                                    color: '#005E8C'
                                }
                            },
                            axisTick: {
                                distance: -12,
                                length: 10,
                                lineStyle: {
                                    color: '#005E8C'
                                }
                            },
                            axisLabel: {
                                color: '#00E8FF',
                                fontSize: 12,
                                distance: 10,
                                formatter: function (value) {
                                    if (value === 0 || value === 0.5) {
                                        return value;
                                    }
                                }
                            },
                            title: {
                                offsetCenter: [0, '-20%'],
                                fontSize: 12
                            },
                            detail: {
                                fontSize: 12,
                                offsetCenter: [0, '40%'],
                                valueAnimation: true,
                                formatter: function (value) {
                                    return value + unit;
                                },
                                color: '#000',
                                fontWeight: '0'
                            },
                            data: [{
                                value: val,
                            }]
                        }]
                    };
                } else if (this.chart1Type === 2) {
                    option = {
                        dataset: {
                            source: [[1, 156]]
                        },
                        tooltip: {},
                        series: [
                            {
                                type: 'liquidFill',
                                data: [val, val],
                                animationDurationUpdate: 2000,
                                radius: '80%',
                                outline: {
                                    show: true,
                                    borderDistance: 0,
                                    itemStyle: {
                                        borderWidth: 5,
                                        color: '#040038'
                                    }
                                },
                                backgroundStyle: {
                                    borderColor: '#156ACF',
                                    borderWidth: 1,
                                    shadowColor: 'rgba(0, 0, 0, 0.4)',
                                    shadowBlur: 0
                                },
                                label: {
                                    position: ['50%', '50%'],
                                    formatter: function () {
                                        return val + unit;
                                    },
                                    fontSize: 12,
                                    color: '#000',
                                    fontWeight: '100'
                                }
                            }
                        ]
                    }
                }
                // 使用刚指定的配置项和数据显示图表。
                chart1.setOption(option);
            },
            initChart2() {
                let chart2 = echarts.init(document.getElementsByClassName('chart2El')[this.el]);
                let unit = this.data.viewInfo.unit;
                // 指定图表的配置项和数据
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        formatter: function (params) {
                            params = params[0];
                            return `
                                <p style="margin: 0;padding: 0;font-size: 12px;">${params.seriesName}</p>
                                <p style="margin: 0;padding: 0;font-size: 12px;">${params.marker}${params.axisValue}: <strong>${params.value} ${unit}</strong></p>
                            `;
                        }
                    },
                    grid: {
                        top: '40',
                        bottom: '30'
                    },
                    xAxis: {
                        nameTextStyle: {
                            color: '#000'
                        },
                        axisLabel: {
                            color: '#000'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#0075D2'
                            }
                        },
                        data: this.data.names
                    },
                    yAxis: {
                        name: '水压走势',
                        nameTextStyle: {
                            color: '#000'
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#000'
                            }
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#0075D2'
                            },
                        },
                        splitLine: {
                            show: false
                        }
                    },
                    series: [
                        {
                            name: '水压走势',
                            type: 'line',
                            stack: '总量',
                            itemStyle: {
                                color: '#00AAC2'
                            },
                            data: this.data.values
                        },
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                chart2.setOption(option);
            },
        },
    }
</script>

<style scoped>

</style>

<style lang="scss">
    .fire-water {
        margin-top: 20px;
        width: calc(100% - 30px);
        /*height: 270px;*/
        margin: 15px;
        border: 1px solid #ddd;
        background: #FFF;
        overflow: hidden;
        padding: 0 0 15px;

        .top {
            overflow: hidden;
            height: 60px;
            line-height: 60px;
            padding: 0 15px;
            border-bottom: 1px solid #ddd;

            .title {
                /*padding-top: 15px;*/
                /*margin: 30px 0;*/
                font-size: 28px;
                font-weight: 600;
                color: #000;
                float: left;
            }

            .status {
                float: right;
                color: rgb(12, 110, 207);
            }

            .status-danger {
                color: #D7241F;
            }
        }

        p {
            color: #000;
            font-size: 20px;
            margin: 15px 0 15px;
            padding: 0 15px;
        }

        ul, li {
            list-style-type: none;
            padding: 0 0 30px;
            margin: 0;
        }

        li {
            width: 33.333%;
            float: left;
            text-align: center;

            p {
                padding: 0;
                margin: 0;
            }
        }

        .table {
            width: 100%;
            margin: 10px 0;
            thead{
                background: #ccc;
            }

            tr > td {
                padding: 15px 0;
                width: 25%;
                text-align: center;
            }

            p{
                width: 100%;
                text-align: center;
            }
        }
    }
</style>