<template>
  <div>
    <Button @click="exportData" type="primary" style="margin: 0 10px 10px 0;">导出日志记录</Button>
    <b>注：这里只会显示成功保存到服务端的错误日志，而且页面错误日志不会在浏览器持久化存储，刷新页面即会丢失</b>
    <Table ref="table" :columns="columns" :data="errorList"></Table>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { mapMutations } from 'vuex'
export default {
    name: 'error_logger_page',
    data () {
        return {
            columns: [
                {
                    type: 'index',
                    title: this.$t(1008),
                    width: 100
                },
                {
                    key: 'type',
                    title: '类型',
                    width: 100,
                    render: (h, { row }) => {
                        return (
                            <div>
                                <icon size={16} type={row.type === 'ajax' ? 'md-link' : 'md-code-working'}></icon>
                            </div>
                        )
                    }
                },
                {
                    key: 'code',
                    title: '编码',
                    render: (h, { row }) => {
                        return (
                            <span>{ row.code === 0 ? '-' : row.code }</span>
                        )
                    }
                },
                {
                    key: 'mes',
                    title: '信息'
                },
                {
                    key: 'url',
                    title: 'URL'
                },
                {
                    key: 'time',
                    title: this.$t(1046),
                    render: (h, { row }) => {
                        return (
                            <span>{ dayjs(row.time).format('YYYY-MM-DD HH:mm:ss') }</span>
                        )
                    },
                    sortable: true,
                    sortType: 'desc'
                }
            ]
        }
    },
    computed: {
        errorList () {
            return this.$store.state.app.errorList
        }
    },
    methods: {
        ...mapMutations([
            'setHasReadErrorLoggerStatus'
        ]),
        exportData () {
            this.$refs.table.exportCsv({
                filename: '错误日志.csv'
            })
        }
    },
    activated () {
        this.setHasReadErrorLoggerStatus()
    },
    mounted () {
        this.setHasReadErrorLoggerStatus()
    }
}
</script>

<style>

</style>
