<template>
    <div style="display: flex; flex-direction: column;flex-grow: 1; flex-shrink: 1;">
        <table-page-template>
            <div slot='form' class='condition'>
                <el-input
                    v-model.trim='searchValue'
                    class='margin-right'
                    style='width: 300px;'
                    placeholder='请输入操作人、动作、对象id等关键字搜索'
                    @change='searchChange'
                ></el-input>
                <el-date-picker
                    class='margin-right'
                    v-model='dateValue'
                    type='daterange'
                    align='right'
                    :clearable='false'
                    unlink-panels
                    range-separator='至'
                    start-placeholder='开始日期'
                    end-placeholder='结束日期'
                    
                    :picker-options='pickerOptions'
                    @change='dateChange'
                    value-format='yyyy-MM-dd'
                ></el-date-picker>
                <el-button @click='action'>&nbsp;动作说明&nbsp;</el-button>
                <el-button @click='refresh'>&nbsp;&nbsp;&nbsp;刷新&nbsp;&nbsp;&nbsp;</el-button>
                <el-button @click='downExcel'>导出到Excel</el-button>
            </div>
            <el-table
                slot='table'
                :data='tableData'
                border
                tooltip-effect='dark'
                style='width: 100%;'
                v-loading='loading'
            >
                <el-table-column prop='CreateTime' label='时间' width='150' align='center' header-align='center'></el-table-column>
                <el-table-column prop='Comming' label='来源' width='120' header-align='center'></el-table-column>
                <el-table-column prop='UserName' label='操作人' width='120' header-align='center' align='center'></el-table-column>
                <el-table-column prop='Phone' label='手机' width='150' header-align='center' align='center'></el-table-column>
                <el-table-column prop='Action' label='动作' header-align='center'></el-table-column>
                <el-table-column prop='UserId' label='对象id' header-align='center' align='center'></el-table-column>
                <el-table-column label='操作说明' width='350' header-align='center'>
                    <template slot-scope='scope'>
                        <div class='ellipsis btn' :title='scope.row.Note'>{{scope.row.Note}}</div>
                    </template>
                </el-table-column>
            </el-table>
            <base-pagination :currentPages='pageNum' :total='total' @pageChanged='pageChanged' slot='pagination'></base-pagination>
        </table-page-template>
        <saga-action ref='action'></saga-action>
    </div>
</template>

<script>
import {
    getBuildLog, //获取日志
    dowmloadLog //下载日志
} from '@/api/scan/request'
import { mapGetters, mapActions } from 'vuex'
import axios from 'axios'
//component
import SagaAction from './Action'
var date = new Date()
const nowDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
export default {
    name: 'data-log',
    data() {
        return {
            loading: false,
            searchValue: '',
            tableData: [],
            dateValue: [nowDate, nowDate],
            pickerOptions: {
                shortcuts: [
                    {
                        text: '今天',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 0)
                            picker.$emit('pick', [start, end])
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1)
                            picker.$emit('pick', [start, end])
                        }
                    },
                    {
                        text: '最近三天',
                        onClick(picker) {
                            const end = new Date()
                            const start = new Date()
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 3)
                            picker.$emit('pick', [start, end])
                        }
                    },
                    {
                        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])
                        }
                    }
                ]
            },
            pageNum: 1,
            pageSize: 10,
            total: 80
        }
    },
    components: {
        SagaAction
    },
    computed: {
        ...mapGetters('peojMess', ['projectId', 'userId'])
    },
    methods: {
        searchChange(value) {
            this.pageNum = 1
            this.getLogData()
        },
        refresh() {
            this.getLogData()
        },
        action() {
            this.$refs['action'].show()
        },
        // 导出
        downExcel() {
            let param = {
                startTime: this.dateValue[0] + ' 00:00:00',
                endTime: this.dateValue[1] + ' 23:59:59',
                filter: this.searchValue,
                ProjId: this.projectId,
                UserId: this.userId,
                Comming: 'revit'
            }
            axios({
                method: 'post',
                url: '/ScanBuilding/service/user_log/export',
                data: param,
                responseType: 'blob'
            })
                .then(function(res) {
                    var blob = new Blob([res.data], {
                        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
                    })
                    var fileName = res.headers['content-disposition']
                    if (fileName) fileName = fileName.substring(fileName.indexOf('=') + 1)
                    if ('download' in document.createElement('a')) {
                        // 非IE下载
                        const elink = document.createElement('a')
                        elink.download = fileName
                        elink.style.display = 'none'
                        elink.href = URL.createObjectURL(blob)
                        document.body.appendChild(elink)
                        elink.click()
                        URL.revokeObjectURL(elink.href) // 释放URL 对象
                        document.body.removeChild(elink)
                    } else {
                        // IE10+下载
                        navigator.msSaveBlob(blob, fileName)
                    }
                })
                .catch(function(err) {
                    console.dirxml(err)
                })
        },
        pageChanged(page, size) {
            this.pageNum = page
            this.pageSize = size
            this.getLogData()
        },
        dateChange(value) {
            this.pageNum = 1
            this.getLogData()
        },
        getLogData() {
            this.loading = true
            let param = {
                startTime: this.dateValue[0] + ' 00:00:00',
                endTime: this.dateValue[1] + ' 23:59:59',
                filter: this.searchValue,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                ProjId: this.projectId,
                UserId: this.userId
            }
            getBuildLog(param).then(res => {
                this.loading = false
                this.total = res.data.Count
                this.tableData = res.data.LogList
            })
        },
        init() {
            this.getLogData()
        }
    },
    created() {
        this.init()
    }
}
</script>

<style lang='less' scoped>
.margin-right {
    margin-right: 10px;
}
.condition {
    margin: 10px;
    display: flex;
}
.ellipsis {
    width: 350px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.btn {
    height: 28px;
    line-height: 28px;
}
</style>
