<template>
    <el-dialog v-model="props.modelValue" :title="tLang('device','设备详情')" @close="close" width="800">
        <el-descriptions :title="tLang('device','设备信息')">
            <el-descriptions-item :label="tLang('device','设备名称')">{{ props.info.name }}</el-descriptions-item>
            <el-descriptions-item :label="tLang('device','机架号')">{{ props.info.label }}</el-descriptions-item>
            <el-descriptions-item :label="tLang('device','设备编码')">{{ props.info.code }}</el-descriptions-item>
            <el-descriptions-item :label="tLang('device','设备类型')">{{ props.info.type }}</el-descriptions-item>

            <el-descriptions-item :label="tLang('device','设备型号')">{{ props.info.model }}</el-descriptions-item>
            <el-descriptions-item :label="tLang('device','设备版本')">{{ props.info.version }}</el-descriptions-item>
            <el-descriptions-item :label="tLang('device','保养周期')">{{ props.info.maintenance }}</el-descriptions-item>

            <el-descriptions-item :label="tLang('device','机头数')">{{ props.info.machineHead }}</el-descriptions-item>
            <el-descriptions-item :label="tLang('device','生产日期')">{{ props.info.manufactureDate }}</el-descriptions-item>
            <el-descriptions-item :label="tLang('device','投产日期')">{{ props.info.commissionDate }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions :title="tLang('device','配置信息')">
            <el-descriptions-item :label="item.name"  v-for="(item,index) in props.info.config" :key="item.code">{{ item.value }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions :title="tLang('device','其他信息')">
            <el-descriptions-item :label="tLang('device','生产厂家')">{{ props.info.manufacturer }}</el-descriptions-item>
            <el-descriptions-item :label="tLang('device','品牌')">{{ props.info.brand }}</el-descriptions-item>
            <el-descriptions-item :label="tLang('device','厂家电话')">{{ props.info.contactPhone }}</el-descriptions-item>

            <el-descriptions-item :label="tLang('device','供货商名称')">{{ props.info.supplier }}</el-descriptions-item>
            <el-descriptions-item :label="tLang('device','联系人')">{{ props.info.supplierContactPerson }}</el-descriptions-item>
            <el-descriptions-item :label="tLang('device','供应商电话')">{{ props.info.supplierPhoneNumber }}</el-descriptions-item>

            
            
            <el-descriptions-item :label="tLang('device','设备型号')">{{ props.info.model }}</el-descriptions-item>
            <el-descriptions-item :label="tLang('device','设备版本')">{{ props.info.version }}</el-descriptions-item>
            <el-descriptions-item :label="tLang('device','设备位置')">{{ props.info.deviceLocation }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="" column="1">
            <el-descriptions-item :label="tLang('device','备注信息')">{{ props.info.remark }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="" column="">
            <el-descriptions-item :label="tLang('device','设备图片')">
                <div v-if="props.info.file && props.info.file.length > 0" style="width: 100%;display: flex;flex-direction: row;justify-content: center;">
                    <el-image v-for="(item, index) in props.info?.file.split(',')" :key="index" :src="baseUrl + item"
                        style="width: 100px; height: 100px; margin-right: 10px; margin-bottom: 10px"
                        @click="dialogImageUrl = item; dialogVisible = true"></el-image>
                </div>
            </el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="" column="">
            <el-descriptions-item :label="tLang('device','保养手册')">
                <div v-if="props.info.maintenanceManual && props.info.maintenanceManual.length > 0" style="width: 100%;display: flex;flex-direction: row;justify-content: center;">
                    <el-link type="primary" download :href="baseUrl + item"  v-for="(item, index) in props.info?.maintenanceManual.split(',')" style=" margin-right: 20px; margin-bottom: 10px" :key="index">{{ item.split("/").slice(-1)[0] }}</el-link>
                    
                </div>
            </el-descriptions-item>
        </el-descriptions>
    </el-dialog>
</template>

<script setup>
import { ref } from "vue";
const emit = defineEmits(['update']);
const props = defineProps({
    modelValue: Boolean,
    info: {
        type: Object,
        default: () => ({}),
    },
});
const baseUrl = import.meta.env.VITE_APP_BASE_API;
let column = ref(2);
function close() {
    emit("update:modelValue", false);
}
</script>

<style lang="scss" scoped></style>
