<template>
  <basic-container>
    <el-row>
      <el-col span="2" align="right" style="font-size: large;" v-if="tenantType!=1">所属小区：</el-col>
      <el-col span="2" align="right" style="font-size: large;" v-if="tenantType==1">所属区域：</el-col>
      <el-col span="4" align="left">
        <el-select size="small" v-model="selectResidential" filterable  clearable @change="residentialIdChange()">
          <el-option v-for="item in residentialList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>

      </el-col>

      <el-col span="2" align="right" style="font-size: large;">所属楼栋：</el-col>
      <el-col span="4" align="left">
        <el-select size="small" v-model="selectBuilding" filterable placeholder="所属楼栋"  clearable>
          <el-option v-for="item in buildingList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>

      </el-col>
      <el-col span="4" align="right" style="font-size: large;">设备名称：</el-col>
      <el-col span="6" align="left">
        <el-input v-model="deviceName" size="mini" clearable></el-input>

      </el-col>
    </el-row>


    <div id="videoSurveillance" style="margin-top: 20px;">
      <div class="item" v-for="(item,index) in data" :key="index">
        <div align="center">{{item.name}}</div>
        <video :id="'videoId'+index" controls="true" width="100%" height="100%">
        </video>
      </div>
    </div>
  </basic-container>
</template>


<script>
  import {
    getList
  } from "@/api/community/building"
  import {
    getByResidentialAndDeviceName
  } from "@/api/device/videoclouddevice";
  import {
    getAllList
  } from "@/api/community/residential";
  import {
    getTenantTypeDetailByTenantId
  } from "../../api/system/tenant.js";
  import {
    mapGetters
  } from "vuex";
  export default {
    data() {
      // http://139.9.103.171/live?port=1935&app=myapp&stream=mystream
      // http://139.9.103.171/live?port=1935&app=myapp&stream=mystream1
      // http://139.9.103.171/live?port=1935&app=myapp&stream=mystream3
      return {
        selectBuilding: "",
        buildingList:[],
        tenantType: "",
        deviceName: "",
        selectResidential: "",
        loading: false,
        residentialList: [],
        value: [],
        // baseUrlVedio: "http://139.9.103.171/live?port=1935&app=myapp&stream=",
        baseUrlVedio: "ws://36.103.228.148:8888/live/",
        data: []
      }
    },
    computed:{
      ...mapGetters(["userInfo"])
    },
    mounted() {
      getTenantTypeDetailByTenantId(this.userInfo.tenant_id).then(res => {

        if (res.data.data.tenantType == 1) {
          this.tenantType = 1;
        }
      })
      //  请求获取小区列表
      getAllList().then(res => {
        this.residentialList = res.data.data;

      })
      this.onLoad()
    },
    watch:{
      "selectResidential":function(){
        this.onLoad()
      },
      "selectBuilding":function(){
        this.onLoad()
      },
      "deviceName":function(){
        this.onLoad()
      }
    },
    methods: {
      play() {
        this.data.map((item, index) => {
          try {
            let videoElement = document.getElementById('videoId' + index);
            let flvPlayer = flvjs.createPlayer({
              type: 'flv',
              url: item.src
            });
            flvPlayer.on(flvjs.Events.ERROR, (errType, errDetail) => {
              // errType是 NetworkError时，对应errDetail有：Exception、HttpStatusCodeInvalid、ConnectingTimeout、EarlyEof、UnrecoverableEarlyEof
              // errType是 MediaError时，对应errDetail是MediaMSEError
            });
            flvPlayer.on(flvjs.Events.MEDIA_SOURCE_CLOSE || flvjs.Events.MEDIA_SOURCE_ENDED, () => {})
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load();
            flvPlayer.play();
          } catch (e) {
            console.log(e);
          }

        })
      },
      residentialIdChange(params={}){
        params.residentialId = this.selectResidential;
        getList(1,500,params).then((res)=>{
          this.selectBuilding = "",
          this.buildingList = res.data.data.records;
        })
      },
      onLoad() {
        let _this = this;
        if (this.value&&(this.selectResidential != ""||this.selectBuilding != "" || this.deviceName !="")) {
          getByResidentialAndDeviceName(this.selectResidential,this.selectBuilding,this.deviceName).then(res => {
            if (res.data.code == 200) {
              this.data = [];
              const data = res.data.data;
              data.forEach(item => {
                let obj = {};
                obj.src = this.baseUrlVedio + item.deviceNum + ".flv";
                obj.name = item.deviceName;
                this.data.push(obj);
              })
              // _this.play();
              setTimeout(function() {
                _this.play();
              }, 1000)
            }

          });
        }else{
          this.data = [];
        }
      }
    }
  }
</script>


<style lang="less">
  #videoSurveillance {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;

    .item {
      width: calc(~"25% - 10px");
      overflow: hidden;
      border-radius: 5px;
      margin: 5px;
    }
  }
</style>
