<template>
    <div class="main">
        <el-button @click="returnLastPage">返回上一级</el-button>
        <el-table :data="tableData" style="width: 100%" class="tableData" v-loading="Loading" max-height="675">
            <el-table-column align="center" prop="campaignName" label="任务名称" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="outlets" label="网点名称" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="deptName" label="所在支行" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="dispatchNum" show-overflow-tooltip>
                <template slot="header" slot-scope="scope">
                    <span>已下发客户数</span>
                    <el-tooltip placement="top" trigger="hover" content="已经推送给走访人(客户经理等)的客户数" width="200">
                        <span class="quesiton"><i class="el-icon-question"></i></span>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="claimNum" label="认领客户数" show-overflow-tooltip></el-table-column>
            <el-table-column align="center" prop="validVisitNum" show-overflow-tooltip>
                <template slot="header" slot-scope="scope">
                    <span>有效待走访客户数</span>
                    <el-tooltip placement="top" trigger="hover" content="已被认领的客户中,未被标记无法触达的客户数" width="200">
                        <span class="quesiton"><i class="el-icon-question"></i></span>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="visitRate" show-overflow-tooltip>
                <template slot="header" slot-scope="scope">
                    <span>走访率</span>
                    <el-tooltip placement="top" trigger="hover" content="已走访客户数除以有效待走访客户数" width="200">
                        <span class="quesiton"><i class="el-icon-question"></i></span>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="loanSignRate" show-overflow-tooltip>
                <template slot="header" slot-scope="scope">
                    <span>贷款合同签约率</span>
                    <el-tooltip placement="top" trigger="hover" content="签约贷款客户数除以有效待走访客户数" width="200">
                        <span class="quesiton"><i class="el-icon-question"></i></span>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="increaseDepositAmount" show-overflow-tooltip>
                <template slot="header" slot-scope="scope">
                    <span>活期存款金额提升</span>
                    <el-tooltip placement="top" trigger="hover" content="任务期间,客户的活期存款余额提升值(任务结束时点-任务开始时点)" width="200">
                        <span class="quesiton"><i class="el-icon-question"></i></span>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="" label="操作" width="200px"  fixed="right">
                <template slot-scope="scope">
                    <!-- <el-button type="text" @click="handleCommentOn(scope.row)">点评</el-button> -->
                    <el-button type="text" @click="viewPersonage(scope.row)">查看个人</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize" layout="->,total,prev,pager,next,sizes" :total="total"
            :current-page="pageNum"></el-pagination>
        <el-drawer title="" :visible.sync="showCommentOn" :size="570" :with-header="false" direction="rtl"
            :append-to-body="true" :wrapperClosable="false">
            <comment-on :commentList="commentList" @confirm="handleConfirm" @cancle="handleCancle"></comment-on>
        </el-drawer>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import CommentOn from '../component/commentOn.vue'
import { outletList, commentList, insertCommentList } from '@/api/task/listStatistics.js'
import { Message } from 'element-ui'
export default {
    components: { CommentOn },
    data() {
        return {
            tableData: [],
            showCommentOn: false,
            commentList: [],
            Loading: false,
            total: 0,
            pageSize: 10,
            pageNum: 1,
            drawcampaignId: ''
        }
    },
    computed: {
        ...mapGetters(['roles']),
        //总行
        isHeadAdmin() {
            return this.roles.includes('headAdmin')
        },
        //公司部
        isPublic() {
            return this.roles.includes('headPublic')
        },
        //零售部
        isPrivate() {
            return this.roles.includes('headPrivate')
        },
        //运管部
        isHeadOps() {
            return this.roles.includes('headOps')
        },
        //支行
        isBranchAdmin() {
            return this.roles.includes('branchAdmin')
        },
        // 网点主任
        isOutletAdmin() {
            return this.roles.includes('outletAdmin')
        },
        // 客户经理
        isCommonManager() {
            return this.roles.includes('commonManager')
        },
        campaignId() {
            return this.$route.query.campaignId
        },
        pageType() {
            return this.$route.query.pageType
        },
        deptId() {
            return this.$route.query.deptId
        },

    },
    created() {
        this.initoutletList()
    },
    methods: {
        initoutletList() {
            const params = {
                pageSize: this.pageSize,
                pageNum: this.pageNum
            }
            if (this.pageType == '1') {
                params.campaignId = this.campaignId
            } else if (this.pageType == '2') {
                params.campaignId = this.campaignId
                params.deptId = this.deptId
            }
            outletList(params).then(res => {
                if (res.code == 200) {
                    this.tableData = res.rows
                    this.total = res.total
                }
            })
        },
        returnLastPage() {
             this.$router.go(-1) 
            // const { query } = this.$route;
            // if (query.backUrl) {
            //     this.$router.replace({
            //         path: query.backUrl,
            //         query
            //     })
            // } else {
            //     this.$router.go(-1)
            // }
        },
        viewPersonage(row) {
            this.$router.push({
                path: '/taskManage/personageDetail',
                query: { campaignId: row.campaignId, pageType: '2', deptId: row.deptId, outletsId: row.outletsId, personType: 'outlet' }
            })
        },
        handleCommentOn(row) {
            this.showCommentOn = true
            this.drawcampaignId = row.campaignId
            const params = {
                campaignId: row.campaignId
            }
            commentList(params).then(res => {
                if (res.code == 200) {
                    this.commentList = res.rows
                }

            })
        },
        handleConfirm(data) {
            const params = {
                campaignId: this.drawcampaignId,
                comment: data
            }
            insertCommentList(params).then(res => {
                if (res.code == 200) {
                    Message.success(res.msg)
                    this.showCommentOn = false
                }
            })
        },
        handleCancle() {
            this.showCommentOn = false
        },
        handleSizeChange(newSize) {
            this.pageSize = newSize
            this.initoutletList()
        },
        handleCurrentChange(newPage) {
            this.pageNum = newPage
            this.initoutletList()
        },
    },
}
</script>
<style lang="scss" scoped>
.main {
    background-color: #ffffff;
    box-shadow: 0 3px 8px 0 #00000017;
    border-radius: 16px 16px 0 0;
    overflow-y: auto;
    padding: 30px;
}

.tableData {
    margin-top: 20px;
}

.quesiton {
    color: #b9b9b9;
}
</style>