<template>
    <el-container id="recycle">
        <el-header :height="headerHeight">
            <el-row :style="{'line-height': headerHeight}">
                <el-col :span="24">
                    <div style="display:inline-block;float:left;width: 150px;">
                        <div class="text-general-color" style="padding-left:20px;text-align: left;vertical-align: middle;display: table-cell;width: 100%;height: 36px;">
                            共有
                            <span style="color:red;">{{totalCount}}</span>
                            条数据
                        </div>
                    </div>
                    <div style="display:inline-block;float:right;width:220px;padding-right: 20px;">
                        <el-input
                                placeholder="搜索"
                                prefix-icon="el-icon-search"
                                v-model="searchInput"
                                size="small"
                                @input="searchProcessList"
                                clearable>
                        </el-input>
                    </div>
                </el-col>
            </el-row>
        </el-header>
        <el-main>
            <el-table
                id="table"
                ref="table"
                :data="tableData"
                size="medium"
                :height="tableHeight"
                :cell-class-name="cellClass"
                @cell-mouse-enter="enterRow"
                @cell-mouse-leave="leaveRow"
                @selection-change="handleSelectionChange">
                <el-table-column
                    type="selection"
                    width="66"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="文件名称"
                    min-width="250">
                </el-table-column>
                <el-table-column
                    prop="user"
                    label="操作用户"
                    width="200">
                </el-table-column>
                <el-table-column
                    prop="date"
                    label="删除时间"
                    width="170">
                </el-table-column>
                <el-table-column
                    prop="operate"
                    label="操作"
                    width="200"
                    align="center">
                    <template slot-scope="scope">
                        <div class="operate-icon-display" :ref="scope.row.id">
                            <el-tooltip class="item" content="还原" placement="bottom" :hide-after=2000>
                                <i class="awsui-iconfont" style="cursor: pointer;" @click="recoverFiles(scope.row.id)">&#59130;</i>
                            </el-tooltip>
                            <el-tooltip class="item" content="删除" placement="bottom" :hide-after=2000>
                                <i class="awsui-iconfont" style="cursor: pointer;" @click="removeFiles(scope.row.id)">&#58918;</i>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer v-show="showFooter" :height="footerHeight">
            <div>
                <div style="padding: 8px;">
                    <awsui-button style="width: 100px;" class="button-general-color" type="primary" @click="recoverFiles()">还原</awsui-button>
                    <awsui-button style="width: 100px;" class="button-general-color-reverse2" plain @click="removeFiles()">删除</awsui-button>
                    <awsui-button style="width: 100px;" class="button-general-color-reverse3" plain @click="closeFooter">取消</awsui-button>
                </div>
            </div>
        </el-footer>
    </el-container>
</template>

<script>
    import awsuiAxios from "../../awsuiAxios";
    import {closest} from "../../api/commonFun";

    export default {
        name: "Recycle",
        data() {
            return {
                headerHeight: '40px',
                tableHeight: parseInt(this.$store.getters.getTopMainHeightFn) - 40 + 'px',
                footerHeight: '45px',
                totalCount: 0,
                showFooter: false,
                searchInput: '',
                multipleSelection: [],
                tableData: [],
                // 分页
                totalCount : '?',
                currentPage: 0,
                pageStep: 0,
                rowHeight: 45
            }
        },
        mounted(){
            if (this.currentPage == 0) {
                this.searchProcessList();
            }
            this.scorllBottomEvent();
        },
        methods: {
            initPageCount() {// 初始化页面总条数，页码等
                const that = this;
                const params = {
                    url:'jd',
                    data:{
                        cmd: 'com.actionsoft.apps.coe.pal_recycle_header_query',
                        wsId: this.$store.getters.getWsIdFn,
                        teamId: this.$store.getters.getTeamIdFn,
                        searchInput: (this.searchInput ? this.searchInput.trim() : '')
                    }
                };
                awsuiAxios.post(params).then(function (ro) {// 查询数据总条数
                    if (ro.result == 'ok') {
                        that.totalCount = ro.data;
                        // 页码及每页计算
                        that.currentPage = 0;
                        that.pageStep = Math.ceil(parseInt(that.tableHeight)/that.rowHeight) + 5;
                        that.loadData();
                    } else {
                        // alert('请求响应错误');
                        // debugger;
                    }
                }).catch(error=>{
                    console.log(error);
                })
            },
            loadData() {// 表格数据加载
                const that = this;
                if(that.currentPage < Math.ceil(that.totalCount / that.pageStep)) {//当前页数小于总页数就请求
                    const params = {
                        url:'jd',
                        data:{
                            cmd: 'com.actionsoft.apps.coe.pal_recycle_data_query',
                            wsId: this.$store.getters.getWsIdFn,
                            teamId: this.$store.getters.getTeamIdFn,
                            currentPage: that.currentPage,
                            pageStep: that.pageStep,
                            searchInput: (this.searchInput ? this.searchInput.trim() : '')
                        }
                    };
                    awsuiAxios.post(params).then(function (ro) {// 查询数据总条数
                        if (ro.result == 'ok') {
                            let roData = ro.data;
                            for (let i = 0; i < roData.length; i++) {
                                roData[i].rowChecked = false;
                            }
                            that.tableData = that.tableData.concat(roData);
                            that.currentPage++;//当前页数自增

                        }
                    }).catch(error=>{
                        console.log(error);
                    })
                }
            },
            searchProcessList() {// 搜索查询
                this.$refs.table.bodyWrapper.scrollTop = 0;
                this.tableData = [];
                this.multipleSelection = [];
                this.initPageCount();
            },
            initTableHeight() {// 初始化表格高度
              if (this.showFooter) {
                  this.tableHeight = parseInt(this.$store.getters.getTopMainHeightFn) - parseInt(this.headerHeight) - parseInt(this.footerHeight) + 'px';
              } else {
                  this.tableHeight = parseInt(this.$store.getters.getTopMainHeightFn) - parseInt(this.headerHeight) + 'px';
              }
            },
            handleSelectionChange(val) {
                // 重新记录多选结果
                this.multipleSelection = [];
                for (let i = 0; i < val.length; i++) {
                    this.multipleSelection.push(val[i].id);
                }
                // 处理多选框的选中、显示、隐藏等
                if (val.length > 0) {
                    const tmpArr = [];
                    for (let i = 0; i < val.length; i++) {
                        const data = val[i];
                        tmpArr.push(data.id);
                    }
                    for (let i = 0; i < this.tableData.length; i++) {
                        const id = this.tableData[i].id;
                        if (tmpArr.indexOf(id) == -1) {
                            this.tableData[i].rowChecked = false;
                            this.hideRowCheckbox(this.$refs[id]);
                        } else {
                            this.tableData[i].rowChecked = true;
                            this.showRowCheckbox(this.$refs[id]);
                        }
                    }
                    this.showFooter = true;
                } else {// 全部取消
                    for (let i = 0; i < this.tableData.length; i++) {
                        this.tableData[i].rowChecked = false;
                        this.hideRowCheckbox(this.$refs[this.tableData[i].id]);
                    }
                    this.showFooter = false;
                }
                this.initTableHeight();
            },
            cellClass(row){
                if(!row.row.rowChecked && row.columnIndex === 0){
                    return "row-checkbox-hide"
                }
            },
            hideRowCheckbox(rowTdDom) {// 控制表格该行显示多选框
                const rowTr = closest(rowTdDom, 'TR');
                const firstTd = rowTr.firstChild;
                firstTd.classList.add("row-checkbox-hide");
            },
            showRowCheckbox(rowTdDom) {// 控制表格该行显示多选框
                const rowTr = closest(rowTdDom, 'TR');
                const firstTd = rowTr.firstChild;
                firstTd.classList.remove("row-checkbox-hide");
            },
            enterRow(row, column, cell, event) {// 鼠标进入行事件
                const rowTr = closest(cell, 'TR');
                const firstTd = rowTr.firstChild;
                firstTd.classList.remove("row-checkbox-hide");
            },
            leaveRow(row, column, cell, event) {// 鼠标离开行事件
                if (!row.rowChecked) {
                    const rowTr = closest(cell, 'TR');
                    const firstTd = rowTr.firstChild;
                    firstTd.classList.add("row-checkbox-hide");
                } else {
                    const rowTr = closest(cell, 'TR');
                    const firstTd = rowTr.firstChild;
                    firstTd.classList.remove("row-checkbox-hide");
                }
            },
            closeFooter() {
                // 取消全部选择，会自动执行handleSelectionChange进行底部栏关闭
                this.$refs.table.clearSelection();
            },
            recoverFiles(id) {// 还原
                const that = this;
                that.$confirm('确定要还原吗？', '提示', {
                    confirmButtonText: '确定',
                    confirmButtonClass: 'button-general-color',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let removeIds = [];
                    if (id) {// 单个文件还原
                        removeIds.push("'" + id + "'");
                    } else {// 多个文件还原
                        for (let i = 0; i < that.multipleSelection.length; i++) {
                            removeIds.push("'" + that.multipleSelection[i] + "'");
                        }
                    }
                    const params = {
                        url:'jd',
                        data:{
                            cmd: 'com.actionsoft.apps.coe.pal_recycle_restore',
                            removeIds: removeIds.join(',')
                        }
                    };
                    // 查询数据
                    awsuiAxios.post(params).then(function (ro) {
                        if(ro.result == 'ok') {
                            that.$message({
                                message: '还原成功',
                                type: 'success'
                            });
                            that.searchProcessList();
                        } else {
                            that.$message(ro.msg);
                        }
                    }).catch(error=>{
                        console.log(error);
                    })
                }).catch(() => {
                });
            },
            removeFiles(id) {// 删除
                const that = this;
                that.$confirm('回收站中的数据删除后无法恢复，确定要删除吗？', '提示', {
                    confirmButtonText: '确定',
                    confirmButtonClass: 'button-general-color',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let removeIds = [];
                    if (id) {// 单个文件删除
                        removeIds.push("'" + id + "'");
                    } else {// 多个文件删除
                        for (let i = 0; i < that.multipleSelection.length; i++) {
                            removeIds.push("'" + that.multipleSelection[i] + "'");
                        }
                    }
                    const params = {
                        url:'jd',
                        data:{
                            cmd: 'com.actionsoft.apps.coe.pal_recycle_delete',
                            removeIds: removeIds.join(',')
                        }
                    };
                    // 查询数据
                    awsuiAxios.post(params).then(function (ro) {
                        if(ro.result == 'ok') {
                            that.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            that.searchProcessList();
                        } else {
                            that.$message(ro.msg);
                        }
                    }).catch(error=>{
                        console.log(error);
                    })
                }).catch(() => {
                });
            },
            scorllBottomEvent() {// 滚动到底部懒加载数据
                const that = this;
                let dom = document.querySelector(".el-table__body-wrapper");
                dom.addEventListener("scroll", function() {
                    const scrollDistance =dom.scrollHeight - dom.scrollTop - dom.clientHeight;
                    if(scrollDistance <=0){//等于0证明已经到底，可以请求接口
                        that.loadData();
                    }
                })
            }

        },
        computed: {
            listenTopMainHeight() {
                return this.$store.getters.getTopMainHeightFn;
            }
        },
        watch: {
            listenTopMainHeight: function (newd, old) {
                this.tableHeight = (parseInt(newd)) - parseInt(this.headerHeight) + 'px';
                this.searchProcessList();// 窗口大小变化之后，重新执行搜索
            }
        }
    }
</script>

<style scoped>
    #recycle >>> .el-main {
        padding: 0px 20px;
    }
    #table >>> .item {
        margin-left: 15px;
        margin-right: 15px;
    }
    #table >>> .el-table__row .operate-icon-display{
        display: none;
    }
    #table >>> .el-table__row:hover .operate-icon-display{
        display: inline-block;
    }
    #table >>> .row-checkbox-hide .el-checkbox__input {
        display: none
    }
</style>