<template>
  <div class="drawer-box d-flex flex-column">
    <v-banner single-line>
      <v-menu offset-y nudge-bottom="15" attach right>
        <template v-slot:activator="{ on, attrs }">
          <span
            class="text-subtitle-1"
            v-bind="attrs"
            v-on="on"
          >
            {{ showTitle }}
            <v-icon>mdi-chevron-down</v-icon>
          </span>
        </template>
        <v-list  dense class="white text-subtitle-2" min-width="200">
          <v-list-item v-for="item in showList" :key="item.text + item.value" class="hover" @click="handleChangeState(item.value)">
            {{ item.text }}
          </v-list-item>
        </v-list>
      </v-menu>
      <template v-slot:actions>
        <v-menu offset-y nudge-bottom="11" attach left>
          <template v-slot:activator="{ on, attrs }">
            <span
              v-bind="attrs"
              v-on="on"
            >
              <v-icon>mdi-dots-horizontal</v-icon>
            </span>
          </template>
          <v-list  dense class="white text-subtitle-2" min-width="200">
            <v-list-item v-for="item in controlList" :key="item.text + item.value" class="hover" @click="handleSet(item)">
              {{ item.text }}
            </v-list-item>
          </v-list>
        </v-menu>
      </template>
    </v-banner>
    <div style="flex: 1;" class="overflow-y-auto">
      <v-list two-line>
        <template v-for="(item, index) in msgItems">
          <v-list-item
            :key="item.title + index"
            class="hover"
            :ripple="false"
            @click="handleClick(item)"
          >
            <template v-slot:default>
              <v-list-item-content>
                <div class="mb-3 d-flex justify-space-between text-subtitle-2" :class="{ disabled: item.readState }">
                  <div class="text-truncate content">
                    <v-icon :disabled="!!item.readState" size="20" color="error">mdi-alert</v-icon>
                    {{ item.title }}
                  </div>
                  <div class="px-3 tools" @click.stop>
                    <v-icon v-if="!item.readState" size="20" class="ml-3" @click.stop="handleRead(item)">mdi-check-all</v-icon>
                    <v-icon size="20" class="ml-3" @click.prevent.stop="handleClose(item, index)">mdi-close</v-icon>
                  </div>
                </div>
                <!-- 超出自动换行 -->
                <v-list-item-subtitle
                  class="mb-3 subtitle"
                  :class="{ disabled: !!item.readState }"
                >
                  {{ item.content }}
                </v-list-item-subtitle>
                <v-list-item-subtitle :class="{ disabled: !!item.readState }">{{ item.createTime }}</v-list-item-subtitle>
              </v-list-item-content>
            </template>
          </v-list-item>

          <v-divider
            v-if="index < msgItems.length - 1"
            :key="index"
          ></v-divider>
        </template>
        <template v-if="!msgItems.length">
          <empty-page height="200"></empty-page>
        </template>
      </v-list>
      <div class="d-flex align-center justify-center py-3">
        <v-btn v-if="msgItems.length < total" text color="primary" @click="handleMore">加载更多</v-btn>
        <no-more v-if="msgItems.length === total"></no-more>
      </div>
    </div>
  </div>
</template>

<script>
import NoMore from '@/components/NoMore'
import {
  getMessageList,
  setMessageRead,
  setAllMessageRead,
  deleteAllMessageRead,
  deleteMessage
} from '@/api/system'
import { mapGetters } from 'vuex'
import EmptyPage from '@/components/Common/empty'
export default {
  name: 'bell-drawer',
  components: { EmptyPage, NoMore },
  data () {
    return {
      controlList: [
        { text: '标记所有为已读', api: setAllMessageRead },
        { text: '删除所有已读消息', api: deleteAllMessageRead }
      ],
      showActive: 1,
      showList: [
        { text: '全部通知', value: null },
        { text: '未读通知', value: 0 }
      ],
      msgItems: [],
      pageInfo: {
        size: 50,
        current: 1
      },
      total: 0,
      query: {
        readState: null
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo']),
    showTitle () {
      return this.showList.find(_e => _e.value === this.query.readState).text
    }
  },
  created () {
    // this.init()
  },
  methods: {
    async init () {
      try {
        const { data } = await getMessageList({ ...this.query, userId: this.userInfo.id, page: { ...this.pageInfo } })
        this.msgItems.push(...data.records)
        this.total = data.total
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    async handleRead (item) {
      try {
        await setMessageRead({ messageId: item.messageId })
        item.readState = 1
        this.$emit('checkRead')
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    handleMore () {
      // 判断是否是整数列
      // 向上取整
      const nowCurrent = this.msgItems.length / this.pageInfo.size
      if (Number.isInteger(nowCurrent)) {
        this.pageInfo.current++
        this.init()
        return
      }
      this.msgItems.splice(0, Math.floor(nowCurrent) * this.pageInfo.size)
      this.init()
    },
    async handleSet (item) {
      try {
        await item.api()
        this.msgItems = []
        this.pageInfo.current = 1
        this.$emit('checkRead')
        this.init()
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    handleChangeState (value) {
      this.query.readState = value
      this.msgItems = []
      this.pageInfo.current = 1
      this.init()
    },
    async handleClose (item, index) {
      try {
        await deleteMessage({ messageId: item.messageId })
        if (this.pageInfo.current === 1) {
          this.msgItems = []
          this.init()
          return
        }
        this.msgItems.splice(index, 1)
        // 计算当前页码 整数页加载下一页
        const nowCurrent = this.msgItems.length / this.pageInfo.size
        if (Number.isInteger(nowCurrent)) {
          this.init()
        }
        if (item.readState !== 1) {
          this.$emit('checkRead')
        }
      } catch (error) {
        this.$snackbar.error(error)
      }
    },
    handleClick (item) {
      if (!item.tag || !item.tag?.route) {
        return
      }
      this.handleRead(item)
      window.open(item.tag.route)
    }
  }
}
</script>

<style lang="scss" scoped>
.tools {
  display: none;
}
.hover:hover {
  cursor: pointer;
  background: rgba(0,0,0,.03);
  .tools {
    display: block;
  }
}
.drawer-box {
  // padding-top: 70px;
  height: 100%;
  overflow: hidden;
}
.disabled {
  color: #bbb !important;
}
.subtitle {
  white-space: unset;
  line-height: 22px !important;
}
.content {
  width: 0;
  flex: 1;
}
</style>
