<template>
  <view>
    <custom-nav-bar left-text="党员服务" left-arrow />

    <image class="second-header" :src="recursionObj.icon">
    </image>

    <view class="party-grid">
      <block v-for="(item,index) in recursionTwoObj" :key="index">
        <block v-if="headerUserRoles(item,userRoles)">
          <navigator v-if="item.clickUrl" class="line-navigator" :url="updateQuery(item.clickUrl, item)"
            hover-class="none" style="width: 100%;height: 100%;;">
            <view style="width: 100%;height: 100%;;">
              <image class="icon" :src="item.icon" mode=""></image>
              <view class="title">{{item.name}}</view>
            </view>
          </navigator>
        </block>
      </block>
    </view>

    <view class="flex flex-between flex-v-center">
      <view class="title-name">志愿服务</view>
      <view class="change" @click="headerChange">
        <van-icon size="32rpx" name="/static/images/change.png" /><text>换一换</text>
      </view>
    </view>

    <view class="swiper">
      <swiper style="height: 250px;" v-if="volunteerProjectList.length !== 0" circular indicator-active-color="#C0CFDE"
        indicator-color="#fff" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
        :duration="duration">
        <swiper-item v-for="(item,index) in volunteerProjectList" :key="index">
          <view @click.stop="headerApplyFor(item)">
            <view class="swiper-piso">
              <image class="swiper-icon" :src="item.pics[0]" mode="aspectFill"></image>
              <view :class="`type${item.serviceStatus}`">{{getStatusText(statusList,item.serviceStatus)}}</view>
            </view>
            <view class="swiper-item" :style="item.serviceStatus !== 2 ? '' :'grid-template-columns: 95%'">
              <view>
                <view class="item-title uniline">{{item.title}}</view>
                <view class="msg multi-line">{{item.content}}</view>
              </view>
              <view class="but" v-if="item.serviceStatus !== 2" @click.stop="headerApplyFor(item)">申领</view>
            </view>
          </view>
        </swiper-item>
      </swiper>

      <van-empty v-else description="暂无活动风采" />
    </view>

    <view class="title-name" style="margin-top:30rpx">活动风采</view>
    <!-- 活动风采 -->
    <view class="activity" v-if="newsPageList.length !== 0">
      <block v-for="(item,index) in newsPageList" :key="index">
        <view class="activity-item" @click="headerDetail(item)">
          <image class="activity-image" :src="item.activityCoverImg" mode="aspectFill"></image>
          <view class="activity-type" v-if="index < 4" :class="`activity-type${index}`">NO.{{index+1}}</view>
          <view class="activity-title multi-line">{{item.activityTitle}}</view>
          <view class="activity-time">{{getDateTime(item.createTime)}}</view>
          <view class="activity-rigth">
            <text>{{item.userName}}</text>
            <image :src="item.avatar || '/images/default-avatar.png'" mode=""></image>
          </view>
        </view>
      </block>
    </view>

    <van-empty v-else description="暂无活动风采" />

  </view>
</template>

<script>
  import * as peopleApi from '@/api/peopleApi';
  import * as publicApi from '@/api/publicApi';
  import utils from '@/utils/util.map'
  export default {
    data() {
      return {
        userRoles: uni.getStorageSync('userRoles'),
        option: {},
        statusList: [],
        recursionObj: {},
        recursionTwoObj: [],
        newsPageList: [],
        pageNo: 1,
        pageSize: 12,
        total: 0,
        volunteerProjectList: [],
        volunteerProjectTotal: 0,
        voluntPageNo: 1,

        background: ['color1', 'color2', 'color3'],
        indicatorDots: true,
        autoplay: false,
        interval: 5000,
        duration: 500
      }
    },
    onLoad(option) {
      this.option = option
      this.userRoles = uni.getStorageSync('userRoles')
      this.getTypeApi('people_volunteer_project_serviceStatus', 'statusList');
      this.recursionApi();
      this.volunteerProject();
      this.newsPageApi(false)
    },
    methods: {
      headerUserRoles(item, key) {
        if (item.remark !== '') {
          return key === item.remark ? true : false;
        } else {
          return true;
        }
      },
      updateQuery(url, name) {
        return utils.updateQuery(url, name);
      },
      getDateTime(time) {
        return utils.getDateTime(time, 2)
      },
      getStatusText(list, key) {
        return utils.getStatusText(list, key)
      },
      //  获取群众点单字典
      async getTypeApi(dictType, list) {
        const res = await publicApi.getDictDataApi({
          dictType: dictType,
          pageNo: 1,
          pageSize: 100,
        });
        if (res.code === 0) {
          this[list] = res.data.list;
        }
      },
      // 志愿服务
      async volunteerProject() {
        const res = await peopleApi.volunteerProjectApi({
          pageNo: this.voluntPageNo,
          pageSize: 10,
        });
        if (res.data) {
          this.volunteerProjectList = res.data.list
          this.volunteerProjectTotal = res.data.total
        }
      },
      // 志愿服务申领
      headerApplyFor(item) {
        wx.navigateTo({
          url: `./detail?id=${item.id}`,
        });
      },
      async recursionApi() {
        const res = await publicApi.recursionApi({
          bannerType: 1,
          parentId: this.option.parentId
        });
        if (res.data) {
          this.recursionObj = res.data[0]
          this.recursionTwoObj = res.data[1].children || []
        }
      },
      // 分页参数处理事件
      generalQueryData(reset = false) {
        const {
          pageNo,
          pageSize
        } = this;
        const params = {
          pageNo: 1,
          pageSize: 14
        };
        if (reset) {
          return params;
        }
        return {
          ...params,
          pageNo: pageNo + 1,
          pageSize
        };
      },
      async newsPageApi(reset = true) {
        const params = this.generalQueryData(reset);
        const param = {
          pageNo: 1,
          pageSize: 10,
        };
        if (this.searchValue) {
          param.title = this.searchValue;
        }
        const res = await peopleApi.activityPageApi(param);
        if (res.data && res.data.list && res.data.list.length) {
          this.newsPageList = res.data.list

        }
      },
      headerDetail(item) {
        uni.navigateTo({
          url: '../activity-mien/detail?id=' + item.id
        })
      },
      headerChange() {
        const {
          volunteerProjectTotal,
          voluntPageNo
        } = this;
        if (voluntPageNo * 10 < volunteerProjectTotal) {
          this.voluntPageNo = voluntPageNo + 1,
            this.volunteerProject();
        } else {
          uni.showToast({
            title: '我到底了',
            icon: 'none',
          });
        }
      }
    },
    onReachBottom() {
      if (this.newsPageList.length === this.total) {
        return;
      }
      this.newsPageApi(false);
    },
  }
</script>

<style lang="less" scoped>
  .second-header {
    width: 100%;
    height: 330rpx;
  }

  .party-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
    align-items: center;
    grid-gap: 24rpx;
    // height: 100%;
    padding: 40rpx 38rpx 0 38rpx;
    margin-bottom: 38rpx;

    .icon {
      width: 100%;
      height: 80rpx;
    }

    .title {
      margin-top: 16rpx;
      font-size: 26rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #333333;
    }
  }

  .title-name {
    display: inline-block;
    position: relative;
    font-size: 36rpx;
    font-weight: 500;
    color: #333333;
    padding: 0rpx 30rpx 0 30rpx;
    z-index: 3;

    &::after {
      content: '';
      position: absolute;
      left: 15px;
      bottom: 5px;
      width: 140rpx;
      // width: 115%;
      z-index: -1;
      height: 10rpx;
      background: #FFCED6;
      border-radius: 2rpx;
    }
  }

  .swiper {
    margin-top: 24rpx;
    padding: 0 24rpx;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, #EEF7FF 100%);

    .swiper-piso {
      position: relative;

      .swiper-icon {
        width: 100%;
        height: 240rpx;
        border-radius: 6rpx;
      }
    }

    .swiper-item {
      margin-top: 38rpx;
      display: grid;
      align-items: center;
      grid-template-columns: 75% 20%;
      justify-content: space-between;

      .item-title {
        font-size: 30rpx;
        font-weight: 500;
        color: #194EB5;
      }

      .msg {
        margin-top: 13rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: rgba(34, 34, 34, 0.9);
      }

      .but {
        padding: 20rpx 20rpx;
        font-size: 26rpx;
        font-weight: 400;
        background-color: #257eeb;
        text-align: center;
        color: #fff;
        border-radius: 32312rpx;
      }
    }
  }

  .activity {
    padding: 23rpx 20rpx;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 16rpx;

    .activity-item {
      position: relative;
      background: #F9F9F9;
      border-radius: 8rpx;

      .activity-image {
        width: 100%;
        height: 180rpx;
      }

      .activity-title {
        font-size: 24rpx;
        font-weight: 400;
        color: #000000;
      }

      .activity-time {
        font-size: 24rpx;
        font-weight: 400;
        margin-top: 8rpx;
        color: #999999;
        padding: 0 16rpx;
      }

      .activity-rigth {
        text-align: right;
        font-size: 24rpx;
        font-weight: 400;
        color: #FF7F34;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 28rpx 28rpx 30rpx 0rpx;

        image {
          width: 32rpx;
          height: 32rpx;
          margin-left: 16rpx;
          border-radius: 1932312312px;
        }
      }
    }
  }

  /deep/.uni-swiper-dots-horizontal {
    background: rgba(116, 148, 182, 0.1);
    border-radius: 15px;
    border: 1px solid #FFFFFF;
    padding: 8rpx 26rpx;
  }

  .type0 {
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(291deg, #0A992D 0%, #11D03E 100%);
    border-radius: 0px 8rpx 0px 1000rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #fff;
    padding: 12rpx 22rpx 12rpx 36rpx;
  }

  .type1 {
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 0px 8rpx 0px 1000rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: #fff;
    padding: 12rpx 22rpx 12rpx 36rpx;
    background: linear-gradient(270deg, #5B638E 0%, #7B96BF 100%);
  }

  .activity-type {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0px 8rpx 1000rpx 0;
    font-size: 24rpx;
    font-weight: 400;
    color: #fff;
    padding: 12rpx 31rpx 12rpx 15rpx;
  }

  .activity-type0 {
    background: linear-gradient(270deg, #E71E00 0%, #FF5E33 100%);
  }

  .activity-type1 {
    background: linear-gradient(270deg, #F3623B 0%, #F88C44 100%);
  }

  .activity-type2 {
    background: linear-gradient(291deg, #fea422 0%, #f9ca10 100%);
  }

  .activity-type3 {
    background: linear-gradient(291deg, #4a507b 0%, #6882b1 100%);
  }

  .navigator-wrap {
    width: 100%;
    height: 100%;
  }

  .change {
    font-size: 24rpx;
    font-weight: 400;
    color: #999999;
    padding-right: 30rpx;
    display: flex;
    align-items: center;

    text {
      margin-left: 20rpx;
    }
  }
</style>