<template>
  <div>
    <a-drawer
      :closable="false"
      :visible="institutionDetailVisible"
      :width="screenWidth * 0.5"
      placement="right"
      @close="onClose"
    >
      <institution-detail
        :affirmInstitution="affirmInstitution"
        :institutionId="institution"
        @get_to_be_confirmed="getToBeConfirmed"/>
    </a-drawer>
    <a-dropdown v-model="show" :trigger="['click']">
      <div slot="overlay">
        <a-spin :spinning="loading">
          <a-tabs
            v-model="activeKey"
            :style="{width: '500px'}"
            :tabBarStyle="{textAlign: 'center'}"
            class="dropdown-tabs">
            <a-tab-pane key="1" tab="通知">
              <a-list class="tab-pane">
              </a-list>
            </a-tab-pane>
            <a-tab-pane key="2" tab="消息">
              <a-list class="tab-pane"></a-list>
            </a-tab-pane>
            <a-tab-pane key="3" tab="待办">
              <a-list :data-source="backlog" class="tab-pane" item-layout="horizontal" :pagination="pagination">
                <a-list-item slot="renderItem" slot-scope="item">
                  <a v-if="item.type==='制度待确认'" slot="actions" @click="confirm_institution(item)">查看</a>
                  <a-list-item-meta :description="item.description" :title="item.title"/>
                </a-list-item>
              </a-list>
            </a-tab-pane>
          </a-tabs>
        </a-spin>
      </div>
      <a-badge :count="backlog.length" class="notice-badge" @click="fetchNotice">
        <a-icon :class="['header-notice-icon']" type="bell"/>
      </a-badge>
    </a-dropdown>
  </div>
</template>

<script>
import { post } from '@vue2-client/services/api'
import InstitutionDetail from './InstitutionDetail'
import ellipsis from '@vue2-client/components/Ellipsis'

export default {
  name: 'HeaderNotice',
  data () {
    return {
      loading: false,
      screenWidth: document.documentElement.clientWidth,
      show: false,
      institutionDetailVisible: false,
      institution: undefined,
      affirmInstitution: undefined,
      backlog: [],
      pagination: {
        onChange: page => {
          console.log(page)
        },
        pageSize: 5
      },
      activeKey: '1'
    }
  },
  components: { InstitutionDetail },
  computed: {},
  created () {
    this.getToBeConfirmed()
  },
  methods: {
    onClose () {
      this.institutionDetailVisible = false
      this.getToBeConfirmed()
    },
    getToBeConfirmed () {
      this.institutionDetailVisible = false
      try {
        if (this.$login.f.name) {
          post('/api/af-system/logic/getTodo', { name: this.$login.f.name }).then(res => {
            this.backlog = [...res]
            if (this.backlog.length > 0) {
              const key = `open${Date.now()}`
              this.$notification.open({
                key,
                message: `您有${this.backlog.length}条待办需要确认`,
                top: '50px',
                description: <ellipsis length="200">{ this.backlog.map((item, index) => index + 1 + '、' + item.title).join('；') }</ellipsis>,
                icon: <a-icon type="container" style="color: #f5222d"/>,
                btn: h => {
                  return h(
                    'a-button',
                    {
                      props: {
                        type: 'primary',
                        size: 'small',
                      },
                      on: {
                        click: () => this.viewBacklog(key),
                      },
                    },
                    '查看',
                  )
                }
              })
            }
          })
        }
      } catch (e) {
        console.log(e)
      }
    },
    viewBacklog (key) {
      this.$notification.close(key)
      this.show = true
      this.activeKey = '3'
    },
    confirm_institution (item) {
      this.institutionDetailVisible = true
      this.show = false
      this.institution = item.institution
      this.affirmInstitution = item.id
    },
    fetchNotice () {
      if (this.loading) {
        this.loading = false
        return
      }
      if (this.show) return
      this.loading = true
      setTimeout(() => {
        this.loading = false
      }, 1000)
    }
  }
}
</script>

<style lang="less">
.header-notice {
  display: inline-block;
  transition: all 0.3s;

  span {
    vertical-align: initial;
  }

  .notice-badge {
    color: inherit;

    .header-notice-icon {
      font-size: 16px;
      padding: 4px;
    }
  }
}

.dropdown-tabs {
  background-color: @base-bg-color;
  box-shadow: 0 2px 8px @shadow-color;
  border-radius: 4px;

  .tab-pane {
    padding: 0 24px 12px;
    min-height: 250px;
  }
}
</style>
