<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
            <el-form-item label="" prop="accountIds">
                <el-input v-model="queryParams.accountIds" placeholder="请输入广告主ID" clearable size="small"
                    style="width: 200px" type="textarea" :rows="2" />
                <el-tooltip class="item" effect="dark" content="支持多个，多个以逗号隔开，例：17650049，18593629" placement="top">
                    <i class="el-icon-question"></i>
                </el-tooltip>
            </el-form-item>
            <el-form-item label="" prop="wechatAccountName">
                <el-input v-model="queryParams.wechatAccountName" placeholder="公众号名称" clearable size="small"
                    style="width: 140px" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="" prop="putUserId">
                <el-select v-model="queryParams.putUserId" placeholder="请选择投手" clearable filterable style="width: 140px"
                    size="small" @keyup.enter.native="handleQuery">
                    <el-option v-for="item in userAll" :key="item.id" :label="item.nickName" :value="item.id" />
                </el-select>
            </el-form-item>
            <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-option label="短剧IAA" value="SKIT_IAA" />
                </el-select>
            </el-form-item>
            <el-form-item label="" prop="sourceType">
                <el-radio-group v-model="queryParams.sourceType" size="small" @change="getList">
                    <el-radio-button :label="null">全部</el-radio-button>
                    <el-radio-button :label="0">微信</el-radio-button>
                    <el-radio-button :label="1">QQ</el-radio-button>
                </el-radio-group>
            </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 tenAllList" :key="item.id">{{ item.appName }}</el-radio>
                    </el-radio-group>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="10" class="mb8" align="middle">
            <el-col :span="1.5">
                <div class="grid-content">
                    <el-button type="primary" icon="el-icon-plus" size="mini"
                        @click="handleWarrantOld(1)">授权广告平台</el-button>
                </div>
            </el-col>
            <el-col :span="1.5">
                <div class="grid-content">
                    <el-button type="success" v-if="queryParams.adAppId === 1" icon="el-icon-plus" size="mini"
                        @click="handleWarrantOld(2)">广告业务单元授权</el-button>
                    <el-dropdown @command="handleCommand" v-else>
                        <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="userType === 1">小说</el-dropdown-item>
                            <el-dropdown-item command="NOVEL_IAA" v-if="userType === 3">小说IAA</el-dropdown-item>
                            <el-dropdown-item command="GAME" v-if="userType === 2">游戏</el-dropdown-item>
                            <el-dropdown-item command="GAME_IAA" v-if="userType === -2">游戏IAA</el-dropdown-item>
                            <el-dropdown-item command="SHOP" v-if="userType === 1">电商</el-dropdown-item>
                            <el-dropdown-item command="SKIT_IAA" v-if="userType === 4">短剧IAA</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </el-col>
            <el-col :span="1.5">
                <div class="grid-content">
                    <el-button type="primary" size="mini" @click="handleTenEdit">腾讯广告应用管理</el-button>
                </div>
            </el-col>
            <el-col :span="1.5">
                <div class="grid-content">
                    <el-button type="primary" size="mini" icon="el-icon-refresh" :disabled="multiple"
                        :loading="reLoading" @click="refreshServer">刷新服务商</el-button>
                </div>
            </el-col>
            <el-col :span="1.5">
                <div class="grid-content">
                    <el-button type="success" size="mini" icon="el-icon-sort" :disabled="multiple" :loading="reLoading"
                        @click="putsHandle">批量指派</el-button>
                </div>
            </el-col>
            <el-col :span="1.5">
                <div class="grid-content">
                    <putUsers :multiple="multiple" :accountIds="accountIds" @change="putChange" :userAll="userAll" />
                </div>
            </el-col>
            <el-col :span="1.5">
                <div class="grid-content">
                    <el-button type="primary" size="mini" icon="el-icon-refresh"
                        @click="warrantsHandle">批量授权</el-button>
                </div>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table :data="adList" @selection-change="handleSelectionChange" v-loading="tabLoading">
            <el-table-column type="selection" width="45" align="center" fixed />
            <el-table-column label="ID" prop="id" fixed width="75" align="center" />
            <el-table-column label="广告主ID" prop="accountId" align="center" width="100" fixed />
            <el-table-column label="类型" prop="sourceType" align="center" width="70">
                <template slot-scope="scope">
                    <div>{{ scope.row.sourceType == 0 ? '微信' : 'QQ' }}</div>
                </template>
            </el-table-column>
            <el-table-column label="投手" prop="putUserId" align="center" width="100">
                <template slot-scope="scope">
                    <div>{{ scope.row.putUserInfo ? scope.row.putUserInfo.nickName : scope.row.putUserId }}</div>
                </template>
            </el-table-column>
            <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' ? '电商' : scope.row.adUnitType === 'SKIT_IAA' ? '短剧IAA' : '--' }}</div>
                </template>
            </el-table-column>
            <el-table-column label="投放助理" prop="accountUsers" align="center" width="100" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <div>{{ scope.row.accountUsers | filterUser }}</div>
                </template>
            </el-table-column>
            <el-table-column label="公众号信息" align="center" width="150" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <el-row align="middle" type="flex" justify="center">
                        <div class="verticalCenter">
                            <div><strong>{{ scope.row.wechatAccountName }}</strong></div>
                            <div style="color: rgb(136, 136, 136); font-size: 13px;">{{ scope.row.wechatAccountId }}
                            </div>
                        </div>
                    </el-row>
                </template>
            </el-table-column>
            <el-table-column label="企业名称" prop="corporationName" align="center" width="180">
                <template slot-scope="scope">
                    <el-tooltip placement="top" effect="light">
                        <div slot="content">{{ scope.row.corporationName }}</div>
                        <div class="name-wrapper">
                            <div>{{ scope.row.corporationName }}</div>
                        </div>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column label="服务商id列表" prop="agencyIdList" align="center" width="130">
                <template slot-scope="scope" v-if="scope.row.agencyIdList && scope.row.agencyIdList.length > 0">
                    <el-tooltip placement="top" effect="light">
                        <div slot="content">{{ JSON.parse(scope.row.agencyIdList).toString() }}</div>
                        <div class="name-wrapper">
                            <div>{{ JSON.parse(scope.row.agencyIdList).toString() }}</div>
                        </div>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column label="行业ID" prop="systemIndustryId" align="center" width="110" />
            <el-table-column label="授权状态" prop="authStatus" align="center" width="80" />
            <el-table-column label="日限额(分)" prop="dailyBudget" align="center" width="100" />
            <el-table-column label="accessToken" prop="accessToken" align="center" width="150">
                <template slot-scope="scope">
                    <el-tooltip placement="top" effect="light">
                        <div slot="content">{{ scope.row.accessToken }}</div>
                        <div class="name-wrapper">
                            <div>{{ scope.row.accessToken }}</div>
                        </div>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column label="refreshToken" prop="refreshToken" align="center" width="150">
                <template slot-scope="scope">
                    <el-tooltip placement="top" effect="light">
                        <div slot="content">{{ scope.row.refreshToken }}</div>
                        <div class="name-wrapper">
                            <div>{{ scope.row.refreshToken }}</div>
                        </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="180">
                <template slot-scope="scope" v-if="scope.row.id && typeof scope.row.id === 'number'">
                    <el-button size="mini" type="text" icon="el-icon-sort" v-hasPermi="['adWarrant:switch']"
                        @click="puthangdle(scope.row)">指派</el-button>
                    <el-button size="mini" type="text" icon="el-icon-sort" v-hasPermi="['adWarrant:switch']"
                        @click="putUserHandle(scope.row)">指派投放助理</el-button>
                </template>
            </el-table-column>
        </el-table>

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

        <!-- 腾讯广告应用管理 -->
        <el-dialog title="腾讯广告应用管理" :visible.sync="openTenEditSwitch" width="950px">
            <el-form :model="tenQueryForm" ref="tenqueryForm" :inline="true">
                <el-form-item label="" prop="clientId">
                    <el-input v-model="tenQueryForm.clientId" placeholder="请输入应用ID" clearable size="small"
                        style="width: 150px" />
                </el-form-item>
                <el-form-item label="" prop="appName">
                    <el-input v-model="tenQueryForm.appName" placeholder="应用名称" clearable size="small"
                        style="width: 150px" />
                </el-form-item>
                <el-form-item label="" prop="enabled">
                    <el-radio-group v-model="tenQueryForm.enabled" size="small">
                        <el-radio-button :label="true">正常</el-radio-button>
                        <el-radio-button :label="false">停用</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="" prop="useType">
                    <el-select v-model="tenQueryForm.useType" placeholder="请选择" size="small" style="width: 150px"
                        clearable>
                        <el-option label="数据" value="0"></el-option>
                        <el-option label="监控系统" value="1"></el-option>
                        <el-option label="其它" value="-1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleTenQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetTenQuery">重置</el-button>
                    <el-button type="primary" icon="el-icon-plus" size="mini" @click="addTen">新建</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="appList" v-loading="loading">
                <el-table-column label="应用名称" prop="appName" align="center" />
                <el-table-column label="应用ID" prop="clientId" align="center" />
                <el-table-column label="应用密钥" prop="clientSecret" align="center" width="180" />
                <el-table-column label="归属" prop="useType" align="center">
                    <template slot-scope="scope">
                        <div>{{ scope.row.useType === 0 ? '数据' : scope.row.useType === 1 ? '监控系统' : '其它' }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="Enable?" prop="enabled" align="center">
                    <template slot-scope="scope">
                        <div>{{ scope.row.enabled ? '正常' : '停用' }}</div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope" v-if="scope.row.id && typeof scope.row.id === 'number'">
                        <el-button size="mini" type="text" icon="el-icon-edit"
                            @click="handleEditTen(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="tenTotal > 0" :total="tenTotal" :page.sync="tenQueryForm.pageNum"
                :limit.sync="tenQueryForm.pageSize" @pagination="getAdList" />
            <!-- <span slot="footer" class="dialog-footer">
                <el-button @click="openTenEditSwitch = false">关 闭</el-button>
            </span> -->
        </el-dialog>
        <!-- 新增 -->
        <el-dialog title="新增腾讯广告应用" :visible.sync="openTenAddEditSwitch" width="350px">
            <el-form :model="addTenQueryForm" ref="addTenqueryForm" :rules="rulesTen">
                <el-form-item label="应用名称" prop="appName">
                    <el-input v-model="addTenQueryForm.appName" placeholder="应用名称" clearable size="small" />
                </el-form-item>
                <el-form-item label="应用ID" prop="clientId">
                    <el-input v-model.number="addTenQueryForm.clientId" placeholder="请输入应用ID" clearable size="small" />
                </el-form-item>
                <el-form-item label="应用密钥" prop="clientSecret">
                    <el-input v-model="addTenQueryForm.clientSecret" placeholder="请输入应用密钥" clearable size="small" />
                </el-form-item>
                <el-form-item label="Enable?" prop="enabled">
                    <el-switch v-model="addTenQueryForm.enabled"></el-switch>
                </el-form-item>
                <el-form-item label="归属" prop="useType">
                    <el-select v-model="addTenQueryForm.useType" placeholder="请选择" size="small">
                        <el-option label="数据" :value="0"></el-option>
                        <el-option label="监控系统" :value="1"></el-option>
                        <el-option label="其它" :value="-1"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="openTenAddEditSwitch = false">取 消</el-button>
                <el-button type="primary" @click="onSubmitTenSwitch()">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 指派 -->
        <el-dialog title="指派投手" :visible.sync="putVisible" width="450px" append-to-body>
            <el-form :model="putParamsForm" :rules="putRulesType" ref="platFormPut" label-width="80px"
                label-position="top">
                <el-form-item label="用户" prop="putUserId">
                    <el-select v-model="putParamsForm.putUserId" placeholder="请选择" filterable style="width: 100%"
                        clearable>
                        <el-option v-for="item in userAll" :key="item.id" :label="item.nickName" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="putParamsForm = {}; putVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitPUt('platFormPut')">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 批量授权 -->
        <el-dialog title="批量授权" :visible.sync="warrantsShow" width="550px">
            <el-form :model="queryWarrants" ref="warrantsQueryForm" label-position="top" :rules="rulesWarrants">
                <el-form-item label="平台选择" prop="adAppIds">
                    <el-checkbox-group v-model="queryWarrants.adAppIds">
                        <el-checkbox v-for="val in tenAllList" :label="val.id" :key="val.id">{{ val.appName
                            }}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="账号ID" prop="users">
                    <el-input type="textarea" :rows="2" placeholder="每个账号请以,号隔空例：123456,222333,444444"
                        v-model="queryWarrants.users">
                    </el-input>
                </el-form-item>
            </el-form>

            <div style="display: flex;">
                <el-button type="primary" @click="clearAccount()">清空账号状态</el-button>
                <el-button size="mini" @click="errorHandle()">查询授权失败账户</el-button>
            </div>

            <div>
                <div v-if="errorData['1']" style="margin-top: 10px">
                    <div>趣程数据（旧版）失败列表：</div>
                    <div style="margin-top: 5px">{{ errorData['1'] }}</div>
                </div>
                <div v-if="errorData['2']" style="margin-top: 10px">
                    <div>赞象计划监控失败列表：</div>
                    <div style="margin-top: 5px">{{ errorData['2'] }}</div>
                </div>
                <div v-if="errorData['4']" style="margin-top: 10px">
                    <div>赞象数据（新版）失败列表</div>
                    <div style="margin-top: 5px">{{ errorData['4'] }}</div>
                </div>
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button @click="warrantsShow = false">取 消</el-button>
                <el-button type="primary" @click="onSubmitWarrants()">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="扫码" :visible.sync="imgBase64Show" width="200px">
            <img :src="this.imgBase64" width="180">
        </el-dialog>

        <putUser @change="putChange" :accountIds="accountIds" :userAll="userAll" :putUserIds="putUserIds"
            @close="putUserShow = false" :show="putUserShow" v-if="putUserShow" />
    </div>
</template>

<script>
import { listAd, toAuth, refreshByIds, getAdAppList, addApp, editApp, getAdAppListAll, cutPut } from "@/api/accounts/adApi";
import { getAllBook } from "@/api/system/books";
import { getPeriodAll } from "@/api/accounts/period";
import { allUser } from "@/api/system/user";
import { searchList } from "@/api/accounts/account";
import MyTable from './components/myTable.vue';
import store from '@/store'
import { getToken } from '@/utils/auth'
import putUsers from './putUsers.vue'
import putUser from './putUser.vue'
export default {
    name: 'Account',
    components: { MyTable, putUsers, putUser },
    data() {
        return {
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                accountIds: null,
                sourceType: null
            },
            showSearch: true,
            // 总条数
            total: 0,
            // 公众号表格信息
            adList: [],
            // 表格选中ids
            ids: [],
            loading: false,
            // 表单控制
            rules: {},
            // 总修改按钮控制 非多个禁用
            multiple: true,
            // 所有书城平台
            bookAll: [],
            // 所有期数
            perodidAll: [],
            // 所有用户
            userAll: [],
            // 保存公众号
            accounts: [],
            accountId: null,
            openTenEditSwitch: false, // 腾讯广告应用管理
            tenQueryForm: {
                pageSize: 10,
                pageNum: 1,
                enabled: true
            },
            appList: [],
            // 新增应用管理 相关
            openTenAddEditSwitch: false,
            addTenQueryForm: {
                enabled: true,
                useType: '0'
            },
            rulesTen: {
                appName: [
                    { required: true, message: '请输入应用名称', trigger: 'blur' }
                ],
                clientId: [
                    { required: true, message: '请输入应用ID', trigger: 'blur' },
                    { type: 'number', message: '应用ID必须为数字值' }
                ],
                clientSecret: [
                    { required: true, message: '请输入应用密钥', trigger: 'blur' }
                ],
                enabled: [
                    { required: true, message: '请选择是否可用', trigger: 'blur' }
                ],
                useType: [
                    { required: true, message: '请选择归属', trigger: 'blur' }
                ]
            },
            tenTotal: 0,
            loading: false,
            tenAllList: [],
            reLoading: false,
            putVisible: false,
            putParamsForm: {},
            putRulesType: {
                putUserId: [
                    { required: true, message: '请选择投手', trigger: 'blur' }
                ]
            },
            warrantsShow: false,
            queryWarrants: {
                adAppIds: []
            },
            rulesWarrants: {
                adAppIds: [
                    { required: true, message: '请选择平台', trigger: 'blur' }
                ],
                users: [
                    { required: true, message: '请输入账户ID', trigger: 'blur' }
                ]
            },
            imgBase64: '',
            imgBase64Show: false,
            errorData: {},
            tabLoading: true,
            accountIds: [],
            putUserIds: [],
            putUserShow: false
        }
    },
    filters: {
        filterUser(val) {
            if (val && val.length > 0) {
                return val.map(item => item.putUserName).toString()
            }
            return '-1'
        }
    },
    computed: {
        userType () {
            if (this.queryParams.adAppId) {
                return this.tenAllList.find(item => item.id === this.queryParams.adAppId).useType || undefined
            }
            return undefined
        }
    },
    mounted() {
        window.addEventListener('storage', this.listener)
    },
    beforeDestroy() { // 在组件生命周期结束的时候销毁。
        window.removeEventListener('storage', this.listener, false)
    },
    created() {
        this.getAppListAll()
        this.getAll()
    },
    methods: {
        handleCommand(command) {
            this.handleWarrantOld(2, command)
        },
        listener(e) {
            if (e.key === 'adMp') {
                if (e.newValue === 'ok') {
                    // this.$router.go(0)
                    this.getList()
                    this.msgSuccess("授权成功");
                    localStorage.removeItem('adMp')
                } else {
                    this.$message.error('授权失败');
                    localStorage.removeItem('adMp')
                }
            }
        },
        putUserHandle(row) {
            console.log(row);
            this.putUserShow = true
            this.accountIds = row.accountId ? [row.accountId] : []
            this.putUserIds = row.accountUsers && row.accountUsers.length > 0 ? row.accountUsers.map(item => item.putUserId) : []
        },
        /** 指派投放助理回调 */
        putChange() {
            this.ids = []
            this.accountIds = []
            this.putUserIds = []
            this.putUserShow = false
            this.getAppListAll()
        },
        /** 清空账户状态 */
        clearAccount() {
            fetch('http://47.99.157.216:8022/qq/delCookie', {
                method: 'GET'
            }).then(res => res.json()).then(r => {
                this.msgSuccess('清理成功！！！！请重新扫码授权登录！！！');
            })
        },
        /** 查询授权失败账户 */
        errorHandle() {
            fetch('http://47.99.157.216:8022/qq/queryErr', {
                method: 'GET'
            }).then(res => res.json()).then(r => {
                this.errorData = r.data
            })
        },
        /** 授权确定 */
        onSubmitWarrants() {
            this.$refs['warrantsQueryForm'].validate((valid) => {
                if (valid) {
                    let params = { ...this.queryWarrants, users: this.queryWarrants.users.split(','), callbackPage: encodeURIComponent(window.location.origin + '/adCode'), authorization: 'Bearer ' + getToken() }
                    console.log(params);
                    fetch('http://47.99.157.216:8022/qq/auth', {
                        method: 'POST',
                        headers: {
                            "content-type": "application/json",
                        },
                        body: JSON.stringify(params)
                    }).then(response => response.json()).then(json => {
                        console.log('11111--->', json)
                        if (json.data.msg) {
                            this.msgSuccess(json.data.msg);
                        }
                        if (json.data.codeImgUrl) {
                            this.imgBase64 = json.data.codeImgUrl
                            this.imgBase64Show = true
                        }
                    })
                }
            })
        },
        /** 批量授权 */
        warrantsHandle() {
            console.log(1111);
            this.warrantsShow = true
            // this.$nextTick(() => {
            //     this.$set(this.queryWarrants, 'adAppIds', this.tenAllList.map(item => item.id))
            // })
        },
        /** 刷新服务商 */
        refreshServer() {
            this.reLoading = true
            refreshByIds(this.ids).then(res => {
                this.reLoading = false
                this.ids = []
                this.accountIds = []
                this.msgSuccess("刷新成功");
                this.getList()
            }).catch(() => {
                this.reLoading = false
            })
        },
        /**  */
        handleTenQuery() {
            this.getAdList()
        },
        resetTenQuery() {
            this.resetForm("tenqueryForm");
            this.getAdList();
        },
        addTen() {
            this.addTenQueryForm = {
                enabled: true,
                useType: 0
            }
            this.openTenAddEditSwitch = true
        },
        handleEditTen(row) {
            this.addTenQueryForm = {
                appName: row.appName,
                clientId: row.clientId,
                clientSecret: row.clientSecret,
                enabled: row.enabled,
                useType: row.useType,
                adAppId: row.id
            }
            this.openTenAddEditSwitch = true
        },
        /** 指派 */
        puthangdle(row) {
            this.putParamsForm = {
                adAccountId: row.id,
                putUserId: row.putUserId
            }
            this.putVisible = true
        },
        /** 批量指派 */
        putsHandle() {
            this.putParamsForm = {
                adAccountId: this.ids.toString(),
                putUserId: undefined
            }
            this.putVisible = true
        },
        /** 切换投手 */
        submitPUt(type) {
            this.$refs[type].validate((valid) => {
                if (valid) {
                    cutPut(this.putParamsForm).then(res => {
                        if (res.data) {
                            this.msgSuccess('切换成功')
                            this.putParamsForm = {}
                            this.putVisible = false
                            this.getList()
                        }
                    })
                }
            })
        },
        /** 确定新增 */
        onSubmitTenSwitch() {
            this.$refs['addTenqueryForm'].validate((valid) => {
                if (valid) {
                    if (this.addTenQueryForm.adAppId) {
                        editApp(this.addTenQueryForm).then(res => {
                            if (res.data) {
                                this.msgSuccess("编辑成功");
                                this.openTenAddEditSwitch = false
                                this.getAdList()
                                this.getAppListAll()
                            } else {
                                console.error(res)
                            }
                        })
                    } else {
                        addApp(this.addTenQueryForm).then(res => {
                            if (res.data) {
                                this.msgSuccess("新增成功");
                                this.openTenAddEditSwitch = false
                                this.getAdList()
                                this.getAppListAll()
                            } else {
                                console.error(res)
                            }
                        })
                    }
                } else {
                    return false
                }
            });
        },
        /** 腾讯广告应用管理 */
        handleTenEdit() {
            this.openTenEditSwitch = true
            this.getAdList()
        },
        /** 获取腾讯广告应用列表 */
        getAdList() {
            this.loading = true
            getAdAppList(this.tenQueryForm).then(res => {
                this.appList = res.data.records
                this.tenTotal = res.data.total
                this.loading = false
            }).catch(() => this.loading = false)
        },
        /** 时间转换 */
        parserTime(time) {
            const d = new Date(time)
            const resDate = d.getFullYear() + '-' + this.p((d.getMonth() + 1)) + '-' + this.p(d.getDate()) + " " + this.p(d.getHours()) + ":" + this.p(d.getMinutes()) + ":" + this.p(d.getSeconds())
            return resDate
        },
        p(s) {
            return s < 10 ? '0' + s : s
        },
        /** 获取公众号 */
        remoteMethod(query) {
            if (query === '') return;
            console.log('query==', query)
            this.loading = true;
            let data = {
                authStatus: 0,
                nickName: query,
            }
            searchList(data).then(response => {
                this.loading = false;
                this.accounts = response.data
            }).catch(err => {
                this.loading = false;
            })
        },
        /** 获取所有书城平台，获取所有期数，所有用户*/
        getAll() {
            // 所有书城平台
            const permissions = store.getters.btnPower
            if (permissions) {
                getAllBook().then(response => {
                    let data = response.data
                    this.bookAll = data.map((item) => {
                        return { id: item.id, platformName: item.platformName }
                    })
                });
            }

            // 所有期数
            getPeriodAll().then(response => {
                let data = response.data
                this.perodidAll = data
            });
            // 所有用户
            allUser().then(response => {
                let data = response.data
                this.userAll = data.map((item) => {
                    return { id: item.userId, nickName: item.nickname }
                })
            })
        },
        /** 老的授权广告平台 */
        handleWarrantOld(type, adUnitType) {
            sessionStorage.setItem('ADSQ', type)
            toAuth({ adAppId: this.queryParams.adAppId, adUnitType, callbackPage: encodeURIComponent(window.location.origin + '/adCode') }).then(res => {
                if (res.data) {
                    window.open(res.data)
                }
            })
        },
        // 获取所有腾讯广告应用
        getAppListAll() {
            getAdAppListAll().then(res => {
                if (res.data && res.data.length > 0) {
                    this.queryParams = {
                        ...this.queryParams,
                        adAppId: res.data[0].id
                    }
                    this.getList()
                }
                this.tenAllList = res.data
            })
        },
        /** 查询广告平台列表 */
        getList() {
            let { accountIds } = this.queryParams
            let arrayIds = []
            if (accountIds) {
                let reg = new RegExp('，', "g");
                accountIds = accountIds.replace(reg, ',')
                arrayIds = accountIds.split(',')
            }
            this.tabLoading = true
            listAd({ ...this.queryParams, accountIds: arrayIds }).then(response => {
                let data = response.data
                this.total = data.total
                let records = data.records
                this.adList = records
                this.tabLoading = false
            })
        },
        /** 搜索 */
        handleQuery() {
            this.queryParams = { ...this.queryParams, pageNum: 1 }
            this.getList();
        },
        /** 重置搜索条件 */
        resetQuery() {
            this.resetForm("queryForm");
            this.getList();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            console.log(selection)
            this.ids = selection.map(item => item.id)
            this.accountIds = selection.map(item => item.accountId)
            console.log(this.ids)
            this.multiple = !selection.length
        }
    }
}
</script>
<style>
.el-drawer__header span:focus {
    outline: 0;
}

.Space {
    width: 10px;
    display: inline-block;
}

.my_padding {
    margin: 0 10px 10px 10px;
}

.verticalCenter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 5px;
}

.name-wrapper>div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drawerDetail {
    width: 100%;
    height: 100%;
    padding: 0 20px 10px;
    box-sizing: border-box;
}

.el-menu--horizontal>.el-menu-item {
    height: 45px;
    line-height: 45px;
}

.grid-content {
    height: 30px;
    line-height: 30px;
}
</style>