<template>
    <!-- 小型弹窗，用于完成，删除，保存等操作 -->
    <el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
        :closeOnClickModal="false" @close="handleClose" :append-to-body="true">
        <div>
            <el-table :data="tableData" style="width: 100%" border header-align="center" max-height="600">
                <el-table-column prop="index" label="序号" width="80" align="center">
                    <template slot-scope="scope">
                        {{ scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column v-for="item in tableColumns" :key="item.prop" :prop="item.prop" :label="item.label"
                    center align="center">
                    <template slot-scope="scope">
                        <span v-if="item.prop === 'fileName'" class="file-name-link" @click="viewFile(scope.row)" style="color: #409EFF; cursor: pointer;">
                            {{ scope.row.fileName }}
                        </span>
                        <span v-else>
                            {{ scope.row[item.prop] }}
                        </span>
                    </template>
                </el-table-column>
                
            </el-table>
        </div>
        <!-- 预览文件 -->
        <ViewFile v-if="isViewflag" :rowData="row" :title="viewTitle" @closeDialog="closeDialog" @showColose="showColose" :width="600" />
    </el-dialog>
</template>
<script>
import _ from 'lodash'
import {
    getTransferReceiceFilesApi,
} from '@/api/filesTransfer/accept'
import ViewFile from '@/views/viewFile/viewFile.vue'
export default {
    name: "AcceptRecordList",
    props: ["width", "dataForm", "title", "disabled", "jumpType", "rowData"],
    dicts: ['data_class_type'],
    components: {
        ViewFile
    },
    data() {
        return {
            lDialog: this.width > 500 ? "w700" : "w500",
            dialogVisible: true,
            isDisabled: true,
            loading: null,
            tableData: [],
            tableColumns: [],
            maintenanceTitle: "",
            isflag: false,
            maintenanceRow: {},
            isViewflag: false,
            row: {},
            viewTitle: "",
        };
    },
    created() {
        this.initFormData();
    },
    methods: {
        // 预览文件
        viewFile(row) {
            
            this.viewTitle = "预览";
            this.row = row;
            this.isViewflag = true;
        },
        closeDialog() {
            this.isViewflag = false; 
        },
        
        
        /** 初始化表单数据 */
       async initFormData() {

            this.tableColumns = [];
            if (this.jumpType === 'list') {
                // 移交清单
                this.tableColumns = [
                    { prop: 'parParentName', label: '所属分类' },
                    { prop: 'parentName', label: '所属案卷' },
                    { prop: 'fileName', label: '文件名称' },
                ];
                
            } else {
                // 移交进度
                this.tableColumns = [
                    { prop: 'parParentName', label: '所属分类' },
                    { prop: 'parentName', label: '所属案卷' },
                    { prop: 'fileName', label: '文件名称' },
                    { prop: 'receiveStatus', label: '进度' },
                ];
                
            }

            const transferApplyId = this.rowData.id;
            const res = await getTransferReceiceFilesApi({ transferApplyId });
            // console.log(res);
            
            if (Array.isArray(res.data) && res.data.length > 0) {
                
                res.data.map(item => {
                    
                    const obj = {...item,receiveStatus:(item.receiveStatus ?? '0') === '0' ? '进行中' : '已完成'};
                    this.tableData.push(obj);
                })
            }
        },
        /*关闭弹窗 */
        handleClose() {
            this.dialogVisible = false;
            this.$emit("closeDialog");
            /* setTimeout(() => {
                this.dialogVisible = true;
            }); */
        },
        
    }
};
</script>
<style lang="scss" scoped>
.w700 ::v-deep .el-dialog {
    width: 700px;
}

.w500 ::v-deep .el-dialog {
    width: 500px;
}

.w500 ::v-deep .el-dialog__header,
.w700 ::v-deep .el-dialog__header {
    // background: #eeeeee;

    .el-dialog__title {
        font-size: 16px;
    }
}

.yxq .el-range-separator {
    margin-right: 7px !important;
}

.el-date-editor--daterange.el-input__inner {
    width: 260px;
}

.form-item {
    width: 100%;
}

.select-style {
    display: flex;
    justify-content: space-between;
}
</style>