<template>
    <div class="app-container" ref='appFull' style="background: #fff;">
        <el-form :model="queryParams" ref="queryParams" v-show="showSearch" :inline="true">
            <el-form-item>
                <el-select v-model="queryParams.userId" size="small" placeholder="选择用户" filterable style="width: 140px"
                    clearable>
                    <el-option v-for="item in userAll" :key="item.id" :label="item.nickName" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="queryParams.resourceTag" size="small" :disabled="!queryParams.userId" placeholder="角色标签"
                    filterable style="width: 100px" clearable>
                    <el-option v-for="(item, index) in tagAll" :key="index" :label="item.resourceTag"
                        :value="item.resourceTag" />
                </el-select>
            </el-form-item>
            <el-form-item label="" prop="resourceName">
                <el-input v-model="queryParams.resourceName" placeholder="请输入资源名称" clearable size="small"
                    style="width: 150px" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="" prop="resourceKey">
                <el-input v-model="queryParams.resourceKey" placeholder="请输入资源标识" clearable size="small"
                    style="width: 150px" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="" prop="resourceGroupId">
                <el-select v-model="queryParams.resourceGroupId" placeholder="资源分组" clearable filterable
                    style="width: 140px" size="small">
                    <el-option v-for="dict in groupingData" :key="dict.id" :label="dict.groupName" :value="dict.id" />
                </el-select>
            </el-form-item>
            <el-form-item prop="resourceType">
                <el-select style="width: 140px" v-model="queryParams.resourceType" placeholder="资源类型" filterable clearable
                    size="small">
                    <el-option v-for="item in resourceTypes" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="resourceType">
                <el-select v-model="queryParams.businessGroupId" size="small" placeholder="选择项目组" filterable
                    style="width: 140px" clearable>
                    <el-option v-for="item in teamsList" :key="item.id" :label="item.businessGroupName" :value="item.id" />
                </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">
            <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增资源</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" icon="el-icon-refresh" size="mini" @click="handleRefresh">刷新服务器缓存</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table :data="accountList" size="mini" v-loading="loading" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" align="center" fixed="left" />
            <el-table-column label="资源名称" prop="resourceName" :show-overflow-tooltip="true" width="120" fixed="left" />
            <el-table-column label="资源标识" prop="resourceKey" :show-overflow-tooltip="true" width="150" fixed="left" />
            <el-table-column label="项目组" prop="businessGroupInfo" width="80" :show-overflow-tooltip="true" align="center">
                <template slot-scope="scope" v-if="scope.row.businessGroupInfo">
                    <span>{{ scope.row.businessGroupInfo.businessGroupName }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="operUserInfo" width="100" align="center" label="运营">
                <template slot-scope="scope" v-if="scope.row.operUserInfo">
                    <el-popover :width="200" trigger="hover" placement="top" :title="scope.row.operUserInfo.nickname">
                        <div style="color: rgb(136, 136, 136); font-size: 13px">
                            电话：{{ scope.row.operUserInfo.phone }}
                        </div>
                        <div slot="reference">{{ scope.row.operUserInfo.nickname }}</div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="putUserInfo" width="100" align="center" label="投手">
                <template slot-scope="scope" v-if="scope.row.putUserInfo">
                    <el-popover :width="200" trigger="hover" placement="top" :title="scope.row.putUserInfo.nickname">
                        <div style="color: rgb(136, 136, 136); font-size: 13px">
                            电话：{{ scope.row.putUserInfo.phone }}
                        </div>
                        <div slot="reference">{{ scope.row.putUserInfo.nickname }}</div>
                    </el-popover>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="userRelationList" width="100" align="center" label="审查">
                <template slot-scope="scope" v-if="scope.row.userRelationList">
                    <el-popover :width="200" trigger="hover" placement="top" :title="scope.row.userRelationList.nickName">
                        <div style="color: rgb(136, 136, 136); font-size: 13px">
                        电话：{{ scope.row.userRelationList.phone }}
                        </div>
                        <div slot="reference">{{ scope.row.userRelationList.nickName }}</div>
                    </el-popover>
                </template>
            </el-table-column> -->
            <el-table-column label="资源类型" prop="resourceType" align="center" width="150">
                <template slot-scope="scope">
                    <el-tag size="mini" :type="resourceTypes[0].type" v-if="scope.row.resourceType === 0">{{
                        resourceTypes[0].label }}</el-tag>
                    <el-tag size="mini" :type="resourceTypes[1].type" v-if="scope.row.resourceType === 1">{{
                        resourceTypes[1].label }}</el-tag>
                    <el-tag size="mini" :type="resourceTypes[2].type" v-if="scope.row.resourceType === 3">{{
                        resourceTypes[2].label }}</el-tag>
                    <el-tag size="mini" :type="resourceTypes[3].type" v-if="scope.row.resourceType === 10">{{
                        resourceTypes[3].label }}</el-tag>
                    <el-tag size="mini" :type="resourceTypes[4].type" v-if="scope.row.resourceType === 20">{{
                        resourceTypes[4].label }}</el-tag>
                    <el-tag size="mini" :type="resourceTypes[5].type" v-if="scope.row.resourceType === 4">{{
                        resourceTypes[5].label }}</el-tag>
                    <el-tag size="mini" :type="resourceTypes[6].type" v-if="scope.row.resourceType === 5">{{
                        resourceTypes[6].label }}</el-tag>
                    <el-tag size="mini" :type="resourceTypes[7].type" v-if="scope.row.resourceType === 30">{{
                        resourceTypes[7].label }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="所属分组" prop="groupInfo" width="120" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.groupInfo">{{ scope.row.groupInfo.groupName }}</span>
                    <span v-else></span>
                </template>
            </el-table-column>
            <el-table-column label="投放状态" prop="putStatus" width="80" align="center">
                <template slot-scope="scope">
                    <el-tag type="warning" v-if="scope.row.putStatus === 'wait'">待投放</el-tag>
                    <el-tag type="success" v-else-if="scope.row.putStatus === 'ing'">投放中</el-tag>
                    <el-tag type="info" v-else-if="scope.row.putStatus === 'stop'">停投</el-tag>
                    <el-tag type="danger" v-else-if="scope.row.putStatus === 'destroy'">账号已注销</el-tag>
                    <div v-else>--</div>
                </template>
            </el-table-column>
            <el-table-column label="投放渠道" prop="putChannel" align="center" width="80" />
            <el-table-column label="期数" prop="periodInfo" width="100" align="center">
                <template slot-scope="scope" v-if="scope.row.periodInfo">
                    <div>
                        {{ scope.row.periodInfo.period }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="当前书籍" prop="bookInfo" width="120" align="center">
                <template slot-scope="scope" v-if="scope.row.bookInfo">
                    <el-popover width="200" trigger="hover" placement="top" :title="scope.row.bookInfo.bookName">
                        <div style="color: rgb(136, 136, 136); font-size: 13px">
                            <strong>来源：</strong>
                            <span>{{ scope.row.bookInfo.source }}-{{ scope.row.bookInfo.author }}</span>
                        </div>
                        <div style="color: rgb(136, 136, 136); font-size: 13px">
                            <strong>信息：</strong>
                            <span>{{ scope.row.bookInfo.protagonist }}-{{ scope.row.bookInfo.channel }}</span>
                        </div>
                        <div slot="reference">{{ scope.row.bookInfo.bookName }}</div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="platformInfo" label="书城信息" width="100" align="center">
                <template slot-scope="scope" v-if="scope.row.platformInfo">
                    <div>
                        {{ scope.row.platformInfo.platformName }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="rechargeTemplate" label="充值模板" width="100" align="center">
                <template slot-scope="scope">
                    <div>
                        {{ scope.row.rechargeTemplate }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="backCoefficient" label="回本系数" width="100" align="center">
                <template slot-scope="scope">
                    <div>
                        {{ scope.row.backCoefficient }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="账号" prop="platformAccountInfo" width="300">
                <template slot-scope="scope">
                    <div v-if="scope.row.platformAccountInfo && scope.row.platformAccountInfo.account">
                        <span style="color: rgb(136, 136, 136); font-size: 12px">
                            <span>
                                {{ scope.row.platformAccountInfo.account }}&nbsp;
                                <!-- <i class="el-icon-document-copy copy" @click="Copy(scope.row.platformAccountInfo.account)"></i>
                                {{ scope.row.platformAccountInfo.password }}&nbsp;
                                <i class="el-icon-document-copy copy" @click="Copy(scope.row.platformAccountInfo.password)"></i> -->
                            </span>
                        </span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="createTime" width="135" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="120">
                <template slot-scope="scope">
                    <!-- <div class="Space"></div> -->
                    <el-popover placement="top" width="200" @hide="handlePullHide" trigger="click">
                        <div>
                            <el-row type="flex" justify="space-between" class="grouping">
                                <span>移动至</span>
                                <el-button size="mini" type="text" :icon="gVis ? 'el-icon-close' : 'el-icon-plus'"
                                    @click="handleGAdd">{{ gVis ? '取消' : '新增' }}</el-button>
                            </el-row>

                            <div v-show="gVis">
                                <div class="Space"></div>
                                <el-input placeholder="请输入内容" v-model="groupValue" class="input-with-select" size="mini">
                                    <el-button slot="append" type="primary" @click="handleAddGroup">添加</el-button>
                                </el-input>
                            </div>

                            <ul class="groupingNames">
                                <li v-for="gItem in groupingData" :key="gItem.id">
                                    <template v-if="!gItem.isUpdata">
                                        <div class="gnTxt" v-if="scope.row.groupInfo && scope.row.groupInfo.id == gItem.id">
                                            <span style="color: red">*</span>{{ gItem.groupName }}
                                        </div>
                                        <div class="gnTxt" v-else>
                                            {{ gItem.groupName }}
                                        </div>
                                        <div class="gnBts gnnone"
                                            v-if="!scope.row.groupInfo || scope.row.groupInfo.id != gItem.id"
                                            @click.stop.prevent="editAccountGroup(scope.row.id, gItem.id)">
                                            <el-row type="flex" justify="space-around" align="middle" class="bts">
                                                <el-button size="mini" type="text" icon="el-icon-edit"
                                                    style="color: #409EFF"
                                                    @click.stop="handleGUpdata(gItem.id)"></el-button>
                                                <el-popconfirm title="确定删除该分组？" @confirm="handleGroupDel(gItem.id)">
                                                    <el-button slot="reference" size="mini" type="text"
                                                        icon="el-icon-delete" style="color: red" @click.stop=""></el-button>
                                                </el-popconfirm>
                                            </el-row>
                                        </div>
                                    </template>
                                    <template v-else>
                                        <el-input placeholder="请输入内容" v-model="newGroupName" class="input-with-select"
                                            size="mini">
                                            <el-button slot="append" type="primary"
                                                @click="handleGroupEdit(gItem.id,)">修改</el-button>
                                        </el-input>
                                    </template>
                                </li>
                            </ul>
                        </div>
                        <el-button size="mini" type="text" icon="el-icon-folder-opened" slot="reference">分组</el-button>
                    </el-popover>
                    <el-dropdown trigger="click" size="mini">
                        <span class="el-dropdown-link">
                            更多<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item><change-record v-model="scope.row" :periodList="periodList"
                                    :bookCity="bookCity" :bookList="bookList" :teamsList="teamsList" :userAll="userAll"
                                    type="acc" /></el-dropdown-item>
                            <el-dropdown-item>
                                <div class="dropdownItem" @click="handleEdit(scope.row)"><i class="el-icon-edit"></i>编辑
                                </div>
                            </el-dropdown-item>
                            <el-dropdown-item>
                                <div class="dropdownItem" @click="handleState(scope.row)"><i class="el-icon-s-check"></i> 指派
                                </div>
                            </el-dropdown-item>
                            <el-dropdown-item><cut-book v-model="scope.row" :periodList="periodList" :bookCity="bookCity"
                                    :bookList="bookList" @change="getList" :teamsList="teamsList" /></el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>

                </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="isAdd ? '新增资源库' : '编辑资源库'" :visible.sync="openEdit" :width="isAdd ? '500px' : '640px'"
            append-to-body @close="addClose">
            <el-form :model="queryPlatform" :rules="rules" ref="platForm" label-position="top" :inline="true">
                <el-form-item label="开始时间" prop="beginTime" style="width: 100%">
                    <el-date-picker v-model="queryPlatform.beginTime" size="small" format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd" type="date" placeholder="选择开始时间" />
                </el-form-item>
                <el-form-item label="资源名称" prop="resourceName" style="width: 140px">
                    <el-input v-model="queryPlatform.resourceName" placeholder="输入资源名称" />
                </el-form-item>
                <el-form-item label="资源标识" prop="resourceKey" style="width: 140px">
                    <el-input v-model="queryPlatform.resourceKey" placeholder="输入资源标识" />
                </el-form-item>
                <el-form-item prop="resourceType" label="资源类型" style="width: 140px">
                    <el-select v-model="queryPlatform.resourceType" placeholder="资源类型" filterable clearable size="small">
                        <el-option v-for="item in resourceTypes" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="资源分组" prop="resourceGroupId" style="width: 140px;">
                    <el-select v-model="queryPlatform.resourceGroupId" placeholder="资源分组" clearable filterable size="small">
                        <el-option v-for="dict in groupingData" :key="dict.id" :label="dict.groupName" :value="dict.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="项目组" prop="businessGroupId" v-if="isAdd">
                    <el-select v-model="queryPlatform.businessGroupId" size="small" placeholder="选择项目组" filterable
                        style="width: 140px" clearable>
                        <el-option v-for="item in teamsList" :key="item.id" :label="item.businessGroupName"
                            :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="期数" prop="periodId" v-if="isAdd">
                    <el-select v-model="queryPlatform.periodId" size="small" placeholder="选择期数" filterable
                        style="width: 140px" clearable>
                        <el-option v-for="item in periodList" :key="item.id" :label="item.period" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="书城" prop="platformId" v-if="isAdd">
                    <el-select v-model="queryPlatform.platformId" @change="selectZh" size="small" placeholder="选择书城"
                        filterable style="width: 140px" clearable>
                        <el-option v-for="item in bookCity" :key="item.id" :label="item.platformName" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="账号" prop="platformAccountId" v-if="isAdd">
                    <el-select v-model="queryPlatform.platformAccountId" :disabled="!queryPlatform.platformId" size="small"
                        placeholder="选择账号" filterable style="width: 140px" clearable>
                        <el-option v-for="item in accList" :key="item.id" :label="item.account" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="书" prop="bookId" v-if="isAdd">
                    <el-select v-model="queryPlatform.bookId" size="small" placeholder="选择书" filterable style="width: 140px"
                        clearable>
                        <el-option v-for="item in bookList" :key="item.id" :label="item.bookName" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="投放状态" prop="putStatus" v-if="isAdd">
                    <el-select v-model="queryPlatform.putStatus" size="small" placeholder="选择投放状态" filterable
                        style="width: 140px" clearable>
                        <el-option label="待投放" value="wait" />
                        <el-option label="投放中" value="ing" />
                        <el-option label="停投" value="stop" />
                        <el-option label="账号已注销" value="destroy" />
                    </el-select>
                </el-form-item>
                <el-form-item label="投放渠道" prop="putChannel" v-if="isAdd">
                    <el-select v-model="queryPlatform.putChannel" size="small" placeholder="选择投放渠道" filterable
                        style="width: 140px" clearable>
                        <el-option :label="item.label" :value="item.value" :key="item.value" v-for="item in channelList" />
                    </el-select>
                </el-form-item>
                <el-form-item label="充值模板" prop="rechargeTemplate" v-if="isAdd">
                    <el-input v-model="queryPlatform.rechargeTemplate" size="small" style="width: 140px"
                        placeholder="输入充值模板" />
                </el-form-item>
                <el-form-item label="回本系数" prop="backCoefficient" v-if="isAdd">
                    <el-input-number v-model="queryPlatform.backCoefficient" size="small" :min="0" :max="1" style="width: 140px" :step="0.1"
                        placeholder="输入回本系数" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="openEdit = false">取 消</el-button>
                <el-button type="primary" @click="submit('platForm')">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 指派 -->
        <el-dialog title="指派用户" :visible.sync="openEditType" width="450px" append-to-body>
            <el-form label-width="80px" label-position="top" ref="platFormTimeType" :model="timeData"
                :rules="rulesTimeType">
                <el-form-item label="开始时间(修改运营和投手后必选)" prop="beginTime">
                    <el-date-picker v-model="timeData.beginTime" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                        placeholder="选择开始时间">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <el-form :model="item" :rules="rulesType" ref="platFormType" label-width="80px" label-position="top"
                v-for="(item, index) in queryPlatformType" :key="index">
                <el-row :gutter="20">
                    <el-col :span="14">
                        <el-form-item label="用户" prop="userId">
                            <el-select v-model="item.userId" 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-col>
                    <el-col :span="6">
                        <el-form-item label="角色标签" prop="resourceTag">
                            <el-select v-model="item.resourceTag" placeholder="角色标签" filterable clearable>
                                <el-option v-for="(item1, index1) in tagAll" :key="index1" :label="item1.resourceTag"
                                    :value="item1.resourceTag">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="6">
                        <el-form-item label="开始时间" prop="beginTime">
                            <el-date-picker
                                style="width: 100%"
                                v-model="item.beginTime"
                                type="date"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="选择开始时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="结束时间" prop="endTime">
                            <el-date-picker
                                style="width: 100%"
                                v-model="item.endTime"
                                type="date"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="选择结束时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="2">
                        <div style="margin-top: 42px">
                            <el-button @click.prevent="removeResource(index)" type="text" icon="el-icon-delete"
                                style="color: red; margin-left: 10px"></el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <el-button type="text" icon="el-icon-plus" @click="addResource">新增用户</el-button>
            <span slot="footer" class="dialog-footer">
                <el-button @click="queryPlatformType = []; openEditType = false">取 消</el-button>
                <el-button type="primary" @click="submitState('platFormType')">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 公众号导入对话框 -->
        <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
            <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
                :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
                :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                    将文件拖到此处，或
                    <em>点击上传</em>
                </div>
                <!-- <div class="el-upload__tip" slot="tip">
                    <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的公众号数据
                    <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
                </div> -->
                <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
            </el-upload>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitFileForm">确 定</el-button>
                <el-button @click="upload.open = false">取 消</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import {
    getResourceList, addResource,
    editResource, addGroup, getGroupAllList, refreshCache,
    delGroup, editGroup, editAccountGroup, assignResourceUser, getRoleAll
} from "@/api/accounts/account";
import { allUser } from "@/api/system/user";
import { getToken } from "@/utils/auth";
import { Copy } from "@/utils";
import { channelList } from "@/utils/const.js";
import { getBusinessGroupAll } from "@/api/admin/teams";
import { getPeriodAll } from "@/api/accounts/period";
import { getBookPlatInfoAll } from "@/api/accounts/bookCity";
import { getBookAcc, getBookAll } from "@/api/system/books";
import cutBook from './components/cutBook.vue'
import changeRecord from './components/changeRecord.vue'
export default {
    name: 'Account',
    components: { cutBook, changeRecord },
    data() {
        return {
            loading: false,
            channelList: channelList,
            upload: {
                // 是否显示弹出层（用户导入）
                open: false,
                // 弹出层标题（用户导入）
                title: "",
                // 是否禁用上传
                isUploading: false,
                // 是否更新已经存在的用户数据
                updateSupport: 0,
                // 设置上传的请求头部
                headers: { Authorization: "Bearer " + getToken() },
                // 上传的地址
                url: process.env.VUE_APP_BASE_API + "/system/mp/admin/importExcel"
            },
            groupValue: '',
            newGroupName: '',
            gVis: false,  // 控制新增分组输入框
            queryParams: {
                pageNum: 1,
                pageSize: 10
            },
            showSearch: true,
            // 状态信息
            statusOptions: [
                {
                    dictLabel: '待分配',
                    dictValue: 0
                },
                {
                    dictLabel: '投放中',
                    dictValue: 1
                },
                {
                    dictLabel: '停投',
                    dictValue: 2
                },
                {
                    dictLabel: '已注销',
                    dictValue: 3
                }
            ],
            resourceTypes: [
                { label: '公众号', value: 0, type: 'success' },
                { label: '小程序', value: 1, type: 'danger' },
                { label: '企业微信', value: 3, type: 'info' },
                { label: '快应用', value: 10, type: 'warning' },
                { label: '头条账号', value: 20, type: '' },
                { label: '企微号', value: 4, type: 'info' },
                { label: '腾讯广告账号', value: 5, type: 'success' },
                { label: '游戏渠道', value: 30, type: 'danger' }
            ],
            // 编辑弹窗
            openEdit: false,
            // 总条数
            total: 0,
            // 公众号表格信息
            accountList: [],
            // 分组数据
            groupingData: [],
            isAdd: true,
            queryPlatform: {backCoefficient: 1},
            rules: {
                beginTime: [
                    { required: true, message: '请输入开始时间', trigger: 'blur' }
                ],
                resourceName: [
                    { required: true, message: '请输入资源名称', trigger: 'blur' }
                ],
                resourceKey: [
                    { required: true, message: '请输入资源Key', trigger: 'blur' }
                ],
                resourceType: [
                    { required: true, message: '请选择类型', trigger: 'blur' }
                ],
                putStatus: [
                    { required: true, message: '请选择投放状态', trigger: 'blur' }
                ],
                backCoefficient: [
                    { required: true, message: '请选择回本系数', trigger: 'blur' }
                ]
            },
            userAll: [], //所有用户
            openEditType: false,  // 指派弹窗控制
            queryPlatformType: [],
            rulesType: {
                userId: [
                    { required: true, message: '请选择用户', trigger: 'change' }
                ],
                resourceTag: [
                    { required: true, message: '请选择角色标签', trigger: 'change' }
                ]
            },
            state: [
                { label: 1, value: '投放中' },
                { label: 2, value: '停投' },
                { label: 3, value: '已注销' }
            ],
            // 所有资源角色标签
            tagAll: [],
            resourceId: null,
            // 保存多选ID
            delIds: [],
            resourceData: {}, // 保存当前资源信息
            teamsList: [], // 项目组
            periodList: [], // 所有期数
            bookCity: [], // 所有书城
            bookList: [], // 所有书
            accList: [], // 所有账号
            timeData: {},
            rulesTimeType: {
                // beginTime: [
                //     { required: true, message: '请选择开始时间', trigger: 'change' }
                // ],
            },
        }
    },
    mounted() {
        this.total = this.accountList.length
        window.addEventListener('storage', this.listener)
    },
    beforeDestroy() { // 在组件生命周期结束的时候销毁。
        window.removeEventListener('storage', this.listener, false)
    },
    created() {
        this.getAll()
        this.getList()
        this.getGroupList()
        this.getCutXgData()
    },
    methods: {
        listener(e) {
            if (e.key === 'code') {
                if (e.newValue === 'ok') {
                    this.$router.go(0)
                    this.msgSuccess("授权成功");
                    localStorage.removeItem('code')
                } else {
                    this.$message.error('授权失败');
                    localStorage.removeItem('code')
                }
            }
        },
        selectZh(e, id) {
            // 获取所有账号
            getBookAcc(e).then(res => {
                this.accList = res.data
            })
        },
        /** 新增编辑记录获取数据 */
        getCutXgData() {
            // 获取项目组
            getBusinessGroupAll().then(res => {
                this.teamsList = res.data
            })
            // 获取期数
            getPeriodAll().then(response => {
                this.periodList = response.data
            });
            // 获取所有书城
            getBookPlatInfoAll().then(res => {
                this.bookCity = res.data
            })
            // 获取所有书
            getBookAll().then(res => {
                this.bookList = res.data
            })
        },
        /** 新增用户 */
        addResource() {
            let oldData = JSON.parse(JSON.stringify(this.queryPlatformType))
            oldData.push({
                userId: null,
                resourceTag: null,
                beginTime: null,
                endTime: null
            })
            this.queryPlatformType = oldData
        },
        /** 删除用户 */
        removeResource(index) {
            this.queryPlatformType.splice(index, 1)
        },
        /** 刷新缓存 */
        handleRefresh() {
            refreshCache().then(res => {
                if (res.data) {
                    this.msgSuccess('刷新成功');
                }
            })
        },
        /**图片返回失败 */
        avatarErr() {
            return true
        },
        /** 获取所有 */
        getAll() {
            // 所有用户
            allUser().then(response => {
                let data = response.data
                this.userAll = data.map((item) => {
                    return { id: item.userId, nickName: item.nickname }
                })
            })
            // 获取所有角色
            getRoleAll().then(res => {
                this.tagAll = res.data
            })
        },
        /** 分组拉取 */
        handlePullHide() {
            this.gVis = false
            this.groupingData = this.groupingData.map((gitem) => {
                return { ...gitem, isUpdata: false }
            })
        },
        /** 分组新增 */
        handleGAdd() {
            this.gVis = !this.gVis
        },
        /** 分组修改 */
        handleGUpdata(id) {
            this.groupingData = this.groupingData.map((gitem) => {
                if (id === gitem.id) {
                    this.newGroupName = gitem.groupName
                    return { ...gitem, isUpdata: true }
                } else {
                    return { ...gitem, isUpdata: false }
                }
            })
        },
        /** 编辑按钮方法 */
        handleEdit(value) {
            console.log(value)
            let { id, resourceKey, resourceName, bookId, rechargeTemplate, putChannel, putStatus, platformAccountId, platformId, resourceType, resourceGroupId, businessGroupId, periodId, backCoefficient } = value
            this.$nextTick(() => {
                this.queryPlatform = Object.assign({}, {
                    id,
                    resourceKey,
                    resourceName,
                    resourceType,
                    resourceGroupId,
                    businessGroupId,
                    periodId,
                    platformId,
                    platformAccountId,
                    bookId,
                    putStatus,
                    putChannel,
                    rechargeTemplate,
                    backCoefficient
                }) // 给表单赋值
            })
            this.isAdd = false
            this.openEdit = true
        },
        /** 查询公众号列表 */
        getList() {
            this.loading = true
            getResourceList(this.queryParams).then(response => {
                this.loading = false
                let data = response.data
                this.accountList = data.records
                this.total = data.total
            }).catch(() => this.loading = false)
        },
        /** 搜索 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        /** 状态修改 */
        handleState(value) {
            if (value.userRelationList && value.userRelationList.length > 0) {
                this.queryPlatformType = value.userRelationList.map(item => {
                    return {
                        userId: item.userId,
                        resourceTag: item.resourceTag,
                        beginTime: item.beginTime,
                        endTime: item.endTime
                    }
                })
            } else {
                this.queryPlatformType = [{
                    userId: null,
                    resourceTag: null,
                    beginTime: null,
                    endTime: null
                }]
            }
            this.timeData = {}
            this.resourceId = value.id
            this.openEditType = true
        },
        /** 重置搜索条件 */
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10
            }
            this.getList()
        },
        // 新增资源
        handleAdd() {
            this.isAdd = true
            this.openEdit = true
            this.queryPlatform = { backCoefficient: 1 }
        },
        /** 新增 编辑 提交 */
        submit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let params = this.queryPlatform
                    params.resourceName = params.resourceName.replace(/\s/, '')
                    params.resourceKey = params.resourceKey.replace(/\s/, '')
                    if (this.isAdd) {
                        addResource(params).then(response => {
                            if (response.data) {
                                this.msgSuccess("新增成功");
                                this.resetForm("platForm");
                                this.openEdit = false
                                this.getList()
                            }
                            this.addClose()
                        })
                    } else {
                        editResource(params).then(response => {
                            if (response.data) {
                                this.msgSuccess("修改成功");
                                this.resetForm("platForm");
                                this.openEdit = false
                                this.getList()
                            }
                            this.addClose()
                        })
                    }
                } else {
                    return false;
                }
            });
        },
        /** 状态提交 */
        submitState(formName) {

            this.$refs['platFormTimeType'].validate((valid) => {
                if (valid) {
                    let state = this.$refs[formName].map(async item => {
                        return await this.stateHandle(item)
                    })

                    Promise.all(state).then(res => {
                        if (res.every(item => item)) {
                            assignResourceUser({ resourceId: this.resourceId, beginTime: this.timeData.beginTime, relationList: this.queryPlatformType }).then(response => {
                                if (response.data) {
                                    this.msgSuccess("指派成功");
                                    // this.resetForm(formName);
                                    this.queryPlatformType = []
                                    this.timeData = {}
                                    this.openEditType = false
                                    this.getList()
                                }
                            })
                        }
                    })
                }
            })

        },
        stateHandle(ref) {
            return new Promise((resolve) => {
                ref.validate(valid => resolve(valid))
            })
        },
        /** 多选 */
        handleSelectionChange(selection) {
            this.delIds = selection.map((item) => item.id)
        },
        /** 时间转换 */
        parserTime(time) {
            const d = new Date(time)
            const resDate = d.getFullYear() + '-' + this.p((d.getMonth() + 1)) + '-' + this.p(d.getDate())
            return resDate
        },
        p(s) {
            return s < 10 ? '0' + s : s
        },
        /** 关闭弹窗调用 */
        addClose() {
            if (!this.isAdd) {
                this.queryPlatform = {}
            }
        },
        /** 分组新政 */
        handleAddGroup() {
            if (this.groupValue === '') {
                this.$message.error('请输入分组');
                return
            }
            addGroup({ groupName: this.groupValue }).then(response => {
                if (response.data) {
                    this.getGroupList()
                    this.msgSuccess("新增成功");
                    this.groupValue = ''
                    this.gVis = false
                }
            })
        },
        /** 获取分组 */
        getGroupList() {
            getGroupAllList().then(response => {
                this.groupingData = response.data.map((item) => {
                    return { ...item, isUpdata: false }
                })
            })
        },
        /** 删除分组 */
        handleGroupDel(id) {
            delGroup(id).then(response => {
                if (response.data) {
                    this.msgSuccess("删除成功");
                    this.getGroupList()
                }
            })
        },
        /** 修改分组 */
        handleGroupEdit(id) {
            if (this.newGroupName === '') {
                this.$message.error('请输入要修改的分组名字');
                return
            }
            editGroup({ id, groupName: this.newGroupName }).then(response => {
                if (response.data) {
                    this.getGroupList()
                    this.msgSuccess("修改成功");
                }
            })
        },
        /** 修改公众号分组 */
        editAccountGroup(id, resourceGroupId) {
            editAccountGroup({ id, resourceGroupId }).then(response => {
                if (response.data) {
                    this.getList()
                    this.msgSuccess("设置成功");
                }
            })
        },
        /** 导入按钮操作 */
        handleImport() {
            this.upload.title = "公众号导入";
            this.upload.open = true;
        },
        // 文件上传中处理
        handleFileUploadProgress(event, file, fileList) {
            this.upload.isUploading = true;
        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
            this.upload.open = false;
            this.upload.isUploading = false;
            this.$refs.upload.clearFiles();
            this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
            this.getList();
        },
        /** 下载模板操作 */
        importTemplate() {
            this.download('system/user/importTemplate', {
                ...this.queryParams
            }, `user_${new Date().getTime()}.xlsx`)
        },
        // 提交上传文件
        submitFileForm() {
            this.$refs.upload.submit();
        },
        /** 复制 */
        Copy(value) {
            Copy(value)
        }
    }
}
</script>
<style lang="scss">
.el-table {
    .warning-row {
        background: oldlace;
    }

    .danger-row {
        background: rgb(253, 187, 187);
    }

    .info-row {
        background: #909399;
    }
}

.el-table .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;

    &>div.child {
        color: rgb(136, 136, 136);
        font-size: 13px;

        &>span {
            color: #606266;
        }
    }

    .font12 {
        font-size: 12px;
    }
}

.copy {
    color: #409EFF;
    margin-left: 5px;
    cursor: pointer;
}

.elli {
    display: flex;
    justify-content: center;
    align-items: center;

    span {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.myElli {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grouping {
    span {
        font-size: 12px;
    }

    button {
        padding: 0;
    }
}

.groupingNames {
    padding: 0;

    li {
        list-style: none;
        padding: 5px 2px;
        box-sizing: border-box;
        position: relative;
        cursor: pointer;

        .gnnone {
            display: none;
        }

        .gnTxt {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .gnBts {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;

            .bts {
                position: absolute;
                top: 0;
                right: 0;
                height: 100%;
                width: 50px;
                padding-right: 10px;
            }
        }

        &:hover .gnnone {
            display: block;
            background-color: rgba(211, 211, 211, .5);
            border-radius: 2px;
        }

        i {
            cursor: pointer;
        }


    }

}

.custom {
    width: 75% !important;
}

.cut {
    padding: 0 10px;
    box-sizing: border-box;

    .button {
        margin-bottom: 10px;
    }

    .el-table .cell {
        line-height: normal;
    }

    ul {
        padding-left: 0;

        .sumitInfo {
            // margin-top: 20px;
            font-weight: 600;
            margin-bottom: 10px;

            .button {
                margin-left: 20px;
            }
        }
    }
}

.el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
    font-size: 12px;
    margin-left: 10px;
}

.dropdownItem {
    cursor: pointer;
    color: #409EFF;
    font-size: 12px;
    padding: 4px 0;
}
</style>