<template>
    <section class="content">
        <div class="box box-danger">
            <div class="box-body">
                <!-- Content Header (Page header) -->
                <section class="content-header">
                    <h1 id="itemTitle"></h1>
                </section>
                <!-- .content -->
                <section class="content">
                    <div id="table"></div>
                    <div id="toolbar">
                        <button id="addBtn" class="btn btn-default">
                            <i class="glyphicon glyphicon-plus"></i>添加
                        </button>
                    </div>
                </section><!-- .content -->
            </div>
        </div>
    </section>
    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="modalLabel">添加分类</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <input type="hidden" name="id" v-model="homeGameTab.id" />
                        <div class="form-group">
                            <label for="seqNo" class="col-sm-3 control-label">排序<font color="red">*</font>:</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control validate[required]" name="seqNo" id="seqNo"
                                    v-model="homeGameTab.seqNo" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="tabName" class="col-sm-3 control-label">名称<font color="red">*</font>:</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control validate[required]" name="tabName" id="tabName"
                                    v-model="homeGameTab.tabName" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="gameId" class="col-sm-3 control-label">游戏类型:</label>
                            <div class="col-sm-8">
                                <select name="gameId" class="form-control" id="gameId" v-model="homeGameTab.gameId">
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="erbanNoStr" class="col-sm-3 control-label">用户列表:</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control validate[required]" name="erbanNoStr" id="erbanNoStr" placeholder="多个用,隔开"
                                    v-model="homeGameTab.erbanNoStr" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">选中状态图</label>
                            <div class="col-sm-8">
                                <input type="hidden" class="form-control" name="onClick" v-model="homeGameTab.onClick" />
                                <img :src="homeGameTab.onClick" style="width:120px;"/>
                                <input type="file" class="form-control" id="onClickFile" name="uploadFile">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label"></label>
                            <div class="col-sm-8">
                                <button class="btn btn-success col-sm-4" type="button" id="onClickUploadBtn">上传</button>
                                <span class="btn col-sm-4" id="onClickUploadInfo" style="color:red;"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">未选中状态图</label>
                            <div class="col-sm-8">
                                <input type="hidden" class="form-control" name="onUnclick" v-model="homeGameTab.onUnclick" />
                                <img :src="homeGameTab.onUnclick" style="width:120px;"/>
                                <input type="file" class="form-control" id="onUnclickFile" name="uploadFile">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label"></label>
                            <div class="col-sm-8">
                                <button class="btn btn-success col-sm-4" type="button" id="onUnclickUploadBtn">上传</button>
                                <span class="btn col-sm-4" id="onUnclickUploadInfo" style="color:red;"></span>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="save">保存</button>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>
import TableHelper from '@/utils/bootstrap-table-helper';
import { getHomeGameTabPage, saveHomeGameTab, updateHomeGameTab, delHomeGameTab } from '@/api/home/homeGameTab';
import { getGamePartnerList } from '@/api/game/gamePartner';
import { uploadFile } from '@/api/common/upload';
import { apiResult, buildSelectOption } from '@/utils/maintainer';

export default {
    name: 'HomeGameTabAdminView',
    data() {
        return {
            columns: [
                { field: 'seqNo', title: '排序', align: 'center', width: '5%' },
                { field: 'tabName', title: '游戏名', align: 'center', width: '5%' },
                { 
                    field: 'onClick', 
                    title: '点击状态下图片', 
                    align: 'center', 
                    width: '5%',
                    formatter: function (val, row, index) {
                        return '<img src="' + val + '" width="70" height="60"/>';
                    }
                },
                { 
                    field: 'onUnclick', 
                    title: '未点击状态下图片', 
                    align: 'center', 
                    width: '5%',
                    formatter: function (val, row, index) {
                        return '<img src="' + val + '" width="70" height="60"/>';
                    }
                },
                { field: 'erbanNoStr', title: '配置用户列表', align: 'center', width: '5%' },
                {
                    field: 'id',
                    title: '操作',
                    align: 'center',
                    width: '20%',
                    formatter: function (val, row, index) {
                        let value = '<button class="btn btn-sm btn-success opt-edit" data-id="' + val + '" data-index="' + index + '">编辑</button>';
                        value += '<button class="btn btn-sm btn-danger opt-del" data-id="' + val + '" data-index="' + index + '">删除</button>';
                        return value;
                    }
                }
            ],
            gamePartners: [],
            homeGameTab: {
                id: 0,
                tabName: '',
                gameId: 0,
                onClick: '',
                onUnclick: '',
                erbanNoStr: '',
                seqNo: 0,
            },
        };
    },
    created() {
        this.getGame();
        this.init();
    },
    methods: {
        init() {
            this.$nextTick(function () {
                let $this = this;
                $this.initTable();
                $('#addBtn').click(function () {
                    $this.add();
                });
                $('#table').on('click', '.opt-edit', function () {
                    $this.edit(this);
                });
                $('#table').on('click', '.opt-del', function () {
                    $this.del(this);
                });
                $('#save').click(function () {
                    $this.save();
                });
                $('#onClickUploadBtn').click(function () {
                    uploadFile('onClickFile').then(res => {
                        $this.homeGameTab.onClick = res.path;
                    });
                });
                $('#onUnclickUploadBtn').click(function () {
                    uploadFile('onUnclickFile').then(res => {
                        $this.homeGameTab.onUnclick = res.path;
                    });
                });
            });
        },
        initTable() {
            let $this = this;
            $('#table').bootstrapTable('destroy');
            $('#table').bootstrapTable({
                columns: $this.columns,
                cache: false,
                striped: true,
                showRefresh: false,
                pageSize: 10,
                pagination: true,
                pageList: [1, 10, 20, 30, 50],
                search: false,
                sidePagination: 'server',
                queryParamsType: 'undefined',
                queryParams: function queryParams(params) {
                    var param = {
                        pageNum: params.pageNumber,
                        pageSize: params.pageSize,
                    };
                    return param;
                },
                ajax:function(request){
                    getHomeGameTabPage(request.data).then(res => {
                        let data = res.data;
                        request.success({
                            'rows': data.records,
                            'total': data.total
                        });
                    });
                },
                toolbar: '#toolbar',
            });
        },
        add() {
            this.homeGameTab.id = null;
            this.homeGameTab.tabName = '';
            this.homeGameTab.gameId = 0;
            this.homeGameTab.onClick = '';
            this.homeGameTab.onUnclick = '';
            this.homeGameTab.erbanNoStr = '';
            this.homeGameTab.seqNo = 0;
            this.show();
        },
        edit(obj) {
            const index = $(obj).data('index');
            const record = TableHelper.getData('#table')[index];
            this.homeGameTab.id = record.id;
            this.homeGameTab.tabName = record.tabName;
            this.homeGameTab.gameId = record.gameId;
            this.homeGameTab.onClick = record.onClick;
            this.homeGameTab.onUnclick = record.onUnclick;
            this.homeGameTab.erbanNoStr = record.erbanNoStr;
            this.homeGameTab.seqNo = record.seqNo;
            this.show();
        },
        show() {
            $('#editModal').modal('show');
        },
        save() {
            let data = {
                id: this.homeGameTab.id,
                tabName: this.homeGameTab.tabName,
                gameId: new Number(this.homeGameTab.gameId),
                onClick: this.homeGameTab.onClick,
                onUnclick: this.homeGameTab.onUnclick,
                erbanNoStr: this.homeGameTab.erbanNoStr,
                seqNo: new Number(this.homeGameTab.seqNo),
            };
            (data.id ? updateHomeGameTab(data) : saveHomeGameTab(data)).then(res => {
                console.log(res);
                apiResult(res);
                TableHelper.doRefresh('#table');
                $('#editModal').modal('hide');
            });

        },
        del(obj) {
            const index = $(obj).data('index');
            const record = TableHelper.getData('#table')[index];
            const id = record.id;
            if (!confirm('是否确定要删除？')) {
                return;
            }
            delHomeGameTab(id).then(res => {
                console.log(res);
                apiResult(res);
                TableHelper.doRefresh('#table');
            });
        },
        getGame() {
            getGamePartnerList().then(res => {
                let data = res.data;
                if (data) {
                    this.gamePartners = data.map(v => {
                        return {
                            value: v.gameId,
                            text: v.gameName
                        };
                    });
                }
                if (this.gamePartners.length > 0) {
                    buildSelectOption('#gameId', this.gamePartners[0].value, this.gamePartners);
                }
            });
        }
    },
}
</script>
  
<style scoped></style>