<template>
  <!-- #ifdef H5 -->
  <zj-page-layout :isScroll="true" :refresherTriggered="refresherTriggered" @refresherrefresh="refresherrefresh"
    @scrolltolower="scrolltolower">
    <template slot="header">
      <view class="tab-container">
        <u-tabs :scrollable="false" :list="tabList" :current="tabCurrent" @click="changeTab" lineColor="#3D8FFD"
          :activeStyle="{
    color: '#3D8FFD'
  }" :inactiveStyle="{
    color: '#666666'
  }" itemStyle="padding-left: 0; padding-right: 0; height: 88rpx;">
        </u-tabs>
      </view>
    </template>

    <view class="list-container">
      <view class="item" v-for="(item, index) in dataList" :key="index">
        <view class="time">{{ item.createTime }}</view>

        <view class="card text-card" :class="item.readFlag == 'Yes' ? 'disabled' : ''" v-if="tabCurrent == 0"
          @tap="toDetail(item)">
          <view class="top">
            <view class="title">
              <u-tag text="未读" type="error" size="mini" v-if="item.readFlag == 'NO'"></u-tag>
              <view class="tit">{{ item.title }}</view>
            </view>
            <view class="text">{{ `您于${item.createTime}收到一条消息，请点击查看详情` }}</view>
          </view>
          <view class="bottom">
            <view class="left">查看详情</view>
            <text class="iconfont icon-jinru"></text>
          </view>
        </view>

        <view class="card img-card" v-else @tap="toDetail(item)">
          <view class="top" v-if="item.file.find(o => checkFileType(o.url) == 'img')">
            <image :src="item.file.find(o => checkFileType(o.url) == 'img').url" mode="aspectFill"></image>
          </view>
          <view class="bottom">
            <view class="title">{{ item.title }}</view>
            <view class="text">{{ `您于${item.createTime}收到一条消息，请点击查看详情` }}</view>
          </view>
        </view>
      </view>
    </view>

    <Loading :loadStatus="loadStatus" :dataList="dataList" />
  </zj-page-layout>
  <!-- #endif -->

  <!-- #ifndef H5 -->
  <web-view :src="webViewHref(`/packageMine/pages/notice/list`, pam, crossPagePam)"
    @message="crossPage.$listener"></web-view>
  <!-- #endif -->
</template>

<script>
// #ifdef H5
export default {
  data() {
    return {
      tabList: [
        { name: '系统公告', value: 0 },
        { name: '活动消息', value: 1 },
      ],
      tabCurrent: 0, // 当前选择值

      dataList: [],
      pageNum: 1,
      loadStatus: 0,
      refresherTriggered: false, // 下拉刷新状态
    };
  },

  onShow() {
    this.refreshList();
  },

  methods: {
    getList() {
      // this.getCount()
      this.loadStatus = 1;
      this.$api.post('/notice/listNotice', {
        type: this.tabCurrent == 0 ? 'B' : 'A',
        pageNo: this.pageNum,
        pageSize: 10,
      }).then(res => {
        this.loadStatus = 0;
        let list = res.data.records;
        if (list.length < 10) {
          this.loadStatus = 2;
        }
        this.dataList = this.dataList.concat(list);
      }).catch(() => {
        this.loadStatus = 2;
      }).finally(res => {
        this.refresherTriggered = false;
      })
    },

    // 滚动到底部
    scrolltolower(e) {
      if (this.loadStatus === 0) {
        this.pageNum++;
        this.getList();
      }
    },

    // 触发下拉刷新
    async refresherrefresh(e) {
      this.refresherTriggered = true;
      this.refreshList();
    },

    refreshList() {
      this.dataList = [];
      this.pageNum = 1;
      this.getList();
    },

    changeTab(e) {
      this.tabCurrent = e.value;
      this.refreshList();
    },

    toDetail(item) {
      if (item.title == "安维费用发放") {
        this.$navToPage({
          url: `/packageMine/pages/securityFeeDetails?settleMonthWagesId=${item.orderId}`
        })
      } else {
        if (item.noticeType == 'WB') {
          this.$api.post('/notice/mark/read', {
            ids: item.id,
          })
          this.$navToPage({
            url: `/packageHome/pages/maintenance/applyDetail?id=${item.orderId}`
          });
        } else {
          this.$navToPage({
            url: `/packageMine/pages/notice/detail?id=${item.id}`
          });
        }
      }
    },

    checkFileType(url) {
      if (!url) return '';
      if (url.indexOf('?') >= 0) {
        url = url.slice(0, url.indexOf('?'));
      }
      const fileSuffix = url.substring(url.lastIndexOf(".") + 1);
      const wordList = ['doc', 'docx', 'dot', 'wps', 'wpt'];
      const excelList = ['xls', 'xlsx', 'xlt', 'et', 'ett'];
      const pptList = ['ppt', 'pptx', 'dps', 'dpt', 'pot', 'pps'];
      const pdfList = ['pdf'];
      const imgList = ['jpg', 'jpeg', 'png'];
      const videoList = ['mp4'];
      if (wordList.indexOf(fileSuffix) >= 0) {
        return 'word';
      } else if (excelList.indexOf(fileSuffix) >= 0) {
        return 'excel';
      } else if (pptList.indexOf(fileSuffix) >= 0) {
        return 'ppt';
      } else if (pdfList.indexOf(fileSuffix) >= 0) {
        return 'pdf';
      } else if (imgList.indexOf(fileSuffix) >= 0) {
        return 'img';
      } else if (videoList.indexOf(fileSuffix) >= 0) {
        return 'video';
      } else {
        return '';
      }
    },
  },
};

// #endif
// #ifndef H5
export default {
  data() {
    return {
      pam: {},
    }
  },
  onLoad(pam) {
    this.pam = pam;
  }
}
// #endif
</script>

<style lang="scss" scoped>
.tab-container {
  background: #ffffff;
}

.list-container {
  padding: 30rpx;

  .item {
    .time {
      text-align: center;
      color: $sec-font;
      font-size: 28rpx;
    }

    .card {
      @include zj-card;
    }

    .text-card {
      padding: 0 30rpx;
      margin-top: 16rpx;
      margin-bottom: 30rpx;

      .top {
        padding: 30rpx 0 20rpx;
        border-bottom: 1px solid #eaeaea;

        .title {
          display: flex;
          align-items: center;

          ::v-deep .u-tag {
            margin-right: 16rpx;
          }

          .tit {
            font-size: 40rpx;
          }
        }

        .text {
          font-size: 32rpx;
          color: $sec-font;
          line-height: 48rpx;
          margin-top: 16rpx;
        }
      }

      .bottom {
        height: 100rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left {
          font-size: 32rpx;
        }

        .iconfont {
          color: $sec-font;
        }
      }

      &.disabled {
        .tit {
          color: #c6cdd6;
        }

        .text {
          color: #c6cdd6;
        }

        .left {
          color: #c6cdd6;
        }

        .iconfont {
          color: #c6cdd6;
        }
      }
    }

    .img-card {
      margin-top: 16rpx;
      margin-bottom: 60rpx;

      .top {
        image {
          width: 100%;
          height: 290rpx;
        }
      }

      .bottom {
        padding: 20rpx 30rpx;

        .title {
          font-size: 32rpx;
        }

        .text {
          color: $sec-font;
          line-height: 44rpx;
          margin-top: 16rpx;
        }
      }
    }
  }
}
</style>
