<template>
    <div v-loading="loading">
        <el-form :inline="true" style="position: relative">
            <el-form-item label="日期:">
                <el-date-picker
                    v-model="time"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                    :clearable="false"
                ></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
            </el-form-item>
            <span class="explanatory">
                <i class="el-icon-bottom icon" style="color: green"></i>
                :流入　
                <i class="el-icon-top icon" style="color: red"></i>
                :流出
            </span>
        </el-form>
        <el-table
            stripe
            :data="tableData"
            border
            style="width: 100%"
            height="calc(100vh - 190px)"
            highlight-current-row
            header-cell-class-name="table_header"
            :span-method="arraySpanMethod"
        >
            <!--  -->

            <el-table-column align="center" prop="harmonicTimes" label="谐波次数(次)"></el-table-column>
            <el-table-column label="谐波电流方向">
                <el-table-column align="center" prop="harmonicA" label="A">
                    <template slot-scope="scope">
                        <i v-if="scope.row.harmonicA > 0" class="el-icon-bottom icon" style="color: green"></i>
                        <i v-else-if="scope.row.harmonicA < 0" class="el-icon-top icon" style="color: red"></i>
                        <span v-else>/</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="harmonicB" label="B">
                    <template slot-scope="scope">
                        <i v-if="scope.row.harmonicB > 0" class="el-icon-bottom icon" style="color: green"></i>
                        <i v-else-if="scope.row.harmonicB < 0" class="el-icon-top icon" style="color: red"></i>
                        <span v-else>/</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="harmonicC" label="C">
                    <template slot-scope="scope">
                        <i v-if="scope.row.harmonicC > 0" class="el-icon-bottom icon" style="color: green"></i>
                        <i v-else-if="scope.row.harmonicC < 0" class="el-icon-top icon" style="color: red"></i>
                        <span v-else>/</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="三相总">
                    <template slot-scope="scope">
                        <i v-if="(scope.row.harmonicA+scope.row.harmonicB +scope.row.harmonicC )> 0" class="el-icon-bottom icon" style="color: green"></i>
                        <i v-else-if="(scope.row.harmonicA+scope.row.harmonicB +scope.row.harmonicC )< 0" class="el-icon-top icon" style="color: red"></i>
                        <span v-else>/</span>
                    </template>
                </el-table-column>
            </el-table-column>
        </el-table>
        <!-- <el-pagination
            background
            align="right"
            class="mt10"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[15, 30, 50, 100]"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.tableData.length"
        ></el-pagination> -->
    </div>
</template>
<script>
import api from '@/api/harmonic/onlineData'
export default {
    name: 'traceability',
    components: {},
    props: {
        treeid: {
            type: String,
            default: undefined
        }
    },
    data() {
        return {
            time: new Date(),
            tableData: [],
            currentPage: 1,
            pageSize: 30,
            loading: false
        }
    },
    created() {
        this.time = this.parseTime(new Date().getTime()- 3600 * 1000 * 24 , '{y}-{m}-{d}')
    },
    mounted() {
        this.onSubmit()
    },

    methods: {
        onSubmit() {
            this.loading = true
            api.trace({
                lineId: this.treeid,
                time: this.time
            }).then(res => {
                this.tableData = res.data
                if (this.tableData.length > 0) {
                    let A = 0
                    let B = 0
                    let C = 0
                    this.tableData.forEach(item => {
                        A += item.harmonicA
                        B += item.harmonicB
                        C += item.harmonicC
                    })
                    this.tableData.unshift({
                        harmonicTimes:'单相总',
                        harmonicA: A,
                        harmonicB: B,
                        harmonicC: C
                    })
                   
                }
                this.loading = false
            })
        },
        handleCurrentChange(val) {
            this.currentPage = val
        },
        handleSizeChange(val) {
            this.pageSize = val
        },
        parseTime(time, pattern) {
            if (arguments.length === 0 || !time) {
                return null
            }
            const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
            let date
            if (typeof time === 'object') {
                date = time
            } else {
                if (typeof time === 'string' && /^[0-9]+$/.test(time)) {
                    time = parseInt(time)
                } else if (typeof time === 'string') {
                    time = time
                        .replace(new RegExp(/-/gm), '/')
                        .replace('T', ' ')
                        .replace(new RegExp(/\.[\d]{3}/gm), '')
                }
                if (typeof time === 'number' && time.toString().length === 10) {
                    time = time * 1000
                }
                date = new Date(time)
            }
            const formatObj = {
                y: date.getFullYear(),
                m: date.getMonth() + 1,
                d: date.getDate(),
                h: date.getHours(),
                i: date.getMinutes(),
                s: date.getSeconds(),
                a: date.getDay()
            }
            const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
                let value = formatObj[key]
                // Note: getDay() returns 0 on Sunday
                if (key === 'a') {
                    return ['日', '一', '二', '三', '四', '五', '六'][value]
                }
                if (result.length > 0 && value < 10) {
                    value = '0' + value
                }
                return value || 0
            })
            return time_str
        },
        arraySpanMethod({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                if (columnIndex === 1) {
                    // return [4]
                }
            }
        }
    },

    computed: {},

    watch: {
        treeid() {
            this.onSubmit()
        }
    }
}
</script>
<style lang="scss" scoped>
.icon {
    font-weight: 800;
}
.explanatory {
    position: absolute;
    top: 15px;
    right: 10px;
}
</style>
