<style lang="scss" scoped>
.tableBox {
    background-color: #fff;
    margin: 15px 0px;
    padding: 15px 10px;
    .tableTop {
        position: relative;
        padding-bottom: 15px;
        border-bottom: 1px solid #e0e0e0;
        .selectTime {
            margin-right: 20px;
        }
        .add {
            position: absolute;
            top: 0;
            right: 0;
        }
    }
}
</style>
<template>
    <div class="video-report">
        <!-- 报表区域 -->

        <div class="tableBox">
            <div class="tableTop" style="display:flex;    justify-content: flex-end;">
                <a-button type="primary" @click="addWhite">添加白名单</a-button>
            </div>
            <a-table
                size="middle"
                :columns="columns"
                :dataSource="data"
                bordered
                id="outTable"
                :pagination="ipagination"
                :loading="loading"
                ref="accountTable"
            >
                <a slot="action" slot-scope="text, records" @click="deleteWhite(records.id)">
                    删除
                </a>
            </a-table>
        </div>
        <a-modal
            v-model="whiteVisible"
            title="添加白名单"
            @ok="whiteListOk"
            @cancel="
                whiteVisible = false
                projectName = ''
            "
            :footer="null"
            width="50%"
        >
            <div class="tableTop" style="margin-bottom:10px;width:300px">
                <a-input-search
                    placeholder="请输入项目名称"
                    v-model="projectName"
                    enter-button
                    @search="getWhiteListSearch"
                />
            </div>
            <a-table
                size="middle"
                :columns="columnsWhite"
                :dataSource="dataWhiteList"
                bordered
                :loading="whiteLoading"
                :pagination="ipaginationWhite"
            >
                <a slot="action" slot-scope="text, records" @click="addWhiteOk(records)">
                    添加
                </a>
            </a-table>
        </a-modal>
    </div>
</template>

<script>
import moment from 'moment'
import { JeecgListMixin } from '@/mixins/ipagination'
import { getAction, postAction, downFile, downFilePost, deleteAction } from '@/api/manage'
import { mapGetters } from 'vuex'
const columnsFixd = [
    {
        title: '项目名称',
        dataIndex: 'projectName',
        align: 'center',
        key: 'projectName',
        scopedSlots: { customRender: 'projectName' }
    },
    {
        title: '操作人',
        align: 'center',
        dataIndex: 'userName'
    },
    {
        title: '操作',
        align: 'center',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' }
    }
]
const columnsWhite = [
    {
        title: '项目名称',
        dataIndex: 'projectName',
        align: 'center',
        key: 'projectName',
        scopedSlots: { customRender: 'projectName' }
    },
    {
        title: '运营负责人',
        align: 'center',
        dataIndex: 'responsibleId_dictText'
    },
    {
        title: '设计负责人',
        align: 'center',
        dataIndex: 'designResponsibleId_dictText'
    },
    {
        title: '操作',
        align: 'center',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' }
    }
]

export default {
    data() {
        return {
            columns: [...columnsFixd], //table的表头
            columnsWhite: columnsWhite,
            whiteVisible: false,
            loading: false,
            whiteLoading: false,
            addColumns: [],
            data: [],
            dataWhiteList: [],
            ipagination: {
                current: 1,
                pageSize: 10,

                showTotal: (total, range) => {
                    return range[0] + '-' + range[1] + ' 共' + total + '条'
                },
                showQuickJumper: true,
                // showSizeChanger: true,
                // pageSizeOptions: ['10', '30', '50'],
                total: 0,
                onChange: (current, pageSize) => {
                    // 切换分页时的回调，
                    // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
                    this.ipagination.current = current
                    this.ipagination.pageSize = pageSize
                    this.handleGetTableList()
                }
            },
            ipaginationWhite: {
                current: 1,
                pageSize: 10,

                showTotal: (total, range) => {
                    return range[0] + '-' + range[1] + ' 共' + total + '条'
                },
                showQuickJumper: true,
                // showSizeChanger: true,
                // pageSizeOptions: ['10', '30', '50'],
                total: 0,
                onChange: (current, pageSize) => {
                    // 切换分页时的回调，
                    // 当在页面定义change事件时，切记要把此处的事件清除，因为这两个事件重叠了，可能到时候会导致一些莫名的bug
                    this.ipaginationWhite.current = current
                    this.ipaginationWhite.pageSize = pageSize
                    this.getWhiteList()
                }
            },
            projectName: '',
            whiteListRul: '/monitor/projectMonitorWhiteList/list'
        }
    },
    watch: {},
    methods: {
        ...mapGetters(['userInfo']),
        handleGetTableList() {
            this.loading = true
            const params = {
                pageSize: this.ipagination.pageSize,
                pageNo: this.ipagination.current
            }
            getAction(this.whiteListRul, params).then(res => {
                this.loading = false
                if (res.success) {
                    // let result = res.result
                    // this.data.push({ ...result, key: 1 })
                    // result.map((item, index) => {
                    //   item.key = index
                    // })
                    this.data = res.result.records.map((item, index) => {
                        return {
                            ...item,
                            key: index
                        }
                    })
                    this.ipagination.total = res.result.total
                } else {
                    this.$message.error(res.message)
                    this.loading = false
                }
            })
        },
        addWhiteOk(item) {
            postAction('/monitor/projectMonitorWhiteList/add', { projectId: item.id, userId: this.userInfo().id }).then(
                res => {
                    if (res.success) {
                        this.whiteVisible = false
                        this.projectName = ''
                        this.handleGetTableList()
                    } else {
                        this.$message.error(res.message)
                    }
                }
            )
        },
        addWhite() {
            this.whiteVisible = true
            this.ipaginationWhite.current = 1
            this.getWhiteList()
        },
        getWhiteListSearch() {
            this.ipaginationWhite.current = 1
            this.getWhiteList()
        },
        getWhiteList() {
            const params = {
                pageNo: this.ipaginationWhite.current,
                pageSize: this.ipaginationWhite.pageSize,
                projectName: this.projectName
            }
            this.whiteLoading = true
            getAction('/ctop/project/getProjectList', params).then(res => {
                this.whiteLoading = false
                if (res.success) {
                    this.dataWhiteList = res.result.records.map((item, index) => {
                        return {
                            ...item,
                            key: index
                        }
                    })
                    this.ipaginationWhite.total = res.result.total
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        whiteListOk() {},
        deleteWhite(id) {
            deleteAction('/monitor/projectMonitorWhiteList/delete', { id: id }).then(res => {
                if (res.success) {
                    this.handleGetTableList()
                } else {
                    this.$message.error(res.message)
                }
            })
        },
        filterOption(input, option) {
            return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        }
    },

    mounted() {
        this.handleGetTableList()
    }
}
</script>
