<template>
    <ap-container>
        <ap-header margin="1111">
            <el-form ref="searchForm" :model="searchForm" :rules="searchFormRules"
                     :inline="true" class="layout-header-form" @submit.native.prevent="searchEvent">
                <el-form-item label="搜索:" class="layout-header-form-item" prop="likeStr">
                    <el-input v-model="searchForm.likeStr" placeholder="名称"></el-input>
                </el-form-item>
            </el-form>
            <el-button type="primary" @click="searchEvent">查询</el-button>
        </ap-header>
        <ap-main margin="0111">
            <ap-table ref="tDocHistoryRef" :options.sync="docHistoryOpt">
                <template #operate="slotProps">
                    <div class="ap-tag" @click="showDetail(slotProps.rowData.fdId)">文档预览</div>
                </template>
            </ap-table>
        </ap-main>
        <el-dialog
            title="文档预览"
            :visible.sync="showDialog" style="height: 100%">
            <ap-doc v-model="docText" style="height: 400px;overflow: scroll;">

            </ap-doc>
        </el-dialog>
    </ap-container>
</template>

<script>
export default {
    name: 'AbapDocHistory',
    data() {
        let columns = [
            {
                prop: 'fdTypeId',
                label: '文档类型Id',
                type: 'input',
                width: '250px'
            } , {
                prop: 'fdName',
                label: '文档名称',
                type: 'input'
            }, {
                prop: 'fdDate',
                label: '文档更新时间',
                type: 'datePicker',
                align:"center",
                datePickerFormat: 'yyyy-MM-dd HH:mm',
                width: '130px'
            }, {
                prop: 'fdBackupDate',
                label: '备份时间',
                type: 'datePicker',
                datePickerFormat: 'yyyy-MM-dd HH:mm',
                align:"center",
                width: '130px'
            } , {
                prop: 'fdName',
                label: '检查信息',
                type: 'input',
                html: (value, row) => {
                    if (row.currentName == null) {
                        return `<div class="ap-color-red">当前文档已删除</div>`;
                    }
                    if (row.currentName != row.fdName) {
                        return `<div class="ap-color-red">最新文档名称：${row.currentName}</div>`;
                    }
                    return `<div class="ap-color-green">正常</div>`;
                }
            }, {
                prop: 'operate',
                label: '操作',
                type: 'slot',
                slot: "operate",
                align:"center",
                width: '120px',
            }
        ];
        let tableOpt = {
            title: "SAP文档历史表",
            columns: columns,
            dataUrl: "/apd/abap/TAbapDocHistory/getTAbapDocHistoryGridList",
            toolbarBtn: [{btnType: "primary", text: "备份文档", icon: "el-icon-transfer", onClick: this.backupDoc}, "refresh"],
            initData: true, // 默认false
            showSelection: false,
            params: () => {
                return {
                    likeStr: this.searchForm.likeStr
                }
            }
        };
        return {
            docHistoryOpt: tableOpt,
            searchForm: {
                likeStr: ""
            },
            searchFormRules: {
                likeStr: [{min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur'}]
            },
            showDialog: false,
            docText: ""
        }
    },
    methods: {
        // 查询
        searchEvent() {
            // 表单rules认证
            this.$refs.searchForm.validate((valid) => {
                if (!valid) {
                    this.$message.error('搜索条件格式不正确！');
                    return false;
                }
                this.$refs.tDocHistoryRef.refresh();
            });
        },
        backupDoc() {
            this.$message.warning("开始备份...");
            this.$request({
                url: "/apd/abap/TAbapDocHistory/backupAbapDoc",
                method: 'post',
                data: {}
            }).then(response => {
                this.$message.success(response.data);
                this.$refs.tDocHistoryRef.refresh();
            })
        },
        showDetail(id) {
            this.showDialog = true;
            this.docText = "...";
            this.$request({
                url: "/apd/abap/TAbapDocHistory/getTAbapDocHistoryByFdId",
                method: 'post',
                data: {
                    fdId: id
                }
            }).then(response => {
                this.docText = response.data.fdText;
            })
        }
    }
}
</script>

<style scoped>
</style>
