<template>
    <div>
        <!-- 退料数量弹框页面 -->
        <el-dialog title="查看详情" :visible.sync="outerVisible" @before-close="onClose" width="70%">
            <!-- 查询表单 -->
            <!-- <el-form size="small" :model="queryParams" ref="queryFormRef">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item prop="keyword">
                            <el-input v-model="queryParams.keyword" placeholder="请输入关键字" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="18">
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="onHandleSearch">查询</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form> -->

            <!-- 列表数据 -->
            <el-table :data="tableList" border>
                <el-table-column align="center" label="序号" type="index" />
                <el-table-column
                    align="center"
                    :key="col.label"
                    :label="col.label"
                    :show-overflow-tooltip="col.show"
                    v-for="col in tableColumn"
                >
                    <template slot-scope="{ row }">
                        <template v-if="col.isSlot">
                            <div v-for="(img, index) in row.fileInfoList" :key="index">
                                <el-image
                                    v-if="img && img.url && !/\.(pdf|docx|doc)$/i.test(img.url)"
                                    :src="img.url"
                                    fit="cover"
                                    class="img-box"
                                    :preview-src-list="[img.url]"
                                />
                                <span v-else style="cursor: pointer; color: #409eff" @click="onHandleViewImg(img.url)">
                                    查看
                                </span>
                            </div>
                        </template>
                        <template v-else>
                            {{ row[col.prop] }}
                        </template>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import { getReturnNumDetailsApi } from '@/api/repair-testing/material-return'
export default {
    props: {
        // 外层 Dialog 的可见性
        visible: {
            type: Boolean,
            default: false
        },
        state: {
            type: Object,
            default() {
                return {
                    id: '',
                    typeId: '',
                    maId: ''
                }
            }
        }
    },
    data() {
        return {
            previewSrcList: [], // 预览时的数据源
            queryParams: {
                keyword: ''
            },
            tableList: [],
            tableColumn: [
                { label: '机具名称', prop: 'typeName', show: true },
                { label: '规格型号', prop: 'typeModelName', show: true },
                { label: '退料总数', prop: 'backNum', show: true },
                { label: '合格数量', prop: 'passNum', show: true },
                { label: '不合格数量', prop: 'unPassNum', show: true },
                { label: '不合格原因', prop: 'unPassReason', show: true },
                { label: '不合格附件', prop: 'fileInfoList', isSlot: true, show: false }
            ]
        }
    },
    computed: {
        outerVisible: {
            set(val) {
                this.$emit('update:visible', val)
            },
            get() {
                return this.visible
            }
        }
    },
    methods: {
        // 获取详情
        async getReturnNumDetailsFun() {
            console.log('🚀 ~ getReturnNumDetailsFun ~ this.state:', this.state)
            const res = await getReturnNumDetailsApi(this.state)
            this.tableList = [res.data]
        },
        // 查询
        onHandleSearch() {
            console.log('查询')
        },
        // 关闭外侧弹框
        onClose() {
            this.$emit('update:visible', false)
        },
        // 点击图片
        onHandleViewImg(url) {
            window.open(url)
        }
    },
    mounted() {
        this.getReturnNumDetailsFun()
    }
}
</script>

<style scoped>
.img-box {
    width: 30px;
    height: 30px;
    margin-right: 6px;
    cursor: pointer;
}
</style>
