<template>
    <div class="imagecard-container">
        <div class="title">{{ tLang('message', '设备视图') }}</div>
        <div class="content">
            <el-image style="width: 80%; height: 80%;max-width: 80%;max-height: 80%;" :src="fileUrl + props.data.file"
                fit="contain">
            </el-image>
            <div class="data" v-if="props.isRate">
                <div class="data-item" v-for="(item, index) in list" :key="index">{{ item.name }}：{{ item.value }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>

let fileUrl = import.meta.env.VITE_APP_BASE_API
const props = defineProps({
    isRate: {
        type: Boolean,
        default: false
    },
    data: {
        type: Object,
        default: () => {
            return {
                file: '',
                schedule:'0',
                fileName:''
            }
        }
    }
})

let list = computed(() => {
    return [
        { name: '花版名称', value: props.data.fileName },
        { name: '进度', value: props.data.schedule + '%' },
    ]
})
</script>

<style lang="scss" scoped>
.title {
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    color: #cfcfcf;

}

.content {
    width: 100%;
    height: calc(100% - 20px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.imagecard-container {
    width: 100%;
    height: 100%;

    .content {
        .data {
            width: 100%;
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .data-item {
                margin: 0 20px;
                font-size: 14px;
                color: #cfcfcf;
            }

        }
    }
}
</style>
