<template>
    <div v-if="userName !== '系统管理员' && userName !== '张凯'" style="margin: 50px 30px;text-align: center">您没有当前页面操作权限</div>
    <div v-else>
        <el-container>
            <!--表格-->
            <el-main class="tableBox">
                <vxe-toolbar>
                    <template #buttons>
                        <vxe-button icon="fa fa-plus" @click="toAdd">新增</vxe-button>
                        <vxe-button @click="init()">刷新</vxe-button>
                    </template>
                </vxe-toolbar>
                <vxe-table
                        border
                        resizable
                        keep-source
                        show-overflow
                        highlight-hover-row
                        ref="xTable"
                        :data="tableData"
                        :edit-config="{trigger: 'click', mode: 'cell', showStatus: true, }"
                        @edit-closed="editClosedEvent"
                >
                    <vxe-table-column
                            field="name"
                            title="名称"
                    />
                    <vxe-table-column
                            field="tag"
                            title="标识"
                    />
                    <vxe-table-column
                            field="createtime"
                            title="创建时间"
                            width="200"
                    />
                    <vxe-table-column title="操作" width="200">
                        <template #default="{ row }">
                            <template v-if="$refs.xTable.isActiveByRow(row)">
                                <vxe-button @click="saveRowEvent(row)">保存</vxe-button>
                                <vxe-button @click="cancelRowEvent(row)">取消</vxe-button>
                            </template>
                            <template v-else>
                                <vxe-button @click="toAdd(row)">编辑</vxe-button>
                                <vxe-button @click="del(row)">删除</vxe-button>
                            </template>
                        </template>
                    </vxe-table-column>
                </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: {
                    pageNum:1,
                    pageSize:10,
                    totalResult:0
                },
                // 表格数据
                loading: false,
                tableData: [],
                strategyStatus: [
                    {label: '生效', value: 1},
                    {label: '无效', value: 0}
                ],
                userName:''
            }
        },
        created() {
            console.log('用户：', this.$store.state.user.name)
            this.userName = this.$store.state.user.name
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                get('/strategyglobalinfo/page', this.searchForm).then(res => {
                    this.tableData = res.data.list
                    this.total = res.data.total
                    this.searchForm.totalResult = res.data.total
                })
            },
            editClosedEvent({row, column}) {
                const $table = this.$refs.xTable
                const field = column.property
                const cellValue = row[field]
                // 判断单元格值是否被修改
                if ($table.isUpdateByRow(row, field)) {
                    setTimeout(() => {
                        let param = {}
                        param[field] = cellValue
                        post('/abtest/typedict/update/' + row.id, row).then(res => {
                            this.$message({
                                message: res.message,
                                type: 'success'
                            });
                        })
                        // 局部更新单元格为已保存状态
                        $table.reloadRow(row, null, field)
                    }, 300)
                }
            },
            toAdd(e) {
                const routeUrl = this.$router.resolve({path: '/schemeGlobal/itemEdit', query: {id: e.id}})
                window.open(routeUrl.href, '_blank')
            },
            del(row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    const $table = this.$refs.xTable
                    $table.remove(row)
                    post('/strategyglobalinfo/delete', {'ids': [row.id]}).then(res => {
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handlePageChange({currentPage, pageSize}) {
                this.searchForm.pageNum = currentPage
                this.searchForm.pageSize = pageSize
                this.init()
            }
        }
    }
</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>
