<!--
 * @Author: zhangtq 2452618307@qq.com
 * @Date: 2024-11-08 09:45:01
 * @LastEditors: zhangtq 2452618307@qq.com
 * @LastEditTime: 2024-11-19 09:32:38
 * @FilePath: src/views/screen/components/video/components/VideoList.vue
 * @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
 -->
<template>
  <ul class="ul_list">
    <li v-for="(item, index) in data" style="cursor: pointer" :key="index"  @click="playVideo(item)">
      <div class="li_container">
        <div style="display: flex;align-items: center;justify-content: center;padding: 5px">
          <div style="color: white;font-weight: bold;font-size: 18px;margin-left: 20px;width: 25px">{{ index + 1
            }}
          </div>
          <img :src="getImageSrc(listType)" class="icon"
               style="width: 1.5rem;height: 1.5rem;margin-left: 1rem;margin-top: -0.3rem;"
          >
          <el-tooltip class="item" effect="dark" v-if="item.name.length > 10" :content="item.name"
                      placement="bottom"
          >
            <div style="flex:3;margin-left: 20px;font-size: 18px;margin-top: -0.3rem;color: white">
              {{ item.name.length > 10 ? item.name.substring(0, 10) + '...' : item.name }}
            </div>
          </el-tooltip>
          <div style="flex:3;margin-left: 20px;font-size: 18px;margin-top: -0.3rem;color: white"
               v-if="item.name.length <= 10"
          >{{ item.name }}
          </div>
          <el-badge is-dot class="item" :type="Number(item.status) === 1 ? 'success' : 'info'"
                    style="margin-top: 8px;margin-right: 10px;"
          >
          </el-badge>
        </div>
      </div>
    </li>
  </ul>
</template>
<script>
export default {
  name: 'VideoList',
  props: {
    data: {},
    listType: {},
  },
  data() {
    return {
      puidArray: [],
    }
  },
  methods: {
    liClass(item) {
      return item.backgroundType === 'select' ? 'li_container_select' : 'li_container'
    },
    getImageSrc(type) {
      switch (type) {
        case '固定摄像头':
          return require('../../../../../assets/screen/video/video.png');
        case '无人机':
          return require('../../../../../assets/screen/video/drone.png');
        case '终端设备':
          return require('../../../../../assets/screen/video/device.png');
        default:
          return '';
      }
    },
    playVideo(e) {
      if (Number(e.status) !== 1){
        this.$message({
          message: '设备未连接',
          type: 'warning'
        })
      }else{
        this.$emit('playVideo', e)
      }
    }
  }
}
</script>
<style scoped lang="scss">

// 改变input里的字体颜色

::v-deep input::-webkit-input-placeholder {
  color: whitesmoke;
  font-size: 15px;
}

// 改变input框背景颜色

.ul_list {
  height: 100%;
  margin-top: 10px;
  padding: 0 15px 0 18px;
  list-style: none;
  overflow: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* Internet Explorer 10+ */

  .li_container {
    width: 100%;
    margin-top: 0.2rem;
    height: 2.5rem;
    background: url("../../../../../assets/screen/li_bg.png") no-repeat;
    background-size: 100% 100%;
  }
  .li_container_select {
    width: 100%;
    margin-top: 0.2rem;
    height: 2.5rem;
    background: blue !important
  }
}

.ul_list::-webkit-scrollbar {
  display: none; /* Safari and Chrome */
}

</style>
