<template>
  <div class="container" v-loading="loading">
    <PageHeader :title="$t('field.reminder')">
      <el-radio-group v-model="handleValue" border size="medium" @change="getShowData">
        <el-radio-button v-for="label in labels" :key="label" :label="label"></el-radio-button>
      </el-radio-group>
      <template #icon>
        <i class="el-icon-refresh-right refresh-icon" @click="handleRefresh"></i>
      </template>
    </PageHeader>

    <div class="box" >
      <div class="boxItem" v-for="item in showData" :key="item.id">
        <div class="boxTitle">
          <div :class="['icon', item.quantity > 0 ? 'warn' : 'success']"></div>
          <div style="display: flex; align-items: center; flex: 1;">
            <div class="titleText">{{ item.title }}<span class="count">（{{ item.quantity }}）</span></div>
          </div>
          <div class="time">{{ item.time }}</div>
        </div>
        <div class="boxContent">
          <a class="handle" @click="toHandle(item)">{{ $t('field.toHandle') }}</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PageHeader from '../../components/PageHeader.vue'
export default {
  name: 'reminder',
  components: {
    PageHeader
  },
  data() {
    return {
      labels: [this.$t('button.message'), this.$t('button.errorHandle')], // tab标签
      handleValue: this.$t('button.message'), // 默认选择消息
      showData: [],
      loading: true,
      folderObj: {}
    };
  },
  mounted() {
    this.$bus.$on('folderChange', (folderObj) => {
      if (folderObj.folder) {
        this.folderObj = { ...folderObj }
        this.getShowData()
      }
    })

    this.getShowData()
  },
  methods: {
    async getShowData() {
      this.loading = true
      const res = this.handleValue === this.$t('button.message') ?
        await this.$apis.queryNormalMessageList({}) :
        await this.$apis.queryErrorMessageList({})
      this.loading = false
      if (res.success) {
        this.showData = res.data.result
      }
    },

    async handleRefresh() {
      this.getShowData()
    },

    toHandle(item) {
      const href = item.html
      if (!href) return
      let path = ''
      let params = ''
      if (href.indexOf('.action') !== -1) {
        path = href.split('.action')[0]
        params = href.split('.action')[1] || ''
      } else {
        path = href.split('.html')[0]
        params = href.split('.html')[1] || ''
      }
      if (path) {
        this.$router.push(`/iframe/${this.$menuMap.get(path)}${params}${item.requestUriParams}`)
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  
  padding: 8px 9px;
}

.box {
  flex: 1;
  min-height: 0px;
  width: 100%;
  margin-top: 10px;
  font-size: 12px;
  overflow-y: auto;

  /* height: 200px;
  overflow: auto; */
  /* 滚动条整体样式 */
  &::-webkit-scrollbar {
    width: 8px;
    /* 垂直滚动条的宽度 */
    height: 8px;
    /* 水平滚动条的高度 */
  }

  /* 滚动条轨道 */
  // &::-webkit-scrollbar-track {
  //   background: #f1f1f1; /* 轨道的背景色 */
  //   border-radius: 10px; /* 轨道的圆角 */
  // }

  /* 滚动条滑块 */
  &::-webkit-scrollbar-thumb {
    background: var(--scrollBar);
    /* 滑块的背景色 */
    border-radius: 5px;
    /* 滑块的圆角 */
  }

  /* 滑块悬停样式 */
  &::-webkit-scrollbar-thumb:hover {
    background: var(--scrollBarHover);
    /* 悬停时滑块的背景色 */
  }
}

.boxItem,
.lastItem {
  height: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  border-bottom: 1px solid var(--splitLine);
  margin-bottom: 6px;
  padding-bottom: 6px;
}

.lastItem {
  height: 20px;
  margin-top: 9px;
  border: unset;
}

.boxTitle {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .icon {
    position: absolute;
    left: -6px;
    width: 4px;
    height: 4px;
    border-radius: 50%;

    &.success {
      background-color: var(--green-50);
    }

    &.warn {
      background-color: var(--orange-60);
    }
  }
}

.boxContent {
  display: flex;
  width: 100%;
  justify-content: end;
}

.titleText {
  color: var(--color);
  font-weight: 500;
}

.time {
  color: var(--color-70);
}

.contentText {
  color: var(--color-70);
}

.count {
  color: var(--blue-70);
}

.handle {
  color: var(--blue-70);
}
</style>