<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="待办事项" name="0">
                        <div class="ywzb_item" v-for="(item, index) in dbsxList" @click="handleClickDbsx(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>
                        </div>
                    </van-tab>
                    <!-- 青田932的预警处理 -->
                    <van-tab title="预警处理" name="1" v-if="deptId.substring(0,3) == '932'">
                        <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-tab title="预警处理" name="2" v-else>
                        <div class="ywzb_item" v-for="(item, index) in yjclOtherList" @click="handleClickYjclOther(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>
                            <div class="yjcl_custNum">预警条数：{{ 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 { workWarningListType } from "@/service/api/home";
import {
    Tab,
    Tabs,
    Icon,
    Button,
    List,
    PullRefresh,
} from 'vant';
export default {
    data() {
        return {
            activeTab: 0,
            dbsxList: [
                {
                    infoName: '日常任务',
                    key: 0,
                    path: '/workmngdaytaskindex'
                },
                {
                    infoName: '营销任务',
                    key: 1,
                    path: '/workmngmarkettaskindex'
                }
            ],
            yjclOtherList: [],
            yjclList: [

            ],
            detailType: '',
            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+"";
        let activeTab = sessionStorage.getItem('workActiveTab')
        if (activeTab) {
            this.activeTab = Number(activeTab);
        }
        if (this.activeTab == 0) {
        } else if (this.activeTab == 1) {
            this.initwarnList()
        } else if (this.activeTab == 2) {
            this.initwarnType()
        }
    },
    methods: {
        initwarnList() {
            warnList().then(res => {
                if (res.code == 200) {
                    sessionStorage.removeItem('workActiveTab')
                    this.yjclList = res.data
                }
            })
        },
        initwarnType() {
            workWarningListType().then(res => {
                if (res.code == 200) {
                    this.yjclOtherList = res.data || []
                }
            })
        },
        tabChange() {
            if (this.activeTab == 0) {
            } else if (this.activeTab == 1) {
                this.initwarnList()
            } else if (this.activeTab == 2) {
                this.initwarnType()
            }
        },
        handleClickDbsx(item) {
            this.$router.push(item.path);
        },
        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');
        },
        handleClickYjclOther(item) {
            sessionStorage.setItem('yujingrenwyType', item.infoName);
            this.$router.push('/workmngwarningtask');
        }
    }
}
</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>