<template>
    <div class="main_box">
        <navbar :title="navTitle"></navbar>
        <div class="wrapper">
            <div v-if="navTitle == '个人客户详情'">
                <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.custPhone }}</span>
                        </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>
                </div>

            </div>
            <div v-if="navTitle == '商户客户详情' || navTitle == '企业客户详情'">
                <div class="wrapper_top">
                    <div class="left_icon" v-if="navTitle == '商户客户详情'">
                        <img src="../../images/home/sh.png" alt="" style="width: 45px;height: 45px;">

                    </div>
                    <div class="qyleft_icon" v-if="navTitle == '企业客户详情'">
                        <img src="../../images/part_one/icon_company.png" alt="" style="width: 30px;height: 30px;"
                            v-if="navTitle == '企业客户详情'">
                    </div>
                    <div class="top_right">
                        <div class="name_box">{{ baseInfo.custName }}</div>
                        <div class="top_item">
                            <span class="top_right_left" v-if="navTitle == '商户客户详情'">经营者：</span>
                            <span class="top_right_left" v-if="navTitle == '企业客户详情'">企业法人：</span>
                            <span>{{ baseInfo.lpName }}</span>
                        </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.custPhone }}</span>
                        </div>


                    </div>
                </div>
                <div class="home_main">
                    <div class="home_main_item" v-for="(item, index) in gsList" @click="handleClickGsItem(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>
                </div>

            </div>
        </div>

    </div>
</template>
<script>
import navbar from '../../components/navbar/navbar.vue';
import { getRecordDetail } from "@/service/api/filing";
import {
    Tab,
    Tabs,
    Icon,
    Button,
    Search,
    Field,
    Popup,
    Picker,
} from 'vant';
export default {
    data() {
        return {
            navTitle: '',
            custGender: '女',
            dhList: [
                { title: '个人基本信息' }, { title: '关联企业/商户' }, { title: '家庭成员' }
            ],
            gsList: [
                { title: '商户基本信息' }, { title: '关联经营人' }
            ],
            show: false,
            value: '',
            showPicker: false,

            baseInfo: {},
        }
    },
    components: {
        navbar: navbar,
        VanTab: Tab,
        VanTabs: Tabs,
        VanIcon: Icon,
        VanButton: Button,
        VanSearch: Search,
        VanField: Field,
        VanPopup: Popup,
        VanPicker: Picker
    },
    created() {
        let activeTab = sessionStorage.getItem('activeTab')
        if (activeTab == 0) {
            this.navTitle = '企业客户详情'
            this.gsList = [{ title: '企业基本信息' }, { title: '关联经营人' }]
        } else if (activeTab == 1) {
            this.navTitle = '个人客户详情'
        } else if (activeTab == 2) {
            this.navTitle = '商户客户详情'
            this.gsList = [{ title: '商户基本信息' }, { title: '关联经营人' }]
        }
        this.init()
    },
    methods: {
        async init() {

            let id = sessionStorage.getItem('custId')
            getRecordDetail(id).then(res => {
                if (res.code == 200) {
                    this.baseInfo = res.data.custInfoRecord
                }
            })
        },
        handleClickItem(item) {
            if (item.title == "个人基本信息") {
                sessionStorage.setItem('detailType', item.title);
                this.$router.push('/personBaseInfo');
            } else if (item.title == '关联企业/商户') {
                this.$router.push('/association');
            } else if (item.title == '家庭成员') {
                this.$router.push('/filingFamily');
            }
        },
        handleClickGsItem(item) {

            if (item.title == "企业基本信息" || item.title == "商户基本信息") {
                sessionStorage.setItem('detailType', item.title);
                this.$router.push('/firmBaseInfo');

            } else if (item.title == '关联经营人') {
                this.$router.push('/relatedParty');
            }
        },
    }
}
</script>
<style lang="less" scoped>
.wrapper {
    padding-top: 46px;
    min-height: 100vh;
    font-size: 16px;
    padding-bottom: 60px;
}

.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;
}

.qyleft_icon {
    width: 45px;
    height: 45px;
    background-color: rgb(35, 114, 235);
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>