<template>
	<view class="content">
		<view v-if="vlogList.length>0 && show===false" class="noEmpty">
			<view style="height: 20rpx;"></view>
			<u-search bg-color="#434957" color="#ffffff" placeholder="景区/关键词搜索" v-model="search" :clearabled="true"
				@search="query" :show-action="false"></u-search>
			<view class="body">
				<view class="item" v-for="(item,index) in vlogList" :key="index" @click="navTo(item)">
					<image :src="item.thumbImageUrl" mode="widthFix"></image>
					<text>{{item.merchantName}}</text>
				</view>
			</view>
		</view>
		<view v-else-if="vlogList.length===0 && show===false" class="empty">
			<view class="row">
				<text>空空如也...</text>
				<image src="../static/vlog/icon/icon_thereisnovideo.png"></image>
			</view>
			<navigator url="../vlogface/vlogface" class="btnn">
				<view>点击获取我的Vlog</view>
			</navigator>
		</view>
		<view v-else></view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      show: true, //跳转过渡页面
      vlogList: [], //我的vlog集合
    }
  },
  onReady() {},
  onLoad() {
    this.$request('distribution/vlog/getVlogCreateInfo', {//获取结果
      userId: uni.getStorageSync('openid')
    }).then(res=>{
      setTimeout(()=>{
        this.getMyVlogList()
      },1000)
    })
  },
  methods: {
    navTo(item){
      this.$u.route('/pages/vlog/vlogList/vlogList?merchantId='+item.merchantId)
    },
    getMyVlogList(){
      this.$request('wechatUser/myPage/getVlogRecord', {
        openid: uni.getStorageSync('openid'),
        productType:0
      }).then(res => {
        this.show = false
        if(res.code==='00'){
          this.vlogList = res.data
          if (this.vlogList.length > 0) { //如果有数据
            uni.setNavigationBarColor({ //动态更改导航条颜色
              frontColor: '#ffffff',
              backgroundColor: '#192033',
              animation: {
                duration: 1,
                timingFunc: 'easeIn'
              }
            })
            uni.setBackgroundColor({
              backgroundColor: '#192033'
            })
          } else { //数据为空
            this.show = false
          }
        }else{
          uni.showModal({
            title: '提示',
            content: res.message,
            showCancel: false,
          })
        }
      })
    },
    query(e) {
      console.log(e)
    },
  }
}
</script>

<style lang="scss" scoped>
	.content {
		height: 100%;
		width: 100%;
		text-align: center;
		.noEmpty {
			color: #fff;
			height: 100%;
			width: 100%;
			background-color: #192033;
			padding: 0 20rpx;

			.body {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin-top: 30rpx;

				.item {
					width: 49%;
					height: 250rpx;
					margin-top: 20rpx;

					image {
						width: 100%;
						height: 80%;
						border-radius: 10rpx;
					}

					text {
						font-weight: bold;
					}
				}
			}
		}

		.empty {
			height: 100%;
			width: 100%;
			background-color: #fff;
			padding: 0 20rpx;
			text-align: center;
			padding-top: 30rpx;

			.row {
				height: 200rpx;
				background: linear-gradient(90deg, #ECF5FF 0%, #CEE5FF 100%);
				line-height: 200rpx;
				border-radius: 10rpx;
				margin-bottom: 300rpx;

				text {
					font-weight: bold;
					font-size: 32rpx;
					float: left;
					margin-left: 120rpx;
				}

				image {
					height: 180rpx;
					width: 200rpx;
					float: right;
					margin-right: 50rpx;
				}
			}

			.btnn {
				display: inline-block;
				font-size: 28rpx;
				border-radius: 40rpx;
				background-color: #FFE600;
				padding: 20rpx 40rpx;
				margin: 30rpx 0;
				font-weight: bold;
			}
		}
	}
</style>
