<template>
<div class="xp-table-with-schedule">
    <el-table
        :data="listData"
        v-loading="tableLoading"
        @header-click="topHeaderClick"
        max-height="460"
        style="width: 100%">
        <el-table-column
            prop="query"
            label="检索词"
            width="160">
        </el-table-column>
        <el-table-column
            prop="searchNum"
            label="人群检索数"
            width="140"
            >
        </el-table-column>
        <el-table-column
            prop="relevance"
            label="相关度"
            >
            <template slot-scope="scope">
                <el-progress :show-text="false" :stroke-width="14" :percentage="scope.row.relevance"></el-progress>
            </template>
        </el-table-column>
        <el-table-column
            prop="intensity"
            label="热度"
            >
            <template slot-scope="scope">
                <el-progress :show-text="false" :stroke-width="14" :percentage="scope.row.intensity"></el-progress>
            </template>
        </el-table-column>
    </el-table>
</div>
</template>

<script>
/**
 * @file table-with-schedule
 * @author liuxiaoning03 <liuxiaoning03@baidu.com>
 * @date 2018-07-09
 */
export default {
    name: 'table-with-schedule',
    data() {
        return {
            listData: [],
            tableLoading: true
        };
    },
    created() {
        this.getTableData();
    },
    methods: {
        getTableData() {
            this.tableLoading = false;
            this.$http.get('./table/schedulemanage/scheduledata', {
                params: {}
            }).then(res => {
                let list = res.data;
                list.forEach(obj => {
                    let relevance = Number(obj.relevance);
                    let intensity = Number(obj.intensity);
                    obj.relevance = relevance === -1 ? 0 : relevance * 100;
                    obj.intensity = intensity === -1 ? 0 : intensity;
                    obj.searchNum = Number(obj.searchNum);
                });
                this.listData = list;

            });
        },
        topHeaderClick() {

        }

    }
};
</script>
<style lang="less" src="./index.less">

</style>

