<template>
  <div>
    <div class="ec-notice-list ec-scrollbar-mini">
      <div v-if="data.length > 0">
        <div v-for="item in data" :key="item.id" class="ec-notice-item" @click="detail(item)">
          <div :class="item.isJump===false ? 'ec-cell ec-notice-item-wrapper ec-cell-align-top noLink' :'ec-cell ec-notice-item-wrapper ec-cell-align-top'">
            <avatar v-if="avatar" slot="avatar" class="avatar" :src="item.avatar || require('@/assets/img/avatar.png')" />
            <div class="ec-cell-content">
              <div class="ec-elip">{{ item.title }}</div>
              <div class="ec-text-secondary ec-elip">{{ item.content }}</div>
              <div class="ec-cell-desc ec-elip">{{ item.sendTime }} <span class="ec-pull-right">{{ item.datetime }}</span></div>
            </div>
          </div>
          <div class="el-divider el-divider--horizontal" />
        </div>
      </div>
      <div v-else class="img-center">
        <img width="130px" :src="emptyImage"><br>
        <span class="no-data">{{ emptyText }}</span>
        <div class="el-divider el-divider--horizontal" />
      </div>
    </div>
    <div class="ec-cell ec-notice-actions">
      <div class="ec-cell-content" @click="more(url)">
        {{ $t('ec.notice.more') }}
      </div>
    </div>
    <!--    <ep-list class="list">-->
    <!--      <template v-for="(item, i) in data">-->
    <!--        <div :key="i" class="mail-div" @click="mailDetail(item.sysrNoticeDetail.id)">-->
    <!--          {{ item.title }}-->
    <!--          <p class="datetime">{{ item.datetime }}</p>-->
    <!--        </div>-->
    <!--      </template>-->
    <!--    </ep-list>-->
    <!--                  <ep-list-item :key="i" class="item">-->
    <!--                    <ep-list-item-meta slot="meta" class="meta">-->
    <!--                      <avatar v-if="item.index === 1" slot="avatar" class="avatar" :src="item.avatar || require('@/assets/img/avatar.png')" />-->
    <!--                      <div slot="title" class="title">-->
    <!--                        {{ item.title }}-->
    <!--                      </div>-->
    <!--                      <div slot="description">-->
    <!--                        <el-button v-if="item.index===0" type="text" style="white-space: inherit;" @click=" $refs.oaNotifyForm.init('read', item.id)">-->
    <!--                          <div class="description" style="height:30px" v-html="item.description" />-->
    <!--                        </el-button>-->
    <!--                        <el-button v-if="item.index===1" type="text" style="white-space: inherit;" @click="$refs.receivedMailDetail.init(item.id)">-->
    <!--                          <div class="description" style="height:30px" v-html="item.description" />-->
    <!--                        </el-button>-->
    <!--                        <div class="datetime">{{ item.datetime }}</div>-->
    <!--                      </div>-->
    <!--                    </ep-list-item-meta>-->
    <!--                  </ep-list-item>-->
    <!--                </template>-->
    <!--                <ep-list-item class="item">-->
    <!--                  <ep-list-item-meta>-->
    <!--                    <div slot="description">-->
    <!--                      <router-link :to="url">-->
    <!--                        <div class="description" style="text-align:center">{{ $t('ec.notice.more') }}</div>-->
    <!--                      </router-link>-->
    <!--                    </div>-->
    <!--                  </ep-list-item-meta>-->
    <!--                </ep-list-item>-->
    <!--              </ep-list>-->
    <!--          -->
    <!--    <ep-list class="list">-->
    <!--      <template v-if="title=== $t('ec.notice.internal')">-->
    <!--        <template v-for="(item, i) in data">-->
    <!--          <div :key="i" class="mail-div" @click="mailDetail(item.sysrNoticeDetail.id)">-->
    <!--            {{ item.title }}-->
    <!--            <p class="datetime">{{ item.datetime }}</p>-->
    <!--          </div>-->
    <!--        </template>-->
    <!--      </template>-->
    <!--      <template v-else>-->
    <!--        <template v-for="(item, i) in data">-->
    <!--          <ep-list-item :key="i" class="item">-->
    <!--            <ep-list-item-meta slot="meta" class="meta">-->
    <!--              <avatar slot="avatar" class="avatar" :src="item.avatar || require('@/assets/img/avatar.png')" />-->
    <!--              <div slot="title" class="title">-->
    <!--                {{ item.title }}-->
    <!--              </div>-->
    <!--              <div slot="description">-->
    <!--                <el-button v-if="item.type==='通知'" type="text" style="white-space: inherit;" @click=" $refs.oaNotifyForm.init('read', item.id)">-->
    <!--                  <div class="description" style="height:30px" v-html="item.description" />-->
    <!--                </el-button>-->
    <!--                <el-button v-if="item.type==='站内信'" type="text" style="white-space: inherit;" @click="$refs.receivedMailDetail.init(item.id)">-->
    <!--                  <div class="description" style="height:30px" v-html="item.description" />-->
    <!--                </el-button>-->
    <!--                <div class="datetime">{{ item.datetime }}</div>-->
    <!--              </div>-->
    <!--            </ep-list-item-meta>-->
    <!--          </ep-list-item>-->
    <!--        </template>-->
    <!--      </template>-->
    <!--      <ep-list-item class="item">-->
    <!--        <ep-list-item-meta>-->
    <!--          <div slot="description">-->
    <!--            <router-link :to="url">-->
    <!--              <div class="description" style="text-align:center">{{ $t('ec.notice.more')}}</div>-->
    <!--            </router-link>-->
    <!--          </div>-->
    <!--        </ep-list-item-meta>-->
    <!--      </ep-list-item>-->
    <!--    </ep-list>-->
  </div>
</template>

<script>
import Avatar from 'ecip-web/components/avatar/index.vue'

export default {
  components: {
    Avatar
  },
  props: {
    index: {
      type: Number,
      default: 0
    },
    avatar: {
      type: Boolean,
      default: true
    },
    title: {
      type: String,
      default: ''
    },
    emptyText: {
      type: String,
      default: ''
    },
    emptyImage: {
      type: String,
      default: ''
    },
    data: {
      type: Array,
      default() {
        return []
      }
    },
    url: {
      type: String,
      default() {
        return ''
      }
    }
  },
  methods: {
    detail(item) {
      this.$emit('clickItem')
      if (typeof item.isJump !== 'undefined' && item.isJump == false) { // isJump为false时，不跳转
        return false
      } else {
        this.$router.push(`/sysrNoticeReceivedDetail/${item.sysrNoticeDetail.id}`)
      }
    },
    more(url) {
      this.$emit('more')
      this.$router.push(url)
    }
  }
}
</script>

<style lang="scss" scoped>

.ec-notice-list {
  padding-top: 8px;
  max-height: 360px;
  overflow: auto;
  .img-center {
    text-align: center;
    img {
      margin-top: 8px;
      margin-bottom: 8px;
    }
    .no-data {
      font-size: 12px;
      margin-bottom: 10px;
      display: block;
    }
  }
}

.ec-cell:not(.ec-cell-align-top) {
  align-items: center;
}
.ec-notice-item .ec-notice-item-wrapper {
  padding: 12px 15px;
  transition: background-color .2s;
  cursor: pointer;
}
.ec-notice-item .ec-notice-item-wrapper:hover {
  background-color: hsla(0,0%,60%,.05);
}
.ec-notice-item .noLink {
  cursor:default;
}
.ec-cell {
  display: flex;
}
.el-divider.el-divider--horizontal {
  background-color: #ededed;
}
.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 0;
}

.ec-notice-item-icon {
  width: 32px;
  height: 32px;
  line-height: 32px!important;
  color: #fff;
  font-size: 16px;
  background-color: #60b2fc;
  border-radius: 50%;
  text-align: center;
}
.ec-cell>.ec-cell-content {
  flex: 1;
  box-sizing: border-box;
}
.ec-cell>*+.ec-cell-content {
  padding-left: 10px;
}
.ec-elip {
  overflow: hidden;
  white-space: nowrap;
  word-break: break-all;
  text-overflow: ellipsis;
}
.ec-notice-item .ec-text-secondary {
  margin-top: 5px;
  font-size: 13px;
}
.ec-cell-content {
  overflow: hidden;
  white-space: nowrap;
  word-break: break-all;
  text-overflow: ellipsis;
}
.ec-text-secondary {
  color: #8c8c8c;
}

.ec-notice-item .ec-cell-desc {
  margin-top: 3px!important;
  font-size: 12px!important;
}
.ec-cell .ec-cell-desc {
  color: #8c8c8c;
}
.ec-notice-actions>.ec-cell-content {
  line-height: 42px;
  text-align: center;
  cursor: pointer;
}
.ec-notice-actions>.ec-cell-content:hover {
  background-color: hsla(0,0%,60%,.05);
}
</style>
