<template>
    <div class="main_box">
        <navbar title="个人客户详情"></navbar>
        <div class="wrapper">
            <div class="wrapper_top">
                <div :class="baseInfo.custGender == '男' ? 'left_icon_man' : 'left_icon_woman'">
                    <van-icon name="manager user_icon"></van-icon>
                </div>
                <div class="top_right">
                    <div class="name_box">{{ baseInfo.custName }}</div>
                    <div class="top_item">
                        <span class="top_right_left">身份证号：</span>
                        <span>{{ baseInfo.custIdc }}</span>
                    </div>
                    <div class="top_item">
                        <span class="top_right_left">性别：</span>
                        <span>{{ baseInfo.custGender }}</span>
                    </div>
                    <div class="top_item">
                        <span class="top_right_left">联系方式：</span>
                        <span>{{ baseInfo.custPhone }}</span>
                    </div>
                </div>
            </div>
            <div class="home_main" v-if="showcard">
                <div class="wrappernew">
                    <div class="wrapper_view">
                        <div class="view_item">
                            <div class="view_item_left">年龄</div>
                            <div class="view_item_right">{{ baseInfo.custAge }}</div>
                        </div>
                        <div class="view_item">
                            <div class="view_item_left">婚姻状况</div>
                            <div class="view_item_right">{{ baseInfo.isMarried }}</div>
                        </div>
                        <div class="view_item">
                            <div class="view_item_left">年收入</div>
                            <div class="view_item_right">{{ baseInfo.custSalary }}</div>
                        </div>
                        <div class="view_item">
                            <div class="view_item_left">资产情况</div>
                            <div class="view_item_right">{{ baseInfo.asset }}</div>
                        </div>
                        <div class="view_item">
                            <div class="view_item_left">信用状况</div>
                            <div class="view_item_right">{{ baseInfo.credit }}</div>
                        </div>
                        <div class="view_item">
                            <div class="view_item_left">行业名称</div>
                            <div class="view_item_right">{{ initIndustryBusiStr(baseInfo.belongBusi) }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="home_main">
                <!-- <div class="home_main_item" v-for="(item, index) in dhList" @click="handleClickItem(item)">
                    <div class="main_left">
                        <van-icon :name="item.icon" class="home_main_icon"></van-icon>
                        <div class="main_title">{{ item.title }}</div>
                    </div>
                    <van-icon name="arrow" class="next_icon"></van-icon>
                </div> -->
                <van-collapse v-model="activeNames" accordion>
                    <van-collapse-item v-for="(item, index) in dhList" :key="index" :title="item.title"
                        :name="item.title">
                        <indexcharts v-if="activeNames == '个人基本信息' && item.title == '个人基本信息'"></indexcharts>
                        <address1 v-if="activeNames == '地址信息' && item.title == '地址信息'" addressType="1"></address1>
                        <products v-if="activeNames == '签约产品' && item.title == '签约产品'" productType="2"></products>
                        <selfremark v-if="activeNames == '自定义备注' && item.title == '自定义备注'"
                            :speciallabel="baseInfo.label" :custId="baseInfo.custId" custType="0" @callFn="callFn">
                        </selfremark>
                        <remark v-if="activeNames == '省行客户标签' && item.title == '省行客户标签'" :flag="true" custType="ls">
                        </remark>
                        <history v-if="activeNames == '走访记录' && item.title == '走访记录'" :custIdc="baseInfo.custIdc"
                            historyType="2"></history>
                        <family v-if="activeNames == '关系图谱' && item.title == '关系图谱'" :childIdCard="baseInfo.custIdc">
                        </family>
                        <speticaltag v-if="activeNames == '特色客户标签' && item.title == '特色客户标签' && showTag"
                            :custIdc="baseInfo.custIdc"></speticaltag>
                    </van-collapse-item>
                    <van-collapse-item key="特色客户标签" title="特色客户标签" name="特色客户标签" v-if="showTag">
                        <speticaltag :custIdc="baseInfo.custIdc" />
                    </van-collapse-item>
                    <van-collapse-item 
                        key="催收信息" 
                        title="催收信息" 
                        name="催收信息" 
                        v-if="['932'].includes(orgNum)"
                    >
                        <speticaltag  
                            :dataSource="taskDetail" 
                            type="special"
                        />
                    </van-collapse-item>
                </van-collapse>
            </div>
            <!-- <div class="tjzf" @click="handleAddShow">添加走访</div> -->
        </div>
        <van-dialog v-model="show" title="添加走访" show-cancel-button @confirm="handleClickTjzf()">
            <van-field readonly :value="value" is-link placeholder="请选择" @click="showPicker = true"></van-field>
            <van-popup v-model="showPicker" position="bottom">
                <van-picker show-toolbar :columns="columns" @confirm="onConfirm"
                    @cancle="showPicker = false"></van-picker>
            </van-popup>
        </van-dialog>
    </div>
</template>
<script>
import navbar from '../../components/navbar/navbar.vue';
import { getPersonInfo, getIndustryTree } from "@/service/api/custome";
import {
    Tab,
    Tabs,
    Icon,
    Button,
    Search,
    Field,
    Popup,
    Picker,
    Collapse,
    CollapseItem
} from 'vant';
import { mapGetters } from 'vuex'
import indexcharts from "@/views/details/indexcharts.vue";
import speticalTag from "@/views/details/speticalTag.vue";
import address from "@/views/customer/address.vue";
import products from "@/views/customer/products.vue";
import selfremark from "@/views/customer/selfremark.vue";
import remark from "@/views/customer/remark.vue";
import history from "@/views/customer/history.vue";
import family from "@/views/customer/family.vue";
export default {
    data() {
        return {
            activeNames: [],
            navTitle: '企业客户详情',
            custGender: '女',
            dhList: [
                { title: '个人基本信息' }, { title: '地址信息' }, { title: '签约产品' }, { title: '自定义备注' }, { title: '省行客户标签' },
                { title: '走访记录' }, { title: '关系图谱' }
            ],
            show: false,
            value: '',
            showPicker: false,
            columns: [1, 2, 23, 4, 5],
            baseInfo:{},
            taskDetail: [],
            industryOptions: []
        }
    },
    components: {
        navbar: navbar,
        VanTab: Tab,
        VanTabs: Tabs,
        VanIcon: Icon,
        VanButton: Button,
        VanSearch: Search,
        VanField: Field,
        VanPopup: Popup,
        VanPicker: Picker,
        VanCollapse: Collapse,
        VanCollapseItem: CollapseItem,
        indexcharts,
        address1: address,
        products,
        remark,
        history,
        family,
        selfremark,
        speticaltag: speticalTag
    },
    created() {
        this.initIndustryTree()
    },
    computed: {
        ...mapGetters(["userInfo"]),
        showTag() {
            const arr = ['931'] // 莲都
            const { deptId = '' } = this.userInfo
            const str = String(deptId).substring(0, 3)
            return arr.includes(str) ? true : false
        },
        orgNum() {
            const { deptId = '' } = this.userInfo
            const str = String(deptId).substring(0,3)
            return str
        },
        showcard() {
            return this.userInfo.userName.startsWith('932')
        }
    },
    methods: {
        callFn() {
            this.init();
        },
        init() {
            let custId = sessionStorage.getItem('custId')
            getPersonInfo(custId).then(res => {
                if (res.code == 200) {
                    this.baseInfo = res.data.custInfoRetail
                    if (res.data.taskDetail.length > 0) {
                        const taskDetail = res.data.taskDetail[0] || {}
                        for (let i in taskDetail) {
                            if (i !== 'info') {
                                this.taskDetail.push({
                                    value: i,
                                    label: taskDetail[i],
                                    isImage: i === '照片存放地址'
                                })
                            } else {
                                for (let j in taskDetail.info) {
                                    this.taskDetail.push({
                                        value: j,
                                        label: taskDetail.info[j],
                                        isImage: j === '照片存放地址'
                                    })
                                }
                            }
                        }
                    } else {
                        this.taskDetail = []
                    }
                }
            })
        },
        initIndustryBusiStr(data) {
            if (data) {
                for (let i = 0; i < this.industryOptions.length; i++) {
                    if (this.industryOptions[i].value == data) {
                        return this.industryOptions[i].label;
                    } else {
                        for (let j = 0; j < this.industryOptions[i].children.length; j++) {
                            if (this.industryOptions[i].children[j].value == data) {
                                return this.industryOptions[i].children[j].label;
                            }
                        }
                    }
                }
            }
        },
        initIndustryTree() {
            getIndustryTree().then((res) => {
                this.industryOptions = res.data.map((item) => {
                    return {
                        value: item.code,
                        label: item.name,
                        children: item.industryTrees,
                    };
                });
                this.industryOptions.forEach((item) => {
                    item.children.forEach((el) => {
                        el.value = el.code;
                        el.label = el.name;
                    });
                });
                this.belonBusiList = res.data.map((item) => {
                    return {
                        text: item.name,
                        id: item.code,
                        children: item.industryTrees,
                    };
                });
                this.belonBusiList.forEach((item) => {
                    item.children.forEach((el) => {
                        el.text = el.name;
                        el.id = el.code;
                    });
                });
                this.belonBusiList.forEach((item) => {
                    item.children.unshift({
                        text: "请选择",
                        id: "",
                    });
                });
                this.init();
            });
        },
        handleClickItem(item) {
            if (item.title == "个人基本信息") {
                sessionStorage.setItem('detailType', item.title);
                this.$router.push('/indexcharts');
            } else if (item.title == '地址信息') {
                let addressType = '1'
                sessionStorage.setItem('addressType', addressType);
                this.$router.push('/address');
            } else if (item.title == '签约产品') {
                sessionStorage.setItem('productType', '2');
                this.$router.push('/products');
            } else if (item.title == '自定义备注') {
                sessionStorage.setItem('remarkType', '2');
                this.$router.push('/remark');
            } else if (item.title == '走访记录') {
                sessionStorage.setItem('custIdc', this.baseInfo.custIdc);
                sessionStorage.setItem('historyType', '2');
                this.$router.push('/history');
            } else if (item.title == '关系图谱') {
                sessionStorage.setItem('idCard', this.baseInfo.custIdc);
                this.$router.push('/family');
            }
        },
        handleAddShow() {
            this.show = true
        },
        onConfirm() {
            this.showPicker = false
        },
        handleClickTjzf() { },
    }
}
</script>
<style lang="less" scoped>
.wrapper {
    padding-top: 46px;
    min-height: 100vh;
    font-size: 16px;
    padding-bottom: 60px;
}

.wrappernew {
    // padding-top: 46px;
    font-size: 14px;
    background-color: #fff;

    .view_item {
        display: flex;
        justify-content: space-between;
        line-height: 40px;
        font-size: 14px;
        border-bottom: 1px solid rgba(245, 245, 245, 1);
        padding: 0 20px;
    }

    .view_item_left {
        width: 40%;
        color: rgb(22, 13, 13);
    }

    .view_item_right {
        width: 60%;
        color: rgb(22, 13, 13);
    }
}

.wrapper_top {
    background-color: #fff;
    padding: 15px 20px;
    display: flex;
}

.left_icon_man {
    background-color: rgb(35, 114, 235);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 5px;
    width: 45px;
    height: 45px;
    border-radius: 4px;
}

.left_icon_woman {
    background-color: rgb(252, 123, 80);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 5px;
    width: 45px;
    height: 45px;
    border-radius: 4px;
}

.user_icon {
    font-size: 30px;
    color: #fff;
}

.top_right {
    margin-left: 15px;
}

.name_box {
    font-size: 16px;
    font-weight: 600;
    line-height: 20px;
}

.top_item {
    font-size: 12px;
    margin-top: 10px;
}

.top_right_left {
    color: rgb(89, 89, 89);
}

.home_main {
    background-color: #ffffff;
    margin-top: 10px;
}

.home_main_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 15px 15px 0;
    border-bottom: 1px solid rgba(89, 89, 89, 0.1);
}

.main_left {
    display: flex;
    align-items: center;
}

.home_main_icon {
    font-size: 30px;
    color: rgb(98, 132, 221);
}

.main_title {
    margin-left: 15px;
    font-size: 14px;
}

.tjzf {
    width: 90%;
    height: 45px;
    background-color: rgb(57, 133, 218);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 5%;
    margin-top: 30px;
    color: #fff;
}
</style>
