<template>
    <div>
        <el-row>
            <el-col :span="24">
                <div class="Top" ref="top">
                    <div class="pd10">
                        <el-form :inline="true" :model="form" class="demo-form-inline">
                            <div style="display: flex">
                                <el-form-item label="筛选">
                                    <el-input v-model="i" placeholder="请输入内容"></el-input>
                                </el-form-item>

                                <div style="display: flex; justify-content: space-between; flex-grow: 1">
                                    <el-form-item>
                                        <el-button type="primary" class="ml10" icon="el-icon-search" @click="steady">
                                            查询
                                        </el-button>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" class="ml10" @click="add">新增</el-button>
                                    </el-form-item>
                                </div>
                            </div>
                        </el-form>
                        <el-table
                            stripe
                            :data="totalData"
                            :height="height"
                            border
                            v-loading="isLoading"
                            style="width: 100%"
                            header-cell-class-name="table_header"
                        >
                            <el-table-column prop="point" label="套餐名"></el-table-column>
                            <el-table-column prop="point" label="套餐流量(MB)"></el-table-column>
                            <el-table-column prop="point" label="修改人"></el-table-column>
                            <el-table-column prop="point" label="修改时间"></el-table-column>
                            <el-table-column label="类型">
                                <template slot-scope="scope">
                                    <el-tag @click="cha(scope.row)">{{ scope.row.point }}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="类型">
                                <template slot-scope="scope">
                                    <el-tag @click="cha(scope.row)">{{ scope.row.point }}</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column prop="" label="操作">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">
                                        编辑
                                    </el-button>
                                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">
                                        删除
                                    </el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-dialog
            :close-on-click-modal="false"
            title="编辑"
            :visible.sync="dialogVisible"
            width="20%"
            :before-close="handleClose"
        >
            <el-form ref="form" :model="form" label-width="130px" :inline="true" class="demo-form-inline">
                <el-form-item label="套餐名称:" style="margin-top: 20px">
                    <el-input v-model="form.name" clearable></el-input>
                </el-form-item>
                <el-form-item label="套餐流量:" style="margin-top: 20px">
                    <el-input v-model="form.type" clearable></el-input>
                </el-form-item>

                <el-form-item label="套餐类型:" style="margin-top: 20px">
                    <el-select v-model="value" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="二级类型:" style="margin-top: 20px">
                    <el-select v-model="value" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            :close-on-click-modal="false"
            title="新增"
            :visible.sync="dialogVisible1"
            width="20%"
            :before-close="handleClose"
        >
            <el-form ref="form" :model="form" label-width="130px" :inline="true" class="demo-form-inline">
                <el-form-item label="套餐名称:" style="margin-top: 20px">
                    <el-input v-model="form.name" clearable></el-input>
                </el-form-item>
                <el-form-item label="套餐流量:" style="margin-top: 20px">
                    <el-input v-model="form.type" clearable></el-input>
                </el-form-item>

                <el-form-item label="套餐类型:" style="margin-top: 20px">
                    <el-select v-model="value" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="二级类型:" style="margin-top: 20px">
                    <el-select v-model="value" placeholder="请选择">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import Area from '@/views/components/Area/Area.vue'
import { figure, serial, diagram, monthly } from './indicatorClassification.js'
import { viewheight } from '@/assets/commjs/common'
import { Classification } from './indicatorClassification.js'
import Timslot from './Timeslot.vue'
export default {
    components: { Area, Timslot },
    data() {
        return {
            i: '',
            vh1: '',
            dialogVisible: false,
            dialogVisible1: false,
            options: [
                {
                    value: '选项1',
                    label: '电铁'
                },
                {
                    value: '选项2',
                    label: '换流站'
                },
                {
                    value: '选项3',
                    label: '风电'
                },
                {
                    value: '选项4',
                    label: '光伏'
                },
                {
                    value: '选项5',
                    label: '其他非线性负荷'
                },
                {
                    value: '选项6',
                    label: '敏感重要高危用户'
                },
                {
                    value: '选项7',
                    label: '变电站'
                },
                {
                    value: '选项8',
                    label: '跨省关口'
                },
                {
                    value: '选项9',
                    label: '其他'
                }
            ],
            value: '',
            form: {
                date: ''
            },
            height: null,
            isLoading: false,
            //稳态指标超标统计

            totalData: [{ point: 1111 }],

            active_active: 'first-first',
            zoom: undefined, //图表焦点校验
            vh: '',
            height: 265,
            device: '',
            getHeight: '',
            tabPosition: 'top',
            active: 'first',
            isLoading: false,
            isLoading2: false,
            isLoading3: false,
            isLoading4: false,
            serialData: []
        }
    },
    created() {
        this.account()
        this.steady()
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        setTimeout(() => {
            this.getHeight = Number(this.$refs.getHeight.offsetHeight - 45)
        }, 0)
        //echarts图表调用

        this.zoom = 1 / document.body.style.zoom
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh1 = window.sessionStorage.getItem('appheight') - 20 + 'px'
            this.device = window.devicePixelRatio
            this.height = window.sessionStorage.getItem('appheight') - 175 + 'px'
            this.vh = (viewheight() - 90) / 2 + 'px'
            this.zoom = 1 / document.body.style.zoom
        },
        add() {
            this.dialogVisible1 = true
        },
        handleClose() {
            this.dialogVisible = false
            this.dialogVisible1 = false
        },
        handleEdit(val) {
            this.dialogVisible = true
            // console.log(val, "valvalval");
        },
        cellStyle(row, column, rowIndex, columnIndex) {
            // console.log(row);
            if (row.columnIndex == 2 || row.columnIndex == 3 || row.columnIndex == 4 || row.columnIndex == 5) {
                return 'font-weight: 600;'
            }
        },
        //监测终端统计echarts图表

        //方法调用台账统计数据接口
        account() {
            this.isLoading = true
            this.isLoading2 = true
            //监测终端统计单位表格数据
            Classification().then(res => {
                this.isLoading = false
                this.serialData = res.data
            })
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../../../../styles/comStyle.less');
::v-deep .el-table .cell {
    text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
    padding: 10px;
}
.prop {
    font-weight: 600;
}
::v-deep .el-table__body-wrapper.is-scrolling-none {
    height: 227px !important;
}
</style>
