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

            <el-descriptions-item label="车间名称">{{ props.info.workShop }}</el-descriptions-item>
            <el-descriptions-item label="产线名称">{{ props.info.lineName }}</el-descriptions-item>

            <el-descriptions-item label="保养周期">{{ props.info.maintenance }}</el-descriptions-item>
            <el-descriptions-item label="针数">{{ props.info.needleNum }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="其他信息">
            <el-descriptions-item label="供货商名称">{{ props.info.supplier }}</el-descriptions-item>
            <el-descriptions-item label="联系人">{{ props.info.supplierContactPerson }}</el-descriptions-item>
            <el-descriptions-item label="电话">{{ props.info.contactPhone }}</el-descriptions-item>

            <el-descriptions-item label="生产厂家">{{ props.info.manufacturer }}</el-descriptions-item>
            <el-descriptions-item label="品牌">{{ props.info.brand }}</el-descriptions-item>
            <el-descriptions-item label="设备型号">{{ props.info.model }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="" column="1">
            <el-descriptions-item label="备注信息">{{ props.info.remark }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="" column="">
            <el-descriptions-item label="设备图片">
                <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-dialog>
</template>

<script setup>
import { ref } from "vue";
const emit = defineEmits();
const props = defineProps({
    modelValue: [String, Object, Array],
    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>
