<template>
    <div class="pd10">
        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
            <el-tab-pane :label="item.label" :name="index + ''" v-for="(item, index) in storeList"></el-tab-pane>
            <div id="select-form">
                <formbd :display-options="displayOptions" ref="formbd" @search="store.reload" :type="type"></formbd>
            </div>
            <el-table
                ref="table"
                stripe
                v-if="tableHeight"
                :height="tableHeight"
                :data="tableData"
                highlight-current-row
                header-cell-class-name="table_header"
                v-loading="store.loading"
                style="width: 100%"
                border
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="70"></el-table-column>
                <el-table-column
                    align="center"
                    v-for="(item, index) in store.tableColumn"
                    :prop="item.prop"
                    show-overflow-tooltip
                    :label="item.label"
                    :min-width="item.width"
                    :key="index"
                ></el-table-column>
            </el-table>
            <el-pagination
                background
                align="right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="store.params.pageNum"
                :page-sizes="[20, 30, 40, 50, 100]"
                :page-size="store.params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="store.total"
                class="mt10"
            ></el-pagination>
        </el-tabs>
    </div>
</template>
<script>
/**
 * 算法表格列表
 * @description 算法列表页，根据父组件穿参数渲染数据
 * @property {String} type 母线:bus-bar 主网质量:main-network 源荷：source-load 变电站:substation
 * @property {Array}  storeList 页面数据 详情请看当前页面下的setting.js
 */
import formbd from '@/views/harmonic-boot/algoorithm/components/form'
import { dicData } from '@/assets/commjs/dictypeData'
import request from '@/utils/request'
import list from '@/mixins/list'

export default {
    mixins: [list],
    name: 'AlgorithmTemplate',
    components: { formbd },
    data() {
        return {
            activeName: '0',
            store: null,
            multipleSelection: [],
            // 稳态指标
            wentaizhibiaoList: [],
            // 电压登记
            dianyadengjiList: [],
            // 监测对象
            jianceduixiangList: [],
            displayOptions: {
                wentaizhibiao: false,
                zantaizhibiao: false,
                dianyadengji: false,
                tongjizhibiao: false,
                jianceduixiang: false,
                tongjileixing: false
            }
        }
    },
    props: {
        type: {
            type: String,
            default: ''
        },
        storeList: {
            type: Array,
            default: () => []
        }
    },
    computed: {
        // 服务端要求前端分页
        tableData() {
            let data = JSON.parse(JSON.stringify(this.store.data))
            return data.splice((this.store.params.pageNum - 1) * this.store.params.pageSize, this.store.params.pageSize)
        }
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
    },
    created() {
        // 稳态指标
        this.wentaizhibiaoList = dicData('Steady_Statis', [])
        // 电压等级
        this.dianyadengjiList = dicData('Dev_Voltage', [])
        // 监测对象
        this.jianceduixiangList = dicData('Monitoring_Labels', [])
        // 初始化
        this.init()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.tableHeight = window.sessionStorage.getItem('appheight') - 170 + 'px'
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        // 因为前端分页所以需要重写分页变化函数
        handleCurrentChange(e) {
            this.store.params.pageNum = e
            // this.store.search()
        },
        handleClick(tab, event) {
            this.init()
            this.$nextTick(() => {
                this.store.search()
            })
        },
        /**
         * 根据storeList渲染数据
         */
        init() {
            let sourceStore = JSON.parse(JSON.stringify(this.storeList[this.activeName]))
            for (let key in this.displayOptions) {
                this.displayOptions[key] = sourceStore.params.indexOf(key) > -1
            }
            // 电压等级指标差单独处理
            if (sourceStore.type === 27) {
                for (let i = 2; i <= 50; i++) {
                    sourceStore.tableColumn.push({
                        prop: `v${i}`,
                        label: `${i}次`,
                        width: 80
                    })
                }
            }
            this.store = {
                data: [],
                loading: true,
                total: 0,
                params: {
                    pageNum: 1,
                    pageSize: 20,
                    searchBeginTime: '',
                    searchEndTime: '',
                    searchState: '',
                    type: sourceStore.type,
                    searchValue: ''
                },
                tableColumn: sourceStore.tableColumn,
                search: () => {
                    this.loading = true
                    // 参数赋值
                    sourceStore.params.forEach(item => {
                        switch (item) {
                            case 'wentaizhibiao':
                                this.store.params['targetType'] = this.$refs.formbd[item]
                                break
                            case 'zantaizhibiao':
                                this.store.params['targetType'] = this.$refs.formbd[item]
                                break
                            case 'tongjileixing':
                                this.store.params['targetType'] = this.$refs.formbd[item]
                                break
                            case 'jianceduixiang':
                                this.store.params['mainType'] = this.$refs.formbd[item]
                                break
                            case 'dianyadengji':
                                this.store.params['mainType'] = this.$refs.formbd[item]
                                break
                            default:
                                this.store.params[item] = this.$refs.formbd[item]
                                break
                        }
                    })
                    this.store.params.orgId = this.$refs.formbd.orgId
                    this.store.params.dateType = this.$refs.formbd.dateType
                    this.store.params.queryDate = this.$refs.formbd.dateValue
                    request.post(sourceStore.url, this.store.params).then(res => {
                        res.data.forEach(item => {
                            if (item.value === 3.14159) {
                                item.value = '暂无数据'
                            }
                            if (item.secondType) {
                                item.secondTypeName = this.wentaizhibiaoList.find(item1 => item1.id === item.secondType)
                                    ? this.wentaizhibiaoList.find(item1 => item1.id === item.secondType).name
                                    : '暂无数据'
                            }
                            if (item.type) {
                                if (this.type === 'substation') {
                                    item.typeName = this.dianyadengjiList.find(item1 => item1.id === item.type)
                                        ? this.dianyadengjiList.find(item1 => item1.id === item.type).name
                                        : '暂无数据'
                                } else if (this.type === 'source-load') {
                                    item.typeName = this.jianceduixiangList.find(item1 => item1.id === item.type)
                                        ? this.jianceduixiangList.find(item1 => item1.id === item.type).name
                                        : '暂无数据'
                                }
                            }
                            for (let key in item) {
                                if (item[key] === 3.14159) item[key] = '暂无数据'
                            }
                        })
                        this.store.data = res.data
                        this.store.total = res.data.length
                        this.store.loading = false
                        console.log(this.store)
                        this.$nextTick(() => {
                            this.$refs.table.doLayout()
                        })
                    })
                },
                reload: () => {
                    this.pageNum = 1
                    this.store.search()
                }
            }
        }
    }
}
</script>
<style lang="sass" scoped></style>
