<template>
    <div class="feedbackGame flex-display">
        <div class="head">
            <div class="text">
                <el-select v-model="params.gameId" placeholder="请选择游戏" filterable clearable>
                    <el-option
                            v-for="item in gameList"
                            :key="item.gameId"
                            :label="item.gameId + '_' +item.gameName"
                            :value="item.gameId"
                    ></el-option>
                </el-select>
            </div>

            <div class="action">
                <el-button plain type="primary" icon="el-icon-search" @click="getFeedbackGameList">搜索</el-button>
                <el-button plain type="success" icon="el-icon-circle-plus-outline" @click="handelClickAdd">新增
                </el-button>
            </div>
        </div>
        <div class="list">
            <el-table :data="feedGameList.slice((curPage-1)*pageSize,curPage*pageSize)" border stripe :fit="false" height="100%">
                <el-table-column label="游戏id" prop="gameId" width="150" show-overflow-tooltip/>
                <el-table-column label="游戏名称" prop="gameName" width="150" show-overflow-tooltip/>
                <el-table-column label="备注" prop="gameAlias" width="150" show-overflow-tooltip/>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <div class="headrow">
                            <el-button size="mini" @click="handelUpdateFeedbackGame(scope.row.id)">编辑</el-button>
                            <el-button size="mini" type="danger" @click="handelDelete(scope.row.id)">删除</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <div class="page">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    layout="total, sizes, prev, pager, next, jumper"
                    :page-size="pageSize"
                    :current-page="curPage"
                    :pager-count="11"
                    :total="total"
            ></el-pagination>
        </div>

        <el-dialog :title="dialog.title" :visible.sync="dialog.visible" center>
            <div class="content">

                <div class="item">
                    <el-select v-model="dialogDto.gameId" placeholder="请选择游戏" filterable clearable>
                        <el-option
                                v-for="item in gameList"
                                :key="item.gameId"
                                :label="item.gameId + '_' +item.gameName"
                                :value="item.gameId"
                        ></el-option>
                    </el-select>
                </div>

                <div class="item">
                    <el-input placeholder="请输入内容" v-model="dialogDto.gameAlias" clearable>
                        <template slot="prepend">备注</template>
                    </el-input>
                </div>

                <div class="item">
                    <el-checkbox-group v-model="checkList" @change="handelChangeCheckBox">
                        <el-checkbox v-for="item in requiredList" :label="item.value" >{{item.label}}</el-checkbox>
                    </el-checkbox-group>
                </div>

            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handelCancel">取 消</el-button>
                <el-button type="primary" @click="handelClickConform">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    import feedbackApi from '@/api/feedback'

    export default {
        name: "feedbackGame",
        data() {
            return {
                params: {},
                feedGameList: [],
                dialog: {
                    title: '请选择需要反馈的游戏',
                    visible: false
                },
                dialogDto: {
                    gameId: '',
                    gameAlias: ''
                },
                gameList: [],
                isUpdate: false,
                total: 0,
                pageSize: 20,
                curPage: 1,
                checkList:[],
                requiredList:[
                    {label:'必填联系方式',value:'contact'},
                    {label:'必填上传截图',value:'image'}
                ]
            }
        },
        mounted() {
            this.getFeedbackGameList();
            this.getGameList();
        },
        methods: {

            /**
             * 获取反馈游戏列表
             */
            getFeedbackGameList() {
                feedbackApi.getFeedbackGameList().then(res => {
                    this.feedGameList = this.params.gameId ? res.filter(f=>f.gameId == this.params.gameId) : res;
                    this.total = this.feedGameList.length;
                })
            },

            /**
             * 获取游戏列表
             */
            getGameList() {
                feedbackApi.getGameList().then(res => {
                    this.gameList = this.params.gameId ? res.filter(f=>f.gameId == this.params.gameId) : res;
                });
            },

            /**
             * 点击新增按钮
             */
            handelClickAdd() {
                this.isUpdate = false;
                feedbackApi.getGameList().then(res => {
                    this.gameList = res.filter(f => !this.feedGameList.find(d => f.gameId == d.gameId) || f.gameId == this.dialogDto.gameId);
                    this.dialog.visible = true
                });


            },

            /**
             * 点击确认按钮
             */
            handelClickConform() {
                this.dialogDto.gameName = this.gameList.find(f => f.gameId == this.dialogDto.gameId).gameName;
                if (!this.dialogDto.gameAlias) {
                    this.dialogDto.gameAlias = this.dialogDto.gameName
                }

                this.dialogDto.required = this.checkList.join(',');


                this.isUpdate ? feedbackApi.updateFeedbackGame(this.dialogDto).then(this.refreshDto) :
                    feedbackApi.addFeedbackGame(this.dialogDto).then(this.refreshDto)

            },

            /**
             * 新增或者修改之后刷新dto
             * @param res
             */
            refreshDto(res) {
                this.handelCancel();
                this.getFeedbackGameList()
            },

            /**
             * 点击取消
             */
            handelCancel() {
                this.dialog.visible = false;
                this.dialogDto = {
                    gameId: '',
                    gameAlias: ''
                };
                this.checkList = []
            },

            /**
             * 修改
             * @param id
             */
            handelUpdateFeedbackGame(id) {
                this.isUpdate = true;
                feedbackApi.getFeedbackGameById(id).then(res=> {
                    this.dialogDto = {
                        id: res.id,
                        gameId: res.gameId,
                        gameName: res.gameName,
                        gameAlias: res.gameAlias,
                    };
                    this.checkList = res.required && res.required.split(',');
                    feedbackApi.getGameList().then(res => {
                        this.gameList = res.filter(f => !this.feedGameList.find(d => f.gameId == d.gameId) || f.gameId == this.dialogDto.gameId);
                        this.dialog.visible = true
                    });
                });
            },

            /**
             * 删除
             * @param id
             */
            handelDelete(id) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    feedbackApi.deleteFeedbackGame(id).then(res => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.handelCancel();
                        this.getFeedbackGameList()
                    });

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },

            /**
             * 处理前端分页
             * @param val
             */
            handleSizeChange(val) {
                this.pageSize = val;
            },
            handleCurrentChange(val) {
                this.curPage = val;
            },
            handelChangeCheckBox(val) {
                console.log(val);
                console.log(this.checkList)
            }
        }
    }
</script>

<style lang="less" scoped>
    .feedbackGame {
        .head {
            .el-select {
                width: 300px;
                margin: 4px;
            }
        }
        /deep/ .el-dialog {
            width: 300px;

            .content {
                .item {
                    margin-bottom: 14px;
                    .el-select {
                        width: 100%;
                    }
                }
            }
        }

    }
</style>
