<template>
    <div>
        <el-container>
            <!--搜索-->
            <el-header class="searchBox">
                <el-form :inline="true" :model="searchForm" ref="searchForm" class="demo-form-inline">
                    <el-form-item label="测试名称">
                        <el-input v-model="searchForm.name" name="searchForm.name" placeholder="请输入关键字"/>
                    </el-form-item>

                    <el-form-item style="float: right">
                        <el-button type="primary" @click="init">搜索</el-button>
                        <el-button @click="reset">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-header>
            <!--表格-->
            <el-main class="tableBox">
                <vxe-toolbar>
                    <template #buttons>
                        <vxe-button @click="init()">刷新</vxe-button>
                    </template>
                </vxe-toolbar>
                <vxe-table
                        border
                        resizable
                        keep-source
                        show-overflow
                        highlight-hover-row
                        stripe
                        ref="xTable"
                        :data="tableData"
                        :span-method="mergeRowMethod"
                >
                    <vxe-table-column
                            field="infoName"
                            title="测试名称"
                            width="180"
                    />
                    <vxe-table-column
                            field="orderInfo"
                            title="测试订购"
                            width="100"
                    />
                    <vxe-table-column
                            field="name"
                            title="分组名称"
                            width="180"
                    />
                    <vxe-table-column
                            field="content"
                            title="分组描述"
                    />
                    <vxe-table-column
                            field="flowPercent"
                            title="分流比例"
                            width="100"
                    />
                    <vxe-table-column
                            field="orderGroup"
                            title="分组订购"
                            width="100"
                    />
                </vxe-table>
                <vxe-pager
                        :loading="loading"
                        :current-page="searchForm.pageNum"
                        :page-size="searchForm.pageSize"
                        :total="searchForm.totalResult"
                        :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
                        @page-change="handlePageChange"
                />
            </el-main>
        </el-container>
    </div>
</template>

<script>
    import {post, get} from '@/api/common'

    export default {
        name: 'Index',
        data() {
            return {
                //  搜索相关内容
                searchForm: {
                    name: '',
                    // id: '1463041030558453760',
                    pageNum: 1,
                    pageSize: 10,
                    totalResult: 0
                },
                // 表格数据
                loading: false,
                tableData: [],
            }
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                get('/abtest/info/orderdata', this.searchForm).then(res => {
                    this.tableData = res.data.list
                    this.searchForm.totalResult = res.data.total
                })
            },
            // 重置
            reset() {
                this.searchForm = {
                    name: '',
                    state: 1,
                    pageNum: 1,
                    pageSize: 10,
                    totalResult: 0
                }
                this.init()
            },
            // 翻页
            handlePageChange({currentPage, pageSize}) {
                this.searchForm.pageNum = currentPage
                this.searchForm.pageSize = pageSize
                this.init()
            },
            // 合并函数
            mergeRowMethod({row, _rowIndex, column, visibleData}) {
                const fields = ['infoName', 'orderInfo']
                const cellValue = row[column.property]
                if (cellValue && fields.includes(column.property)) {
                    const prevRow = visibleData[_rowIndex - 1]
                    let nextRow = visibleData[_rowIndex + 1]
                    if (prevRow && prevRow[column.property] === cellValue) {
                        return {rowspan: 0, colspan: 0}
                    } else {
                        let countRowspan = 1
                        while (nextRow && nextRow[column.property] === cellValue) {
                            nextRow = visibleData[++countRowspan + _rowIndex]
                        }
                        if (countRowspan > 1) {
                            return {rowspan: countRowspan, colspan: 1}
                        }
                    }
                }
            }
        }
    }
</script>

<style lang="scss">
    .searchBox {
        background-color: #fff;
        border-radius: 4px;
        box-shadow: #bfbfbf 0 0 2px;
        height: unset !important;
        padding: 10px 10px;

        form {
            margin: auto;

            .el-form-item {
                margin: 5px 5px;
            }
        }
    }

    .tableBox {
        margin-top: 10px;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: #bfbfbf 0 0 2px;

        .block {
            .el-pagination {
                margin-top: 30px;
                float: right;
            }
        }
    }
</style>
