<!--
 * @Author: zhangtq 2452618307@qq.com
 * @Date: 2024-11-05 16:59:57
 * @LastEditors: zhangtq 2452618307@qq.com
 * @LastEditTime: 2024-11-19 09:32:41
 * @FilePath: src/views/screen/components/dataManagement/Scroller.vue
 * @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
 -->
<template>
  <div class="content">
    <vue-seamless-scroll :data="data" class="warp" :class-option="classOption">
      <ul class="item">
        <li :class="liClass(item)" v-for="(item, index) in data" :key="index">
          <div class="li_container" @click="open(item)">
            <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(type)" 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 > 15" :content="item.name" placement="bottom">
              <div style="flex:3;margin-left: 20px;font-size: 18px;margin-top: -0.3rem;color: white" >{{ item.name.length > 15 ? item.name.substring(0, 15) + '...' : 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 <= 15" >{{ 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>
    </vue-seamless-scroll>
  </div>
</template>
<script>
import VueSeamlessScroll from 'vue-seamless-scroll'

export default  {
  name: 'Scroller',
  components: { VueSeamlessScroll },
  props: {
    classOption: {
      type: Object,
      default: () => {
        return {
          step: 0.3,
          limitMoveNum: 3,
        }
      }
    },
    data: {},
    type: {}
  },
  methods: {
    liClass(item) {
      return Number(item.status) === 1 ? 'success' : 'info'
    },
    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 '';
      }
    },
    open(item) {
      this.$emit('open', item)
    }
  }
}
</script>
<style scoped lang="scss">
.content {
  display: flex;

  .warp {
    height: 100%;
    width: 90%;
    margin: 0 auto;
    overflow: hidden;

    ul {
      list-style: none;
      margin: 1% 2% 0 0;
      min-height: 2.5rem;
      padding: 0;

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

      a {
        display: block;
        height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        font-size: 15px;
      }
    }
  }
}
</style>
