<template>
    <div>
        <el-dialog title="详情" :visible.sync="detailsShow" width="1200px" append-to-body :before-close="handleClose">
            <el-descriptions :column="2" border>
                <el-descriptions-item label="合同简称" label-class-name="my-label" content-class-name="my-content">
                    {{ detailsItem.shortName }}
                </el-descriptions-item>
                <el-descriptions-item label="合同名称" label-class-name="my-label" content-class-name="my-content">
                    {{ detailsItem.contractName }}
                </el-descriptions-item>
                <el-descriptions-item label="合同状态" label-class-name="my-label" content-class-name="my-content">
                    <dict-tag :options="dict.type.ddic_contract_status" :value="detailsItem.status" />
                </el-descriptions-item>
                <el-descriptions-item label="合同分类" label-class-name="my-label" content-class-name="my-content">
                    <dict-tag :options="dict.type.ddic_contract_class" :value="detailsItem.contractClass" />
                </el-descriptions-item>
                <el-descriptions-item label="前序合同">{{ detailsItem.preorderShortName }}</el-descriptions-item>
                <el-descriptions-item label="甲方单位" label-class-name="my-label">
                    {{ detailsItem.partyACompanyName }}
                </el-descriptions-item>
                <el-descriptions-item label="甲方业务处室">{{ detailsItem.deptBizName }}</el-descriptions-item>
                <el-descriptions-item label="甲方技术处室">{{ detailsItem.deptTechName }}</el-descriptions-item>
                <el-descriptions-item label="甲方负责组" label-class-name="my-label" content-class-name="my-content">
                    {{ detailsItem.partyAGroupName }}
                </el-descriptions-item>
                <el-descriptions-item label="甲方负责人">{{ detailsItem.acompanyLeader }}</el-descriptions-item>
                <el-descriptions-item label="乙方单位">{{ detailsItem.bcompanyName }}</el-descriptions-item>
                <el-descriptions-item label="乙方负责人">{{ detailsItem.bcompanyLeader }}</el-descriptions-item>
                <el-descriptions-item label="乙方B岗负责人">{{ detailsItem.partyBCompanyLeader2Name }}</el-descriptions-item>
                <el-descriptions-item label="合同编号">{{ detailsItem.number }}</el-descriptions-item>
                <el-descriptions-item label="开始日期">{{ parseTime(detailsItem.beginDate, '{y}-{m}-{d}') }}
                </el-descriptions-item>
                <el-descriptions-item label="截止日期">{{ parseTime(detailsItem.endDate, '{y}-{m}-{d}') }}
                </el-descriptions-item>
                <el-descriptions-item label="合同人数">{{ detailsItem.peopleNum }}</el-descriptions-item>
                <el-descriptions-item label="运维人员人数">{{ detailsItem.personCnt }}</el-descriptions-item>
                <el-descriptions-item label="合同金额">{{ detailsItem.amount }}</el-descriptions-item>
                <el-descriptions-item label="驻场合同金额">{{ detailsItem.onSiteAmount }}</el-descriptions-item>
                <el-descriptions-item label="运维人员">
                    <template v-if="detailsItem.personInf !== null && detailsItem.personInf !== undefined">
                        <el-tag style="margin-right: 3px;" v-for="item in detailsItem.personInf.split(',')">{{ item
                            }}</el-tag>
                    </template>
                </el-descriptions-item>
            </el-descriptions>
            <h2>资质信息</h2>
            <el-table :data="contractQualificationList" style="width: 100%">
                <el-table-column prop="contractShortName" label="合同简称"> </el-table-column>
                <el-table-column prop="qualifName" label="资质名称"> </el-table-column>
                <el-table-column prop="levelName" label="资质等级" align="center" width="100"> </el-table-column>
                <el-table-column prop="personNum" label="资质人数要求" align="center" width="100"> </el-table-column>
                <el-table-column prop="qualifPersonCnt" label="资质绑定人数" align="center" width="100">
                    <template slot-scope="scope">
                        <div
                            v-if="scope.row.qualifPersonCnt === null || scope.row.qualifPersonCnt == undefined || scope.row.qualifPersonCnt == ''">
                            0</div>
                        <div v-else>{{ scope.row.qualifPersonCnt }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="qualifPersonInf " label="资质绑定人员">
                    <template slot-scope="scope"
                        v-if="scope.row.qualifPersonInf !== null && scope.row.qualifPersonInf !== undefined">
                        <el-tag style="margin-right: 3px;" v-for="item in scope.row.qualifPersonInf.split(',')">{{ item
                            }}</el-tag>
                    </template>
                </el-table-column>
            </el-table>

            <h2>附件信息</h2>
            <div v-if="filebox">
                <h3 v-for="item in attachmentData.fileType" :key="item.dictValue">
                    <span style="margin-right: 5px;">{{ item.dictLabel }}</span>
                    <el-tag type="warning" v-if="item.fileItems.length == 0">暂未上传</el-tag>
                    <div v-for="itemF in item.fileItems">
                        <el-table :data="itemF" style="width: 100%;margin-top: 5px;">
                            <el-table-column prop="attFileName" label="文件名" min-width="300"></el-table-column>
                            <el-table-column prop="attStatus" label="状态" align="center">
                                <template slot-scope="scope">
                                    <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.attStatus" />
                                </template>
                            </el-table-column>
                            <el-table-column prop="attFileSuffix" label="文件类型"></el-table-column>
                            <el-table-column prop="createTime" label="上传日期" min-width="120"></el-table-column>
                            <el-table-column prop="describes" label="描述"></el-table-column>
                            <el-table-column label="操作" align="center" class-name="small-padding fixed-width"
                                width="200" fixed="right">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="text" icon="el-icon-view"
                                        v-hasPermi="['resource:attachment:preview']"
                                        @click="openPreview(scope.row.id)">预览</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </h3>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { getFilePreview } from "@/api/resource/contract";
export default {
    dicts: ['ddic_contract_status', 'ddic_contract_type', 'ddic_contract_class', 'sys_normal_disable', 'ddic_relation_type'],
    props: {
        detailsShow: {
            type: Boolean
        },
        detailsItem: {
            type: Object,
        },
        contractQualificationList: {
            type: Array,
        },
        filebox: {
            type: Boolean
        },
        attachmentData: {
            type: Object,
        },
    },
    created() {
    },
    data() {
        return {
            newDetailsShow: this.detailsShow
        }
    },
    methods: {
        handleClose() {
            this.$emit('isOpen', false)
            this.$emit('isfileboxShow', false)
        },
        // 预览
        openPreview(id) {
            getFilePreview({ id: id }).then((res) => {
                this.pdfUrl = window.URL.createObjectURL(new Blob([res], { type: 'application/pdf' }));
                window.open(this.pdfUrl);
            })
        },
    },
}
</script>
<style>
.my-label {
    width: 175px;
}

.my-content {
    width: 600px;
}
</style>