<template>
  <!-- 通知公告 -->
  <div id="noticeInfor">
    <a-tabs default-active-key="1" @change="callback">
      <a-tab-pane key="1" tab="未读公告" force-render>
        <UnRead ref="unReadModel"/>
      </a-tab-pane>
      <a-tab-pane key="2" tab="已读公告">
        <Read ref="readModel"/>
      </a-tab-pane>
      <div class="tabExtra-btn" v-if="key === '1'" slot="tabBarExtraContent">
        <a-button @click="readChange">已读</a-button>
        <a-button @click="changeAllReadStatus">全部已读</a-button>
      </div>

    </a-tabs>

    <div class="btn-list">
      <a-button type="stop" style="margin-right: 20px;" @click="handleOk">
        取消
      </a-button>
      <a-button type="add" @click="onSubmit">
        确定
      </a-button>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import Read from './Read'
import UnRead from './UnRead'
// import { getReadAll } from '@/api/index/index'

import { getReadPart, getReadAll } from '@/api/index/index'

export default {
  components: {
    Read,
    UnRead
  },
  data() {
    return {
      key: '1'
    }
  },
  methods: {
    // 标记部分已读
    readChange() {
      const ids = []
      this.$refs.unReadModel.selectedRows.map((item) => {
        ids.push(item.noticeId)
      })
      this.changeReadStatus(ids)
      // console.log('selectedRows:', this.$refs.unReadModel.selectedRows)
    },

    //  部分已读
    changeReadStatus(ids) {
      console.log('ids:', ids)
      getReadPart(ids).then((res) => {
        if (res.code === 200) {
          // console.log('部分已读')
          this.$EventBus.$emit('changeReadAll')
          this.$refs.unReadModel.getUnReadListArr()
          this.$refs.unReadModel.onSelectChange([], [])
        }
      })
    },
    //  全部已读
    changeAllReadStatus() {
      getReadAll().then((res) => {
        if (res.code === 200) {
          // console.log('全部已读')
          this.$EventBus.$emit('changeReadAll')
        }
      })
    },

    callback(key) {
      this.key = key
    },
    handleOk() {
      this.$emit('handleOk')
    },
    onSubmit() {
      this.$emit('handleOk')
    }
  }

}
</script>

<style lang='less'>
#noticeInfor{
  .tabExtra-btn{
    & > button{
      border: none;
      font-size: 16px;
      color: rgb(59, 117, 245);
    }
  }
  .ant-tabs-nav .ant-tabs-tab {
    font-size: 18px;
    padding: 0 5px 15px ;
  }
 .btn-list{
    margin: 30px 0 0 0;
    text-align: center;
  }
}
</style>
