<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" placeholder="策略名称"/>
                    </el-form-item>
                    <el-form-item label="生效状态">
                        <el-select v-model="searchForm.status" filterable placeholder="请选择">
                            <el-option label="全部" :value="null"/>
                            <el-option label="生效中" :value="1"/>
                            <el-option label="未生效" :value="0"/>
                        </el-select>
                    </el-form-item>

                    <el-form-item style="float: right">
                        <el-button type="primary" @click="init()">搜索</el-button>
                        <el-button @click="reset('searchForm')">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-header>
            <!--表格-->
            <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="describeContent"
                            title="策略备注"
                            width="300"
                    />
                    <vxe-table-column
                            field="status"
                            title="状态"
                            :edit-render="{name: '$select', options: strategyStatus}"
                            width="100"
                    />
                    <vxe-table-column
                            field="createTime"
                            title="创建时间"
                    />
                    <vxe-table-column title="操作" width="220">
                        <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="toCopy(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: {
                    name: '',
                    status: null,
                    pageNum: 1,
                    pageSize: 10,
                    totalResult:0
                },
                // 表格数据
                loading: false,
                tableData: [],
                templateList: [],
                strategyStatus: [
                    {label: '生效中', value: 1},
                    {label: '未生效', value: 0}
                ],
            }
        },
        mounted() {
            get('/templateInfo/page', {'pageSize': 100, 'pageNum': 1}).then(res => {
                res.data.list.map(res => {
                    res.templatePhoto = process.env.VUE_APP_BASE_IMG_URL + res.templatePhoto
                    res.label = res.templateName
                    res.value = res.id
                })
                this.templateList = res.data.list
            })
            this.init()
        },
        methods: {
            init() { // 列表搜索
                get('/strategyproinfo/page', this.searchForm).then(res => {
                    if(res.data) {
                        this.tableData = res.data.list
                        this.searchForm.totalResult = res.data.total
                    }else{
                        this.tableData = []
                        this.searchForm.totalResult = 0
                    }

                })
            },
            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('/strategyproinfo/update/' + row.id, row).then(res => {
                            this.$message({
                                message: res.message,
                                type: 'success'
                            });
                        })
                        // 局部更新单元格为已保存状态
                        $table.reloadRow(row, null, field)
                    }, 300)
                }
            },
            reset(formName) { // 重置
                this.searchForm = {
                    name: '',
                    status: null,
                    pageNum: 1,
                    pageSize: 10,
                    totalResult:0
                }
                this.init()
            },
            toAdd(e) {
                const routeUrl = this.$router.resolve({path: '/schemeProinfo/ProinfoEdit', query: {id: e.id}})
                window.open(routeUrl.href, '_blank')
            },
            toCopy(e) {
                const routeUrl = this.$router.resolve({path: '/schemeProinfo/ProinfoEdit', query: {copyId: 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('/strategyproinfo/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>
