<template>
  <view style="background-color: #EBF4F7;letter-spacing: 1rpx;">
    <tn-nav-bar :isBack="false" :bottomShadow="true" backgroundColor="#FFFFFF">
      <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left">
        <view style="text-shadow:  1rpx 0 0 #FFF, 0 1rpx 0 #FFF, -1rpx 0 0 #FFF , 0 -1rpx 0 #FFF;width: 100%;">
          <!-- <tn-tabs :list="[{name:'智慧云商协'}]" :current="topCurrent" activeColor="#000" :bold="false"
            :fontSize="36"></tn-tabs> -->
          <view style="text-align: center;font-size: 36rpx;" @click="selectShow = true">
            <text>{{HomeTitle}}</text>
            <image src="/static/c1455.png" style="width: 25rpx;height: 25rpx;margin-left: 10rpx;"></image>
          </view>
        </view>
      </view>
    </tn-nav-bar>
    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <view class="tn-flex tn-flex-center tn-flex-col-center tn-flex-row-between" style="padding-top: 30rpx;">
        <view class="tn-color-gray--dark"
              style="width: 100%;margin: 0rpx 30rpx 0 30rpx;border-radius: 100rpx;padding-left: 6rpx;background-color: #ffffff;"
              @click="openUrl('/pages/index/search/search')">
          <tn-notice-bar :list="searlist" mode="vertical" leftIconName="search"
                         :duration="6000"></tn-notice-bar>
        </view>
        <view class="tn-flex" style="margin:0px 30rpx;">
          <image @click="openUrl('/pages/index/my_assist')" src="/static/t1.png"
                 style="width: 35rpx;height: 35rpx;"></image>
          <image @click="openUrl('/pages/index/my_msg')" src="/static/t2.png"
                 style="width: 35rpx;height: 35rpx;margin-left: 40rpx;"></image>
        </view>
      </view>


      <swiper class="card-swiper" :circular="true" :autoplay="true" duration="500" interval="8000"
              @change="cardSwiper">
        <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
          <!-- <view class="swiper-item image-banner"
            :style="'background-image:url('+ item.url + ');background-size: cover;border-radius: 15rpx;'">
          </view> -->
          <image :src="item.url" mode="widthFix" style="width: 100%;border-radius: 15rpx;"></image>
        </swiper-item>
      </swiper>
      <view class="indication">
        <block v-for="(item,index) in swiperList" :key="index">
          <view class="spot" :class="cardCur==index?'active':''"></view>
        </block>
      </view>
    </view>
    <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-flex-row-center"
          style="padding:0px 30rpx 0rpx 30rpx;text-align: center;font-size: 28rpx;">
      <view @click="openUrl('/pages/index/tissue')"
            style="width: 25%;background: linear-gradient(270deg, #3CBAEA, #6BC7F0);;border-radius: 16rpx;padding:35rpx 20rpx;">
        <view>
          <image src="/static/c3.png" style="width: 35rpx;height: 35rpx;vertical-align: middle;">
          </image>
        </view>
        <view style="margin-top: 10rpx;">
          <text style="color: #FFF;">组织架构</text>
        </view>
      </view>
      <view @click="opentab(1)"
            style="width: 25%;background: linear-gradient(270deg, #EE7E45, #EE9657);border-radius: 16rpx;padding:35rpx 20rpx;margin-left:10rpx;">
        <view>
          <image src="/static/c2.png" style="width: 35rpx;height: 35rpx;vertical-align: middle;">
          </image>
        </view>
        <view style="margin-top: 10rpx;">
          <text style="color: #FFF;">协会活动</text>
        </view>
      </view>
      <view @click="openUrl('/pages/index/directory')"
            style="width: 25%;background: linear-gradient(270deg, #45B335, #89C33D);border-radius: 16rpx;padding:35rpx 20rpx;margin-left:10rpx;">
        <view>
          <image src="/static/c1.png" style="width: 35rpx;height: 35rpx;vertical-align: middle;">
          </image>
        </view>
        <view style="margin-top: 10rpx;">
          <text style="color: #FFF;">通讯录</text>
        </view>

      </view>
      <view @click="openUrl('/pages/index/knowledge_list')"
            style="width: 25%;background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);;border-radius: 16rpx;padding:35rpx 20rpx;margin-left:10rpx;">
        <view>
          <image src="/static/book.png" style="width: 35rpx;height: 35rpx;vertical-align: middle;">
          </image>
        </view>
        <view style="margin-top: 10rpx;">
          <text style="color: #FFF;">商学院</text>
        </view>
      </view>
    </view>
    <view @click.stop="opentab(1)" class="tn-flex tn-flex-row-between tn-flex-col-center tn-flex-row-center"
          style="padding: 30rpx;">
      <view style="font-size: 36rpx;">协会活动</view>
      <view style="color: #808080;">
        <text>更多</text>
        <text class="tn-icon-right"></text>
      </view>
    </view>
    <view style="padding-bottom: 30rpx;">
      <scroll-view :scroll-x="true" style="padding:0rpx 30rpx;white-space: nowrap;">
        <view v-for="(item,index) in actList" @click="openUrl('/pages/index/event_info')"
              style="position: relative;;display: inline-block;width: 300rpx;text-align: center;background-color: #FFF;border-radius: 20rpx;overflow: hidden;margin-right: 20rpx;">
          <view>
            <image :src="$store.state.apiUrl+item.activity_image" style="width: 350rpx;height: 170rpx;">
            </image>
          </view>
          <view style="padding:10rpx 20rpx;font-weight: 400;">
            <view class="tn-text-ellipsis-2">{{ item.activity_name }}</view>
          </view>
          <view style="position: absolute;top: 10rpx;left: 10rpx;">
            <tn-button v-if="item.type=='进行中'" width="80rpx" height="40rpx" size="sm"
                       backgroundColor="#6BC7F0 " fontColor="tn-color-white">进行中
            </tn-button>
            <tn-button v-if="item.type=='未开始'" width="80rpx" height="40rpx" size="sm"
                       backgroundColor="#EE9556 " fontColor="tn-color-white">预告
            </tn-button>
            <tn-button v-if="item.type=='已结束'" width="80rpx" height="40rpx" size="sm"
                       backgroundColor="#E12B33 " fontColor="tn-color-white">已结束
            </tn-button>
          </view>
        </view>
      </scroll-view>
    </view>
    <view style="background-color: #ffffff;">
      <tn-tabs :list="goryList" :isScroll="true" :activeItemStyle="{fontSize:'35rpx',fontWeight:'600'}"
               activeColor="#000000" :current="current" name="name" @change="change" :fontSize="28"></tn-tabs>
    </view>
    <view style="padding:10px 30rpx;padding-bottom: 100rpx;">
      <view v-for="(item,index) in news_list" class="tn-flex tn-flex-row-between"
            @click="openUrl('/pages/index/new_info?id='+item.id)"
            style="background-color: #ffffff;padding: 20rpx;border-radius: 10rpx;margin-bottom: 10rpx;">
        <view style="position:relative;">
          <view class="tn-text-ellipsis-2" style="font-size: 28rpx;">{{ item.news_title }}</view>
          <view class="tn-flex tn-flex-row-between"
                style="bottom: 0rpx;width: 100%;color: #808080;padding-top: 80rpx;  min-width: 380rpx;overflow: hidden">
            <view>{{ item.name }}</view>
            <view>
              <text class="tn-icon-eye"></text>
              <text>{{ item.news_hits }}</text>
            </view>
          </view>
        </view>
        <view style="margin-left: 20rpx;" v-if="item.news_image">
          <image :src="$store.state.apiUrl+item.news_image" mode="aspectFill"
                 style="width: 240rpx;height: 160rpx;;border-radius: 10rpx;"></image>
        </view>
      </view>
    </view>
    <tn-select v-model="selectShow" mode="single" :list="selectList" @confirm="confirm"></tn-select>
  </view>

</template>

<script>
import {
  newsGoryList,
  activityList,
  newsList, associationIndex
} from '@/util/api.js';
import store from '@/store/index.js'

export default {
  data() {
    return {
      selectShow: false,
      selectList: [],
      topCurrent: 0,
      searlist: [
        '企业家名称/公司名称',
      ],
      cardCur: 0,
      isAndroid: true,
      swiperList: [{
        url: '/static/banner.jpg',
      }, {
        url: '/static/banner2.jpg',
      }],
      goryList: [],
      news_list: [],
      actList: [],
      current: 0,
      page: 1,
      size: 10,
      gory_id: 0,
      type: 1,
      HomeTitle:'',
    }
  },
  mounted() {
    this.getNewsGoryList();
    this.getActivityList();
    this.getAssociationIndex();
  },
  methods: {
    confirm(d) {
      var info = d[0];
      store.commit('$tStore', {
        name: 'Gid',
        value: info.value
      })
      this.page = 1;
      this.goryList = [];
      this.news_list = [];
      this.actList = [];
      this.getNewsGoryList();
      this.getActivityList();
      this.getAssociationIndex();
    },
    getAssociationIndex() {
      associationIndex()
          .then(res => {

            if (res.code == 1) {
              var key = res.data;
              const transformedSelectList = key.map(item => ({
                value: item.id,
                label: item.association_name
              }));
              const foundNumber = transformedSelectList.find((element) => element.value === store.state.Gid);
                this.HomeTitle=foundNumber.label;
              this.selectList = transformedSelectList;
            }
          })
          .catch(error => {
            uni.showToast({
              title: error,
              duration: 2000
            });
          })
    },
    getActivityList() {
      activityList({
        association_id: store.state.Gid,
        page: 1,
        size: 5
      })
          .then(res => {
            console.log(res);
            if (res.code == 1) {
              this.actList = res.data.ret;
            }
          })
          .catch(error => {
            uni.showToast({
              title: error,
              duration: 2000
            });
          })
    },
    getNewsGoryList() {
      newsGoryList({
        association_id: store.state.Gid
      })
          .then(res => {
            console.log(res);
            if (res.code == 1) {
              var key = res.data;
              key.unshift({
                id: 0,
                name: '最新'
              });
              this.goryList = key;
              this.type = 1;
              this.gory_id = 0;
              this.getNewsList();
            }
          })
          .catch(error => {
            uni.showToast({
              title: error,
              duration: 2000
            });
          })
    },
    getNewsList() {
      newsList({
        association_id: store.state.Gid,
        type: this.type,
        gory_id: this.gory_id,
        page: this.page,
        size: this.size
      })
          .then(res => {
            console.log(res);
            if (res.code == 1) {
              this.news_list.push(...res.data.ret);
            }
          })
          .catch(error => {
            uni.showToast({
              title: error,
              duration: 2000
            });
          })
    },
    cardSwiper(d) {
      this.cardCur = d.detail.current;
    },
    ReachBottom() {
      console.log('home');
      this.page = this.page + 1;
      this.getNewsList();
      //this.getIndex();
    },
    change(e) {
      this.current = e;
      var info = this.goryList[e];
      this.gory_id = info.id;
      this.type = e === 0 ? 1 : 0;
      this.page = 1;
      this.news_list = [];
      this.getNewsList();
    },
    openUrl(url) {
      uni.navigateTo({
        url: url
      })
    },
    opentab() {
      uni.$emit('depId', {
        index: 1
      })
    }
  }
}
</script>


<style lang="scss" scoped>

</style>
