<template>
    <div>
        <!--开关盒子-->
        <div class="topBox">
            <el-row :gutter="20">
                <el-col class="itemList" v-for="item in itemList" :span="6">
                    <div>
                        <span>{{item.name}}：</span>
                        <el-button v-if="item.status === 0" size="mini" type="primary" plain @click="open(item)">申请开启
                        </el-button>
                        <el-button v-else size="mini" type="warning" plain @click="close(item)">申请关闭</el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!--表格-->
        <div 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
                    ref="xTable"
                    :data="tableData"
                    :edit-config="{trigger: 'click', mode: 'cell', showStatus: true, }"
                    :row-class-name="rowClassName"
            >
                <vxe-table-column
                        field="name"
                        title="名称"
                        width="160"
                />
                <vxe-table-column
                        field="operDetail"
                        title="操作"
                        width="100"
                >
                    <template #default="{ row }">
                        {{ strStatus[row.operDetail] }}
                    </template>
                </vxe-table-column>
                <vxe-table-column
                        field="applicant"
                        title="申请人"
                        width="100"
                />
                <vxe-table-column
                        field="status"
                        title="状态"
                        width="100"
                >
                    <template #default="{ row }">
                        {{ strategyStatus[row.status] }}
                    </template>
                </vxe-table-column>
                <vxe-table-column
                        field="applyReason"
                        title="申请原因"
                />
                <vxe-table-column
                        field="createTime"
                        title="申请时间"
                        width="200"
                />
                <vxe-table-column
                        field="modifyTime"
                        title="审核时间"
                        width="200"
                />

                <vxe-table-column title="操作" width="220">
                    <template #default="{ row }">

                        <template v-if="userName === '系统管理员' || userName === '张凯'">
                            <vxe-button v-show="row.status === 1" @click="audit({row, status:3})">通过</vxe-button>
                            <vxe-button v-show="row.status === 1" @click="audit({row, status:4})">驳回</vxe-button>
                        </template>
                        <template v-if="userName === row.applicant && row.status === 1">
                            <vxe-button @click="audit({row, status:2})">撤回</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"
            />
        </div>

        <!--申请原因-->
        <vxe-modal v-model="value5" width="60%" :title='this.strStatus[form.operDetail]+form.name'>
            <el-input
                    type="textarea"
                    :autosize="{ minRows: 2, maxRows: 4}"
                    placeholder="请输入申请原因"
                    v-model="form.applyReason">
            </el-input>
            <el-row style="margin-top: 30px;display: flex;justify-content: flex-end">
                <el-button @click="value5 = false">取消</el-button>
                <el-button type="primary" @click="onSubmit">提交</el-button>
            </el-row>
        </vxe-modal>

    </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: [],
                itemList: [],
                strategyStatus: ['--', '待审核', '撤回', '通过', '驳回'],
                strStatus: ['申请关闭', '申请开启'],
                userName: '',
                form: {
                    applicant: "",
                    applyReason: "",
                    infoId: "",
                    name: "",
                    operDetail: 1,
                    status: 1,
                    applyReason: '',
                    tag: ""
                },
                value5: false
            }
        },
        created() {
            console.log('用户：', this.$store.state.user.name)
            this.userName = this.$store.state.user.name
        },
        mounted() {
            this.init()
            this.getItemList()
        },
        methods: {
            // 提交申请
            onSubmit() {
                this.$confirm('确定提交申请么, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    post('/strategyglobalrecord/create', this.form).then(res => {
                        this.$message({
                            message: res.message,
                            type: 'success',
                            duration: 3000,
                            offset: 360
                        })
                        this.value5 = false
                        this.init()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 控制项列表
            getItemList() {
                var that = this
                get('/strategyglobalinfo/page', {pageNum: 1, pageSize: 9999,}).then(res => {
                    that.itemList = res.data.list
                })
            },
            // 订单列表
            init() {
                get('/strategyglobalrecord/page', this.searchForm).then(res => {
                    this.tableData = res.data.list
                    this.total = res.data.total
                    this.searchForm.totalResult = res.data.total
                })
            },
            // 新增打开申请
            open(row) {
                this.form = {
                    applicant: this.userName,
                    applyReason: "",
                    infoId: row.id,
                    name: row.name,
                    operDetail: 1,
                    status: 1,
                    tag: row.tag
                }
                this.value5 = true
            },
            // 新增关闭申请
            close(row) {
                this.form = {
                    applicant: this.userName,
                    applyReason: "",
                    infoId: row.id,
                    name: row.name,
                    operDetail: 0,
                    status: 0,
                    tag: row.tag
                }
                this.value5 = true
            },


            // 新增关闭申请
            audit({row,status}) {
                this.$confirm(`确定${this.strategyStatus[status]}该申请么, 是否继续?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let update = {
                        applicant: row.applicant,
                        applyReason: row.applyReason,
                        infoId: row.infoId,
                        name: row.name,
                        operDetail: row.operDetail,
                        status: status,
                        tag: row.tag
                    }
                    post('/strategyglobalrecord/update/'+row.id, update).then(res => {
                        this.$message({
                            message: res.message,
                            type: 'success',
                            duration: 3000,
                            offset: 360
                        })
                        this.init()
                        this.getItemList()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            },

            // 翻页
            handlePageChange({currentPage, pageSize}) {
                this.searchForm.pageNum = currentPage
                this.searchForm.pageSize = pageSize
                this.init()
            },

            // 行颜色
            rowClassName({ row, rowIndex }) {
                console.log(row)
                if (row.status === 1) {
                    return 'row-green'
                }
            }

        }
    }
</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;
            }
        }
    }

    .topBox {
        padding: 20px;

        .itemList {
            padding: 10px 0
        }
    }

    .tableBox {
        padding: 20px;
        margin-top: 10px;
        background-color: #fff;
        box-shadow: #bfbfbf 0 0 1px;

        .row-green {
            color: #e07010;
            font-weight: 600;
        }

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