<template>
    <el-dialog v-model="props.modelValue" title="设备详情" @close="close" width="800">
        <el-descriptions title="" column="2">
            <el-descriptions-item label="产品名称">{{ props.info.productionName }}</el-descriptions-item>
            <el-descriptions-item label="产品编码">{{ props.info.productionCode }}</el-descriptions-item>
            <el-descriptions-item label="产品类型">{{ props.info.type }}</el-descriptions-item>

            <el-descriptions-item label="设备名称">{{ props.info.deviceName }}</el-descriptions-item>
            <el-descriptions-item label="设备编码">{{ props.info.deviceCode }}</el-descriptions-item>

            <el-descriptions-item label="员工姓名">{{ props.info.userName }}</el-descriptions-item>
            <el-descriptions-item label="员工编码">{{ props.info.userCode }}</el-descriptions-item>
            <el-descriptions-item label="目标产量">{{ props.info.planOutput }}</el-descriptions-item>
            <el-descriptions-item label="实时产量">{{ props.info.output }}</el-descriptions-item>

            <el-descriptions-item label="开始时间">{{ props.info.starttime }}</el-descriptions-item>
            <el-descriptions-item label="结束时间">{{ props.info.endtime }}</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>
