<template>
    <div class="fieldsTableComent">
        <dialog-table :visible.sync="visible" :title="title" width="60%" @close="$emit('update:visible', false)">
            <template v-slot:btns>
                <el-button @click="download" type="primary" plain size="mini" icon="el-icon-download">下载</el-button>
            </template>

            <template v-slot:tip>
                <span style="font-size: 12px; color: #909399; white-space: nowrap">最多展示前100条数据</span>
            </template>

            <template v-slot:table>
                <el-table
                    v-loading="loading"
                    :data="tableData"
                    border
                    max-height="500"
                >
                    <el-table-column type="index" width="50"></el-table-column>
                    <el-table-column label="值">
                        <template slot-scope="scope">
                            {{ t(scope.row.field, type) || scope.row.field }}
                        </template>
                    </el-table-column>
                    <el-table-column label="统计" prop="aggregate"></el-table-column>
                    <el-table-column label="占比">
                        <template slot-scope="scope">
                            <el-progress :percentage="scope.row.percent" :color="customColors" :format="customProgressText"></el-progress>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="70">
                        <template slot-scope="scope">
                            <el-tooltip effect="dark" placement="top" content="正选过滤条件">
                                <i @click="add(scope.row, 'positive')" style="cursor: pointer;color: #6aa6ce;margin-right: 3px;" class="el-icon-circle-plus-outline"></i>
                            </el-tooltip>
                            <el-tooltip effect="dark" placement="top" content="反选过滤条件">
                                <i @click="add(scope.row, 'back')" style="cursor: pointer;color: #ec5759" class="el-icon-remove-outline"></i>
                            </el-tooltip>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </dialog-table>
    </div>
</template>

<script>
import { parseTime } from '../../utils'
import dialogTable from './dialogTable.vue'
import { getFieldAggregate, exportFieldsAgg } from '../../api/fence'
import i18n from '../../i18n'
export default {
    props: {
        title: {
            type: String,
            require: true
        },
        visible: {
            type: Boolean,
            require: true
        },
        time: {
            type: Array,
            default: () => []
        },
        type: {
            type: String,
            require: true
        },
        queryStatements: {
            type: String,
            require: true
        }
    },
    components: {
        dialogTable
    },
    watch: {
        visible(val) {
            if (val) this.getList()
        },
    },
    data() {
        return {
            tableData: [],
            loading: false,
            customColors: [
                {color: '#f56c6c', percentage: 20},
                {color: '#e6a23c', percentage: 40},
                {color: '#5cb87a', percentage: 60},
                {color: '#1989fa', percentage: 80},
                {color: '#6f7ad3', percentage: 100}
            ],
            appointHeads: [
                'is_read', 
                'is_collect',
                'enrichments.src_ip.malicious',
                'enrichments.dst_ip.malicious',
                'reliability',
                'severity',
                'visit_direction'
            ],
        }
    },
    methods: {
        add(row, type) {
            this.$emit('add', {
                key: this.type,
                value: row.field,
                symbol: type == 'positive' ? '1' : '2',
                name: `${this.title} == ${row.field}`,
                query: `${type == 'positive' ? '' : 'NOT '}${this.type} : "${row.field}"`,
                status: type,
                disabled: false
            })
            this.$nextTick(() => {
                this.getList()
            })
        },
        customProgressText(val) {
            if (val < 1) {
                return '<1%'
            } else {
                return val + '%'
            }
        },
        getList() {
            let params = {
                field: this.type,
                startTime: parseTime(this.time[0]),
                endTime: parseTime(this.time[1]),
                filterString: this.queryStatements
            }
            this.loading = true
            getFieldAggregate(params).then(res => {
                if (res.data.returnCode == 0) {
                    let { data } = res.data
                    this.tableData = data
                }
                this.loading = false
            }).catch(() => {
                this.loading = false
            })
        },
        download() {
            let params = {
                field: this.type,
                startTime: parseTime(this.time[0]),
                endTime: parseTime(this.time[1]),
                filterString: this.queryStatements
            }
            this.$message.info("正在生成导出文件,请稍等");
            exportFieldsAgg(params).then(res => {
              if (res.data.returnCode == 0) {
                    this.$message.success('已加入离线任务队列，请在离线任务栏进行查看')
                    // window.open(`${this.$util.getAjaxUrl('analyse')}/${res.data.data.url}`)
                }

            }).catch(() => {

            })
        },
        t(val, prop) {
            return this.appointHeads.includes(prop) ? i18n.zh[prop + '_' + val] : i18n.zh[val]
        }
    }
}
</script>

<style lang="scss" scoped>
    .fieldsTableComent {
        ::v-deep .el-progress__text {
            font-size: 12px !important;
        }
    }
</style>
