<template>
  <div id="bottomRight">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <el-icon class="el-icon-s-marketing"></el-icon>
        </span>
        <div class="d-flex">
          <span class="fs-xl text mx-2">企业资讯</span>
          <div class="decoration2">
            <dv-decoration-2 :reverse="true" style="width:5px;height:6rem;" />
          </div>
        </div>
      </div>
      <div>
        <div class="d-flex jc-center body-box">
          <dv-scroll-board
            class="dv-scr-board"
            :config="configArticle"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      cdata:{},
     /* config: {
        header: ['消息', '发布时间'],
        data: [
          ['张思', '2022-03-05'],
          ['李森', '2022-03-05'],
          ['王师', '2022-03-05'],
          ['赵迪', '2022-03-05'],
          ['孟津', '2022-03-05'],
          ['张思', '2022-03-05'],
          ['李森', '2022-03-05'],
          ['王师', '2022-03-05'],
          ['赵迪', '2022-03-05'],
          ['孟津', '2022-03-05'],
          ['孙东课', '2022-03-05'],
          ['周神秘', '2022-03-05'],
          ['吴老弟', '2022-03-05'],
          ['郑成功', '2022-03-05'],
          ['冯宝宝', '2022-03-05']
        ],
        rowNum: 15, //表格行数
        headerHeight: 40,
        headerBGC: '#0f1325', //表头
        oddRowBGC: '#0f1325', //奇数行
        evenRowBGC: '#171c33', //偶数行
        index: false,
        // columnWidth: [50],
        align: ['center']
      }*/
    }
  },
  watch: {
    cdata: {
      handler () {
        this.config = {
          header: ['消息', '发布时间'],
          data: [
            ['张思', '2022-03-05'],
            ['李森', '2022-03-05'],
            ['王师', '2022-03-05'],
            ['赵迪', '2022-03-05'],
            ['孟津', '2022-03-05'],
            ['孙东课', '2022-03-05'],
            ['周神秘', '2022-03-05'],
            ['吴老弟', '2022-03-05'],
            ['郑成功', '2022-03-05'],
            ['冯宝宝', '2022-03-05']
          ],
          rowNum: 15, //表格行数
          headerHeight: 40,
          headerBGC: '#0f1325', //表头
          oddRowBGC: '#0f1325', //奇数行
          evenRowBGC: '#171c33', //偶数行
          index: false,
          // columnWidth: [50],
          align: ['center']
        }
      },
      immediate: true,
      deep: true
    }
  },
  props:{
    configArticle:{
      type:Object,
      default:()=>{
        return {}
      }
    }
  },
  mounted () {
    this.drawTimingFn();
  },
  beforeDestroy () {
    clearInterval(this.drawTiming);
  },
  methods: {
    drawTimingFn () {
      this.setData();
      this.drawTiming = setInterval(() => {
        this.setData();
      }, 3600000);
    },
    setData () {
      this.config = this.configArticle;
    }
  }
};
</script>

<style lang="scss" class>
$box-height: 520px;
$box-width: 100%;
#bottomRight {
  padding: 25px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    height: $box-height - 50px;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  .body-box {
    border-radius: 10px;
    overflow: hidden;
    .dv-scr-board {
      width: 100%;
      height: 440px;
    }
  }




  //下滑线动态
  .decoration2 {
    position: absolute;
    right: 0.125rem;
  }
  .chart-box {
    margin-top: 16px;
    /*width: 170px;*/
    /*height: 170px;*/
    .dv-scr-board {
      width: 100%;
      height: 340px;
    }
    .active-ring-name {
      padding-top: 10px;
    }
  }
}
</style>
