<template>
    <layout-card>
        <div id="printContainer">
            <el-divider content-position="left">基本信息</el-divider>
            <el-descriptions :column="2" border>
                <el-descriptions-item label-class-name="width_200"  label="自编号">
                    {{ info.NUM }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="车牌号">
                    {{ info.PLATE_NUMBER }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="车架号">
                    {{ info.VIN }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="车身编号">
                    {{ info.VEHICLE_BODY_NUMBER }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="挂车类型">
                    {{ info.TRAILER_TYPE }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="营运证号">
                    {{ info.OPER_CERTIFICATE_NUM }}
                </el-descriptions-item>
                <!--<el-descriptions-item label-class-name="width_200"  label="运输企业">-->
                    <!--{{ info.TRANSPORT_ENTERPRISESNAME }}-->
                <!--</el-descriptions-item>-->
                <el-descriptions-item label-class-name="width_200"  label="归属部门">
                    {{ info.DEPARTMENT_NAME }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="车主/业户">
                    {{ info.CAR_OWNERS }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="车主电话">
                    {{ info.CAR_OWNERS_TEL }}
                </el-descriptions-item>

                <el-descriptions-item label-class-name="width_200"  label="联系人">
                    {{ info.CONTACTS }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="车主电话">
                    {{ info.CAR_OWNERS_TEL }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="联系电话">
                    {{ info.CONTACT_PHONE }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="初登日期">
                    {{ info.INITIAL_REGISTRATION_DATE }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="发证日期">
                    {{ info.CERTIFICATE_DATE }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="到期日期">
                    {{ info.DUE_DATE }}
                </el-descriptions-item>
            </el-descriptions>
            <el-divider content-position="left">详细信息</el-divider>
            <el-descriptions :column="2" border>
                <el-descriptions-item label-class-name="width_200"  label="挂车品牌">
                    {{ info.TRAILER_BRAND }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="挂车型号">
                    {{ info.TRAILER_MODEL }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="核定总质量">
                    {{ info.APPROVED_TOTAL_MASS }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="核定载质量">
                    {{ info.APPROVED_LOAD_CAPACITY }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="容积/体积">
                    {{ info.VOLUME }}
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="备注">
                    {{ info.NOTES }}
                </el-descriptions-item>
            </el-descriptions>
            <el-divider content-position="left">相关照片</el-divider>
            <el-descriptions :column="2" border>
                <el-descriptions-item label-class-name="width_200"  label="挂车照片">
                    <img
                            v-for="item in info.TRAILER_IMG"
                            :key="item.FILEPATH"
                            v-viewer
                            :src="item.url"
                            width="100"
                            height="100"
                            alt=""
                            class="ml-10"
                    />
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="行驶证照片">
                    <img
                            v-for="item in info.DRIVING_LICENSE_IMG"
                            :key="item.FILEPATH"
                            v-viewer
                            :src="item.url"
                            width="100"
                            height="100"
                            alt=""
                            class="ml-10"
                    />
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="运营证照片">
                    <img
                            v-for="item in info.OPER_CERTIFICATE_IMG"
                            :key="item.FILEPATH"
                            v-viewer
                            :src="item.url"
                            width="100"
                            height="100"
                            alt=""
                            class="ml-10"
                    />
                </el-descriptions-item>
                <el-descriptions-item label-class-name="width_200"  label="挂车资料">
                    <img
                            v-for="item in info.TRAILER_INFO"
                            :key="item.FILEPATH"
                            v-viewer
                            :src="item.url"
                            width="100"
                            height="100"
                            alt=""
                            class="ml-10"
                    />
                </el-descriptions-item>

            </el-descriptions>
        </div>
        <div class="mt-10 tc">
            <el-button v-print="'#printContainer'" type="primary">打印</el-button>
        </div>
        <div v-html="PRINT_STYLE" />
    </layout-card>
</template>

<script setup>
    import { ref } from "vue";
    import { getFreightTrailerView,getFreightTrailerCorpList1 } from "@/request/enterprise_management.js";
    import { useRoute } from "vue-router";
    import { addingPrefixToFile } from "@/assets/js/utils.js";
    const transportEnterprisesList = await getFreightTrailerCorpList1()
    const route = useRoute();
    const FREIGHTTRAILER_ID = route.query;
    const info = ref({});
    const fnGetData = async () => {
        if (!FREIGHTTRAILER_ID) return;
        const resData = await getFreightTrailerView(FREIGHTTRAILER_ID);
        info.value = resData.pd;
        for(let i=0;i<transportEnterprisesList.length;i++){
           const item = transportEnterprisesList[i]
           if(item.CORPINFO_ID === info.value.TRANSPORT_ENTERPRISES){
               info.value.TRANSPORT_ENTERPRISESNAME =  item.CORP_NAME
           }
        }
        info.value.TRAILER_IMG = addingPrefixToFile(
            resData.trailerImgs
        );
        info.value.DRIVING_LICENSE_IMG = addingPrefixToFile(
            resData.drivingLicenseImgs
        );
        info.value.OPER_CERTIFICATE_IMG = addingPrefixToFile(
            resData.operCertificateImgs
        );
        info.value.TRAILER_INFO = addingPrefixToFile(
            resData.trailerInfoImgs
        );

    };
    fnGetData();
</script>

<style lang="scss" scoped>
    .width_200{
        width: 200px;
    }
</style>
