<template>
    <div class="main">
        <div class="top">
            <el-row :gutter="24" style="padding: 0 30px;">
                <el-col :span="8" v-if="isHeadAdmin || isPublic || isPrivate || isHeadOps || isBranchAdmin">
                    <el-card class="box-card">
                        <div class="my-span-checklist-title">
                            我创建的总任务数
                        </div>
                        <div class="my-span-checklist-main">
                            <span>本周：</span>
                            <span>{{ cardInfo.createCampNumWeek }}</span>
                        </div>
                        <div class="my-span-checklist-main">
                            <span>本月：</span>
                            <span>{{ cardInfo.createCampNumMonth }}</span>
                        </div>
                        <div class="my-span-checklist-main">
                            <span>本年：</span>
                            <span>{{ cardInfo.createCampNumYear }}</span>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="8" v-if="isBranchAdmin || isOutletAdmin || isCommonManager">
                    <el-card class="box-card1">
                        <div class="my-span-checklist-title">
                            推送给我的总任务数
                        </div>
                        <div class="my-span-checklist-main">
                            <span>本周：</span>
                            <span>{{ cardInfo.pushCampNumWeek }}</span>
                        </div>
                        <div class="my-span-checklist-main">
                            <span>本月：</span>
                            <span>{{ cardInfo.pushCampNumMonth }}</span>
                        </div>
                        <div class="my-span-checklist-main">
                            <span>本年：</span>
                            <span>{{ cardInfo.pushCampNumYear }}</span>
                        </div>

                    </el-card>
                </el-col>
                <el-col :span="8" v-if="isBranchAdmin || isOutletAdmin">
                    <el-card class="box-card1">
                        <div class="my-span-checklist-title">
                            其他的总任务数
                        </div>
                        <div class="my-span-checklist-main">
                            <span>本周：</span>
                            <span>{{ cardInfo.otherCampNumWeek }}</span>
                        </div>
                        <div class="my-span-checklist-main">
                            <span>本月：</span>
                            <span>{{ cardInfo.otherCampNumMonth }}</span>
                        </div>
                        <div class="my-span-checklist-main">
                            <span>本年：</span>
                            <span>{{ cardInfo.otherCampNumYear }}</span>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <div class="content">
            <el-radio-group class="header-radio" v-model="selectedTab" @input="handleChange">
                <template v-if="String(deptId).substring(0, 3) === '875'">
                    <el-radio-button label="0" :disabled="isPublic" :class="{ 'btn-disabled': isPublic }">个人</el-radio-button>
                    <el-radio-button label="1" :disabled="isPublic" :class="{ 'btn-disabled': isPublic }">商户</el-radio-button>
                    <el-radio-button label="2" :disabled="isPrivate" :class="{ 'btn-disabled': isPrivate }">企业</el-radio-button>
                </template>
                <template v-else>
                    <el-radio-button label="2" :disabled="isPrivate" :class="{ 'btn-disabled': isPrivate }">企业</el-radio-button>
                    <el-radio-button label="0" :disabled="isPublic" :class="{ 'btn-disabled': isPublic }">个人</el-radio-button>
                    <el-radio-button label="1" :disabled="isPublic" :class="{ 'btn-disabled': isPublic }">商户</el-radio-button>
                </template>
            </el-radio-group>
            <!-- <div class="taskTop">
                <div class="taskTop_left">
                    <div class="taskTop_left_item" :class="[isActive1 ? 'active' : '']" @click="handleTask">
                        走访任务统计<i class="el-icon-arrow-down" v-if="isActive1"></i></div>
                    <div class="taskTop_left_item" :class="[isActive2 ? 'active' : '']" @click="handleYearTask">
                        年度走访统计<i class="el-icon-arrow-down" v-if="isActive2"></i></div>
                </div>

            </div> -->
            <div class="searchForm">
                <el-form ref="searchForm" :model="searchForm" label-width="80px" :inline="true">
                    <el-form-item label="任务来源" v-if="isBranchAdmin || isOutletAdmin || isCommonManager">
                        <!-- <el-input v-model="searchForm.campsource" placeholder="请输入任务来源" @blur="handleSearch" clearable
                            @clear="handleSearch" /> -->
                        <el-select v-model="searchForm.campsource" placeholder="请选择" clearable @change="handleSearch">
                            <el-option v-for="item in campsourceList" :key="item.value" :label="item.label"
                                :disabled="item.disabled" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="开始时间">
                        <el-date-picker v-model="searchForm.startTime" type="date" @change="handleSearch"
                            value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束时间">
                        <el-date-picker v-model="searchForm.endtTime" type="date" @change="handleSearch"
                            value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="任务名称">
                        <el-input v-model="searchForm.campaignName" placeholder="请输入任务名称" @blur="handleSearch" clearable
                            @clear="handleSearch" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" class="common-search-btn"
                            @click="handleSearch">查询</el-button>
                        <el-button size="small" class="common-reset-btn" type="plain" @click="resetFilters">重置</el-button>
                    </el-form-item>
                </el-form>

            </div>
            <section class="operate-cnt">
                <right-toolbar @queryTable="handleRefersh" :columns="columns" style="margin-left: auto"></right-toolbar>
            </section>
            <el-table :data="tableData" style="width: 100%" class="tableData" v-loading="Loading" max-height="600">
                <el-table-column align="left" prop="campaignName" label="任务名称" show-overflow-tooltip width="150px"
                    v-if="columns[0].visible"></el-table-column>
                <el-table-column align="left" prop="campsource" label="任务来源" show-overflow-tooltip width="150px"
                    v-if="isBranchAdmin || isOutletAdmin || isCommonManager"></el-table-column>
                <el-table-column align="left" prop="startTime" label="开始时间" show-overflow-tooltip width="150px"
                    v-if="columns[1].visible"></el-table-column>
                <el-table-column align="left" prop="endTime" label="结束时间" show-overflow-tooltip width="150px"
                    v-if="columns[2].visible"></el-table-column>
                <el-table-column align="left" prop="claimEndTime" label="认领时限" show-overflow-tooltip width="150px"
                    v-if="columns[3].visible"></el-table-column>
                <el-table-column align="left" prop="claimType" label="认领类型" show-overflow-tooltip v-if="columns[4].visible">
                    <template slot-scope="scope">
                        <span v-if="scope.row.claimType == '0'">强制认领</span>
                        <span v-if="scope.row.claimType == '1'">可选认领</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="custNum" show-overflow-tooltip width="150px"
                    v-if="isHeadAdmin || isPublic || isPrivate || isHeadOps || isBranchAdmin">
                    <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="pushSuccessNum" show-overflow-tooltip width="150px"
                    v-if="isHeadAdmin || isPublic || isPrivate || isHeadOps">
                    <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="" show-overflow-tooltip width="120px"
                    v-if="isHeadAdmin || isPublic || isPrivate || isHeadOps">
                    <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>
                    <template slot-scope="scope">
                        <span v-if="scope.row.allocateRate == -1">无需二次分配</span>
                        <span v-else>{{ scope.row.allocateRate }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="dispatchNum" show-overflow-tooltip v-if="columns[5].visible"
                    width="150px">
                    <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="issuedNum" show-overflow-tooltip v-if="columns[6].visible"
                    width="120px">
                    <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="validVisitNum" show-overflow-tooltip v-if="columns[7].visible"
                    width="150px">
                    <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 v-if="columns[8].visible">
                    <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="visitedNum" label="已走访户数" width="150" show-overflow-tooltip v-if="columns[9].visible">
                </el-table-column>
                <el-table-column align="center" prop="loanSignRate" show-overflow-tooltip v-if="columns[10].visible"
                    width="150px">
                    <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
                    v-if="columns[11].visible" width="150px">
                    <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="left" prop="" label="操作" width="200px" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" v-if="isHeadAdmin || isPublic || isPrivate || isHeadOps"
                            @click="viewBranch(scope.row)">查看支行</el-button>
                        <el-button type="text" v-if="isHeadAdmin || isPublic || isPrivate || isHeadOps || isBranchAdmin"
                            @click="viewDot(scope.row)">查看网点</el-button>
                        <el-button type="text" v-if="isBranchAdmin || isOutletAdmin"
                            @click="viewPersonage(scope.row)">查看个人</el-button>
                        <!-- <el-button type="text" v-if="isBranchAdmin || isOutletAdmin || isCommonManager"
                            @click="handleCommentOn(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>
        </div>
        <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 { cardList, visitingTaskList, commentList, insertCommentList } from '@/api/task/listStatistics.js'
import { Message } from 'element-ui'
export default {
    components: { CommentOn },
    data() {
        return {
            cardInfo: {
                createCampNumWeek: '',
                createCampNumMonth: '',
                createCampNumYear: '',
                pushCampNumWeek: '',
                pushCampNumMonth: '',
                pushCampNumYear: '',
                otherCampNumWeek: '',
                otherCampNumMonth: '',
                otherCampNumYear: '',
            },
            selectedTab: '',
            tableData: [],
            Loading: false,
            total: 0,
            pageSize: 10,
            pageNum: 1,
            isActive1: true,
            isActive2: false,
            searchForm: {
                campsource: '',
                startTime: '',
                endtTime: '',
                campaignName: '',
            },
            showCommentOn: false,
            commentList: [],
            campsourceList: [],
            drawcampaignId: '',
            columns: [
                { key: 0, label: '任务名称', visible: true },
                { key: 1, label: '开始时间', visible: true },
                { key: 2, label: '结束时间', visible: true },
                { key: 3, label: '认领时限', visible: true },
                { key: 4, label: '认领类型', visible: true },
                { key: 5, label: '已下发客户数', visible: true },
                { key: 6, label: '客户认领率', visible: true },
                { key: 7, label: '有效待走访客户数', visible: true },
                { key: 8, label: '走访率', visible: true },
                { key: 9, label: '已走访户数', visible: true },
                { key: 10, label: '贷款合同签约率', visible: true },
                { key: 11, label: '活期存款金额提升', visible: true },
            ],
        }
    },
    computed: {
        ...mapGetters(['roles']),
        deptId() {
            return this.$store.state.user.deptId
        },
        //总行
        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')
        },

    },
    created() {
        console.log(this.$route.query.selectedTab, 'sssssss')
        const {selectedTab,campaignName} = this.$route.query;
        if (campaignName) {
            this.searchForm.campaignName = campaignName
        }
        if (selectedTab) {
            this.selectedTab = selectedTab;
            for(let key in this.$route.query){
                delete this.$route.query[key];
            }
        } else {
            // 默认选中第一个tab
            const deptId = this.$store.state.user.deptId
            const deptIdStr = deptId ? String(deptId) : ''
            const defaultTab = deptIdStr.startsWith('875') ? '0' : '2'

            if (this.isPublic) {
                this.selectedTab = '2'
            } else if (this.isPrivate) {
                this.selectedTab = defaultTab
            } else {
                this.selectedTab = defaultTab
            }
        }
        if (this.isBranchAdmin) {
            this.campsourceList = [
                { label: '总行推送的', value: '总行推送的' },
                { label: '我创建的', value: '我创建的' }
            ]
        } else if (this.isOutletAdmin || this.isCommonManager) {
            this.campsourceList = [
                { label: '总行下发的', value: '总行下发的' },
                { label: '支行下发的', value: '支行下发的' }
            ]
        }
        this.initCardList()
        this.initVisitingTaskList()
    },
    methods: {
        initCardList() {
            cardList(this.selectedTab).then(res => {
                if (res.code == 200 && res.rows.length > 0) {
                    this.cardInfo = res.rows[0]
                } else {
                    this.cardInfo = {}
                }
            })
        },
        handleChange(val) {
            this.pageSize = 10,
                this.pageNum = 1,
                this.initCardList()
            this.initVisitingTaskList()
        },
        handleTask() {
            this.isActive1 = true
            this.isActive2 = false
        },
        handleYearTask() {
            // this.isActive1 = false
            // this.isActive2 = true
        },
        initVisitingTaskList() {
            const query = {
                custType: this.selectedTab,
                startTime: this.searchForm.startTime,
                endTime: this.searchForm.endtTime,
                campaignName: this.searchForm.campaignName,
                campsource: this.searchForm.campsource,
                pageSize: this.pageSize,
                pageNum: this.pageNum
            }
            visitingTaskList(query).then(res => {
                if (res.code == 200) {
                    this.tableData = res.rows
                    this.total = res.total
                }
            })
        },
        handleRefersh() {
            this.searchForm = {}
            this.initVisitingTaskList()
        },
        viewBranch(row) {
            this.$router.push({
                path: '/taskManage/branchDetail',
                query: { campaignId: row.campaignId,selectedTab:this.selectedTab }
            })
        },
        viewDot(row) {
            if (this.isBranchAdmin) {
                this.$router.push({
                    path: '/taskManage/dotDetail',
                    query: { campaignId: row.campaignId, pageType: '2', deptId: row.deptId,selectedTab:this.selectedTab }
                })
            } else {
                this.$router.push({
                    path: '/taskManage/dotDetail',
                    query: { campaignId: row.campaignId, pageType: '1',selectedTab:this.selectedTab }
                })
            }

        },
        viewPersonage(row) {
            if (this.isOutletAdmin || this.isCommonManager) {
                this.$router.push({
                    path: '/taskManage/personageDetail',
                    query: { campaignId: row.campaignId, pageType: '2', outletsId: row.outletsId, personType: 'outlet' }
                })
            } else {
                this.$router.push({
                    path: '/taskManage/personageDetail',
                    query: { campaignId: row.campaignId, pageType: '1', personType: 'branch' }
                })
            }

        },
        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.initVisitingTaskList()
        },
        handleCurrentChange(newPage) {
            this.pageNum = newPage
            this.initVisitingTaskList()
        },
        handleSearch() {
            this.initVisitingTaskList()
        },
        resetFilters() {
            this.searchForm = {}
            this.initVisitingTaskList()
        },
    },
}
</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: 0 30px 30px 30px;
}

.box-card {
    height: 181px;
    background: #EAF5FF;
    border-radius: 8px;
    margin-top: 25px;
}

.box-card1 {
    height: 181px;
    background: #EAF5FF;
    border-radius: 8px;
    margin-top: 25px;

}

.my-span-checklist-title {
    height: 25px;
    font-weight: 600;
    font-size: 18px;
    color: #222222;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.my-span-checklist-main {
    line-height: 30px;
}

.header-radio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ebebeb;

    .btn-disabled {
        ::v-deep .el-radio-button__inner {
            background-color: #e7e7e7;
        }
    }

    .el-radio-button {
        flex: 1;

        ::v-deep .el-radio-button__inner {
            width: 100%;
            border: none;
            font-weight: 400;
            letter-spacing: 0.44px;
            line-height: 25px;
            font-size: 16px;
            color: #666666;
            padding: 11px 0 12px 0;
        }

        ::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
            background-color: #4886f8;
            font-weight: 400;
            color: #ffffff;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        &:nth-child(2) {

            &::before,
            &::after {
                content: '';
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                height: 21px;
                width: 1px;
                background: #ebebeb;
                z-index: 1;
            }

            &::after {
                right: 1px;
            }
        }

        &.is-active {

            &::before,
            &::after {
                content: none;
            }
        }
    }
}

.btn-disabled {
    ::v-deep .el-radio-button__inner {
        background-color: #e7e7e7;
    }
}

.header-radio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #ebebeb;
    margin-top: 25px;

    .btn-disabled {
        ::v-deep .el-radio-button__inner {
            background-color: #e7e7e7;
        }
    }

    .el-radio-button {
        flex: 1;
        border: 1px solid #ccc;

        ::v-deep .el-radio-button__inner {
            width: 100%;
            border: none;
            font-weight: 400;
            letter-spacing: 0.44px;
            line-height: 25px;
            font-size: 16px;
            color: #666666;
            padding: 11px 0 12px 0;
        }

        ::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
            background-color: #4886f8;
            font-weight: 400;
            color: #ffffff;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        &:nth-child(2) {

            &::before,
            &::after {
                content: '';
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                height: 21px;
                width: 1px;
                background: #ebebeb;
                z-index: 1;
            }

            &::after {
                right: 1px;
            }
        }

        &.is-active {

            &::before,
            &::after {
                content: none;
            }
        }
    }
}

.tableData {
    margin-top: 20px;
}

.taskTop {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.taskTop_left {
    display: flex;
}

.taskTop_left_item {
    width: 150px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
}

.el-icon-arrow-down {
    margin-left: 15px;
    font-size: 16px;
    color: rgb(64, 149, 229);
}

.searchForm {
    margin-top: 20px;
}

.operate-cnt {
    margin: 0 0 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    .top-right-btn {
        margin-right: 24px;
        padding-bottom: 6px;
    }

    .plain-raido-btn {
        ::v-deep .el-radio-button__inner {
            color: #666666;
            font-size: 14px;
            font-weight: 400;
            border: 1px solid #ebebeb;
            border-radius: 0;
        }

        ::v-deep .el-radio-button__orig-radio:checked+.el-radio-button__inner {
            border: 1px solid #4886f8;
            color: #4886f8;
            background-color: #ffffff;
            box-shadow: none;
        }
    }
}

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