<template>
    <div id="fxbg">
        <div class="top-div">
            <div class="button-search" @click="queryData()">搜索</div>
            <el-input v-model="bgName" placeholder="请输入名称" clearable></el-input>
            <el-date-picker v-model="time" class="public-range" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right">
            </el-date-picker>

        </div>
        <div class="bottom-div">
            <div class="table-div">
                <el-table :data="tableData" height="100%" border style="width: 100%">
                    <el-table-column prop="name" label="名称" align="center" show-overflow-tooltip> </el-table-column>
                    <el-table-column prop="description" label="描述" align="center" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="createTime" label="发送时间" align="center"> </el-table-column>
                    <el-table-column prop="type" label="模板" align="center"> </el-table-column>
                    <el-table-column prop="cz" label="操作" width="100" align="center">
                        <template slot-scope="scope">
                            <i class="el-icon-download" @click="downWord(scope.$index, scope.row)" title="下载"></i>&nbsp;
                            <i class="el-icon-delete-solid" @click="handleDelete(scope.$index, scope.row)" title="删除"></i>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination-div">
                <el-pagination class="myPagination" background layout="total, sizes, prev, pager, next, jumper" :current-page="currentPage" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-size="everySize" :page-sizes="[10,20,50,100]">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import { get, dataUrlToblob } from "../../util/http_util";
import { queryReport } from '../../api/index';
export default {
    inject: ['reload'],
    data() {
        return {

            bgName: '',
            tableData: [],
            currentPage: 0,
            total: 0,
            everySize: 10,
            pickerOptions: {
                shortcuts: [
                    {
                        text: "最近一周",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近一个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                    {
                        text: "最近三个月",
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit("pick", [start, end]);
                        },
                    },
                ],
            },
            time: [],
        };
    },
    methods: {
        //预览
        handleView(index, row) {
            dataUrlToblob(row, 1);
        },
        //删除
        handleDelete(index, row) {
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    get("api/rest/sentiment/deleteReport/" + row.id)
                        .then((res) => {
                            if (res == 1) {
                                this.queryData();
                                this.$message.success("删除成功!");
                            } else {
                                this.$message.error("删除失败!");
                            }
                        })
                        .catch((err) => {
                            this.$message.warning(err.message); 
                        });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
            console.log(index, row);
        },
        downWord(index, row) {
            dataUrlToblob(row, 1);
        },
        handleCurrentChange(pageNum) {
            this.currentPage = pageNum;
            this.reload();
        },
        queryData() {
            queryReport(this.currentPage, this.everySize, this.bgName, this.time != null ? this.time[0] : null, this.time != null ? this.time[1] : null).then(res => {
                this.tableData = res.list;
                this.total = res.totals;
                this.currentPage = res.pageNum;
            }).catch((err) => {
                this.$message.warning(err.message);
            });
        },
        handleSizeChange(val) {
            this.everySize = val;
            this.currentPage = 1;
            this.reload();
        },
    },
    activated() {
        this.queryData();
    },
};
</script>
<style lang="scss">
#fxbg {
    width: 97%;
    height: 92%;
    margin: 20px;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
    background-image: url('../../assets/img/yqjc/56.png');
    background-size: 100% 100%;
    .top-div {
        width: 100%;
        height: 70px;
        .el-input {
            float: right;
            width: 200px;
            margin-right: 15px;
            .el-input__inner {
                background: none;
                color: #ffff;
                border: 1px solid #146a80 !important;
                box-shadow: 0 0 10px #1b6097;
            }
        }
        .el-date-editor {
            width: 400px;
            float: right;
            margin-right: 15px;
            background: none;
            box-shadow: 0 0 10px #1b6097;
            span {
                color: white;
            }
            .el-range-input {
                color: white !important;
                background: none !important;
            }
        }
        .el-input__inner {
            border: 1px solid #146a80 !important;
        }
        .button-search {
            width: 100px;
            height: 30px;
            line-height: 30px;
            font-size: 13px;
            float: right;
            margin-top: 5px;
            margin-right: 50px;
            text-align: center;
            cursor: pointer;
            background-image: url(../../assets/img/yqjc/41.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
    }
    .bottom-div {
        width: 100%;
        height: calc(100% - 70px);
        box-shadow: 0 0 10px #1b6097;
        .table-div {
            width: 100%;
            height: calc(100% - 50px);
            .el-table tr {
                background-color: #1d2d46 !important;
                color: #ffffffc7;
            }
            .el-table td {
                border-bottom: 1px solid #127a89;
                border-right: unset;
            }
            .el-table--enable-row-hover .el-table__body tr:hover > td {
                background-color: #82848a78;
            }
            .el-table th {
                border: unset;
                background-color: #263b5d !important;
            }
            .el-table--fit {
                background: none !important;
                border: unset;
            }
            .el-icon-delete-solid {
                color: red;
                cursor: pointer;
                font-size: 18px;
            }
            .el-icon-edit {
                color: #1172d8;
                cursor: pointer;
                font-size: 20px;
            }
            .el-icon-view {
                color: #00ffff;
                font-size: 20px;
                cursor: pointer;
            }
            .el-table--group::after,
            .el-table--border::after,
            .el-table::before {
                background-color: unset;
            }
            .ztk-icon {
                background-image: url('../../assets/img/yqjc/57.png');
                width: 20px;
                height: 20px;
                background-size: 100% 100%;
                cursor: pointer;
            }
            .ztg-icon {
                background-image: url('../../assets/img/yqjc/58.png');
                width: 20px;
                height: 20px;
                background-size: 100% 100%;
                cursor: pointer;
            }
        }
        .pagination-div {
            width: 100%;
            height: 50px;
            .el-pagination {
                margin-top: 9px;
                text-align: right;
                .el-pagination__total {
                    color: white;
                }
                .el-pagination__jump {
                    color: white;
                }
            }
            .myPagination.is-background .el-pager li:not(.disabled).active {
                color: #fff;
                border: 1px solid #146a80;
                box-shadow: 0 0 10px #1b6097;
                background-color: #1d2d46;
            }
        }
    }
}
</style>