<template>
  <div class="dynamic">
    <van-pull-refresh
      v-model="refreshing"
      @refresh="onRefresh"
      :loosing-text="$t('loosing_text')"
      :loading-text="$t('loading_text')"
    >
      <van-list v-model="loading" :finished="finished" @load="getList">
        <div v-if="photosList.length > 0 && make_friends == 1 && !isLabel">
          <div style="height: 10px"></div>
          <div class="Single_square_box alignment_left" @click="goToUrl('makingFriendsList')">
            <div class="Single_square alignment_left">
              <div class="Single_user_box alignment_left" v-for="(item, index) in photosList" :key="index">
                <div
                  class="Single_user_photo backCover"
                  v-bind:style="{ backgroundImage: 'url(' + item.pic + ')' }"
                ></div>
              </div>
              <div style="margin-left: 20px">又有人进入单身广场，戳此看看>></div>
            </div>
          </div>
        </div>
        <div style="padding-bottom: 110px">
          <div>
            <div class="moreCourseBox">
              <div id="elementLeft">
                <div
                  class="courseBox"
                  v-for="(item, index) in listLeft"
                  :key="index"
                  @click="goToUrlId(item.type, item)"
                >
                  <van-image
                    fit="cover"
                    v-if="item.pic"
                    class="u_lstImg"
                    :class="item.type == 'video' ? 'sel' : ''"
                    :src="item.pic"
                    alt=""
                  />
                  <div class="labelBox" @click.stop="goToLabel(item)" v-if="item.tag">
                    <div class="labelBoxImg"></div>
                    <div class="labelBoxText ellipsis_1">{{item.tag.name}}</div>
                  </div>
                  <div class="m_lstCt">
                    <div class="font16 color2a" :class="item.type == 'information' ? 'ellipsis_2' : 'ellipsis_1'">
                      {{ item.title }}
                    </div>
                    <div class="m_lstCt_ta f-fbc">
                      <div class="f-fc">
                        <van-image
                          fit="cover"
                          class="u_pv_icon"
                          src="https://image.fulllinkai.com/202111/10/b82efdd72a34150688ead6f1f2a32d79.png"
                          alt=""
                        />
                        <div class="font13 color9">{{ item.pv }}</div>
                      </div>
                      <div class="font12" style="color: #c8c8c8">{{ item.created_at }}</div>
                    </div>
                  </div>
                  <van-image
                    v-if="item.type == 'video'"
                    fit="contain"
                    width="20"
                    height="20"
                    class="list_item_icon"
                    src="https://image.fulllinkai.com/202111/12/50abd53df312139611640b39f35686d7.png"
                    alt=""
                  />
                </div>
                <div v-if="showLoaded && leftShow && !isLabel" class="courseBox" @click="goToAboutUs">
                  <van-image
                    fit="cover"
                    v-if="$store.state.app.info.avatar"
                    class="u_lstImg"
                    :src="$store.state.app.info.avatar"
                    alt=""
                  />
                  <div class="m_lstCt">
                    <div class="font16 color2a ellipsis_2">
                      {{ $store.state.app.info.name }}
                    </div>
                    <div class="m_lstCt_ta f-fbc ellipsis_2">
                      {{ $store.state.app.info.designation }}
                    </div>
                  </div>
                </div>
              </div>
              <div id="elementRight">
                <div
                  class="courseBox"
                  v-for="(item, index) in listRight"
                  :key="index"
                  @click="goToUrlId(item.type, item)"
                >
                  <van-image
                    fit="cover"
                    v-if="item.pic"
                    class="u_lstImg"
                    :class="item.type == 'video' ? 'sel' : ''"
                    :src="item.pic"
                    alt=""
                  />
                  <div class="labelBox" @click.stop="goToLabel(item)" v-if="item.tag">
                    <div class="labelBoxImg"></div>
                    <div class="labelBoxText ellipsis_1">{{item.tag.name}}</div>
                  </div>
                  <div class="m_lstCt">
                    <div class="font16 color2a" :class="item.type == 'information' ? 'ellipsis_2' : 'ellipsis_1'">
                      {{ item.title }}
                    </div>
                    <div class="m_lstCt_ta f-fbc">
                      <div class="f-fc">
                        <van-image
                          fit="cover"
                          class="u_pv_icon"
                          src="https://image.fulllinkai.com/202111/10/b82efdd72a34150688ead6f1f2a32d79.png"
                          alt=""
                        />
                        <div class="font13 color9">{{ item.pv }}</div>
                      </div>
                      <div class="font12" style="color: #c8c8c8">{{ item.created_at }}</div>
                    </div>
                  </div>
                  <van-image
                    v-if="item.type == 'video'"
                    fit="contain"
                    width="20"
                    height="20"
                    class="list_item_icon"
                    src="https://image.fulllinkai.com/202111/12/50abd53df312139611640b39f35686d7.png"
                    alt=""
                  />
                </div>
                <div v-if="showLoaded && !leftShow && !isLabel" class="courseBox" @click="goToAboutUs">
                  <van-image
                    fit="cover"
                    v-if="$store.state.app.info.avatar"
                    class="u_lstImg"
                    :src="$store.state.app.info.avatar"
                    alt=""
                  />
                  <div class="m_lstCt">
                    <div class="font16 color2a ellipsis_2">
                      {{ $store.state.app.info.name }}
                    </div>
                    <div class="m_lstCt_ta f-fbc ellipsis_2">
                      {{ $store.state.app.info.designation }}
                    </div>
                  </div>
                </div>
              </div>
              <!-- <div v-if="showLoaded" class="courseBox" @click="goToAboutUs">
                <div class="m_lstCt">
                  <div class="font16 color2a ellipsis_2">{{ $store.state.app.info.name }}</div>
                  <div class="m_lstCt_ta f-fc">
                    <div class="font14 color9 ellipsis_2">{{ $store.state.app.info.designation }}</div>
                  </div>
                </div>
                <van-image fit="cover" radius="4" class="u_lstImg" :src="$store.state.app.info.avatar" alt="" />
              </div> -->
            </div>
            <div class="bottomLine font12 color6 text-center" v-if="noMoreData">
              - {{ $t('I_have_a_line_in_the_sand') }} -
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { formatDate } from '@/plugins/timeConversion'
import { $toastClear, $toastLoading } from '@/config/toast'
import service from '@/utils/request'

export default {
  computed: {},
  components: {},
  props: {
    isLabel: {
      type: Boolean,
      default: false
    },
    labelId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      make_friends: '',
      merchant_id: false,
      list: [],
      photosList: [],
      listLeft: [],
      listRight: [],
      page: 1,
      pv_time: true,
      showLoaded: false,
      finished: false,
      loading: false,
      refreshing: false,
      emptyData: true,
      noMoreData: false,
      leftShow: true,
      heightLeft: 0,
      heightRight: 0
    }
  },
  watch: {
    $route(to, from) {
      if (from.name == 'welcome') {
        this.page = 1
        this.list = []
        this.onRefresh()
      }
    },
    list(e) {
      if (this.page === 1) {
        this.listLeft = []
        this.listRight = []
      }
      if (e.length > 0) {
        e.forEach((item, index) => {
          this.getOffsetWidth(item)
        })
      }
    }
  },
  methods: {
    goToLabel(item) {
      console.log(item, 'item-----')
      // return
      this.$router.push({
        name: 'dynamicClassification',
        params: {
          id: item.tag.id
        }
      })
    },
    goToUrl(url) {
      this.$router.push({
        name: url
      })
    },
    getOffsetWidth(item) {
      const vm = this
      setTimeout(() => {
        vm.$nextTick(() => {
          var listLeft = document.getElementById('elementLeft')
          var listRight = document.getElementById('elementRight')
          var h_l = listLeft.offsetHeight
          var h_r = listRight.offsetHeight
          if (h_l < h_r) {
            vm.leftShow = false
            vm.listLeft.push(item)
          } else {
            vm.leftShow = true
            vm.listRight.push(item)
          }
        })
        vm.showLoaded = true
      }, 200)
    },
    getPhotos() {
      const url = `s/h5/friend/photos`
      service
        .get(url)
        .then(data => {
          this.photosList = data
        })
        .catch(error => {
          console.log(error)
        })
    },
    getList() {
      const vm = this
      $toastLoading(vm.$i18n.t('loading_text'))
      let url = ''
      if (!vm.isLabel) {
        url = `/s/h5/video/infor/list?page=${vm.page}`
      } else {
        url = `/s/h5/tag/informations?page=${vm.page}&tag_id=${vm.labelId}`
      }
      service
        .get(url)
        .then(data => {
          this.$nextTick(() => {
            setTimeout(() => {
              this.make_friends = this.$store.state.app.info.make_friends
              console.log(this.make_friends)
            }, 300)
          })
          if (data.data.length != 0) {
            data.data.forEach(item => {
              item.created_at = item.created_at.replace(/-/g, '/')
              item.created_at = formatDate(item.created_at, 1)
            })
          }
          const dataV = vm.page === 1 ? [] : vm.list
          dataV.push(...data.data)
          vm.list = data.data
          // vm.list = dataV
          vm.refreshing = false
          if (vm.list.length !== 0) {
            vm.emptyData = true
          } else {
            vm.emptyData = false
          }
          if (vm.list.length < 15 || data.data.length < 15) {
            vm.finished = true
            vm.noMoreData = true
            if (vm.list.length === 0) {
              vm.noMoreData = false
            }
            $toastClear()
            return
          } else {
            vm.loading = false
            $toastClear()
          }
          vm.page++
          setTimeout(() => {
            $toastClear()
          }, 500)
        })
        .catch(error => {
          console.log(error)
        })
    },
    onRefresh() {
      this.page = 1
      this.finished = false
      this.loading = true
      this.getList()
    },
    goToAboutUs() {
      this.$router.push({
        name: 'aboutUs'
      })
    },
    goToUrlId(type, item) {
      this.showLoaded = false
      if (type == 'information') {
        this.$router.push({
          name: 'dynamicParticulars',
          params: { id: item.id }
        })
        if (this.pv_time) {
          this.pv_time = false
          item.pv += 1
        }
      } else {
        if (localStorage.getItem('merchant_id') == '40') {
          this.$router.push({
            name: 'videoDetailsV2',
            params: { id: item.id }
          })
          return
        }
        this.$router.push({
          name: 'videoDetails',
          params: { id: item.id }
        })
      }
    }
  },
  deactivated() {
    this.pv_time = true
  },
  created() {
  },
  mounted() {
    // document.title = localStorage.getItem('merchant_name') ? localStorage.getItem('merchant_name') + ` · ${this.$i18n.t(localStorage.getItem('informationTitle'))}` : this.$i18n.t(localStorage.getItem('informationTitle'))
    const ScrollTop = document.getElementById('app')
    ScrollTop.scrollTop = 0
    this.getPhotos()
    if (
      parseInt(localStorage.getItem('merchant_id')) === 5 ||
      parseInt(localStorage.getItem('merchant_id')) === 40 ||
      parseInt(localStorage.getItem('merchant_id')) === 596 ||
      parseInt(localStorage.getItem('merchant_id')) === 16
    ) {
      this.merchant_id = true
    }
  }
}
</script>
<style lang="scss" scoped>
.dynamic {
  width: 100vw;
  background: #ffffff;
}
.emptyDataIcon {
  width: 135px;
  height: 100px;
  display: block;
  margin: 0 auto;
}
.Single_square_box {
  margin: 0 15px;
  height: 48px;
  border-radius: 24px;
  background: #f2f3ff;
  .Single_square {
    margin-left: 15px;
    .Single_user_box {
      border: 2px solid #ffffff;
      margin-right: -10px;
      border-radius: 50%;
      .Single_user_photo {
        width: 24px;
        height: 24px;
        border-radius: 50%;
      }
    }
  }
}
.moreCourseBox,
.m_abo {
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  .courseBox {
    width: 168px;
    margin-bottom: 12px;
    background: #ffffff;
    box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
    box-sizing: border-box;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    .labelBox{
      position: absolute;
      top: 101px;
      left: 5px;
      display: flex;
      align-items: center;
      padding: 0 0 0 5px;
      width: fit-content;
      max-width: 90px;
      height: 20px;
      background: rgba(0, 0, 0, 0.4);
      border-radius: 10px;
      .labelBoxImg{
        /*margin-top: 2px;*/
        height:16px;
        width: 16px;
        background-image: url("https://image.fulllinkai.com/202201/11/5804938d3f57ff3dd581b1a780d80808.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .labelBoxText{
        flex: 1;
        //margin-top: -1px;
        margin-left: 4px;
        padding-right: 10px;
        font-size: 12px;
        color: #FFFFFF;
      }
    }
    .list_item_icon {
      position: absolute;
      right: 10px;
      top: 10px;
    }
    .m_lstCt {
      padding: 10px;
      box-sizing: border-box;
      .m_lstCt_ta {
        padding-top: 10px;
        .u_pv_icon {
          width: 12px;
          height: 14px;
          margin-right: 3px;
        }
      }
    }
    .u_lstImg {
      width: 100%;
      height: 126px;
    }
    .u_lstImg.sel {
      width: 100%;
      height: 224px;
    }
  }
}
.bottomLine {
  padding-top: 20px;
}
</style>
<style>
.van-list {
  background-color: white;
}
</style>
