<template>
  <view class="content">
    <view class="container">
		<view class="bg">
			<view class="banner">
				<swiper class="swiper" circular autoplay>
					<swiper-item v-for="(item,index) in TSwiperData" :key="index">
						<view class="swiper-item">
							<image :src="$config.imageBaseUrl + item.url" mode="aspectFill"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="notice u-flex u-col-center u-row-between">
				<view class="l  u-flex u-col-center u-row-center">
					<image src="@/static/images/index/notice.png" mode="aspectFill"></image>
					<text>公告</text>
				</view>
				<view class="r">
					<swiper class="swiper" vertical circular autoplay>
						<swiper-item v-for="(item,index) in annList" :key="index">
							<view class="swiper-item u-l-1">{{ item.messageContent }}</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
		
	  <view class="menu">
	  	<view class="i" v-for="(item,index) in gridList" :key="index" @click="pageTo(item.link,item.type)">
	  		<image :src="item.icon" mode="aspectFill"></image>
	  		<text>{{item.title}}</text>
	  	</view>
	  </view>
    
    
    <!--内容-->
	<view class="news">
		<view class="news-top u-flex u-row-between u-col-center">
			<view class="l">
				<view class="i on u-flex u-col-center">
					政策资讯
				</view>
				<view class="i  u-flex u-col-center" @click="$pageTo('/pages/index/needList/sellList?type=0')">
					销售需求
				</view>
				<view class="i ou-flex u-col-center" @click="$pageTo('/pages/index/needList/sellList?type=1')">
					求购需求
				</view>
			</view>
			<view class="r u-flex u-row-right u-col-center" @click="$pageTo('/pages/find/policyInformation/index')">
				<text>更多</text>
				<image src="../static/images/index/more.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="list">
			<view class="item u-flex u-row-between u-col-center" v-for="(item,index) in arctileList" :key="index"
				@click="$pageTo(`/pages/find/policyInformation/policyForDetails?id=${item.id}`)">
				<view class="l">
					<view class="title u-l-2">
						{{item.policyTitle}}
					</view>
					<view class="info">
						<text class="type">{{getType(item.policySource)}}</text>
						<text class="time">{{item.createTime.substring(0, 10)}}</text>
					</view>
				</view>
				<view class="r">
					<image src="../static/images/index/news.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
	</view>
  </view>
  </view>
</template>

<script>
import polInfComponent from "@/pages/find/policyInformation/polInfComponent/index";
import {
  listPolicyPublish,getPolicyPublish,bannerList,announcement
} from "@/api/lef/policyPublish.js";
import { dict } from "@/api/lef/policyPublish";
import config from "@/config";

export default {
  components: { polInfComponent },
  data() {
    return {
      isPolicyPublish: false,
      selectedEnv: "",
      haveCreateCollection: false,
      swiperDotIndex: 0,
      current: 0,
      total: 0,
      reTotal: 0,
      envList: [],
      policyObject: {
        policyType: "",
        showTotal: 8,
        loadMoreIf: false,
      },
      TSwiperData: [
        {
          image: "../static/images/index/xvYdfA.png",
        },
        {
          image: "../static/images/index/xvYJeO.jpg",
        },
        {
          image: "../static/images/index/xvYUFH.jpg",
        },
      ],
      // 九宫格图标
      gridList: [
        {
          id: "1",
          icon: "../static/images/index/i1.png",
          title: "信息直报",
          link: "/pages/accounts/dirRepInfo/index",
          openType: "navigateTo",
          type: 1
        },
        {
          id: "",
          icon: "../static/images/index/i2.png",
          title: "信用查询",
          link: "/pages/credit/index",
          openType: "switchTab",
          type: 2
        },
        {
          id: "",
          icon: "../static/images/index/i3.png",
          title: "我的补贴",
          link: "/pages/index/mySubsidies/index",
          openType: "navigateTo",
		   type: 1
        },
        {
          id: "",
          icon: "../static/images/index/i4.png",
          title: "我要培训",
          link: "/pages/index/train/index",
          openType: "navigateTo",
          show: true,
		   type: 1
        },
        {
          id: "",
          icon: "../static/images/index/i5.png",
          title: "我要贷款",
          link: "/pages/index/needLoan/index",
          openType: "navigateTo",
		   type: 1
        },
        {
          id: "",
          icon: "../static/images/index/i6.png",
          title: "我要保险",
          link: "/pages/index/needInsurance/index",
          openType: "navigateTo",
		   type: 1
        },
        {
          id: "",
          icon: "../static/images/index/i7.png",
          title: "我要服务",
          link: "/pages/index/serviceList/index",
          openType: "navigateTo",
          show: true,
		   type: 1
        },
        {
          icon: "../static/images/index/i8.png",
          title: "我要买卖",
          link: "/pages/index/tradeList/index",
          openType: "navigateTo",
		   type: 1
        },
      ],
	  // 公告列表
	  annList:[],
      // 政策资讯
      arctileList: [],
      tabs: [
        {
          id: 1,
          name: "政策资讯",
        },
        {
          id: 2,
          name: "销售需求",
        },
        {
          id: 3,
          name: "求购需求",
        },
      ],
      SalQueryParams: {
        pageSize: 10,
      },
      PurQueryParams: {
        pageSize: 10,
      },
      current: 0,
      swiperDotIndex: 0,
      tabCurrent: "tabNum1",
      purchaseList: [],
      saleList: [],
      dicts: {},
      goodsCategorys: [],
      purTotal: 0,
      salTotal: 0,
      salLoadMoreStyle: "",
      salLoadMorestatus: "more",
      salLoadContentText: {
        contentdown: "点击加载更多",
        contentrefresh: "加载中",
        contentnomore: "暂无更多",
      },
      purLoadMoreStyle: "",
      purLoadMorestatus: "more",
      purLoadContentText: {
        contentdown: "点击加载更多",
        contentrefresh: "加载中",
        contentnomore: "暂无更多",
      },
      demandLoadSize: 8,
      observer: null,
      demandBox: null,
      autoplay: true,
      interval: 5000,
      duration: 1000,
    };
  },
  // 新版缓存方法
  computed: {
  	getType() {
  		return (str) => {
  			if (str.length > 10) {
  				return str.substring(0, 10) + '...';
  			} else {
  				return str;
  			}
  		}
  	}
  },
  methods: {
	
	pageTo(url, type) {
		if (type == 1) {
			uni.navigateTo({
				url
			})
		} else {
			uni.switchTab({
				url
			})
		}
	},
	policyList(){
		listPolicyPublish().then((res) => {
      this.arctileList = res.rows[0].list
    })
	},
	banner(){
		bannerList().then(res=>{
			this.TSwiperData = res.rows
		})
		this.announcementList()
	},
	announcementList(){
		announcement({
			pageNum:1,
			pageSize:10,
			isAnnouncement:1,
			messageStatus:0
		}).then(res=>{
			this.annList = res.rows
		})
	}
  },

  watch: {
  },

  onLoad(option) {
    this.banner()
    this.policyList()
  },
  
};
</script>

<style lang="scss">
	$color: #4892FD;

	.container {
		padding-bottom: 100rpx;
		background: #EFF5FF;
		.bg {
			background-color: #fff;
      width: 100%;
      padding: 20rpx 20rpx 0rpx 20rpx;
		}
    
    .banner {
      width: 100%;
      height: 310rpx;
      border-radius: 10rpx;
      overflow: hidden;
  
      .swiper {
        width: 100%;
        height: 100%;
  
        .swiper-item {
          width: 100%;
          height: 100%;
        }
      }
  
      image {
        width: 100%;
        height: 100%;
      }
    }
  
    .notice {
      width: 100%;
      margin-top: 30rpx;
      height: 63rpx;
      line-height: 63rpx;
  
      .l {
        width: 142rpx;
        height: 63rpx;
        line-height: 63rpx;
        background: #EFF5FF;
        border-radius: 32rpx;
  
        image {
          width: 36rpx;
          height: 36rpx;
        }
  
        text {
          font-size: 28rpx;
          font-weight: bold;
          color: #1B7AF5;
          height: 63rpx;
          line-height: 63rpx;
          margin-left: 10rpx;
        }
      }
  
      .r {
        flex: 1;
        width: 1rpx;
        margin-left: 30rpx;
        height: 63rpx;
        line-height: 63rpx;
  
        .swiper {
          width: 100%;
          height: 63rpx;
          line-height: 63rpx;
  
          .swiper-item {
            font-size: 26rpx;
            font-weight: 500;
            color: #4D4D4D;
            height: 63rpx;
            line-height: 63rpx;
          }
        }
      }
    }
    
    .menu {
    	margin-top: 25rpx;
    	background-color: #fff;
    	padding: 20rpx 40rpx;
    	display: flex;
    	align-items: center;
    	flex-wrap: wrap;
    
    	.i {
    		padding: 20rpx 0;
    		width: 25%;
    		display: flex;
    		align-items: center;
    		flex-direction: column;
    		justify-content: center;
    		text-align: center;
    
    		image {
    			width: 100rpx;
    			height: 100rpx;
    		}
    
    		text {
    			margin-top: 20rpx;
    			font-size: 26rpx;
    			font-weight: 500;
    			color: #4D4D4D;
    			line-height: 40rpx;
    			height: 40rpx;
    		}
    	}
    }

		.news {
			margin-top: 25rpx;
			background-color: #fff;
			width:100%;
      .news-top {
        border-bottom: 2rpx solid #eee;
        padding: 10rpx 30rpx;
    
        .l {
          display: flex;
          align-items: center;
    
          .i {
            font-size: 28rpx;
            font-weight: 500;
            color: #737373;
            line-height: 80rpx;
            height: 80rpx;
            margin-right: 30rpx;
    
          }
    
          .on {
            font-weight: 600;
            font-size: 30rpx;
            color: #333;
            position: relative;
    
            &::after {
              content: '';
              position: absolute;
              bottom: -10rpx;
              left: 50%;
              margin-left: -27rpx;
              width: 54rpx;
              height: 8rpx;
              background: #34A2FF;
              border-radius: 4rpx;
            }
          }
        }
    
        .r {
          image {
            margin-left: 10rpx;
            width: 20rpx;
            height: 20rpx;
          }
    
          text {
            font-size: 26rpx;
            font-weight: 500;
            color: #999999;
            line-height: 34rpx;
            height: 34rpx;
          }
        }
      }
    
			.list {
				padding: 10rpx 30rpx;

				.item {
					border-bottom: 2rpx solid #eee;
					padding: 35rpx 0;

					&:last-child {
						border-bottom: 0;
					}

					.l {
						flex: 1;
						width: 1rpx;
						margin-right: 40rpx;

						.title {
              font-size: 28rpx;
							width: 100%;
							height: auto;
							text-overflow: ellipsis;
							overflow: hidden;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}

						.info {
							margin-top: 40rpx;
							line-height: 40rpx;
							height: 40rpx;
							display: flex;
							align-items: center;

							.type {
								flex: 1;
								font-size: 24rpx;
								font-weight: 500;
								color: $color;

							}
							.time {
								margin-left: 20rpx;
								font-size: 24rpx;
								color: #999999;
								width: 150rpx;
							}
						}
					}

					.r {
						width: 200rpx;
						height: 150rpx;
						border-radius: 10rpx;
						overflow: hidden;

						image {
							width: 100%;
							height: 100%
						}
					}
				}

			}

    }
  }


</style>
