<template>
    <div>
        <div class="detail-list">
            <div>
                <h5>基本信息</h5>
                <ul class="flex">
                    <li>
                        <div>单位名称</div>
                        <div>{{ detail.companyName }}</div>
                    </li>
                    <li>
                        <div>注册角色</div>
                        <div>{{ detail.type == '1' ? '采购商' : '供应商' }}</div>
                    </li>
                    <li>
                        <div>法人姓名</div>
                        <div>{{ detail.legalPersonName }}</div>
                    </li>
                    <li>
                        <div>法人电话</div>
                        <div>{{ detail.legalPersonPhone }}</div>
                    </li>
                    <li>
                        <div>统一社会信用代码</div>
                        <div>{{ detail.socialCode }}</div>
                    </li>
                    <li>
                        <div>行政区域</div>
                        <div>{{ detail.area }}</div>
                    </li>
                    <li>
                        <div>单位性质</div>
                        <div>{{ detail.companyNatureName }}</div>
                    </li>
                    <li>
                        <div>单位所在地</div>
                        <div>{{ detail.location }}</div>
                    </li>
                    <li>
                        <div>行业类型</div>
                        <div>{{ detail.industryName }}</div>
                    </li>
                    <li>
                        <div>开户银行名称</div>
                        <div>{{ detail.bankName }}</div>
                    </li>
                    <li>
                        <div>结算账户</div>
                        <div>{{ detail.bankAccount }}</div>
                    </li>
                    <li>
                        <div>结算账户名</div>
                        <div>{{ detail.bankAccountName}}</div>
                    </li>
                    <li>
                        <div>注册资本(万元)</div>
                        <div>{{ detail.registeredCapital }}</div>
                    </li>
                    <li>
                        <div>联系地址</div>
                        <div>{{ detail.contactAddress }}</div>
                    </li>
                    <li>
                        <div>管理员姓名</div>
                        <div>{{ contacts.userName }}</div>
                    </li>
                    <li>
                        <div>手机号</div>
                        <div>{{ contacts.phoneNumber }}</div>
                    </li>
                    <li>
                        <div>身份证</div>
                        <div>{{ contacts.idNumber }}</div>
                    </li>
                    <li>
                        <div>电子邮箱</div>
                        <div>{{ contacts.email }}</div>
                    </li>
                </ul>
                <div class="detail-item">
                    <div>经营范围</div>
                    <div>{{ detail.businessScope }}</div>
                </div>
                <div class="detail-item">
                    <div>法人身份证正反面</div>
                    <div class="flex">
                        <el-image
                            v-for="(item, index) in Card"
                            :src="item"
                            :key="index"
                            style="margin-right: 20px; height: 200px; width: 200px"
                            fit="cover"
                            :preview-src-list="Card"
                        ></el-image>
                    </div>
                </div>
                <div class="detail-item">
                    <div>三证合一扫描件</div>
                    <el-image
                        v-for="(item, index) in threeCard"
                        :src="item"
                        :key="index"
                        style="margin-right: 20px; height: 200px; width: 200px"
                        fit="cover"
                        :preview-src-list="threeCard"
                    ></el-image>
                </div>
                <div class="detail-item">
                    <div>其他资料</div>
                    <div class="pdf">
                        <a   target="_blank" :href="item.fileUrl" v-for="(item, index) in elseFile" :key="index">{{ item.fileName }}</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { companyDetail } from '@api/common/list';
export default {
    components: {},
    data() {
        return {
            detail: '',
            breads: ['查看基本信息', '企业资质文件'],
            threeCard: [],
            elseFile: [],
            contacts: '',
            Card: []
        };
    },
    methods: {
        edit() {
            this.$router.push('/purchaser/organization/informationEdit');
        },
        async getcompanyDetail() {
            try {
                let companyId = localStorage.getItem('companyId');
                const { data, code } = await companyDetail(companyId);
                if (code === 200) {
                    for (let item of data.fileList) {
                        if (item.type == 1 || item.type == 2) {
                            this.Card.push(item.fileUrl);
                        } else if (item.type == 3) {
                            this.threeCard.push(item.fileUrl);
                        } else if (item.type == 4) {
                            this.elseFile.push(item);
                        }
                    }
                    this.contacts = data.contacts;
                    this.detail = data;
                }
            } catch (e) {
                console.log(e);
            }
        }
    },
    created() {
        this.getcompanyDetail();
    }
};
</script>

<style scoped>
.detail-list > div > ul > li {
    margin-right: 150px;
    margin-bottom: 50px;
    width: 180px;
}

.detail-list > div > ul {
    flex-wrap: wrap;
    margin-left: 30px;
    margin-top: 20px;
}

.detail-head {
    margin-left: 30px;
    padding-top: 10px;
}

.detail-head > h3 {
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}

.detail-list {
    box-sizing: border-box;
    padding-top: 20px;
    background-color: #f0f2f5;
    margin-top: 10px;
}

.detail-list > div {
    background-color: #ffff;
    padding-bottom: 20px;
}

.detail-list h5 {
    font-weight: bold;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #f0f2f5;
    box-sizing: border-box;
    padding-left: 30px;
}

.detail-item {
    margin-left: 30px;
    margin-bottom: 30px;
}

.detail-item > div:first-child {
    margin-bottom: 10px;
}

.pdf {
    /* width: 170px; */
}

/* .pdf > div:nth-child(2),
.pdf > div:last-child {
    width: 50px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 10px;
    border: 1px solid #000;
} */
.pdf>a{
    display: block;
    margin-bottom:15px
}
</style>