<template>
    <div class="verified 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="verifiedConfigList.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>
            <div class="content">
                <el-form label-width="100px" :rules="rules" :model="verifiedDto" ref="verifiedForm">

                    <el-form-item label="广告名称:" prop="adId">
                        <el-select v-model="verifiedDto.adId" placeholder="请选择" filterable clearable>
                            <el-option
                                    v-for="item in adList"
                                    :key="item.adId"
                                    :label="item.adId + '_' +item.adName"
                                    :value="item.adId"
                            ></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="是否弹出:" prop="showVerified">
                        <el-select v-model="verifiedDto.showVerified" placeholder="请选择" filterable>
                            <el-option
                                    v-for="item in showVerifiedList"
                                    :key="item.value"
                                    :label="item.text"
                                    :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>


                    <el-form-item label="弹出地址:" prop="verifiedH5Url">
                        <el-input v-model.trim="verifiedDto.verifiedH5Url" placeholder="请输入内容"></el-input>
                    </el-form-item>

                    <el-form-item label="条件:" prop="verifiedShowDetail">
                        <div class="button">
                            <el-button  icon="el-icon-edit" circle @click="handelClickAddCondition"></el-button>
                        </div>
                        <div class="detail-list">
                            <div class="detail-item" v-for="items in verifiedShowDetail">

                                <div class="item-top">
                                    <el-select v-model="items.changeType" placeholder="请选择" filterable>
                                        <el-option
                                                v-for="item in conditionList"
                                                :key="item.value"
                                                :label="item.text"
                                                :value="item.value"
                                        ></el-option>
                                    </el-select>
                                </div>

                                <div class="item-bottom">
                                    <el-input
                                            v-if="items.changeType && items.changeType == 3"
                                            type="text"
                                            placeholder="请输入内容"
                                            v-model.trim="items.changeContent">
                                    </el-input>

                                    <el-select
                                            v-else-if="items.changeType && items.changeType == 5"
                                            v-model="items.changeContent"
                                            placeholder="请选择"
                                            filterable
                                            multiple
                                            clearable
                                    >
                                        <el-option
                                                v-for="item in provinceList"
                                                :key="item"
                                                :label="item"
                                                :value="item"
                                        ></el-option>
                                    </el-select>

                                </div>
                            </div>
                        </div>
                    </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 feedbackApi from '@/api/feedback'
    import verifiedApi from '@/api/verified'
    export default {
        name: "verified",
        data() {
            return {
                verifiedConfigList: [],
                gameList: [],
                adList:[],
                params: {},
                dialog: {
                    title: '请选择需要反馈的游戏',
                    visible: false
                },
                verifiedDto: {
                    showVerified: 0
                },
                showVerifiedList:[
                    {value: 0, text: '不弹出'},
                    {value: 1, text: '弹出'},
                    {value: 2, text: '条件弹出'}
                ],
                conditionList: [
                    {text:'省份',value: 5},
                    {text:'充值金额',value: 3},
                    {text:'未绑定手机号',value: 9},
                ],
                verifiedShowDetail: [

                ],
                uploadFile: {},
                hiddenIcon:false,
                isUpdate: false,
                total: 0,
                pageSize: 20,
                curPage: 1,
                rules: {
                    adId: [{required: true, message: '请选择广告', trigger: 'change'}]
                },
                provinceList:[
                    '北京市',
                    '天津市',
                    '河北省',
                    '山西省',
                    '内蒙古自治区',
                    '辽宁省',
                    '吉林省',
                    '黑龙江省',
                    '上海市',
                    '江苏省',
                    '浙江省',
                    '安徽省',
                    '福建省',
                    '江西省',
                    '山东省',
                    '河南省',
                    '湖北省',
                    '湖南省',
                    '广东省',
                    '广西壮族自治区',
                    '海南省',
                    '重庆市',
                    '四川省',
                    '贵州省',
                    '云南省',
                    '西藏自治区',
                    '陕西省',
                    '甘肃省',
                    '青海省',
                    '宁夏回族自治区',
                    '新疆维吾尔自治区',
                ]
            }
        },
        mounted() {
            this.getGameList();
        },
        methods: {
            /**
             * 获取游戏列表
             */
            getGameList() {
                feedbackApi.getGameList().then(res => {
                    this.gameList = this.params.gameId ? res.filter(f => f.gameId == this.params.gameId) : res;
                });
            },

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

            getAdList(callback) {
                verifiedApi.getAdList().then(res=> {
                    this.adList = res;
                    callback()
                })
            },

            handelClickAddCondition() {
                if (this.verifiedShowDetail.length >= 3) {
                    this.$message({
                        message: '最多只能选三个条件',
                        type: 'warning'
                    });
                    return
                }
                this.verifiedShowDetail.push({})

            },
            handelClickAdd() {
                this.getAdList(this.dialog.visible = true)
            },
            handelClickConform() {
                this.$refs['verifiedForm'].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;
                    }
                });
            },
            handelCancel() {
                this.dialog.visible = false
            }

        }
    }
</script>

<style lang="less" scoped>
.verified {
    .head {
        .el-select {
            width: 300px;
            margin: 4px;
        }
    }
    /deep/ .el-dialog {
        width: 600px;
        .el-select {
            width: 100%;
        }
    }
    .detail-list {
        margin-top: 20px;
        .detail-item {
            margin-bottom: 20px;
            .item-bottom {
                margin-top: 10px;
            }
        }

    }
}
</style>
