<template>
    <div class="detail_main">
        <navbar title="工作台"></navbar>
        <div class="wrapper">
            <div class="wrapper_main">
                <div v-if="this.userInfo && this.userInfo.deptId && (this.userInfo.deptId+'').substring(0,3) == '932' && ['实时机构存款','实时机构贷款'].includes(infoName)">
                    <div class="special_d">
                        <el-table :data="list" key="999999">
                            <el-table-column :prop="v" :label="v" v-for="(v,k) in listkeys" :key="k" width="150px">
                                <template slot-scope="scope">
                                    <div v-if="v == '变动金额(万元)'" class="dis_row_center">
                                        <img v-if="scope.row[v] > 0" style="width:16px;height:16px" src="../../images/home/ss.png" alt="">
                                        <img v-if="scope.row[v] < 0" style="width:16px;height:16px" src="../../images/home/xj.png" alt="">
                                        <span>{{scope.row[v]}}</span>
                                    </div>
                                    <span v-else>{{scope.row[v]}}</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <van-pull-refresh v-model="refreshing" @refresh="onRefresh" v-if="this.userInfo && this.userInfo.deptId && (this.userInfo.deptId+'').substring(0,3) == '932' && !['实时机构存款','实时机构贷款'].includes(infoName)">
                    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false"
                        @load="onLoad">
                        <div class="cust_item" v-for="(item, index) in list" :key="index">
                            <!-- <div class="item_top">
                                <div class="item_top_left">
                                    <div class="left_icon"><van-icon name="user"></van-icon></div>
                                    <div class="left_name">{{ item.custName }}</div>
                                </div>
                                <div class="item_top_right">距离到期：{{ item.loanDueWarnValue }}</div>
                            </div> -->
                            <div class="item_main">
                                <div class="main_item" v-for="(v,k) in listkeys" :key="k">
                                    {{v}}：<span class="main_item_num">{{ item[v] }}</span>
                                </div>
                            </div>
                        </div>
                    </van-list>
                </van-pull-refresh>
                <van-tabs @change="tabChange()" v-model="activeTab" class="content" type="line"  color="#4682ff" title-active-color="#4682ff" line-width="80" v-if="this.userInfo && this.userInfo.deptId && (this.userInfo.deptId+'').substring(0,3) != '932'">
                    <van-tab title="企业">
                        <div class="search-input">
                            <van-search type="text" :left-icon="null" v-model="searchValue" placeholder="搜索客户号、客户名称"
                                @clear="handleSearch()" @keyup.enter.native="handleSearch()" />
                            <div class="search_btn">
                                <van-icon name="search" @click="handleSearch"></van-icon>
                            </div>
                        </div>
                        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false"
                                @load="onLoad">
                                <div class="cust_item" v-for="(item, index) in list" @click="handleClickItem(item)">
                                    <div class="item_top">
                                        <div class="item_top_left">
                                            <div class="left_icon"><van-icon name="user"></van-icon></div>
                                            <div class="left_name">{{ item.custName }}</div>
                                        </div>
                                        <div class="item_top_right">距离到期：{{ item.loanDueWarnValue }}</div>
                                    </div>
                                    <div class="item_main">
                                        <div class="main_item">合同号：<span class="main_item_num">{{ item.loanContractNum
                                        }}</span>
                                        </div>
                                        <div class="main_item">客户号：<span class="main_item_num">{{ item.custId }}</span>
                                        </div>
                                        <div class="main_item">合同额度：<span class="main_item_num">{{ item.loanContractAmt
                                        }}</span>
                                        </div>
                                        <div class="main_item">联系方式：<span class="main_item_num">{{ item.contact }}</span>
                                        </div>
                                    </div>
                                </div>
                            </van-list>
                        </van-pull-refresh>

                    </van-tab>
                    <van-tab title="个人">
                        <div class="search-input">
                            <van-search type="text" :left-icon="null" v-model="searchValue" placeholder="搜索客户号、客户名称"
                                @clear="handleSearch()" @keyup.enter.native="handleSearch()" />
                            <div class="search_btn">
                                <van-icon name="search" @click="handleSearch"></van-icon>
                            </div>
                        </div>
                        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false"
                                @load="onLoad">
                                <div class="cust_item" v-for="(item, index) in list" @click="handleClickItem(item)">
                                    <div class="item_top">
                                        <div class="item_top_left">
                                            <div class="left_icon"><van-icon name="user"></van-icon></div>
                                            <div class="left_name">{{ item.custName }}</div>
                                        </div>
                                        <div class="item_top_right">距离到期：{{ item.loanDueWarnValue }}</div>
                                    </div>
                                    <div class="item_main">
                                        <div class="main_item">合同号：<span class="main_item_num">{{ item.loanContractNum
                                        }}</span>
                                        </div>
                                        <div class="main_item">客户号：<span class="main_item_num">{{ item.custId }}</span>
                                        </div>
                                        <div class="main_item">合同额度：<span class="main_item_num">{{ item.loanContractAmt
                                        }}</span>
                                        </div>
                                        <div class="main_item">联系方式：<span class="main_item_num">{{ item.contact }}</span>
                                        </div>
                                    </div>
                                </div>
                            </van-list>
                        </van-pull-refresh>

                    </van-tab>
                    <van-tab title="商户">
                        <div class="search-input">
                            <van-search type="text" :left-icon="null" v-model="searchValue" placeholder="搜索客户号、客户名称"
                                @clear="handleSearch()" @keyup.enter.native="handleSearch()" />
                            <div class="search_btn">
                                <van-icon name="search" @click="handleSearch"></van-icon>
                            </div>
                        </div>
                        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
                            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false"
                                @load="onLoad">
                                <div class="cust_item" v-for="(item, index) in list" @click="handleClickItem(item)">

                                    <div class="item_top">
                                        <div class="item_top_left">
                                            <div class="left_icon"><van-icon name="user"></van-icon></div>
                                            <div class="left_name">{{ item.custName }}</div>
                                        </div>
                                        <div class="item_top_right">距离到期：{{ item.loanDueWarnValue }}</div>
                                    </div>
                                    <div class="item_main">
                                        <div class="main_item">合同号：<span class="main_item_num">{{ item.loanContractNum
                                        }}</span>
                                        </div>
                                        <div class="main_item">客户号：<span class="main_item_num">{{ item.custId }}</span>
                                        </div>
                                        <div class="main_item">合同额度：<span class="main_item_num">{{ item.loanContractAmt
                                        }}</span>
                                        </div>
                                        <div class="main_item">联系方式：<span class="main_item_num">{{ item.contact }}</span>
                                        </div>
                                    </div>
                                </div>
                            </van-list>
                        </van-pull-refresh>
                    </van-tab>
                </van-tabs>
            </div>
        </div>
    </div>
</template>
<script>
import navbar from '../../components/navbar/navbar.vue';
import { loanWarnList,warnRespList } from "@/service/api/work";
import { mapGetters } from "vuex";
import { keys } from "lodash";
import {
    Tab,
    Tabs,
    Icon,
    Search,
    List,
    PullRefresh,
} from 'vant';
export default {
    data() {
        return {
            activeTab: 0,
            searchValue: '',
            list: [

            ],


            pageSize: 10,
            pageNum: 1,
            custPattern: 2,
            refreshing: false,
            loading: false,
            finished: false,
            currentPage: 1,
            infoName:"",
            listkeys:[],
        }
    },
    computed: {
        ...mapGetters(["userInfo"]),
    },
    components: {
        navbar: navbar,
        VanTab: Tab,
        VanTabs: Tabs,
        VanIcon: Icon,
        VanSearch: Search,
        VanList: List,
        VanPullRefresh: PullRefresh,
    },
    created() {
        let activeTab = sessionStorage.getItem('detailActiveTab')
        this.infoName=sessionStorage.getItem('specialinfoName')||""
        if (activeTab) {
            this.activeTab = Number(activeTab);
            if(activeTab == '0'){
                //企业
                this.custPattern = '2'
            }else if(activeTab == '1'){
                //个人
                this.custPattern = '0'
            }else if(activeTab == '2'){
                //商户
                this.custPattern = '1'
            }
        }
        if(this.infoName == '实时机构存款' || this.infoName == '实时机构贷款'){
            this.pageSize=99999;
        }
        this.init()
    },
    methods: {
        async init() {
            if(this.userInfo.deptId && (this.userInfo.deptId+"").substring(0,3) == '932'){
                const params = {
                    custIdName: this.searchValue,
                    pageSize: this.pageSize,
                    pageNum: this.pageNum,
                    custType: this.custPattern,
                    type:this.infoName,
                }
                const res = await warnRespList(params)
                if (res.code == 200) {
                    sessionStorage.removeItem('detailActiveTab')
                    if (this.refreshing) {
                        this.refreshing = false;
                    }
                    this.loading = false;
                    if (res.rows) {
                        if(this.pageNum == '1' && res.rows.length > 0 ){
                            if(this.infoName == '实时机构存款' || this.infoName == '实时机构贷款'){
                                let oldArr=keys(res.rows[0])
                                let newArr=[];
                                if(oldArr.includes("机构名称")){
                                    newArr.push("机构名称")
                                    oldArr=oldArr.filter(item=>item != '机构名称')
                                }
                                if(oldArr.includes("机构号")){
                                    newArr.push("机构号")
                                    oldArr=oldArr.filter(item=>item != '机构号')
                                }
                                if(oldArr.includes("当前余额(万元)")){
                                    newArr.push("当前余额(万元)")
                                    oldArr=oldArr.filter(item=>item != '当前余额(万元)')
                                }
                                if(oldArr.includes("昨日余额(万元)")){
                                    newArr.push("昨日余额(万元)")
                                    oldArr=oldArr.filter(item=>item != '昨日余额(万元)')
                                }
                                if(oldArr.includes("变动金额(万元)")){
                                    newArr.push("变动金额(万元)")
                                    oldArr=oldArr.filter(item=>item != '变动金额(万元)')
                                }
                                this.listkeys=[...newArr,...oldArr]
                            }else{
                                this.listkeys=keys(res.rows[0])
                            }
                        }
                        this.list = params.pageNum == "1" ? res.rows : [...this.list, ...res.rows];
                        if (res.rows.length < params.pageSize) {
                            this.finished = true;
                        }
                        this.currentPage++;
                    } else {
                        this.finished = true;
                    }
                }
            }else{
               const params = {
                    custIdName: this.searchValue,
                    pageSize: this.pageSize,
                    pageNum: this.pageNum,
                    custType: this.custPattern
                }
                const res = await loanWarnList(params)
                if (res.code == 200) {
                    sessionStorage.removeItem('detailActiveTab')
                    if (this.refreshing) {
                        this.refreshing = false;
                    }
                    this.loading = false;
                    if (res.rows) {
                        this.list = params.pageNum == "1" ? res.rows : [...this.list, ...res.rows];
                        if (res.rows.length < params.pageSize) {
                            this.finished = true;
                        }
                        this.currentPage++;
                    } else {
                        this.finished = true;
                    }
                } 
            }
        },
        tabChange() {
            console.log(this.activeTab, 'activeTab')
            if (this.activeTab == 0) {
                this.custPattern = 2
            } else if (this.activeTab == 1) {
                this.custPattern = 0
            } else if (this.activeTab == 2) {
                this.custPattern = 1
            }
            this.searchValue = ''
            this.currentPage = 1;
            this.pageNum = 1;
            this.init();
        },
        //下拉刷新
        onRefresh() {
            this.list = [];
            this.finished = false; //解除上拉加载之后数据不能再次上拉
            this.currentPage = 1;
            this.pageNum = this.currentPage;
            this.init();
        },
        //上拉加载
        onLoad() {
            this.pageNum = this.currentPage + "";
            this.init();
        },
        handleSearch() {
            this.init();
        },
        handleClickItem(item) {
            sessionStorage.setItem('custId', item.custId);
            sessionStorage.setItem("detailActiveTab", this.activeTab);
            if (item.custType == '2') {
                this.$router.push('/customerFirmDetails');
            } else if (item.custType == '0') {
                this.$router.push('/customePersonDetail');
            } else if (item.custType == '1') {
                this.$router.push('/customeCommercialDetail');
            }
        },
    }
}
</script>

<style lang="less" scoped>
.wrapper {
    padding-top: 46px;
    min-height: 100vh;
    font-size: 16px;
    padding-bottom: 60px;
}

.search-input {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
}

.search_btn {
    background-color: rgb(24, 144, 255);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    color: #fff;
    font-size: 20px;
}

/deep/ .van-search {
    width: 75%;
    padding: 5px 8px;
}

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

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

.left_icon {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    width: 25px;
    height: 25px;
    background-color: rgb(35, 144, 235);
    color: #fff;
}

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

.left_name {
    margin-left: 10px;
    font-weight: 600;
    font-size: 16px;
}

.item_top_right {
    background-color: rgba(35, 114, 234, 0.1);
    color: rgb(252, 102, 117);
    font-size: 12px;
    border-radius: 4px;
    padding: 5px 8px;
}

.item_main {
    margin-top: 10px;
}

.main_item {
    color: rgb(140, 140, 140);
    font-size: 12px;
    line-height: 25px;

}

.main_item_num {
    color: rgb(38, 38, 38);
}

.special_d{
    width: 100%;
    overflow: hidden;
}
.dis_row_center{
    display: flex;
    flex-direction: row;
    align-items: center;
}
</style>