<template>
  <view class="meteorological">
    <view class="meteorological-header">
      <view class="meteorological-header-category">
        <picker
          @change="bindPickerChange"
          :value="meteorologicalIndex"
          :range="meteorologicalPickerList"
        >
          <view class="category-content">
            <view class="category-img">
              <u-icon name="list" size="54" class="category-icon"></u-icon>
            </view>
            <view class="category-text">{{ meteorologicalPickerList[meteorologicalIndex] }}</view>
          </view>
        </picker>
      </view>
    </view>
    <view class="meteorological-content">
      <scroll-view scroll-y="true" class="scroll-Y" @scrolltolower="handleScrolltolower">
        <view class="meteorological-listbody">
          <!-- 列表无数据 -->
          <template v-if="list_empty">
            <view class="meteorological-listbody-nodata">
              <text class="meteorological-listbody-nodata-text">暂无数据</text>
            </view>
          </template>

          <!-- 列表有数据 -->
          <template v-else>
            <view
              class="listbody-item"
              v-for="meteorologicalItem in meteorologicalList"
              :key="meteorologicalItem.id"
              @click="handleMeteorologicalDetails(meteorologicalItem)"
            >
              <view class="item-container">
                <!-- 标题 -->
                <view
                  class="item-title"
                >{{ meteorologicalItem.metTitle }}（{{ meteorologicalItem.metCategoryName }}）</view>

                <!-- 简介 -->
                <view class="item-content">{{ meteorologicalItem.metSummary }}</view>

                <!-- 发布时间 -->
                <view class="item-releasetime">发布时间：{{ meteorologicalItem.metInTime }}</view>
              </view>
            </view>
          </template>

          <!-- 加载更多组件 -->
          <uni-load-more :status="loadStatus" v-if="!list_empty"></uni-load-more>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import {
  meteorologicalListData,
  meteorologicalCategoryListData
} from '@/agrcloud-api/meteorological';
import uniLoadMore from "@/agrcloud-components/uni-load-more/uni-load-more.vue"

export default {
  name: 'meteorological',
  components: {
    uniLoadMore
  },
  data() {
    return {
      meteorologicalIndex: 0,
      respCategoryList: [],
      meteorologicalPickerList: ["全部"],
      currMeteorologicalValue: '',
      loadStatus: 'more',
      list_empty: false,
      pageTotal: 0,
      pageCount: 0,
      pagination: {
        pageNum: 1,
        pageSize: 10
      },
      meteorologicalList: []
    };
  },
  onLoad() {
    this.initData();
  },
  methods: {
    /** 初始化数据 */
    initData() {
      this.getCategoryListData();
    },
    getCategoryListData() {
      meteorologicalCategoryListData().then((res) => {
        this.respCategoryList = res.data || [];
        let tempCategoryList = [];
        for (let categoryIndex = 0; categoryIndex < this.respCategoryList.length; categoryIndex++) {
          tempCategoryList.push(this.respCategoryList[categoryIndex].dictLabel);
        }
        this.meteorologicalPickerList = [...this.meteorologicalPickerList, ...tempCategoryList];
        this.getMeteorologicalListData();
      }).catch(err => {
        this.loadStatus = 'noMores';
      });
    },
    bindPickerChange: function (e) {
      this.meteorologicalIndex = e.target.value;

      const currPickerChangeCategory = this.meteorologicalPickerList[e.target.value];
      if (currPickerChangeCategory != '全部') {
        for (let categoryIndex = 0; categoryIndex < this.respCategoryList.length; categoryIndex++) {
          if (currPickerChangeCategory == this.respCategoryList[categoryIndex].dictLabel) {
            this.currMeteorologicalValue = this.respCategoryList[categoryIndex].dictValue;
            break;
          }
        }
      } else {
        this.currMeteorologicalValue = '';
      }

      this.pagination.pageNum = 1;
      this.getMeteorologicalListData();
    },
    /** 获取通知公告之列表数据 */
    getMeteorologicalListData() {
      this.list_empty = false;
      this.loadStatus = 'loading';

      meteorologicalListData({ ...this.pagination, metCategoryId: this.currMeteorologicalValue }).then(res => {
        // 数据总条数
        this.pageTotal = res.total || 0;

        // 如果列表为第一页，返回列表数据清空
        if (this.pagination.pageNum == 1) {
          this.meteorologicalList = [];
        };

        // 处理返回结果
        if ((res.rows || []).length <= 0) { // 返回结果没有数据
          if ((this.meteorologicalList || []).length <= 0) {
            this.loadStatus = 'noMores';
            this.list_empty = true;
          } else {
            this.loadStatus = 'noMores';
          }
        } else { //返回结果有数据
          this.list_empty = false;

          // 获取列表数据分页数量
          this.pageCount = Math.ceil((res.total || 0) / this.pagination.pageSize);
          if ((res.total || 0) % this.pagination.pageSize == 0) {
            this.pageCount = Math.ceil((res.total || 0) / this.pagination.pageSize);
            if (this.pageCount == 1) {
              this.pageCount--;
            }
          } else {
            this.pageCount--;
          };

          // 处理页面状态
          if (this.pageCount === 0) {
            this.loadStatus = 'noMores'
          } else {
            this.loadStatus = 'more'
          }

          // 组装返回数据
          this.meteorologicalList.push.apply(this.meteorologicalList, res.rows || []);

          uni.stopPullDownRefresh();
        }

      }).catch(err => {
        this.loadStatus = 'noMores';
      });
    },
    handleScrolltolower() {
      this.loadStatus = 'loading';
      if (this.pagination.pageNum - 1 >= this.pageCount) {
        this.loadStatus = 'noMores';
        return;
      } else {
        this.pagination.pageNum++;
        this.getMeteorologicalListData();
      }
    },
    /** 通知公告之详情数据操作 */
    handleMeteorologicalDetails(param) {
      this.$store.dispatch("SetMeteorologicalDetails", param).then(() => {
        uni.navigateTo({
          url: '/pages/meteorological/details/index'
        });
      }).catch(() => {
        this.$msgbox('访问数据异常！', 'none');
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.meteorological {
  padding: 0;
  width: 100%;

  &-header {
    width: 100%;
    background: #ffffff;
    height: 104rpx;
    padding-top: 24rpx;

    &-category {
      margin: 0 24rpx;
      width: 100%;
      height: 56rpx;
      line-height: 56rpx;

      .category-content {
        display: flex;

        .category-img {
          flex: 1;
          margin-top: 4rpx;
        }

        .category-text {
          flex: 10;
          height: 56rpx;
          font-size: 34rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          line-height: 56rpx;
        }
      }
    }
  }

  .meteorological-content {
    padding-top: 25rpx;
    width: 100%;

    .scroll-Y {
      height: calc(
        100vh - 88rpx - 205rpx - env(safe-area-inset-bottom) -
          var(--status-bar-height)
      );
    }

    .meteorological-listbody {
      width: 100%;

      .listbody-item {
        height: 246rpx;
        background: #ffffff;
        margin-bottom: 24rpx;

        .item-container {
          padding: 24rpx;

          .item-title {
            height: 66rpx;
            font-size: 30rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 700;
            color: #333333;
            line-height: 42rpx;
            border-bottom: 2rpx solid #eeeeee;
          }

          .item-content {
            margin: 24rpx 0;
            font-size: 30rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 42rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }

          .item-releasetime {
            height: 42rpx;
            font-size: 30rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            line-height: 42rpx;
          }
        }
      }

      &-nodata {
        text-align: center;
        margin-top: 20rpx;

        &-text {
          font-size: 30rpx;
          color: #777777;
        }
      }
    }
  }
}
</style>
