<template>
	<view :style="{height:'100vh',overflow:'hidden'}">
		<u-status-bar></u-status-bar>
		<u-navbar title="视频监控" :autoBack="true" :titleStyle="{
				fontSize:'18px'
			}" :height='44' :safeAreaInsetTop=true leftIconSize='20' leftIconColor='rgb(153, 153, 153)'>
		</u-navbar>
	     <!-- 搜索区域 -->
        <view class="search">
      <view class="search_sear">
        <input
          class="searchInput"
          confirm-type="search"
          placeholder-style="color:#bbb"
          v-model="saerchValue"
          @input="search"
          placeholder="搜索视频名称"
          border="surround"
        />
      </view>
        </view>
        <!-- 列表区域 -->
        <view class="contentItem">
            <view class="itemC" v-for="item in videoList" :key="item.indexCode" @click="jumpVideo(item)">
                <view class="name">
              <image
                   style="width: 15px; height: 10px;" 
                  src="../../static/images/video.svg"
             ></image>
                <text style="margin-left:10px">{{item.name}}</text>
                </view>
                <image
                   style="width: 15px; height: 15px;" 
                  src="../../static/images/play.svg"
             ></image>
            </view>
		</view>
	</view>
</template>

<script>
 export default {
    data() {
        return {
             saerchValue: '',
             videoList:[]
        }
    },
    methods: {
        search(e){
            const value = e.detail.value;
            if(value){
                const filterData = this.videoList.filter(item => item.name.includes(value));  
                this.videoList = filterData;
            }else{
                this.getVideoList()
            }
        },
        async getVideoList(){
            try {
                const {data} = await uni.$http.post("/gunshiApp/xyt/attCctvBase/list")
                    if(data.code == 200){
                        this.videoList = data.data
                    }
            } catch (error) {
                uni.$showMsg();
            }
        },
        jumpVideo(r){
            uni.navigateTo({
                url: `/pages/spjk/spbf/index?info=${encodeURIComponent(JSON.stringify(r))}`
            })
        }
    },
    mounted() {
        this.getVideoList()
    },
 }
</script>
<style lang="scss" scoped>
  .search {
  background-color: #fff;
  margin-top:50px;
  padding:0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  background-color: #eee;
//   padding-right: 20px;
}
.searchInput {
    width:100%;
    background-color: #fff;
    height: 60rpx;
    border-radius: 26rpx;
    color: #bbb;
    padding-left: 60rpx;
  }
  .search_sear{
    width:76%;
  }
  .contentItem{
		.itemC{
			display: flex;
			justify-content: space-between;
			display: flex;
			color: #666666;
			padding: 10px;
			border-bottom: 1px solid #f0f0f0;
		}
        .name{
            display: flex;
            align-items: center;
        }
		.itemNo{
			color: #666666;
			padding: 10px;
		}
	}
</style>