<template>
    <div v-loading="loading" element-loading-text="拼命加载中">
        <el-form :inline="true" :model="form" class="demo-form-inline">
            <!-- <el-form-item>
                <timeindex :id="1" ref="fff" :interval="3"></timeindex>
            </el-form-item> -->
            <el-form-item label="筛选:" class="ml10">
                <el-input v-model.trim="form.searchValue" clearable placeholder="输入关键字搜索" style="width: 100%" />
            </el-form-item>

            <el-form-item class="ml10">
                <el-button type="primary" @click="querfromdata" icon="el-icon-search">查询</el-button>
                <el-button type="primary" @click="handleAdd" icon="el-icon-plus">新增</el-button>
                <el-button type="primary" @click="handleAlgorithm" icon="el-icon-setting">执行算法</el-button>
            </el-form-item>
        </el-form>
        <div style="height: calc(100vh - 128px)">
            <vxe-table
                :data="tables"
                height="auto"
                border
                stripe
                :row-config="{ isCurrent: true, isHover: true }"
                size="mini"
                ref="classification"
                style="width: 100%"
                header-cell-class-name="table_header"
            >
                <vxe-table-colgroup
                    align="center"
                    v-for="(item, index) in column"
                    :field="item.prop"
                    :title="item.label"
                    :min-width="item.width"
                    show-overflow
                    :key="index"
                >
                    <vxe-table-colgroup
                        align="center"
                        v-for="(item, index) in item.children"
                        :field="item.prop"
                        :title="item.label"
                        :min-width="item.width"
                        show-overflow
                        :key="index"
                    ></vxe-table-colgroup>
                </vxe-table-colgroup>
                <vxe-table-column align="center" title="操作" min-width="220px" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)">
                            编辑
                        </el-button>
                        <el-button type="danger" size="mini" icon="el-icon-delete" @click="handleDelete(scope.row)">
                            删除
                        </el-button>
                    </template>
                </vxe-table-column>
            </vxe-table>
        </div>

        <!-- 新增、修改 -->
        <forms ref="formRef" @querfromdata="querfromdata" @showForm="showForm = false" v-if="showForm" />

        <!-- 执行算法 -->
        <algorithm ref="algorithmRef" v-if="showAlgorithm" @close="showAlgorithm = false" />
        <!-- <el-pagination
            background
            align="right"
            class="mt10"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[15, 30, 50, 100]"
            :current-page="form.pageNum"
            :page-size="form.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="this.tables.length"
        ></el-pagination> -->
    </div>
</template>
<script>
import timeindex from '@/views/cgy-components/cgytree/TimeintervalTemplat.vue'
import forms from './forms.vue'
import { queryPage, deleteById } from '@/api/CVT/index.js'
import algorithm from './algorithm.vue'
export default {
    components: { timeindex, forms, algorithm },
    props: {},
    data() {
        return {
            loading: false,
            showAlgorithm: false,
            form: {
                pageNum: 1,
                pageSize: 10000,
                searchValue: ''
            },
            showForm: false,
            tables: [],
            column: [
                { label: 'CVT名称', prop: 'cvtName', width: '300px' },
                { label: 'CVT型号', prop: 'cvtModel', width: '300px' },
                {
                    label: '谐波电压',
                    children: [
                        { label: '2次', width: '80px', prop: 'h2' },
                        { label: '3次', width: '80px', prop: 'h3' },
                        { label: '4次', width: '80px', prop: 'h4' },
                        { label: '5次', width: '80px', prop: 'h5' },
                        { label: '6次', width: '80px', prop: 'h6' },
                        { label: '7次', width: '80px', prop: 'h7' },
                        { label: '8次', width: '80px', prop: 'h8' },
                        { label: '9次', width: '80px', prop: 'h9' },
                        { label: '10次', width: '80px', prop: 'h10' },
                        { label: '11次', width: '80px', prop: 'h11' },
                        { label: '12次', width: '80px', prop: 'h12' },
                        { label: '13次', width: '80px', prop: 'h13' },
                        { label: '14次', width: '80px', prop: 'h14' },
                        { label: '15次', width: '80px', prop: 'h15' },
                        { label: '16次', width: '80px', prop: 'h16' },
                        { label: '17次', width: '80px', prop: 'h17' },
                        { label: '18次', width: '80px', prop: 'h18' },
                        { label: '19次', width: '80px', prop: 'h19' },
                        { label: '20次', width: '80px', prop: 'h20' },
                        { label: '21次', width: '80px', prop: 'h21' },
                        { label: '22次', width: '80px', prop: 'h22' },
                        { label: '23次', width: '80px', prop: 'h23' },
                        { label: '24次', width: '80px', prop: 'h24' },
                        { label: '25次', width: '80px', prop: 'h25' },
                        { label: '26次', width: '80px', prop: 'h26' },
                        { label: '27次', width: '80px', prop: 'h27' },
                        { label: '28次', width: '80px', prop: 'h28' },
                        { label: '29次', width: '80px', prop: 'h29' },
                        { label: '30次', width: '80px', prop: 'h30' },
                        { label: '31次', width: '80px', prop: 'h31' },
                        { label: '32次', width: '80px', prop: 'h32' },
                        { label: '33次', width: '80px', prop: 'h33' },
                        { label: '34次', width: '80px', prop: 'h34' },
                        { label: '35次', width: '80px', prop: 'h35' },
                        { label: '36次', width: '80px', prop: 'h36' },
                        { label: '37次', width: '80px', prop: 'h37' },
                        { label: '38次', width: '80px', prop: 'h38' },
                        { label: '39次', width: '80px', prop: 'h39' },
                        { label: '40次', width: '80px', prop: 'h40' },
                        { label: '41次', width: '80px', prop: 'h41' },
                        { label: '42次', width: '80px', prop: 'h42' },
                        { label: '43次', width: '80px', prop: 'h43' },
                        { label: '44次', width: '80px', prop: 'h44' },
                        { label: '45次', width: '80px', prop: 'h45' },
                        { label: '46次', width: '80px', prop: 'h46' },
                        { label: '47次', width: '80px', prop: 'h47' },
                        { label: '48次', width: '80px', prop: 'h48' },
                        { label: '49次', width: '80px', prop: 'h49' },
                        { label: '50次', width: '80px', prop: 'h50' }
                    ]
                },
                { label: '新增时间', prop: 'createTime', width: '200px' },
                { label: '更新时间', prop: 'updateTime', width: '200px' }
            ]
        }
    },
    created() {},

    methods: {
        //查询
        querfromdata() {
            this.showForm = false
            this.loading = true
            queryPage(this.form).then(res => {
                this.tables = res.data.records
                this.loading = false
            })
        },
        handleSizeChange() {},
        handleCurrentChange() {},

        // 新增
        handleAdd() {
            this.showForm = true
            setTimeout(() => {
                this.$refs.formRef.title = '新增CVT系数'
                this.$refs.formRef.dialogVisible = true
            }, 0)
        },
        // 执行算法
        handleAlgorithm() {
            this.showAlgorithm = true
            setTimeout(() => {
                this.$refs.algorithmRef.open()
            }, 100)
        },
        // 绑定监测点
        handleBind(index, row) {
            this.$refs.bindRef.open()
        },
        //编辑
        handleEdit(row) {
            this.showForm = true
            setTimeout(() => {
                this.$refs.formRef.doEdit(row)
                this.$refs.formRef.title = '修改CVT系数'
                this.$refs.formRef.dialogVisible = true
            }, 0)
        },
        //删除
        handleDelete(row) {
            this.$confirm('请确认是否删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteById({ id: row.id }).then(res => {
                    if (res.code == 'A0000') {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        })
                        this.querfromdata()
                    }
                })
            })
        }
    },

    computed: {},
    mounted() {
        this.querfromdata()
    }
}
</script>
<style lang="less" scoped>
@import url('../../../../styles/comStyle.less');
::v-deep tr th:nth-child(3) {
    div {
        text-align: left !important;
    }
}
</style>
