<template>
  <div id="growUp">
    <div class="head">
      <img class="head_img" src="@/assets/grow_up/head.png" alt="" />
      <div class="mask">
        <p class="title">研学圈</p>
        <div class="grow_up_btn_box">
          <div class="btn" @click="handleTrip">
            <van-icon class="icon" name="photo-o" />
            <span>行程相册</span>
          </div>
          <div class="line">|</div>
          <div class="btn" @click="handleRecord">
            <van-icon class="icon" name="notes-o" />
            <span>成长记录</span>
          </div>
        </div>
      </div>
    </div>
    <div class="tabsCard ignore" :class="tabOpen ? 'open' : ''">
      <p class="title ignore">筛选</p>
      <van-tabs v-model="active" :ellipsis="false" ref="tabs" color="#4092FF" @change="tabChange">
        <van-tab :title="item.name" v-for="(item, index) in tabList" :key="index"> </van-tab>
      </van-tabs>
      <div class="tab_toggle ignore" @click="tabOpen = !tabOpen">
        <van-icon class="icon" name="arrow-down" />
      </div>
    </div>
    <div class="item_box">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false" @load="growthContentList">
        <div class="item" v-for="(item, index) in dataList" :key="index" @click="handleDetail(item)">
          <div class="top">
            <img class="user_img" :src="item.headImg ? item.headImg : defaultHead" alt="" />
            <p class="title">
              {{ item.userName }}<span v-if="item.level">{{ item.level }}</span>
            </p>
            <p class="time">{{ item.createTime }}</p>
          </div>
          <div class="content" :class="item.contentOpen ? 'open' : ''">
            <span class="tag" v-for="(item2, index2) in item.contentTagList" :key="index2">#{{ item2.name }}</span>
            <span v-html="item.content"></span>
          </div>
          <p class="read_more" v-if="item.content.length > 90" @click.stop="item.contentOpen = !item.contentOpen">
            {{ item.contentOpen ? '收起全文' : '阅读全文' }}
          </p>
          <div class="course_link" @click.stop="handleCourse(item.classNo)" v-if="item.pname">
            <div class="img_box">
              <img class="course_img" :src="item.pimg" alt="" />
              <img class="mask" src="@/assets/grow_up/link.png" alt="" />
            </div>
            <p class="title">{{ item.pname }}</p>
          </div>
          <ImgBox :imgArr="item.newPhoths" :itemIndex="index" @handlePhoto="handlePhoto"></ImgBox>
          <div class="action_bar">
            <div>
              <div class="btn" @click.stop="handleThumb(index)">
                <van-icon class="icon" :class="item.isThumb ? 'active' : ''" name="good-job-o" />
                <span>{{ item.thumbNum }}</span>
              </div>
              <div class="btn">
                <van-icon class="icon" name="comment-o" />
                <span>{{ item.commentNum }}</span>
              </div>
            </div>
            <div class="btn del_btn" v-if="userInfo.centerNo == item.centerNo" @click.stop="handleDel(item)">
              <van-icon class="icon" name="delete-o" />
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <div class="edit_box" @click="handleRelease">
      <van-icon class="icon" name="edit" />
    </div>
    <tabbar3 active="growup"></tabbar3>
    <van-image-preview v-model="showPreview" :images="previewArr" :start-position="startPosition" @change="previewChange">
    </van-image-preview>
  </div>
</template>
<script>
import Tabbar3 from '@/views_qyx/component/c_Tabbar3'
import ImgBox from './c_ImgBox.vue'
export default {
  data() {
    return {
      //1-精选 2-全部 3-必看 4-学校 5-标签
      tabList: [
        {
          name: '精选',
          type: 1,
        },
        {
          name: '全部',
          type: 2,
        },
        {
          name: '必看我的',
          type: 3,
        },
      ],

      dataList: [],
      active: '',
      pageNum: 1,
      pageSize: 5,
      loading: false,
      finished: false,

      defaultHead: require('@/assets/head.png'),
      tabOpen: false,

      showPreview: false,
      startPosition: 0,
      previewIndex: 0,
      previewArr: [],
      unionId: '',
    }
  },
  mounted() {
    this.$toast.loading({
      message: '加载中...',
      duration: 0,
      forbidClick: true,
    })
    sessionStorage.setItem('prePage', 'GrowUp')
    if (process.env.NODE_ENV === 'production' && this.common.isWeiXin()) {
      let openId = sessionStorage.getItem('openId')
      if (!openId) {
        this.$router.push({ name: 'Authorize' })
        return
      }
      this.unionId = sessionStorage.getItem('unionId')
      this.getUserInfo()
    } else {
      this.unionId = this.TestUnionId
      this.$nextTick(() => {
        this.getUserInfo()
      })
    }
    // 获取并设置学校
    let schoolNames = sessionStorage.getItem('schoolNames')
    if (schoolNames) {
      let schoolNamesArr = JSON.parse(schoolNames)
      let tabList = this.tabList
      for (let i in schoolNamesArr) {
        tabList.push({
          name: schoolNamesArr[i].schoolName,
          type: 4,
        })
      }
      this.tabList = tabList
    }
    // this.getGrowthTagList()//获取并设置标签
    // // 设置当前选项卡默认位置
    // let growUpType = sessionStorage.getItem('growUpType');
    // if (growUpType) {
    //   this.active = Number(growUpType)
    // }
  },
  methods: {
    // 获取并设置标签
    getGrowthTagList() {
      this.http
        .getGrowthTagList({
          status: 0,
        })
        .then((res) => {
          console.log('标签:', res)
          if (res.code == 200) {
            let tabList = this.tabList
            let tagList = res.rows
            for (let i in tagList) {
              tabList.push({
                name: tagList[i].name,
                id: tagList[i].id,
                type: 5,
              })
            }
            this.tabList = tabList
            // 设置当前选项卡默认位置
            let growUpType = sessionStorage.getItem('growUpType')
            if (growUpType) {
              this.active = Number(growUpType)
            }
            this.growthContentList()
            this.setWxShare()
          } else {
            this.$toast(res.message)
          }
        })
    },
    // tab切换
    tabChange(item) {
      console.log('tab切换:')
      this.pageNum = 1
      this.dataList = []
      this.finished = false
      this.tabOpen = false
      sessionStorage.setItem('growUpType', this.active)
      this.growthContentList()
    },
    // 获取列表
    growthContentList() {
      const userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
      if (!userInfo?.phone) {
        // 请先登录
        this.$dialog
          .alert({
            message: '请登录后查看，是否前往登录',
            confirmButtonText: '去登录',
            confirmButtonColor: 'rgb(48, 116, 255)',
            theme: 'round-button',
          })
          .then(() => {
            // on close
            this.checkLogin()
          })
        return
      }
      if (this.pageNum == 1) {
        this.$toast.loading({
          message: '加载中...',
          duration: 0,
          forbidClick: true,
        })
      }
      this.loading = true
      let type = this.tabList[this.active].type
      this.http
        .growthContentList({
          centerNo: this.userInfo.centerNo, //当前用户中台编号
          schoolName: type == 4 ? this.tabList[this.active].name : '', //type=4 学校名称
          tagId: type == 5 ? this.tabList[this.active].id : '', //type=5 标签id
          type: type, //1-精选 2-全部 3-必看 4-学校 5-标签
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        })
        .then((res) => {
          this.$toast.clear()
          console.log('列表:', res)
          if (res.code == 200) {
            this.loading = false
            if (res.total < this.pageNum * this.pageSize) {
              this.finished = true
            } else {
              this.pageNum++
            }
            let dataList = res.rows
            for (let i in dataList) {
              dataList[i].content = dataList[i].content.replace('\n', '<br>')
              dataList[i].newPhoths = []
              for (let j in dataList[i].photos) {
                dataList[i].newPhoths.push(dataList[i].photos[j].img)
              }
              dataList[i].contentOpen = false
              dataList[i].showDel = false
            }
            if (this.pageNum == 1) {
              this.dataList = dataList
            } else {
              this.dataList = this.dataList.concat(dataList)
            }
          } else {
            this.$toast(res.message)
          }
        })
    },
    // 点击照片
    handlePhoto(dayIndex, index) {
      this.previewArr = this.dataList[dayIndex].newPhoths
      this.startPosition = index
      this.previewIndex = index
      this.showPreview = true
    },
    // 预览图切换
    previewChange(index) {
      this.previewIndex = index
    },
    // 点击点赞按钮
    handleThumb(index) {
      if (this.dataList[index].isThumb == 1) {
        this.growthContentCancelThumb(index)
      } else {
        this.growthContentThumb(index)
      }
    },
    // 点赞
    growthContentThumb(index) {
      let dataList = this.dataList
      this.http
        .growthContentThumb({
          centerNo: this.userInfo.centerNo, //当前用户中台编号
          contentId: dataList[index].id,
        })
        .then((res) => {
          console.log('点赞结果:', res)
          if (res.code == 200) {
            dataList[index].isThumb = 1
            dataList[index].thumbNum++
            this.dataList = dataList
          } else {
            this.$toast(res.message)
          }
        })
    },
    // 取消点赞
    growthContentCancelThumb(index) {
      let dataList = this.dataList
      this.http
        .growthContentCancelThumb({
          centerNo: this.userInfo.centerNo, //当前用户中台编号
          contentId: dataList[index].id,
        })
        .then((res) => {
          console.log('取消点赞结果:', res)
          if (res.code == 200) {
            dataList[index].isThumb = 0
            dataList[index].thumbNum--
            this.dataList = dataList
          } else {
            this.$toast(res.message)
          }
        })
    },
    // 行程相册
    handleTrip() {
      this.$router.push('GrowUpTrip')
    },
    // 成长记录
    handleRecord() {
      this.$router.push('GrowUpRecord')
    },
    // 进入详情页
    handleDetail(item) {
      this.$router.push({ name: 'GrowUpDetail', query: { id: item.id, type: item.type } })
    },
    // 点击课程
    handleCourse(classNo) {
      this.$router.push({ name: 'ServiceAbroadDetail', query: { courseId: classNo } })
    },
    // 点击发布
    handleRelease() {
      this.$router.push('GrowUpRelease')
    },
    // 删除动态
    handleDel(item) {
      this.$dialog
        .confirm({
          title: '操作',
          message: '确认删除',
        })
        .then(() => {
          this.http
            .getGrowthContentRemove({
              centerNo: this.userInfo.centerNo,
              id: item.id,
            })
            .then((res) => {
              if (res.code == 200) {
                this.$toast('删除成功')
                this.pageNum = 1
                this.dataList = []
                this.finished = false
                this.growthContentList()
              } else {
                this.$toast(res.message)
              }
            })
        })
        .catch(() => {})
    },
    // 获取用户信息
    getUserInfo() {
      let userInfo = sessionStorage.getItem('userInfo')
      if (userInfo) {
        userInfo = JSON.parse(userInfo)
        this.userInfo = userInfo
        this.getGrowthTagList() //获取并设置标签
      } else {
        this.$toast.loading({
          message: '加载中...',
          duration: 0,
          forbidClick: true,
        })
        this.yxAxios.get(`${this.proxyUrl}/api/wx/wx1c630c8773c482f1/getUserInfo?unionId=${this.unionId}`).then((res) => {
          this.$toast.clear()
          if (res.data.code == 200) {
            this.userInfo = res.data.data
            // this.showData = true
            this.getGrowthTagList() //获取并设置标签

            sessionStorage.setItem('userInfo', JSON.stringify(res.data.data))

            if (res.data.data.schoolNames || res.data.data.schoolNames == [] || res.data.data.schoolNames == 'null') {
              sessionStorage.setItem('schoolNames', JSON.stringify(res.data.data.schoolNames))
              this.$store.commit('changeSchool', res.data.data.schoolNames)
              if (!sessionStorage.getItem('schoolNamesChoose')) {
                sessionStorage.setItem('schoolNamesChoose', JSON.stringify(res.data.data.schoolNames[0]))
              }
            } else {
              sessionStorage.setItem('schoolNames', [])
              this.$store.commit('changeSchool', [])
            }
          } else {
            console.log('getUserInfo失败')
            this.getGrowthTagList() //获取并设置标签

          }
        })
      }
    },
    // 判断是否已登录
    checkLogin() {
      if (process.env.NODE_ENV != 'production') return true
      const userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
      if (!userInfo?.phone) {
        sessionStorage.setItem('prePage', 'GrowUp')
        sessionStorage.setItem('prePageQuery', JSON.stringify({ showTab: this.$route.query.showTab }))
        this.$router.push({ name: 'LoginPublic' })
        return false
      }
      return true
    },
    setWxShare() {
      // 设置分享
      this.$emit('getWxConfig', {
        title: '成长印记', // 分享标题
        desc: '', // 分享描述
        link: `https://payment.myjxt.com/center/#/GrowUp`, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: 'https://payment.myjxt.com/share_qxy.png', // 分享图标
      })
    },
  },
  components: {
    Tabbar3,
    ImgBox,
  },
}
</script>
<style lang="scss">
#growUp {
  min-height: 100%;
  box-sizing: border-box;
  background: rgb(245, 246, 250);
  padding-bottom: 140px;
  .head {
    width: 100%;
    position: relative;
    .head_img {
      width: 100%;
    }
    .mask {
      width: 100%;
      height: 100%;
      background: linear-gradient(rgba(0, 0, 0, 0) 20%, #10387f);
      position: absolute;
      top: 0;
      left: 0%;
      .title {
        font-size: 40px;
        color: #fff;
        font-weight: bold;
        margin-top: 164px;
        line-height: 56px;
        margin-left: 36px;
      }
      .grow_up_btn_box {
        display: flex;
        align-items: center;
        font-size: 24px;
        margin-top: 34px;
        margin-left: 36px;

        .btn {
          display: flex;
          align-items: center;
          color: #fff;
          .icon {
            font-size: 40px;
            color: #635ff1;
            margin-right: 14px;
          }
        }
        .line {
          font-size: 24px;
          color: #608ac4;
          margin-left: 14px;
          margin-right: 26px;
        }
      }
    }
  }
  .tabsCard.ignore {
    width: 100vw;
    height: 44px;
    position: relative;
    z-index: 1;
    .title.ignore {
      display: none;
    }
    .tab_toggle.ignore {
      width: 44px;
      height: 44px;
      background: #fff;
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      .icon {
        font-size: 20px;
        transition: 0.3s ease;
      }
    }
    .van-tabs {
      height: 44px;
    }
    .van-tab {
      font-size: 3.733vw;
      line-height: 44px;
      justify-content: flex-start;
    }
    .van-tabs__wrap {
      width: calc(100% - 44px);
    }
    &.open {
      .title.ignore {
        display: block;
        font-size: 14px;
        color: #646566;
        background: #fff;
        padding: 6px 44px 0 10px;
      }
      .tab_toggle.ignore {
        .icon {
          transform: rotate(180deg);
        }
      }
      .van-tab {
        display: inline-block;
        line-height: 24px;
        padding: 5px 0;
        margin-right: 10px;
      }
      .van-tab--active {
        font-weight: bold;
      }
      .van-tab__text {
        padding: 4px 8px;
        background: #eee;
        border-radius: 4px;
      }
      .van-tabs__wrap {
        width: 100%;
        height: auto;
      }
      .van-tabs__nav {
        display: block;
        padding: 6px 0 10px 10px;
      }
      .van-tabs__line {
        display: none;
      }
    }
  }
  .item_box {
    .item {
      padding: 40px 24px;
      background: #fff;
      &:not(:last-of-type) {
        margin-bottom: 16px;
      }
      .top {
        .user_img {
          width: 74px;
          height: 74px;
          border-radius: 5px;
          overflow: hidden;
          float: left;
          margin-right: 14px;
        }
        .title {
          font-size: 28px;
          color: #999;
          span {
            display: inline-block;
            font-size: 20px;
            color: #4092ff;
            border: 1px solid #4092ff;
            border-radius: 6px;
            padding: 4px 6px;
            margin-left: 8px;
          }
        }
        .time {
          font-size: 24px;
          color: #999;
        }
      }
      .content {
        font-size: 28px;
        margin-top: 24px;
        line-height: 50px;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        &.open {
          display: block;
        }
        .tag {
          color: #4092ff;
          margin-right: 10px;
        }
      }
      .read_more {
        display: inline-block;
        padding: 10px 0;
        color: #999;
        font-size: 30px;
      }
      .course_link {
        width: 100%;
        background: #eff1f4;
        border-radius: 18px;
        margin-top: 20px;
        display: flex;
        align-items: center;
        .img_box {
          width: 146px;
          height: 146px;
          border-radius: 18px;
          overflow: hidden;
          position: relative;
          margin-right: 26px;
          flex-shrink: 0;
          .course_img {
            height: 100%;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
          }
          .mask {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
          }
        }
        .title {
          font-size: 28px;
          margin-right: 26px;
        }
      }
      .action_bar {
        margin-top: 30px;
        display: flex;
        justify-content: space-between;
        .btn {
          font-size: 24px;
          display: inline-flex;
          align-items: center;
          margin-right: 28px;
          .icon {
            font-size: 40px;
            margin-right: 8px;
          }
          .active {
            color: red;
          }
        }
        .del_btn {
          margin-right: 0;
        }
      }
    }
  }
  .edit_box {
    width: 106px;
    height: 106px;
    border-radius: 50%;
    background: #3074ff;
    position: fixed;
    bottom: 200px;
    right: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    .icon {
      font-size: 60px;
      color: #fff;
    }
  }
}
</style>
