<template>
    <el-dialog v-model="props.modelValue" :title="tLang('product','产品信息')" @close="close" width="800">
        <el-descriptions :title="tLang('product','产品信息')" column="2">
            <el-descriptions-item :label="tLang('product','产品名称')">{{ props.info.name }}</el-descriptions-item>
            <el-descriptions-item :label="tLang('product','产品类型')">{{ props.info.type }}</el-descriptions-item>
            <el-descriptions-item :label="tLang('product','产品编码')">{{ props.info.code }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="" column="3" v-for="(zhen,index) in props.info.zhen" :key="index">
            <el-descriptions-item>{{ zhen.needle_num }}</el-descriptions-item>
            <el-descriptions-item :label="tLang('product','底线编码')">{{ zhen.bottomlineCode }}</el-descriptions-item>
            <el-descriptions-item :label="tLang('product','面线编码')">{{ zhen.surfacelineCode }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="" column="3"  v-for="(zhen,index) in props.info.zhen" :key="index">
            <el-descriptions-item >{{ zhen.needle_num + "表面张力" }}</el-descriptions-item>
            <el-descriptions-item :label="tLang('product','最小值')">{{ zhen.min }}</el-descriptions-item>
            <el-descriptions-item :label="tLang('product','最大值')">{{ zhen.max }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions :title="tLang('product','缝纫次数')" column="3">
            <div v-for="(working,index) in props.info.working">
            <el-descriptions-item >{{  working.step  }}</el-descriptions-item>
            <el-descriptions-item :label="tLang('product','最小针数')">{{ working.min }}</el-descriptions-item>
            <el-descriptions-item :label="tLang('product','最大针数')">{{ working.max }}</el-descriptions-item>
            </div>
        </el-descriptions>
        <el-descriptions title="" column="1">
            <el-descriptions-item :label="tLang('product','备注')">{{ props.info.remark }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="" column="">
            <el-descriptions-item :label="tLang('product','图片')">
                <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>
