<template>
    <div style="overflow-y: auto;">
        <div class="common-card">
            <h3>工商信息</h3>
            <div class="right-type" style="top:13px;">
                <span style="color: rgba(60,100,220,1);font-weight: 700;">国药控股山西长治有限公司</span>
            </div>
            <el-form :model="infoForm" ref="infoform" label-width="237px" class="grid-form-class">
            <div class="form-body">
            <div class="flex-css">
                <el-form-item label="统一社会信用代码" prop="uscc">
                    <div class="content">
                        {{ infoForm.uscc }}
                    </div>
                </el-form-item>
                <el-form-item label="法定代表人" prop="legrepName">
                    <div class="content">
                        {{ infoForm.legrepName }}
                    </div>
                </el-form-item>
                <el-form-item label="登记状态" prop="regStas">
                    <div class="content">
                        {{ infoForm.regStas }}
                    </div>
                </el-form-item>
            </div>
            <div class="flex-css">
                <el-form-item label="成立日期" prop="estbdat">
                    <div class="content">
                        {{ infoForm.estbdat }}
                    </div>
                </el-form-item>
                <el-form-item label="国标行业" prop="natstdIndu">
                    <div class="content">
                        {{ infoForm.natstdIndu }}
                    </div>
                </el-form-item>
                <el-form-item label="注册资本" prop="regCapt">
                    <div class="content">
                        {{ infoForm.regCapt }}
                    </div>
                </el-form-item>
            </div>
            <div class="flex-css">
                <el-form-item label="实缴资本" prop="arrCapt">
                    <div class="content">
                        {{ infoForm.arrCapt }}
                    </div>
                </el-form-item>
                <el-form-item label="组织机构代码" prop="orgCode">
                    <div class="content">
                        {{ infoForm.orgCode }}
                    </div>
                </el-form-item>
                <el-form-item label="工商注册号" prop="bizRegno">
                    <div class="content">
                        {{ infoForm.bizRegno }}
                    </div>
                </el-form-item>
            </div>
            <div class="flex-css">
                <el-form-item label="纳税人识别号" prop="tin">
                    <div class="content">
                        {{ infoForm.tin }}
                    </div>
                </el-form-item>
                <el-form-item label="企业类型" prop="entpType">
                    <div class="content">
                        {{ infoForm.entpType }}
                    </div>
                </el-form-item>
                <el-form-item label="营业期限" prop="bizDdln">
                    <div class="content">
                        {{ infoForm.bizDdln }}
                    </div>
                </el-form-item>
            </div>
            <div class="flex-css">
                <el-form-item label="纳税人资质" prop="txperCert">
                    <div class="content">
                        {{ infoForm.txperCert }}
                    </div>
                </el-form-item>
                <el-form-item label="所属地区" prop="regn">
                    <div class="content">
                        {{ infoForm.regn }}
                    </div>
                </el-form-item>
                <el-form-item label="登记机关" prop="regOrg">
                    <div class="content">
                        {{ infoForm.regOrg }}
                    </div>
                </el-form-item>
            </div>
            <div class="flex-css">
                <el-form-item label="注册地址" prop="regAddrName">
                    <div class="content">
                        {{ infoForm.regAddrName }}
                    </div>
                </el-form-item>
            </div>
            <div class="flex-css">
                <el-form-item label="经营范围" prop="bizScp">
                    <div class="content">
                        {{ infoForm.bizScp }}
                    </div>
                </el-form-item>
            </div>
            </div>
            </el-form>
        </div>
        <div class="common-card">
            <h3>联系人信息</h3>
            <el-form :model="infoForm" ref="infoform" label-width="237px" class="grid-form-class">
            <div class="form-body">
            <div class="flex-css">
                <el-form-item label="联系人" prop="conerName">
                    <div class="content">
                        {{ infoForm.conerName }}
                    </div>
                </el-form-item>
                <el-form-item label="职务" prop="duty">
                    <div class="content">
                        {{ infoForm.duty }}
                    </div>
                </el-form-item>
            </div>
            <div class="flex-css">
                <el-form-item label="联系电话" prop="tel">
                    <div class="content">
                        {{ infoForm.tel }}
                    </div>
                </el-form-item>
                <el-form-item label="电子邮箱" prop="email">
                    <div class="content">
                        {{ infoForm.email }}
                    </div>
                </el-form-item>
            </div>
            </div>
            </el-form>
        </div>
        <div class="common-card">
            <h3>经营资质</h3>
            <el-table
                v-loading="tableLoading"
                element-loading-text="加载中"
                :data="tableData"
                fit
                stripe
                border
            >
                <template slot="empty">
                    <img src="@/assets/nopage.png" alt />
                    <p>暂无数据</p>
                </template>
                <el-table-column fixed type="index" label="序号" width="60"/>
                <el-table-column label="证书名称" prop="quaName" />
                <el-table-column label="证书编号" prop="quaCode" />
                <el-table-column label="发证日期" prop="issuDate" />
                <el-table-column label="截至日期" prop="endDate" />
                <el-table-column label="资质文件" prop="fileId" width="150">
                    <template slot-scope="scope">
                        <yl-upload
                            :fileId="scope.row.fileId"
                            readonly
                            v-if="scope.row.fileId"
                        >
                        </yl-upload>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!-- PDF预览 -->
        <el-dialog
            title="PDF预览"
            class="dd"
            :visible.sync="dialogVisible"
            width="70%"
            center
            >
            <iframe :src="pdfSrc" frameborder="0" style="width: 100%; height: 100%"></iframe>
        </el-dialog>
    </div>
</template>

<script>
import { getSplerInfo } from "@/api/supplierManage/index";
import ylUpload from "@/components/yl-upload";
    export default {
        components: { ylUpload },
        data() {
            return {
                pdfSrc: "",
                dialogVisible: false,
                infoForm:{},
                tableLoading: false,
                tableData: [],
                ppLoad: false,
                nnLoad: false,
            }
        },
        mounted () {
            this.getData();
        },
        methods: {
            getData(type) {
                this.tableLoading = true;
                getSplerInfo({splerId:this.$route.query.splerId}).then((res) => {
                    this.infoForm = res.data;
                    this.tableData = res.data.quaList;
                    this.tableLoading = false;
                })
                .catch((err) => {
                    this.tableLoading = false;
                });
            },
            // 预览文件
            dataURLtoBlob(e) {
                let bstr = atob(e);
                let n = bstr.length;
                let u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                } //确定解析格式
                let blob = new Blob([u8arr], { type: "application/pdf;chartset=UTF-8" });
                let url = window.URL.createObjectURL(blob);
                return url;
            },
            // 详情
            handleDetail(row){
                let file = {
                    id: row.fileId,
                };
                uploadCheck(file).then((res) => {
                    if (res.success == true) {
                        this.dialogVisible = true;
                        const a = this.dataURLtoBlob(res.data.fileContent);
                        this.pdfSrc = a;
                    }
                });
            },
        },
    }
</script>

<style lang="scss" scoped>

</style>