<template>
    <div class="main_box">
        <navbar title="工作台"></navbar>
        <div class="wrapper">
            <div class="wrapper_main">
                <van-tabs @change="tabChange()" v-model="activeTab" class="content" type="line"  color="#4682ff" title-active-color="#4682ff" line-width="80">
                    <van-tab title="业务指标">
                        <div class="ywzb_item" v-for="(item, index) in ywzbList">
                            <div class="ywzb_item_title">{{ item.itemNm }}</div>
                            <div class="ywzb_item_main">
                                <div class="ywzd_main_item">
                                    <div class="ywzbItem_title">当前值</div>
                                    <div class="ywzbItem_num">{{ item.curAmt }}</div>
                                </div>
                                <div class="shu"></div>
                                <div class="ywzd_main_item">
                                    <div class="ywzbItem_title">年初值</div>
                                    <div class="ywzbItem_num">{{ item.yiAmt }}</div>
                                </div>
                                <div class="shu"></div>
                                <div class="ywzd_main_item">
                                    <div class="ywzbItem_title">增量</div>
                                    <div class="ywzbItem_num addNum">
                                        <span>{{ item.inc }}</span>
                                        <div class="jiantou"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </van-tab>
                    <van-tab title="待办事项">
                        <van-pull-refresh v-model="dbRefreshing" @refresh="dbRefresh">
                            <van-list v-model="dbLoading" :finished="dbFinished" finished-text="没有更多了"
                                :immediate-check="false" @load="dbOnLoad">
                                <div class="ywzb_item" v-for="(item, index) in dbsxList">
                                    <div class="dbsx_item_top">
                                        <div class="rwTitle">{{ item.campaignName }}</div>
                                        <div class="jjcd_high" v-if="item.campaignDegree == '高'">紧急：{{ item.campaignDegree
                                        }}</div>
                                        <div class="jjcd_middle" v-if="item.campaignDegree == '中'">紧急：{{ item.campaignDegree
                                        }}
                                        </div>
                                        <div class="jjcd_low" v-if="item.campaignDegree == '低'">紧急：{{ item.campaignDegree }}
                                        </div>
                                    </div>
                                    <div class="dbsxMain">
                                        <div class="left">
                                            <div class="dbsx_list">待办类型：
                                                <span v-if="item.taskType == '0'">营销任务</span>
                                                <span v-if="item.taskType == '1'">事务任务</span>
                                            </div>
                                            <div class="dbsx_list">环节：
                                                <span v-if="item.campaignStatus == '000'">任务领取</span>
                                                <span v-else-if="item.campaignStatus == '100'">任务分配-规则配置</span>
                                                <span
                                                    v-else-if="item.campaignStatus == '110' || ((isHeadAdmin || isPublic || isPrivate || isHeadOps) && item.campaignStatus == null)">任务分配-不成功客户二推</span>
                                                <span v-else-if="item.campaignStatus == '111'">推送成功</span>
                                                <span v-else>{{ item.campaignStatus }}</span>
                                            </div>
                                            <div class="dbsx_list" v-if="isBranchAdmin || isOutletAdmin || isCommonManager">
                                                结束时间：{{ item.campaignEndTime }}</div>
                                            <div class="dbsx_list" v-if="isHeadAdmin || isPublic || isPrivate || isHeadOps">
                                                结束时间：{{ item.claimEndTime }}</div>
                                            <div class="dbsx_list">客户数：{{ item.custNum }}</div>
                                            <div class="dbsx_list">发起人：{{ item.creator }}</div>
                                        </div>
                                        <!-- <div class="right">
                                    <van-button type="primary" round>认领</van-button>
                                </div> -->
                                    </div>
                                </div>
                            </van-list>
                        </van-pull-refresh>

                    </van-tab>
                    <van-tab title="预警处理">
                        <div class="ywzb_item" v-for="(item, index) in yjclList" @click="handleClickYjcl(item)">
                            <div class="yjcl_top">
                                <div class="yj_top_left_box">
                                    <div class="yj_top_left">
                                        <van-icon name="bulb-o yjclIcon"></van-icon>
                                    </div>
                                    <div class="tjclTitle">{{ item.infoName }}</div>
                                </div>
                                <!-- <div class="yjclDate">{{ item.date }}</div> -->
                            </div>
                            <div class="yjcl_custNum" v-if="deptId.substring(0,3) == '932'">预警条数：{{ item.infoCount }}</div>
                            <div class="yjcl_custNum" v-if="deptId.substring(0,3) != '932'">客户数：{{ item.infoCount }}</div>
                        </div>
                    </van-tab>
                </van-tabs>
            </div>
        </div>
    </div>
</template>
<script>
import navbar from '../../components/navbar/navbar.vue';
import { getIndicator, headList, branchList, warnList, managerList } from "@/service/api/work";
import {
    Tab,
    Tabs,
    Icon,
    Button,
    List,
    PullRefresh,
} from 'vant';
export default {
    data() {
        return {
            activeTab: 0,
            ywzbList: [

            ],
            dbsxList: [

            ],
            yjclList: [

            ],
            detailType: '',
            isHeadAdmin: false,
            isPublic: false,
            isPrivate: false,
            isHeadOps: false,
            isBranchAdmin: false,
            isOutletAdmin: false,
            isCommonManager: false,
            dbRefreshing: false,
            dbLoading: false,
            dbFinished: false,
            dbCurrentPage: 1,
            dbPageSize: 10,
            dbPpageNum: 1,
            deptId:"",

        }
    },
    components: {
        navbar: navbar,
        VanTab: Tab,
        VanTabs: Tabs,
        VanIcon: Icon,
        VanButton: Button,
        VanList: List,
        VanPullRefresh: PullRefresh,
    },
    created() {
        let userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        this.deptId=userInfo.deptId+"";
        if (userInfo.roles.includes('headAdmin')) {
            this.isHeadAdmin = true
        } else if (userInfo.roles.includes('headPublic')) {
            this.isPublic = true
        } else if (userInfo.roles.includes('headPrivate')) {
            this.isPrivate = true
        } else if (userInfo.roles.includes('headOps')) {
            this.isHeadOps = true
        } else if (userInfo.roles.includes('branchAdmin')) {
            this.isBranchAdmin = true
        } else if (userInfo.roles.includes('outletAdmin')) {
            this.isOutletAdmin = true
        } else if (userInfo.roles.includes('commonManager')) {
            this.isCommonManager = true
        }
        let activeTab = sessionStorage.getItem('workActiveTab')
        if (activeTab) {
            this.activeTab = Number(activeTab);
        }
        if (this.activeTab == 0) {
            this.initIndicator()
        } else if (this.activeTab == 1) {
            this.initdbList()
        } else if (this.activeTab == 2) {
            this.initwarnList()
        }
    },
    methods: {
        initIndicator() {
            getIndicator().then(res => {
                if (res.code == 200) {
                    this.ywzbList = res.data
                    sessionStorage.removeItem('workActiveTab')
                }
            })
        },
        async initdbList() {
            if (this.dbCurrentPage === 1) {
                this.dbsxList = [];
            }
            if (this.isBranchAdmin) {
                const params = {
                    isFinish: false,
                    pageSize: this.dbPageSize,
                    pageNum: this.dbPpageNum,
                    orderByColumn: 'campaignEndTime'
                }
                const res = await branchList(params)
                if (res.code == 200) {
                    sessionStorage.removeItem('workActiveTab')
                    if (this.dbRefreshing) {
                        this.dbRefreshing = false;
                    }
                    this.dbLoading = false;
                    if (res.rows) {
                        this.dbsxList = params.pageNum == "1" ? res.rows : [...this.dbsxList, ...res.rows];
                        if (res.rows.length < params.pageSize) {
                            this.dbFinished = true;
                        }
                        this.dbCurrentPage++;
                    } else {
                        this.dbFinished = true;
                    }
                }
            } else if (this.isHeadAdmin || this.isPublic || this.isPrivate || this.isHeadOps) {
                const params = {
                    isFinish: false,
                    pageSize: this.dbPageSize,
                    pageNum: this.dbPpageNum,
                    orderByColumn: 'claimEndTime'
                }
                const res = await headList(params)
                if (res.code == 200) {
                    sessionStorage.removeItem('workActiveTab')
                    if (this.dbRefreshing) {
                        this.dbRefreshing = false;
                    }
                    this.dbLoading = false;
                    if (res.rows) {
                        this.dbsxList = params.pageNum == "1" ? res.rows : [...this.dbsxList, ...res.rows];
                        if (res.rows.length < params.pageSize) {
                            this.dbFinished = true;
                        }
                        this.dbCurrentPage++;
                    } else {
                        this.dbFinished = true;
                    }
                }
            } else if (this.isCommonManager || this.isOutletAdmin) {
                const params = {
                    isFinish: false,
                    pageSize: this.dbPageSize,
                    pageNum: this.dbPpageNum,
                    orderByColumn: 'claimEndTime'
                }
                const res = await managerList(params)
                if (res.code == 200) {
                    sessionStorage.removeItem('workActiveTab')
                    if (this.dbRefreshing) {
                        this.dbRefreshing = false;
                    }
                    this.dbLoading = false;
                    if (res.rows) {
                        this.dbsxList = params.pageNum == "1" ? res.rows : [...this.dbsxList, ...res.rows];
                        if (res.rows.length < params.pageSize) {
                            this.dbFinished = true;
                        }
                        this.dbCurrentPage++;
                    } else {
                        this.dbFinished = true;
                    }
                }
            }
        },
        initwarnList() {
            warnList().then(res => {
                if (res.code == 200) {
                    sessionStorage.removeItem('workActiveTab')
                    this.yjclList = res.data
                }
            })
        },
        tabChange() {
            if (this.activeTab == 0) {
                this.initIndicator()
            } else if (this.activeTab == 1) {
                this.initdbList()
            } else if (this.activeTab == 2) {
                this.initwarnList()
            }
        },
        dbRefresh() {
            this.dbsxList = [];
            this.dbFinished = false; //解除上拉加载之后数据不能再次上拉
            this.dbCurrentPage = 1;
            this.dbPpageNum = this.dbCurrentPage;
            this.initdbList();
        },
        //上拉加载
        dbOnLoad() {
            this.dbPpageNum = this.dbCurrentPage + "";
            this.initdbList();
        },
        handleClickYjcl(item) {

            if (item.detailType == '存款') {
                this.detailType = '流失客户明细-存款'
            } else if (item.detailType == '贷款') {
                this.detailType = '流失客户明细-贷款'
            }
            sessionStorage.setItem("workActiveTab", this.activeTab);
            sessionStorage.setItem('detailType', this.detailType);
            sessionStorage.setItem('specialinfoName', item.infoName);
            this.$router.push('/WarningProcessing');
        },
    }
}
</script>
<style lang="less" scoped>
.wrapper {
    padding-top: 46px;
    min-height: 100vh;
    font-size: 16px;
    padding-bottom: 60px;
}

.ywzb_item {
    margin: 16px;
    background-color: #fff;
    padding: 16px;
}

.ywzb_item_title {
    font-weight: 600;
    line-height: 25px;
    color: rgb(63, 63, 74);
    font-size: 16px;
}

.ywzb_item_main {
    background-color: rgb(247, 251, 255);
    display: flex;
    justify-content: space-between;
    margin-top: 15px
}

.ywzd_main_item {
    width: 30%;
    text-align: center;
    margin: 20px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.ywzbItem_title {
    color: rgb(81, 90, 110);
    font-size: 12px;
    line-height: 25px;
}

.ywzbItem_num {
    color: rgb(38, 38, 38);
    font-size: 14px;
    line-height: 30px;
    font-weight: 600;

    align-items: center;
}

.shu {
    width: 1px;
    border: 1px solid rgb(232, 232, 232);
    margin: 20px 0
}

.addNum {
    display: flex;
    color: rgb(73, 177, 108);
}

.jiantou {
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid rgb(73, 177, 108);
}

.dbsx_item_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
}

.rwTitle {
    color: rgb(63, 63, 74);
    font-size: 18px;
    font-weight: 600;
    line-height: 25px;
    width: 60%;
    display: flex;
    flex-wrap: wrap;
    word-break: break-all;
}

.jjcd_high {
    color: rgb(231, 17, 17);
    background-color: rgba(231, 17, 17, 0.1);
    border-radius: 4px;
    font-size: 14px;
    padding: 5px;
    width: 25%;
}

.jjcd_middle {
    color: rgb(238, 132, 21);
    background-color: rgba(238, 132, 21, 0.1);
    border-radius: 4px;
    font-size: 14px;
    padding: 5px;
    width: 25%;
}

.jjcd_low {
    color: rgb(73, 177, 108);
    background-color: rgba(73, 177, 108, 0.1);
    border-radius: 4px;
    font-size: 14px;
    padding: 5px;
    width: 25%;
}

.dbsxMain {
    display: flex;
    justify-content: space-between;
    align-items: end;
}

.dbsx_list {
    color: rgb(89, 89, 89);
    font-size: 12px;
    line-height: 25px;
}

.dbsx_item_bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;

}

.item_bottom_left {
    color: rgb(89, 89, 89);
    font-size: 12px;
    line-height: 20px;
}

/deep/ .van-button {
    height: 30px;
}

.yjcl_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

.yj_top_left {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(70, 130, 255, 1);
    border-radius: 50%;
    margin-right: 15px;
}

.yjclIcon {
    font-size: 20px;
    color: #fff;
}

.tjclTitle {
    font-size: 18px;
    font-weight: 600;
}

.yjclDate {
    color: rgb(140, 140, 140);
    font-size: 12px;
}

.yjcl_custNum {
    color: rgb(89, 89, 89);
    font-size: 12px;
    margin-top: 15px;
}
</style>