<template>
    <div class="giftGameList 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="getGiftGameList">搜索</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="giftGameList.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="createTime" width="150" show-overflow-tooltip/>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <div class="headrow">
                            <el-button size="mini" @click="handelUpdate(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 @close="handelCancel">
            <div class="content">
                <el-form label-width="100px" :rules="rules" :model="giftGameDto" ref="giftGameForm">

                    <el-form-item label="游戏名称:" prop="gameId">
                        <el-select v-model="giftGameDto.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>
                    </el-form-item>


                    <el-form-item label="游戏别名:" prop="gameName">
                        <el-input v-model.trim="giftGameDto.gameName" placeholder="请输入内容"></el-input>
                    </el-form-item>

                    <el-form-item label="游戏简介:" prop="gameIntroduction">

                        <el-input
                                type="textarea"
                                :autosize="{ minRows: 2, maxRows: 4}"
                                placeholder="请输入内容"
                                v-model.trim="giftGameDto.gameIntroduction">
                        </el-input>
                    </el-form-item>


                    <el-form-item label="下载链接:" prop="downloadUrl">
                        <el-input v-model.trim="giftGameDto.downloadUrl" placeholder="请输入内容"></el-input>
                    </el-form-item>

                    <el-form-item label="游戏图标:" prop="imageUrl">
                        <el-upload
                                :class="{'hiddenIcon':hiddenIcon}"
                                action
                                list-type="picture-card"
                                :http-request="fileUploader"
                                :on-remove="handelRemoveFile"
                                :limit="1"
                                :file-list="fileList"
                        >
                            <i slot="default" class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>

                </el-form>

            </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 {uploadFile} from '@/utils/util'
    import feedbackApi from '@/api/feedback'
    import giftApi from '@/api/gift'

    export default {
        name: "giftGameList",
        data() {
            return {
                giftGameList: [],
                gameList: [],
                params: {},
                dialog: {
                    title: '请选择需要反馈的游戏',
                    visible: false
                },
                giftGameDto: {},
                uploadFile: {},
                hiddenIcon:false,
                isUpdate: false,
                total: 0,
                pageSize: 20,
                curPage: 1,
                rules: {
                    gameId: [{required: true, message: '请选择游戏', trigger: 'change'}],
                    gameName: [{required: true, message: '请输入游戏名称', trigger: 'blur'}],
                    gameIntroduction: [{required: true, message: '请输入游戏简介', trigger: 'blur'}]
                },
                fileList:[]

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

            getGiftGameList() {
                giftApi.getGiftGameList().then(res=> {
                    this.giftGameList = this.params.gameId ? res.filter(f=>f.gameId == this.params.gameId) : res;
                    this.total = this.giftGameList.length;
                })
            },


            handelClickAdd() {
                this.isUpdate = false;
                feedbackApi.getGameList().then(res => {
                    this.gameList = res.filter(f => !this.giftGameList.find(d => f.gameId == d.gameId) || f.gameId == this.giftGameDto.gameId);
                    this.dialog.visible = true
                });
            },
            fileUploader(params) {
                this.hiddenIcon = true;
                this.uploadFile = params.file;
                this.handelUploadFile(this.uploadCallback)
            },

            /**
             * 上传截图
             * @param callback
             */
            handelUploadFile(callback) {
                uploadFile(this.uploadFile, callback);
            },

            /**
             * 上传成功之后的回调
             * @param fileUrl
             */
            uploadCallback(fileUrl) {
                //将文件url放入新的list中
                console.log(fileUrl);
                this.giftGameDto.imageUrl = fileUrl;
                console.log(this.giftGameDto)
            },
            handelRemoveFile() {
                this.hiddenIcon = false;
                this.giftGameDto.imageUrl = ''
            },

            handelCancel() {
                this.handelRemoveFile();
                this.$refs['giftGameForm'].resetFields();
                this.dialog.visible = false;
                this.hiddenIcon = false;
                this.fileList = []
            },

            handelClickConform() {
                this.$refs['giftGameForm'].validate((valid) => {
                    if (valid) {
                        this.isUpdate ? giftApi.updateGiftGame(this.giftGameDto).then(this.refreshDto) :
                        giftApi.addGiftGame(this.giftGameDto).then(this.refreshDto)
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            refreshDto(res) {
                this.handelCancel();
                this.getGiftGameList()
            },
            handelDelete(id) {
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    giftApi.deleteGiftGame(id).then(res => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.handelCancel();
                        this.getGiftGameList()
                    });

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


            handelUpdate(id) {
                this.isUpdate = true;
                giftApi.getGiftGameById(id).then(res=> {
                    this.giftGameDto = res;
                    feedbackApi.getGameList().then(res => {
                        this.gameList = res.filter(f => !this.giftGameList.find(d => f.gameId == d.gameId) || f.gameId == this.giftGameDto.gameId);
                        this.fileList= [{url:this.giftGameDto.imageUrl}];
                        this.hiddenIcon = true;
                        this.dialog.visible = true
                    });
                });
            },
            /**
             * 处理前端分页
             * @param val
             */
            handleSizeChange(val) {
                this.pageSize = val;
            },
            handleCurrentChange(val) {
                this.curPage = val;
            },
        }
    }
</script>

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

        /deep/ .el-dialog {
            width: 600px;
            .el-select {
                width: 100%;
            }
        }
        .hiddenIcon {
            /deep/ .el-upload--picture-card {
                display: none;
            }
        }
    }
</style>
