<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
            <el-form-item label="" prop="adUnitType">
                <el-select v-model="queryParams.adUnitType" placeholder="请选择业务单元类型" clearable filterable style="width: 140px"
                    size="small" @keyup.enter.native="handleQuery">
                    <el-option label="小说" value="NOVEL" />
                    <el-option label="小说IAA" value="NOVEL_IAA" />
                    <el-option label="游戏" value="GAME" />
                    <el-option label="游戏IAA" value="GAME_IAA" />
                    <el-option label="电商" value="SHOP" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8" align="middle">
            <el-col :span="1.5">
                <div class="grid-content">
                    <el-radio-group v-model="queryParams.adAppId" size="small" @change="getList">
                        <el-radio :label="item.id" v-for="item in allList" :key="item.id">{{item.appName}}</el-radio>
                    </el-radio-group>
                </div>
            </el-col>
            <el-col :span="1.5">
                <div class="grid-content">
                    <el-dropdown @command="handleWarrantOld">
                        <span class="el-dropdown-link">
                            <el-button type="success" icon="el-icon-plus" size="mini">授权广告平台<i
                                    class="el-icon-arrow-down el-icon--right"></i></el-button>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="NOVEL" v-if="queryParams.adAppId === 1">小说</el-dropdown-item>
                            <el-dropdown-item command="NOVEL_IAA" v-if="queryParams.adAppId === 1">小说IAA</el-dropdown-item>
                            <el-dropdown-item command="GAME" v-if="queryParams.adAppId === 2">游戏</el-dropdown-item>
                            <el-dropdown-item command="GAME_IAA" v-if="queryParams.adAppId === 2">游戏IAA</el-dropdown-item>
                            <el-dropdown-item command="SHOP" v-if="queryParams.adAppId === 1">电商</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-col>
            <el-col :span="1.5">
                <div class="grid-content">
                    <app-manage @onChange="getAll()"/>
                </div>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :isshowSearch="false"></right-toolbar>
        </el-row>

        <el-table :data="adList">
            <el-table-column label="广告应用ID" prop="adAppId" align="center" fixed/>
            <el-table-column label="授权人ID" prop="createBy" align="center"/>
            <el-table-column label="企业ID" prop="companyId" align="center"/>
            <el-table-column label="授权用户ID" prop="authUserId" align="center" :show-overflow-tooltip="true"/>
            <el-table-column label="邮箱" prop="email" align="center" :show-overflow-tooltip="true"/>
            <el-table-column label="账号" prop="displayName" align="center" :show-overflow-tooltip="true"/>
            <el-table-column label="业务单元类型" prop="adUnitType" align="center" width="100">
                <template slot-scope="scope">
                    <div>{{ scope.row.adUnitType === 'NOVEL' ? '小说' : scope.row.adUnitType === 'NOVEL_IAA' ? '小说IAA' : scope.row.adUnitType === 'GAME' ? '游戏' : scope.row.adUnitType === 'GAME_IAA' ? '游戏IAA' : scope.row.adUnitType === 'SHOP' ? '电商' : '--' }}</div>
                </template>
            </el-table-column>
            <!-- <el-table-column label="accessToken" prop="accessToken" align="center" width="200">
                <template slot-scope="scope">
                    <el-tooltip placement="top" effect="light">
                        <div slot="content">{{scope.row.accessToken}}</div>
                        <div class="name-wrapper">
                            <p>{{ scope.row.accessToken }}</p>
                        </div>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column label="refreshToken" prop="refreshToken" align="center" width="200">
                <template slot-scope="scope">
                    <el-tooltip placement="top" effect="light">
                        <div slot="content">{{scope.row.refreshToken}}</div>
                        <div class="name-wrapper">
                            <p>{{ scope.row.refreshToken }}</p>
                        </div>
                    </el-tooltip>
                </template>
            </el-table-column> -->
            <el-table-column label="授权时间" align="center" prop="createTime" width="150">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.createTime) }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="250">
                <template slot-scope="scope">
                    <!-- 刷新账户 -->
                    <refresh-user-button :adAppId="queryParams.adAppId" :authUserId="scope.row.authUserId" @onChange="getList()"/>
                    <!-- 查看账户 -->
                    <look-account-button :adAppId="queryParams.adAppId" :authUserId="scope.row.authUserId" />
                </template>
            </el-table-column>
        </el-table>

        <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
        />
    </div>
</template>


<script>
import { getAdApp, getAuthUserList, toAuthUser } from "@/api/accounts/ttAdapi";
import appManage from "./appManage.vue"
import refreshUserButton from "./refreshUserButton.vue"
import lookAccountButton from "./lookAccountButton.vue"
export default {
    components: { appManage, refreshUserButton, lookAccountButton },
    data () {
        return {
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            total: 0,
            showSearch: true,
            // 所有授权平台
            allList: [],
            adList: [],
            // 表格选中ID
            ids: [],
            // 总修改按钮控制 非多个禁用
            multiple: true
        }
    },
    created() {
        this.getAll()
    },
    mounted(){
        window.addEventListener('storage', this.listener)
    },
    beforeDestroy() { // 在组件生命周期结束的时候销毁。
        window.removeEventListener('storage', this.listener, false)
    },
    methods: {
        /** 搜索 */
        handleQuery() {
            this.queryParams = { ...this.queryParams, pageNum: 1 }
            this.getList();
        },
        /** 重置搜索条件 */
        resetQuery() {
            this.resetForm("queryForm");
            this.getList();
        },
        listener(e) {
            if (e.key === 'ttAdMp') {
                if (e.newValue === 'ok') {
                    this.getList()
                    this.msgSuccess("授权成功");
                    localStorage.removeItem('ttAdMp')
                } else {
                    this.$message.error('授权失败');
                    localStorage.removeItem('ttAdMp')
                }
            }
        },
        /** 获取所有应用 */
        getAll() {
            getAdApp().then(res => {
                if (res.data.length > 0) {
                    this.allList = res.data
                    this.queryParams.adAppId = res.data[0].id
                    this.getList()
                } else {
                    this.allList = []
                }
            })
        },
        /** 获取数据 */
        getList() {
            this.loading = true
            getAuthUserList(this.queryParams).then(res => {
                console.log('res.data.records---->', res.data.records);
                this.total = res.data.total
                this.adList = res.data.records
                this.loading = false
            }).catch(() => this.loading = false)
        },
        /** 授权 */
        handleWarrantOld(adUnitType) {
            console.log('---->', adUnitType)
            toAuthUser({ adAppId: this.queryParams.adAppId, adUnitType, callbackPage: encodeURIComponent(window.location.origin + '/ttAdCode') }).then(res => {
            // toAuthUser({ adAppId: this.queryParams.adAppId, callbackPage: encodeURIComponent('http://erp.zanxiangnet.com/ttAdCode') }).then(res => {
                if (res.data) {
                    window.open(res.data)
                }
            })
        },
    }
}
</script>