<!--
 * @Author: xw
 * @Date: 2021-10-08 09:17:42
 * @LastEditTime: 2021-10-28 19:03:45
 * @LastEditors: Please set LastEditors
 * @Description: 行业洞察
 * @FilePath: /data-show/src/views/Index/index.vue
-->
<template>
    <div class="d-container">
        <div class="In-body">
            <div class="d1">
                <real-time-event></real-time-event>
                <key-communication-positions></key-communication-positions>
                <spread-the-sound></spread-the-sound>
            </div>
            <div class="d2">
                <div class="d2-top">
                    <dynamic-number @allData="handlerAllData"></dynamic-number>
                </div>
                <div class="d2-bottom">
                    <barometer></barometer>
                    <tail-insight></tail-insight>
                </div>
            </div>
            <div class="d3">
                <sales-rank></sales-rank>
                <user-portrait></user-portrait>
                <hot-discussion-graph></hot-discussion-graph>
            </div>
        </div>
        <!--对话框-->
        <v-modal :eleStyle="{ width: '86rem', height: '50rem' }" :visible.sync="modalObj.visible" :title="modalObj.title">
            <div slot="body" :style="{padding: '16px'}">
                <v-table :columns="columns" :data="tbData" :loading="tableLoading" :pagination="false" row-key="id">
                    <template slot="titlex" slot-scope="text, record">
                        <a :href="record.url" style="color: #fff" target="_blank">{{ text }}</a>
                    </template>
                </v-table>
            </div>
        </v-modal>
    </div>
</template>

<script>
import realTimeEvent from "./realTimeEvent";
import keyCommunicationPositions from "./keyCommunicationPositions";
import salesRank from "./salesRank";
import userPortrait from "./userPortrait";
import spreadTheSound from "./spreadTheSound";
import barometer from "./barometer";
import tailInsight from "./tailInsight";
import hotDiscussionGraph from "./hotDiscussionGraph";
import dynamicNumber from "./dynamicNumber";
import { getHomeList0528 } from "@/api/home";
export default {
    name: "index",
    components: {
        realTimeEvent, // 实时事件
        keyCommunicationPositions, // 传播重点阵地
        salesRank, // 热销排行
        userPortrait, // 用户画像
        spreadTheSound, // 传播声量TOP10
        barometer, // 晴雨表
        tailInsight, // 尾翼洞察
        hotDiscussionGraph, // 热议图谱
        dynamicNumber, // 中间大数据
    },
    data() {
        return {
            modalObj: {
                title: "全网数据实时动态",
                visible: false,
            },
            form: {
                sQuDao: "",
            },
            tbData: [],
            tableLoading: false,
            columns: [
                {
                    title: "标题",
                    key: "title",
                    dataIndex: "title",
                    scopedSlots: { customRender: "titlex" },
                     ellipsis: true,
                },
                {
                    title: "发布时间",
                    key: "sourcetime",
                    dataIndex: "sourcetime",
                    width: 180,
                },
                {
                    title: "作者",
                    key: "user_author",
                    dataIndex: "user_author",
                    width: 160,
                },
                {
                    title: "来源",
                    key: "source",
                    dataIndex: "source",
                    width: 120,
                },
            ],
        };
    },
    created() {
        // this.getTableList();
    },
    mounted() {},
    methods: {
        handlerAllData(key) {
            this.form.sQuDao = key;
            this.getTableList().then(() => {
                this.modalObj.visible = true;
            })
            
        },
        getTableList() {
            return new Promise((resolve, reject) => {
                let obj = Object.assign({}, this.getCommTime, this.form);
                this.tableLoading= true;
                getHomeList0528(obj).then((res) => {
                    let data = res.data || [];
                    let arr = [];
                    data.forEach((ele) => {
                        let _source = ele._source;
                        arr.push(_source);
                    });
                    this.tbData = arr;
                    this.tableLoading = false;
                    resolve(arr)
                }).catch(() => {
                    reject(false)
                });
            });
        },
    },
};
</script>

<style lang="less" scoped>
.In-body {
    padding: 0px 16px 16px 16px;
    display: flex;
    justify-content: flex-start;
    .d2 {
        width: 936px;
        margin-left: 16px;
        .d2-top {
            width: 100%;
            height: 644px;
        }
        .d2-bottom {
            display: flex;
            justify-content: flex-start;
        }
    }
}
/deep/ .ant-table-body {
    max-height: 670px;
    overflow: auto;
}
</style>