<template>
    <div class="main_box">
        <navbar title="企业客户详情"></navbar>
        <div class="wrapper">
            <div class="wrapper_top">
                <div class="wrapper_box_top">
                    <div class="top_left">
                        <div class="icon_box">
                            <img src="../../images/part_one/icon_company.png" alt="" style="width: 36px;height: 36px;">
                        </div>
                        <div class="top_title">
                            <div class="title_top_box">
                                <div class="top_title_top">{{ baseInfo.custName }}</div>
                            </div>
                            <div class="top_title_buttom">{{ baseInfo.socialCreditCode }}</div>
                        </div>
                    </div>
                    <div class="top_right">
                        <div class="top_right_top" v-if="radarCustFlag != '1'">
                            <span class="pfbox">{{ initStatus(baseInfo.status) }}</span>
                        </div>
                        <div class="top_right_top" v-if="radarCustFlag == '1'">
                            <span class="pfbox">{{ baseInfo.status }}</span>
                        </div>
                        <div class="isradarCust" v-if="radarCustFlag == '1'">非我行客户</div>
                        <div class="top_title_buttom">{{ baseInfo.updateTime }}</div>
                    </div>
                </div>
                <div class="wrapper_box_middle">
                    <div class="middle_item">
                        <div class="middle_item_title">法定代表人</div>
                        <div class="middle_title_content">{{ baseInfo.lpName }}</div>
                    </div>
                    <div class="line"></div>
                    <div class="middle_item">
                        <div class="middle_item_title">注册资本</div>
                        <div class="middle_title_content">{{ baseInfo.custCapital }}</div>
                    </div>
                    <div class="line"></div>
                    <div class="middle_item">
                        <div class="middle_item_title">成立时间</div>
                        <div class="middle_title_content"></div>
                    </div>
                </div>
                <div class="wrapper_box_middle2">
                    <div class="wrapper_middle2_item">
                        <span class="wrapper_middle2_item_left">企业地址：</span>
                        <span>{{ baseInfo.custLocation }}</span>
                    </div>
                    <div class="wrapper_middle2_item">
                        <span class="wrapper_middle2_item_left">联系方式：</span>
                        <span>{{ baseInfo.tel }}</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> -->
                <van-collapse v-model="activeNames" accordion>
                    <van-collapse-item v-for="(item, index) in dhList" :key="index" :title="item.title" :name="item.title">
                        <firm v-if="activeNames == '企业基本信息' && item.title == '企业基本信息'"></firm>
                        <address1 v-if="activeNames == '地址信息' && item.title == '地址信息'" addressType="0"></address1>
                        <products v-if="activeNames == '签约产品' && item.title == '签约产品'" productType="1"></products>
                        <selfremark v-if="activeNames == '自定义备注' && item.title == '自定义备注'" :speciallabel="baseInfo.label" :custId="baseInfo.custId" custType="2" @callFn="callFn"></selfremark>
                        <remark v-if="activeNames == '省行客户标签' && item.title == '省行客户标签'" :flag="true" custType="gs"></remark>
                        <history v-if="activeNames == '走访记录' && item.title == '走访记录'" :socialCreditCode="baseInfo.socialCreditCode" historyType="1"></history>
                        <relationShip v-if="activeNames == '关联关系' && item.title == '关联关系'"></relationShip>
                    </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 { mapGetters } from 'vuex'
import navbar from '../../components/navbar/navbar.vue';
import { getBusinessInfo, getRegStatus } from "@/service/api/custome";
import {
    Tab,
    Tabs,
    Icon,
    Button,
    Search,
    Field,
    Popup,
    Picker,
    Collapse, 
    CollapseItem
} from 'vant';
import firm from "@/views/details/firm.vue";
import speticalTag from "@/views/details/speticalTag.vue";
import address from "@/views/customer/address.vue";
import products from "@/views/customer/products.vue";
import remark from "@/views/customer/remark.vue";
import history from "@/views/customer/history.vue";
import relationShip from "@/views/customer/relationShip.vue";
import selfremark from "@/views/customer/selfremark.vue";

export default {
    data() {
        return {
            activeNames:[],
            navTitle: '企业客户详情',
            dhList: [
                { title: '企业基本信息' }, { title: '地址信息' }, { title: '签约产品' }, { title: '自定义备注' }, { title: '省行客户标签' },
                { title: '走访记录' }, { title: '关联关系' },
            ],
            show: false,
            value: '',
            showPicker: false,
            columns: [1, 2, 23, 4, 5],
            baseInfo: {},
            taskDetail: [],
            statusList: [],
            radarCustFlag:'',
        }
    },
    components: {
        navbar: navbar,
        VanTab: Tab,
        VanTabs: Tabs,
        VanIcon: Icon,
        VanButton: Button,
        VanSearch: Search,
        VanField: Field,
        VanPopup: Popup,
        VanPicker: Picker,
        VanCollapse: Collapse,
        VanCollapseItem: CollapseItem,
        firm,
        address1:address,
        products,
        remark,
        history,
        relationShip,
        selfremark,
        speticaltag: speticalTag
    },
    created() {

        this.init()
    },
    computed: {
        ...mapGetters(["userInfo"]),
        orgNum() {
            const { deptId = '' } = this.userInfo
            const str = String(deptId).substring(0,3)
            return str
        }
    },
    methods: {
        callFn(){
            this.init();
        },
        init() {
            let custId = sessionStorage.getItem('custId')
            getBusinessInfo(custId).then(res => {
                if (res.code == 200) {
                    this.baseInfo = res.data.custInfoBusiness
                    this.radarCustFlag = res.data.radarCustFlag
                    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 = []
                    }
                    this.initRegStatus()
                }
            })
        },
        handleClickItem(item) {
            if (item.title == "企业基本信息") {
                sessionStorage.setItem('detailType', item.title);
                this.$router.push('/firm');
            } else if (item.title == '地址信息') {
                let addressType = '0'
                sessionStorage.setItem('addressType', addressType);
                this.$router.push('/address');
            } else if (item.title == '签约产品') {
                sessionStorage.setItem('productType', '1');
                this.$router.push('/products');
            } else if (item.title == '自定义备注') {
                sessionStorage.setItem('remarkType', '1');
                this.$router.push('/remark');
            } else if (item.title == '走访记录') {
                sessionStorage.setItem('socialCreditCode', this.baseInfo.socialCreditCode);
                sessionStorage.setItem('historyType', '1');
                this.$router.push('/history');
            } else if (item.title == '关联关系') {
                this.$router.push('/relationShip');

            }
        },
        initRegStatus() {
            getRegStatus().then(res => {
                if (res.code == 200) {
                    this.statusList = res.data.map(item => {
                        return {
                            label: item.dictLabel,
                            value: item.dictValue
                        }
                    })
                }
            })
        },
        initStatus(data) {
            let arr = this.statusList.filter(item => item.value === data)
            if (arr && arr.length > 0) {
                return arr[0].label
            }
        },
        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;
}

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

.wrapper_box_top {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
}

.top_left {
    display: flex;
    justify-content: space-between;
    width: 52%;
}

.icon_box {
    width: 31%;
    height: 45px;
    background-color: rgb(35, 114, 235);
    display: flex;
    justify-content: center;
    align-items: center;
}

.top_title {
    margin-left: 10px;
}

.top_title_top {
    font-size: 16px;
    font-weight: 600;
    line-height: 30px;
    word-break: break-all;
}
.isradarCust{
    text-align: end;
    color: red;
    line-height: 30px;
}
.top_title_buttom {
    font-size: 12px;
    color: rgb(140, 140, 140);
    text-align: end;
}

.top_right_top {
    font-size: 12px;
    height: 20px;
    text-align: end;
    margin-bottom: 10px;
}

.pfbox {
    background-color: rgba(17, 201, 95, 0.1);
    color: rgba(17, 201, 95, 1);
    display: inline-block;
    padding: 2px 10px;

}

.wrapper_box_middle {
    display: flex;
    justify-content: space-between;
    margin: 15px 0;
    padding: 15px 5px;
    background-color: rgb(249, 249, 250);
}

.middle_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30%;
    word-break: break-all;
}

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

.middle_title_content {
    font-size: 14px;
    line-height: 30px;
    font-weight: 600;
}

.line {
    width: 1px;
    background-color: rgb(255, 255, 255);
    border: 1px solid rgb(218, 220, 224);
}

.wrapper_middle2_item {
    line-height: 20px;
    font-size: 12px;
}

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

.top_right {
    width: 47%;
}

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