<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" placeholder="输入关键字搜索" style="width: 100%" clearable />
            </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="handleBind" class="ml10" size="mini" icon="el-icon-sort">
                    绑定
                </el-button>
            </el-form-item>
        </el-form>

        <div style="height: calc(100vh - 150px)">
            <vxe-table
                :data="tables"
                height="auto"
                border
                ref="tableRef"
                stripe
                :row-config="{ isCurrent: true, isHover: true }"
                size="mini"
                v-loading="isLoading"
                style="width: 100%"
                header-cell-class-name="table_header"
            >
                <!-- <vxe-column type="radio" width="60"></vxe-column> -->
                <vxe-column type="radio" width="65"></vxe-column>
                <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>
        </div>
        <!-- 新增、修改 -->
        <forms ref="formRef" />

        <!-- 执行算法 -->
        <algorithm ref="algorithmRef" />
        <!-- <el-pagination
            background
            align="right"
            class="mt10"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[15, 30, 50, 100]"
            :current-page="form.currentPage"
            :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 algorithm from './algorithm.vue'
import { queryPage, cvtBind, queryByLineId } from '@/api/CVT/index.js'
export default {
    components: { timeindex, forms, algorithm },
    props: {
        clickData: {
            type: Object
        }
    },
    data() {
        return {
            loading: false,
            form: {
                currentPage: 1,
                pageSize: 10000,
                searchValue: ''
            },
            radioId: '',
            isLoading: false,
            spanArray: [], // 用于存储每个name字段合并的行数
            position: 0, // 用于记录合并的位置
            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' }
                    ]
                }
            ]
        }
    },
    created() {},

    methods: {
        querfromdata() {
            this.isLoading = true
            queryPage(this.form).then(res => {
                this.tables = res.data.records
                this.tables.unshift({
                    cvtName: '默认',
                    cvtModel: '默认',
                    h2: 1,
                    h3: 1,
                    h4: 1,
                    h5: 1,
                    h6: 1,
                    h7: 1,
                    h8: 1,
                    h9: 1,
                    h10: 1,
                    h11: 1,
                    h12: 1,
                    h13: 1,
                    h14: 1,
                    h15: 1,
                    h16: 1,
                    h17: 1,
                    h18: 1,
                    h19: 1,
                    h20: 1,
                    h21: 1,
                    h22: 1,
                    h23: 1,
                    h24: 1,
                    h25: 1,
                    h26: 1,
                    h27: 1,
                    h28: 1,
                    h29: 1,
                    h30: 1,
                    h31: 1,
                    h32: 1,
                    h33: 1,
                    h34: 1,
                    h35: 1,
                    h36: 1,
                    h37: 1,
                    h38: 1,
                    h39: 1,
                    h40: 1,
                    h41: 1,
                    h42: 1,
                    h43: 1,
                    h44: 1,
                    h45: 1,
                    h46: 1,
                    h47: 1,
                    h48: 1,
                    h49: 1,
                    h50: 1,
                    id: ''
                })
                let data = this.tables.filter(item => item.id == this.radioId)
                this.tables = this.tables.filter(item => {
                    // 将 a 和 b 属性的值转换为字符串，然后检查是否包含目标值转换后的字符串
                    return (
                        String(item.cvtName).includes(String(this.form.searchValue)) ||
                        String(item.cvtModel).includes(String(this.form.searchValue))
                    )
                })
                data.length > 0
                    ? this.$refs.tableRef.setRadioRow(data[0])
                    : this.$refs.tableRef.setRadioRow(this.tables[0])
                this.isLoading = false
            }).catch(() => {
                this.isLoading = false
            })
        },

        clearRadioRowEvent() {
            this.$refs.tableRef.clearRadioRow()
        },
        // 查询绑定的监cvt
        queryBind(id) {
            queryByLineId({ lineId: id }).then(res => {
                this.radioId = res.data.id
                this.querfromdata()
            })
        },

        // 绑定监测点
        handleBind() {
            const currRow = this.$refs.tableRef.getRadioRecord()

            cvtBind({ cvtId: currRow == null ? '' : currRow.id, lineId: this.clickData.id }).then(res => {
                if (res.code == 'A0000') {
                    this.radioId = currRow == null ? null : currRow.id
                    this.$message.success('绑定成功!')
                }
            })
        }
    },

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