<template>
    <div class="giftCodeList flex-display">

        <div class="head">
            <div class="text">

                <!--<div class="head-item">-->
                    <!--<el-select v-model="params.gameId" placeholder="请选择所属游戏" filterable clearable>-->
                        <!--<el-option-->
                                <!--v-for="item in giftGameList"-->
                                <!--:key="item.gameId"-->
                                <!--:label="item.gameId + '_' +item.gameName"-->
                                <!--:value="item.gameId"-->
                        <!--&gt;</el-option>-->
                    <!--</el-select>-->
                <!--</div>-->

                <div class="head-item">
                    <el-select v-model="params.state" placeholder="请选择完成状态">
                        <el-option
                                v-for="item in stateList"
                                :key="item.text"
                                :label="item.text"
                                :value="item.value"
                        ></el-option>
                    </el-select>
                </div>
            </div>

            <div class="action">
                <el-button plain type="primary" icon="el-icon-search" @click="getGiftCode">搜索</el-button>
                <el-button plain type="primary" icon="el-icon-arrow-left" @click="back">返回</el-button>
            </div>
        </div>

        <div class="list">
            <el-table :data="giftCodeList" border stripe :fit="false" height="100%">
                <el-table-column label="序号" prop="id" width="150" show-overflow-tooltip/>
                <!--<el-table-column label="所属游戏" prop="gameName" width="150" show-overflow-tooltip/>-->
                <el-table-column label="礼包码" prop="giftCode" width="150" show-overflow-tooltip/>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope"  >
                        <div class="headrow">
                            <el-button size="mini" @click="handelGift(scope.row.id)" v-if="scope.row.state==0" >编辑</el-button>
                            <el-button size="mini" v-if="scope.row.state==1" disabled>编辑</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="page.size"

                    :pager-count="11"
                    :total="page.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="codeDto" ref="giftForm">

                    <el-form-item label="当前礼包码:" prop="oldGiftCode">
                        <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="无"
                                v-model="codeDto.oldGiftCode"
                                :disabled="true">
                        </el-input>
                    </el-form-item>


                    <el-form-item label="变更礼包码:" prop="updateGiftCode">
                        <el-input
                                type="textarea"
                                :rows="2"
                                placeholder="请输入内容"
                                v-model="codeDto.giftCode">
                        </el-input>
                    </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 giftListApi from '@/api/giftList'

    export default {
        name:"giftCodeList",
        data(){
            return {
                params:{},
                stateList: [
                    {value: 0, text: '已领取'},
                    {value: 1, text: '未领取'},
                    {value: null, text: '全部'}
                ],
                giftGameList: [],
                giftCodeList: [],
                dialog: {
                    title: "修改礼包码",
                    visible: false
                },
                codeDto: {
                    giftCode:''
                },
                rules:{
                    giftCode:{required:true,message:'请输入新的礼包码',trigger:'blur'}
                },
                page:{}
            }
        },
        mounted(){
            this.params = this.$route.params;
            this.getGiftCode()
        },
        methods:{
            getGiftCode(){
                console.log(this.params)
                giftListApi.getGiftCodeList(this.params).then(res =>{
                    this.giftCodeList = res.rows;
                    this.giftCodeList.filter(f => f.deleted == 0)
                    this.page = res.page
                })
            },
            /**
             * 编辑礼包码
             */
             handelGift(id){
                giftListApi.getGiftCodeById(id).then(res =>{
                    this.dialog.visible=true;
                    this.codeDto = {
                        id:res.id,
                        oldGiftCode:res.giftCode
                    }
                })
            },
            handelDelete(id){
                this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    giftListApi.deleteGiftCode(id).then(res => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.refresh()
                    });

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            refresh(){
                this.handelCancel();
                this.getGiftCode();
            },
            handelCancel(){
                this.dialog.visible=false;
                this.isAdd=false;
                this.codeDto.giftCode='';

            },
            handelClickConform(){
                giftListApi.updateGiftCode(this.codeDto).then(this.refresh)
            },
            /**
             * 回退页面
             */
            back(){
                this.$router.push({
                    name:"giftList"
                })
            },
            handleSizeChange(val){
                this.params.size=val;
                this.getGiftCode()
            },
            handleCurrentChange(val){
                this.params.cur=val;
                this.getGiftCode()
            }

        }

    }
</script>
<style lang="less" scoped>
    .giftCodeList{
        /deep/.el-dialog{
            width:400px;
        }
    }

</style>
