<template>
  <div class="page">
    <div class="header-content">
      <u-navbar :is-back="false" title="积分" title-color="#000" title-width="300" title-size="32" :title-bold="true" :background="backgroundNavbar"></u-navbar>
      <div class="header-bg">
        <div class="swiper-content">
          <u-swiper :list="swiperList" mode="none" height="364" bg-color="none" @click="handleBannerClick"/>
        </div>
        <div class="user-info">
          <p>{{ user.realName || user.nickName }}，欢迎进入{{user.areaName}}！</p>
          <div @click="toPages('./signIn',status)">{{ status==1? '已签到':'签到' }}</div>
        </div>
      </div>
    </div>
    <div class="banner-list">
      <div class="item" v-for="(item, index) in bannerList" :key="index" @click="toPages(item.path)">
        <img :src="item.imgUrl" alt="">
      </div>
    </div>
    <tempalte>
      <div class="title-wrap">
        <span class="title">精选动态</span>
        <div class="right" hover-class="text-hover" @click="$linkTo('./handpick')">
          <span class="title-more">更多</span>
          <u-icon name="arrow-right" size="28" color="#687DA6"></u-icon>
        </div>
      </div>
      <div class="list-news" v-if="list.length">
        <div class="item" v-for="(item,index) in list" :key="index" @click="$linkTo(`./pickDetail?id=${item.id}`)">
          <p class="title" v-if="item.girdName">{{item.girdName}}</p>
          <div class="user-flex">
            <span>{{item.createUserName}}</span>
            <p>{{item.title}}</p>
            <div @click.stop="upCount(item.id,index)">
              <img :src="item.upStatus==0? 'https://cdn.cunwuyun.cn/wechat/biaopin/integral/dianzan.png':'https://cdn.cunwuyun.cn/wechat/biaopin/integral/dianzan-select.png'"  alt="">{{ item.upCount || 0 }}<span v-if="item.upCount > 99">+</span>
            </div>
          </div>
          <p class="item-content">{{item.content}}</p>
          <div class="img-list" v-if="item.images.length">
            <img v-for="(img, i) in item.images" :key="i" :src="img.url">
          </div>
          <div class="img-list" v-if="!item.images.length && item.videos.length">
            <img v-for="(video, ins) in item.videos" :key="ins" :src="video.facePicture.toString()">
          </div>
        </div>
      </div>
    </tempalte>
    <AiLogin ref="login"/>
  </div>
</template>
<script>
import {mapActions, mapState} from 'vuex'

export default {
  customNavigation: true,
  name: 'AppIntegral',
  appName: "积分",
  data() {
    return {
      cdn: "https://cdn.cunwuyun.cn/wxmp",
      swiperList: ['https://cdn.cunwuyun.cn/wechat/biaopin/integral/integral-swiper1.png'],
      backgroundNavbar: {
        background: 'url(https://cdn.cunwuyun.cn/wechat/wuxi/wuxi-nav-bg.png) no-repeat',
        backgroundSize: 'cover',
      }, 
      bannerList: [
        {
          imgUrl: 'https://cdn.cunwuyun.cn/wechat/biaopin/integral/integral-banner-jfsq.png',
          path: './integralApply'
        },
        {
          imgUrl: 'https://cdn.cunwuyun.cn/wechat/biaopin/integral/integral-banner-jfrw.png',
          path: './integralTask'
        },
        {
          imgUrl: 'https://cdn.cunwuyun.cn/wechat/biaopin/integral/integral-banner-jfph.png',
          path: './integralRank'
        },
        {
          imgUrl: 'https://cdn.cunwuyun.cn/wechat/biaopin/integral/integral-banner-jfsc.png',
          path: '/mods/AppRedemptionPoints/AppRedemptionPoints'
        },
        {
          imgUrl: 'https://cdn.cunwuyun.cn/wechat/biaopin/integral/integral-banner-jfgs.png',
          path: '/mods/AppRedemptionPoints/pointsPublicity'
        },
        {
          imgUrl: 'https://cdn.cunwuyun.cn/wechat/biaopin/integral/integral-banner-wdjf.png',
          path: '/pages/AppMine/myIntegral'
        }
      ],
      status: null,
      current: 1,
      list: [],
      allList: [],
      flag: false,
    }
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    getList(moduleId) {
      this.$instance.post(`/app/appcontentinfo/list-web`,null,{
        params: {
          moduleId: moduleId,
          current: this.current,
          girdId: this.user.girdId,
          containContent: true,
        }
      }).then(res=> {
        if(res?.data) {
          this.allList = res.data.records
          let newList = res.data.records.length > 3 ? res.data.records.slice(0,3) : res.data.records
          let mapList = newList.map(e=> {

            return {
              ...e,
              images: e?.files.filter(i => (i.postfix == '.jpg' || i.postfix == '.jpeg' || i.postfix == '.png')),
              videos: e?.files.filter(i => (i.postfix == '.mp4' || i.postfix == '.MP4')),
            }
          })
          this.list = mapList.map(v=> {
            return {
              ...v,
              images: v.images.length > 3? v.images.slice(0, 3) : v.images,
              videos: v.videos.length > 3? v.videos.slice(0, 3) : v.videos,
              upStatus: 0
            }
          })
        }
      })
    },
    handleBannerClick() {

    },
    // 点赞
    upCount(id,index) {
      if (this.flag) return

      this.flag = true
      this.$instance.post(`/app/appcontentinfo/supportById?id=${id}`).then(res=> {
        if(res?.code==0) {
          this.flag = false
          this.list[index].upStatus = 1
          this.$u.toast(`点赞成功`)
        }
      }).finally(() => this.flag = false)
    },
    toPages(url,status) {
      if(!this.user.areaId) {
        this.$dialog.confirm({
          content: '您只有完成信息认证后，才可进行相关操作。',
          confirmText: '去认证'
        }).then(() => {
          this.$linkTo('/pages/AppMine/userInfo')
        }).catch(() => {
        })
      } else {
        if(!status) {
          this.$linkTo(url)
        } else {
          // 停留
        }

      }
    },
    getStatus() {
      this.$instance.post(`/app/appwechatsigninfo/checkSign`).then(res=> {
        if(res?.data !== null) {
          this.status = 1
        }
      })
    },
    getModule() {
      this.$instance.post(`/app/appintegraluserapply/queryModuleByName`).then(res=> {
        if(res?.data) {
          this.getList(res.data)
        }
      })
    }

  },
  onShow() {
    this.getStatus()
    this.getModule()
  },

  onShareAppMessage() {
    return {
      title: '欢迎使用基层治理~',
      path: `/pages/AppHome/AppHome`
    }
  },
}
</script>

<style scoped lang="scss">
@import "~dvcp-wui/common";

.page {
  width: 100%;
  min-height: 100%;
  position: relative;

  .header-content {
    .header-bg {
      background: url('https://cdn.cunwuyun.cn/wechat/wuxi/wuxi-header-bg.png') center;
      background-size: 100% 100%;
    }
    .swiper-content {
      width: 686px;
      height: 364px;
      margin: 0 auto 24px;
    }
    .user-info {
      display: flex;
      justify-content: space-between;
      padding: 14px 32px 18px;
      p {
        font-family: PingFangSC-Regular;
        font-size: 28px;
        color: #222;
        line-height: 56px;
      }
      div {
        font-family: PingFangSC-Regular;
        font-size: 24px;
        color: #0262F2;
        line-height: 52px;
        padding: 0 24px;
        border: 1px solid #0262f280;
        border-radius: 28px;
      }
    }
  }
  .banner-list {
    padding: 32px 0 0 32px;
    background-color: #fff;
    .item {
      display: inline-block;
      width: 330px;
      height: 160px;
      margin: 0 26px 32px 0;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .title-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 32px 32px 24px;

    .title {
      font-family: PingFangSC-Medium;
      font-weight: 700;
      font-size: 44px;
      color: #222;
      line-height: 44px;
    }

    .right {

      .title-more {
        font-size: 28px;
        font-weight: 400;
        line-height: 44px;
        color: #687DA6;
      }
    }
  }

  .list-news {
    width: 686px;
    margin: 0 0 0 32px;
    .item {
      padding: 32px 24px 16px 24px;
      background-color: #fff;
      border-radius: 16px;
      margin-bottom: 32px;
      .title {
        font-family: PingFangSC-SNaNpxibold;
        font-weight: 600;
        font-size: 34px;
        color: #333;
        line-height: 40px;
        word-break: break-all;
        margin-bottom: 16px;
      }
      .user-flex {
        line-height: 40px;
        font-family: PingFangSC-Regular;
        span {
          display: inline-block;
          font-size: 34px;
          color: #2D7DFF;
          margin-right: 20px;
        }
        p {
          display: inline-block;
          font-size: 26px;
          color: #666;
        }
        div {
          float: right;
          font-size: 28px;
          color: #687DA6;
          line-height: 40px;
          img {
            width: 40px;
            height: 40px;
            margin-right: 4px;
            vertical-align: sub;
          }
        }
      }
      .item-content {
        margin-top: 30px;
        font-family: PingFangSC-Regular;
        font-size: 28px;
        color: #333;
        line-height: 42px;
        word-break: break-all;
      }
      .img-list {
        margin-top: 24px;
        img {
          width: 200px;
          height: 200px;
          margin: 0 16px 16px 0;
        }
        img:nth-of-type(3n) {
          margin-right: 0;
        }
      }
    }
  }

}
</style>
