<template>
  <div style="margin:0 -15px">
    <div class="announcement-title">
      <div>公告标题</div>
      <div>发布时间</div>
    </div>
    <div class="announcement-content">
      <div
        v-for="(item,index) in dynamic"
        :key="index"
        class="announcement-item"
        @click="toProductDetail"
      >
        <div style="color: #333333;">
          {{ item.title }}
        </div>
        <div style="color: #999999;">
          {{ item.time }}
        </div>
      </div>
      <div style="display:flex;justify-content:flex-end;margin-top:30px">
        <Page
          :total="100"
          @on-change="changePage"
        />
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        currentPage: '', // 页码
        // 产品动态
        dynamic: [
          {
            title: '【云分销】 订货商支持云仓模式云分销-订货商支持云仓模式云',
            time: '2021-03-29'
          },
          {
            title: '【云分销】 订货商支持云仓模式云分销-订货商支持云仓模式云',
            time: '2021-03-29'
          },
          {
            title: '【云分销】 订货商支持云仓模式云分销-订货商支持云仓模式云',
            time: '2021-03-29'
          },
          {
            title: '【云分销】 订货商支持云仓模式云分销-订货商支持云仓模式云',
            time: '2021-03-29'
          },
          {
            title: '【云分销】 订货商支持云仓模式云分销-订货商支持云仓模式云',
            time: '2021-03-29'
          },
          {
            title: '【云分销】 订货商支持云仓模式云分销-订货商支持云仓模式云1u2u912921020',
            time: '2021-03-29'
          },
        ],
      };
    },
    methods: {
      /**
       * tab 标签关闭
       * @param tableName 表名
       */
      tabClose(tableName) {
        debugger;
        let tabs = window.parent.vm.$store.state.global.openedMenuLists.filter((p) => p.tableName == tableName);
        if (tabs.length > 0) {
          const tab = tabs[0];
          const fullPath = tab.routeFullPath;
          const keepAliveModuleName = tab.keepAliveModuleName;
          const tableName = tab.tableName;

          window.parent.R3.store.commit('global/tabCloseAppoint',
                                             {
                                               routeFullPath: fullPath, // 当前路由fullPath
                                               //    stopRouterPush: false, // 是否阻止默认跳转到前一个tab
                                               keepAliveModuleName, // 当前模块名称
                                               tableName, // 当前自定义表标识
                                               event() { }, // type:function;调用方法前执行的回调
                                             });
        }
      },
      // 跳转产品动态详情页
      toProductDetail() {
        let label = '产品动态详情';
        let customizedModuleName = 'ProductTrendsDetail';
        let customizedModuleId = 1; // 动态id
        let str = customizedModuleName.toUpperCase();
        this.tabClose(str);
        window.parent.R3.store.commit('global/tabOpen', {
          type: 'tableDetailAction' || 'C',
          label,
          customizedModuleName,
        });
      },
      // 页码改变时触发
      changePage(val) {
        this.currentPage = val;
        console.log(this.currentPage);
      },
    }
  };
</script>
<style lang="less" scoped>
    .announcement-title{
        display: flex;
        justify-content: space-between;
        height: 62px;
        padding:20px 24px;
        border-bottom: 1px solid #D8D8D8;
        font-size: 16px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #909399;
        line-height: 22px;
    }
    .announcement-content{
        margin: 0 24px;
        .announcement-item{
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #D8D8D8;
            height: 52px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            line-height: 52px;
        }
    }
</style>
