<template>
    <el-button size="mini" type="text" icon="el-icon-view" @click="lookHangdle()">
        <span>查看账号</span>
        <el-dialog :title="'查看 ' + authUserId" :visible.sync="visible" width="900px" append-to-body v-if="visible">

            <el-row :gutter="10" class="mb8" align="middle">
                <el-col :span="10">
                    <el-input type="textarea" autosize v-model="queryParams.accountIds" placeholder="输入账号ID(多个，,)" />
                </el-col>
                <el-col :span="1.5">
                    <el-button type="cyan" icon="el-icon-search" @click="getList">搜索</el-button>
                </el-col>
            </el-row>
            <el-table :data="accountList" :loading="loading">
                <el-table-column label="账号ID" prop="accountId" align="center" fixed width="150"
                    :show-overflow-tooltip="true" />
                <el-table-column label="账号名称" prop="accountName" align="center" :show-overflow-tooltip="true" width="300" />
                <el-table-column label="投手ID" prop="putUserId" align="center" width="120" :show-overflow-tooltip="true" />
                <el-table-column label="所属组" prop="groupName" align="center" width="120" :show-overflow-tooltip="true" />
                <el-table-column label="Enabled?" prop="enabled" align="center" width="80">
                    <template slot-scope="scope">
                        <span>{{ scope.row.enabled ? '可用' : '禁用' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="90">
                    <template slot-scope="scope">
                        <!-- 指派 -->
                        <put-user-button :accountId="scope.row.accountId" :authUserId="scope.row.authUserId"
                            :putUserId="scope.row.putUserId" @onChange="getList()" />
                    </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>
    </el-button>
</template>
<script>
import { getAdAccountList } from "@/api/accounts/ttAdapi";
import putUserButton from "./putUserButton.vue"
export default {
    components: { putUserButton },
    data() {
        return {
            visible: false,
            loading: false,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            accountList: [],
            total: 0
        }
    },
    props: {
        adAppId: {
            type: Number,
            default: null,
        },
        authUserId: {
            type: Number,
            default: null,
        }
    },
    methods: {
        lookHangdle() {
            this.visible = true
            this.queryParams.pageNum = 1
            this.getList()
        },
        getList() {
            if (this.adAppId && this.authUserId) {
                let params = { ...this.queryParams, adAppId: this.adAppId, authUserId: this.authUserId, accountIds: this.queryParams.accountIds ? this.queryParams.accountIds.split(/[,，\n\s]+/ig) : [] }
                this.loading = true
                getAdAccountList(params).then(res => {
                    this.loading = false
                    this.accountList = res.data.records
                    this.total = res.data.total
                }).catch(() => this.loading = false)
            }
        }
    }
}
</script>