<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="com-label" content-class-name="com-content">
                    {{ detailsItem.shortName }}
                </el-descriptions-item>
                <el-descriptions-item label="单位名称" label-class-name="com-label" content-class-name="com-content">
                    {{ detailsItem.companyName }}
                </el-descriptions-item>
                <el-descriptions-item label="单位负责人" label-class-name="com-label" content-class-name="com-content">
                    {{ detailsItem.leader }}
                </el-descriptions-item>
                <el-descriptions-item label="联系方式" label-class-name="com-label" content-class-name="com-content">
                    {{ detailsItem.leaderTel }}
                </el-descriptions-item>
                <el-descriptions-item label="法人姓名" label-class-name="com-label" content-class-name="com-content">
                    {{ detailsItem.legalPerson }}
                </el-descriptions-item>
                <el-descriptions-item label="法人联系方式" label-class-name="com-label" content-class-name="com-content">
                    {{ detailsItem.legalPersonTel }}
                </el-descriptions-item>
            </el-descriptions>
            <el-descriptions :column="1" border>
                <el-descriptions-item label="单位地址" label-class-name="com-label2" content-class-name="">
                    {{ detailsItem.address }}
                </el-descriptions-item>
                <el-descriptions-item :label="'运维名单' + detailsItem.personCnt + '人'" label-class-name="com-label2"
                    content-class-name="">
                    <template v-if="detailsItem.personInf !== null && detailsItem.personInf !== undefined">
                        <el-tag v-for="item in detailsItem.personInf.split(',')"
                            style="margin-right: 3px;margin-bottom: 3px;">{{
                                item.substring(item.lastIndexOf(":") + 1, item.length) }}</el-tag>
                    </template>
                </el-descriptions-item>
                <el-descriptions-item :label="'合同名单' + detailsItem.contractCnt + '个'" label-class-name="com-label2"
                    content-class-name="">
                    <template v-if="detailsItem.contractInf !== null && detailsItem.contractInf !== undefined">
                        <div v-for="item in detailsItem.contractInf.split(',')">
                            <el-tag style="margin-bottom: 3px;">
                                {{ item }}
                            </el-tag>
                        </div>
                    </template>
                </el-descriptions-item>
            </el-descriptions>
            <h2>资质信息</h2>
            <el-table :data="qualificationList" style="width: 100%">
                <el-table-column prop="qualif_name" label="资质名称"> </el-table-column>
                <el-table-column prop="qualif_level" label="资质等级" align="center" width="100"> </el-table-column>
                <el-table-column prop="person_cnt" label="资质绑定人数" align="center" width="100">
                    <template slot-scope="scope">
                        <div
                            v-if="scope.row.person_cnt === null || scope.row.person_cnt == undefined || scope.row.person_cnt == ''">
                            0</div>
                        <div v-else>{{ scope.row.person_cnt }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="person_inf " label="资质绑定人员">
                    <template slot-scope="scope"
                        v-if="scope.row.person_inf !== null && scope.row.person_inf !== undefined">
                        <el-tag style="margin-right: 3px;" v-for="item in scope.row.person_inf.split(',')">{{ item
                            }}</el-tag>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import { companyQualif } from "@/api/resource/company";
import { watch } from "vue-demi";
export default {
    props: {
        detailsShow: {
            type: Boolean
        },
        detailsItem: {
            type: Object,
        },
    },

    computed: {
        showWatcher: function () {
            // 在计算属性中可以监听到 props.count 的变化
            return this.detailsShow;
        }
    },
    watch: {
        showWatcher: function (newVal, oldVal) {
            if (newVal == true) {
                this.getCompanyQualif();
            }
        },
    },
    created() {
    },
    data() {
        return {
            qualificationList: [],
        }
    },
    methods: {
        getCompanyQualif() {
            companyQualif({ companyId: this.detailsItem.id }).then((res) => {
                this.qualificationList = res.data;
            })
        },
        handleClose() {
            this.$emit('isOpen', false)
        },
    },
}
</script>
<style>
.com-label {
    width: 200px;
}

.com-label2 {
    width: 150px;
}

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