<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-column label="操作" width="100" align="center">
                    <template slot-scope="scope">
                        <el-button v-if="jumpType === 'list' && scope.row.transferStatus === '进行中'" hasPermi="['record:file:update']" plain
                            type="primary" size="mini" @click="handleMaintenance(scope.row)">维护</el-button>
                        <el-button v-if="jumpType === 'progress' && scope.row.transferStatus === '进行中'" hasPermi="['record:file:transfer']" plain
                            type="primary" size="mini" @click="transfer(scope.row)">移交</el-button>
                    </template>

                </el-table-column>
            </el-table>
        </div>
        <!-- 预览文件 -->
        <ViewFile v-if="isViewflag" :rowData="row" :title="viewTitle" @closeDialog="closeDialog2" :width="600" />
        <Maintenance v-if="isflag" :rowData="maintenanceRow" :title="maintenanceTitle" @closeDialog="closeDialog"
            :dataForm="maintenanceRow" :width="600" @handleQuery="handleQuery" />
    </el-dialog>
</template>
<script>
import _ from 'lodash'
import {
    getTransferRecordFilesApi,
    updateTransferRecordFilesStatusApi
} from '@/api/filesTransfer/record'
import Maintenance from './maintenance.vue';
import ViewFile from '@/views/viewFile/viewFile.vue'
export default {
    name: "RecordList",
    props: ["width", "dataForm", "title", "disabled", "jumpType", "rowData"],
    dicts: ['data_class_type'],
    components: {
        Maintenance,
        ViewFile
    },
    data() {
        return {
            lDialog: this.width > 500 ? "w700" : "w500",
            dialogVisible: true,
            isDisabled: true,
            loading: null,
            tableData: [],
            tableColumns: [],
            maintenanceTitle: "",
            isflag: false,
            maintenanceRow: {},
            getTransferRecordFilesApi,
            isViewflag: false,
            row: {},
            viewTitle: "",
        };
    },
    created() {
        this.initFormData();
    },
    methods: {
        // 预览文件
        viewFile(row) {
            // console.log(row);
            
            this.viewTitle = "预览";
            this.row = row;
            this.isViewflag = true;
        },
        closeDialog2() {
            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: 'transferStatus', label: '进度' },
                ];
            }
            const transferApplyId = this.rowData.id;
            const res = await getTransferRecordFilesApi({ transferApplyId });
            // console.log(res);
            
            if (Array.isArray(res.data) && res.data.length > 0) {
                
                res.data.map(item => {
                    
                    const obj = {...item,transferStatus:(item.transferStatus ?? '0') === '0' ? '进行中' : '已完成'};
                    this.tableData.push(obj);
                })
            }

            
        },
        closeDialog() {
            this.isflag = false;
        },
        showColose() {
            this.isflag = false;
        },
        /*关闭弹窗 */
        handleClose() {
            this.dialogVisible = false;
            this.$emit("closeDialog");
            /* setTimeout(() => {
                this.dialogVisible = true;
            }); */
        },

        /*维护*/
        handleMaintenance(row) {
            this.maintenanceTitle = "维护";
            this.maintenanceRow = row;
            this.isflag = true;
        },
        /*移交*/
        transfer(row) {
            this.$modal.confirm(`是否确认移交文件名称为"${row.fileName}"的数据项？`).then(() => {
                // 显示加载遮罩
                this.$modal.loading("正在移交，请稍候...");
                const transferApplyId = this.rowData.id;
                const id = row.fileId;
                const transferStatus = '1';
                updateTransferRecordFilesStatusApi({ transferApplyId,id,transferStatus }).then(res => {
                    this.$modal.closeLoading();
                    if (res.code === 200) {
                        this.$modal.msgSuccess(res.msg);
                        this.handleQuery();
                        this.$emit("handleQuery");
                    } else {
                        this.$modal.msgError(res.msg);
                    }
                }).catch(error => {
                    this.$modal.closeLoading();
                    this.$modal.msgError(error);
                });
            }).catch(() => {
                // 用户取消删除，不需要处理
            });
        },
        /* 刷新数据 */
        async handleQuery() {
            this.tableData = [];
            const transferApplyId = this.rowData.id;
            const res = await getTransferRecordFilesApi({ transferApplyId });

            if (Array.isArray(res.data) && res.data.length > 0) {
                res.data.map(item => {
                    
                    const obj = {...item,transferStatus:(item.transferStatus ?? '0') === '0' ? '进行中' : '已完成'};
                    this.tableData.push(obj);
                })
            }
        }
    }
};
</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>