<template>
	<view>
		<cu-custom bgColor="bg-gradual-blueness" :isBack="true" :isRingt="true">
			<block slot="backText">返回</block>
			<block slot="content">视频列表</block>
		</cu-custom>
		<scroll-view class="dy-scroll" @scrolltolower="scrolltolower" scroll-y :style="'top:'+sTop+'px;height:calc(100vh - '+totalHeight+'px)'">
			<view v-if="list.length>0" >
				<view class="dy-list">
					<view v-for="(item,index) of list" :key="index" :data-id="item.INSPECTION_ID" @click="fnVideo(item)" class="dy-list-item p20">
						 <view class="dy-title-flex align-center">
							<text>{{ item.VIDEONAME }}</text>
						</view>
						<view class="dy-subtitle-flex">
							<text>
							  播放地址：{{ item.VIDEOURL }}
							</text>
						</view>
						<view class="dy-subtitle-flex" v-if="item.LATITUDE&&item.LONGITUDE">
							<text>
								坐标：{{ item.LATITUDE }}*{{item.LONGITUDE}}
							</text>
						</view>
						<view class="dy-subtitle-flex">
							<text>
							  状态：{{ item.LATITUDE&&item.LONGITUDE? "已定位":"未定位" }}
							</text>
							<view class="flex-between">
								<button class="cu-btn bg-blue margin-tb-sm sm" @click="fnVideo(item)">播放</button>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else-if="dataFlag=='noData'" class="dy-null">
				<view class="dy-null-img">
				<image :src="background[dataFlag].url" mode=""></image>
				</view>
				<view class="dy-null-title">
				{{background[dataFlag].msg}}
				</view>
			</view>
			<view class="cu-tabbar-height"></view>
		</scroll-view>
	</view>
</template>

<script>
import {
  basePath,corpinfoId,loginSession,formatDate,loginUser,loginUserId
} from '@/common/tool.js';

export default {
  data() {
    return {
	  dataFlag:'noData',
      OUTSOURCED_ID: '',
      KEYWORDS: '',
      list: [],
      pageSize: 10,
      currentPage: 1,
      totalPage: 0,
	  noClick:true,
	  sTop:0,
	  totalHeight:0,
    }
  },
  onLoad(options) {
    this.OUTSOURCED_ID = options.OUTSOURCED_ID
  },
  onShow() {
	  var _this = this;
	  _this.background = require('@/common/background.json');
	  _this.showCount = 10;
	  _this.currentPage = 1;
	  _this.list = [];
      _this.fnSearchList()
  },
  computed: {
    userInfo() {
      return this.$store.getters.getUserInfo
    }
  },
  methods: {
     fnGetData() {
		 var _this = this;
		 uni.showLoading({
		   title:"加载中..."
		 });//加载中动画
		 uni.request({
		   url: basePath +'/app/keyProjects/videomanagerList?showCount='+_this.showCount+'&currentPage='+_this.currentPage ,
		   method: 'POST',
		   dataType: 'json',
		   header: {
		     'Content-type':'application/x-www-form-urlencoded'
		   },
		   data: {
		     OUTSOURCED_ID: this.OUTSOURCED_ID,
		     KEYWORDS: this.KEYWORDS,
		     showCount: this.pageSize,
		     currentPage: this.currentPage
		   },
			success: (res) => {
				uni.hideLoading();//结束加载中动画
				_this.list = [...this.list, ...res.data.varList];
				//换行
				for(var i =0;i<_this.list.length;i++){
					var videourl = '';
					var old = this.list[i].VIDEOURL;
					var k = 1;
					if(_this.list[i].VIDEOURL){
						for(var j =0;j<_this.list[i].VIDEOURL.length;j++){
							if(j/2==22*k){
								videourl+='\n';
								k++;
							}
							videourl+=_this.list[i].VIDEOURL[j];
						}
					}
					_this.list[i].VIDEOURL = videourl
					_this.list[i].old = old
				}
				_this.totalPage = res.data.page.totalPage;
		   }
		})
	},
    scrolltolower() {
      this.currentPage++;
      if (this.totalPage >= this.currentPage) this.fnGetData();
    },
    fnSearchList() {
		var _this = this;
      _this.showCount = 10;
      _this.currentPage = _this.currentPage + 1;
      _this.list = [];
      _this.fnGetData();
    },
	fnVideo(video) {
		uni.navigateTo({
		  url: '/pages/application/key-project-management/positioning_management/videoView?url='+video.old
		});
	}
  },
}
</script>

<style>
.dy-card {
  background-color: #fff;
  border-radius: 10upx;
  margin: 30upx
}

.dy-card-title {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  min-height: 80upx;
  line-height: 80upx;
  padding: 0 30upx;
}

.dy-card-content {
  padding: 0upx 30upx 30upx;

}

.dy-card-content-item {
  margin-top: 20upx;
}

.dy-card-content-item .title {
  display: flex;
  align-items: center;
}

.dy-card-content-item .title .l {
  width: 10upx;
  height: 30upx;
  border-radius: 20upx;
  background-color: #666;
  margin-right: 10upx;
}

.dy-card-content-item .content {
  background-color: #F1F1F1;
  padding: 10upx 14upx;
  margin-top: 14upx;
  line-height: 1.6;
}

.dy-card-content-item .name text {
  background-color: #F1F1F1;
  padding: 10upx 14upx;
  margin-top: 14upx;
  line-height: 1.6;
  display: inline-block;
}

.dy-card-foot {
  border-top: 1px solid #eee;
  padding: 30upx;
}

</style>
