<template>
    <div style="display: flex;justify-content: space-between;">
                <el-row>
                    <el-input v-model="productIdQuery" style="width: 196px; margin-right: 10px;" placeholder="成品号" />
                    <el-input v-model="boxNoQuery" style="width: 196px; margin-right: 10px;" placeholder="料盒号" />
                    <el-button type="primary" @click="init()">搜索</el-button>
                    <!-- <el-button type="warning" @click="reset()">重置</el-button> -->
                </el-row>
            </div>
    <el-table :data="datalist" stripe border v-loading="loading" class="table-class" max-height="550px"
        highlight-current-row :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }">
        <el-table-column prop="productId" label="成品号" fixed="left" min-width="120px" />
        <el-table-column prop="boxNo" label="料盒号" fixed="left" min-width="120px"
            show-overflow-tooltip />
        <el-table-column fixed="right" label="操作" width="120px">
            <template v-slot="scope">
                <el-button plain type="primary" @click="openPreview(scope.row)">预览</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 图片预览 -->
    <el-image-viewer v-if="showImagePreview" :zoom-rate="1.2" @close="closePreview" :url-list="imgPreviewList" />
</template>
<script setup>
import axios from 'axios'
// import store from '@/store'
import { errorBox } from '@/utils/myMessageBox.js'
</script>
<script>
export default {
    name: 'imageTable',
    data() {
        return {
            loading: true,
            datalist: [],
            showImagePreview: false,
            imgPreviewList: [],
            currentBase64FileData: {
                url: '',
                base64: '',
                name: ''
            },
            request: axios.create({
                baseURL: 'https://s4wwjasrsp01.ap.cat.com/wmsServer/test',
                timeout: 10000
            }),
            productIdQuery: '',
            boxNoQuery: ''
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        init() {
            this.loading = true
            const request = {
                productId: this.productIdQuery,
                boxNo: this.boxNoQuery,
                // userName: store.getters.getUserName
            }
            this.request({
                url: '/testRequestImage',
                method: 'post',
                data: request
            }).then(res => {
                const response = res.data
                if (response.code == 0) {
                    this.datalist = response.data
                } else {
                    errorBox(response.message)
                }
            }).catch(err => {
                console.log(err)
                errorBox('查询错误')
            })
            this.loading = false
        },
        openPreview(row) {
            this.currentBase64FileData.url = 'http://localhost:12315/image/' + row.imageName
            this.currentBase64FileData.base64 = 'data:image/png;base64,' + row.imageDetail
            this.currentBase64FileData.name = row.imageName
            this.showImagePreview = true
            // 下面数组里可以放一个url，如'https://raw.githubusercontent.com/JACK-ZHANG-coming/map-depot/master/2023image-20231120091054028.png'，我这里放的是一个base64数据，也可以用来显示图片
            this.imgPreviewList = [this.currentBase64FileData.base64]
            // this.imgPreviewList = [this.currentBase64FileData.url]
        },
        closePreview() {
            this.imgPreviewList = []
            this.showImagePreview = false
        }
    }
}
</script>
<style scoped></style>