<template>
  <div class="msg-container">
    <div class="msg-wrapper" @click="toMore">
      <el-badge :value="msgConfig.num == 0 ? '' : msgConfig.num" :max="99" class="item">
        <svg-icon icon-class="message" class="msg-icon" />
      </el-badge>
    </div>
    <!-- <el-dropdown trigger="click">
      <div class="msg-wrapper" @click="getMessage">
        <el-badge :value="msgConfig.num == 0 ? '' : msgConfig.num" :max="99" class="item">
          <svg-icon icon-class="message" class="msg-icon" />
        </el-badge>
      </div>
      <el-dropdown-menu slot="dropdown" class="msg-dropdown">
        <el-card shadow="never">
          <div class="dropdown-title">
            <i class="el-icon-message-solid" />
            您有
            <span>{{ msgConfig.total }}</span>
            条通知
            <div style="float:right;margin-right: 10px;">
              提示音
              <el-switch
                v-model="isPlay"
                @change="setPlayState"
                active-color="#13ce66"
                inactive-color="#ff4949"
              >
              </el-switch>
            </div>
          </div>
          <template v-if="msgConfig.msgs.length">
            <el-dropdown-item
              class="msg-box"
              v-for="(item, index) in msgConfig.msgs"
              :key="index"
              @click="toDetail(item)"
            >
              <div class="msg-icon">
                <el-image :src="require('@/assets/images/avatar.jpg')" />
              </div>
              <div class="msg-right-box">
                <div class="msg-title-box">
                  <span class="msg-title">{{ item.type }}</span>
                  <span class="msg-time">{{ item.baseCreateTime }}</span>
                </div>
                <div class="msg-content">
                  {{ item.content }}
                </div>
              </div>
            </el-dropdown-item>
          </template>
          <div class="empty-box" v-else>暂无数据</div>
          <div class="getMore">
            <span @click="toMore">查看所有消息</span>
          </div>
        </el-card>
      </el-dropdown-menu>
    </el-dropdown> -->
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import Storage from 'store'
export default {
  name: 'MessageCenter',
  props: {
    msgConfig: {
      type: Object,
      default: () => {
        return {
          num: 0,
          total: 0,
          msgs: [],
        }
      },
    },
  },
  data() {
    return {
      isPlay: Storage.get('isPlay'),
    }
  },

  methods: {
    getMessage() {},
    toMore() {
      this.$router.push({ path: '/center/message', query: { num: this.msgConfig.num } })
    },
    toDetail() {},
    setPlayState(state) {
      Storage.set('isPlay', state)
    },
  },
}
</script>

<style lang="scss" scoped>
.msg-container {
  position: relative;
  bottom: 2px;
  .msg-wrapper {
    margin-right: 5px;
    .msg-icon {
      cursor: pointer;
      fill: #5a5e66;
      width: 20px;
      height: 20px;
    }
    .el-badge {
      height: 20px;
      ::v-deep sup {
        position: absolute;
        top: -2px;
        right: 10px;
      }
    }
  }
}
</style>
