<template>
  <div class="task">
    <div class="task_item">
      <span>育肥舍</span>
      <Icon name="arrow-down" color="#018CFF"></Icon>
    </div>
    <div class="video_item">
      <div class="video_white">
        <video class="my_video"  autoplay muted src="http://119.3.93.18/video/qingshan/sample.mp4"></video>
      </div>
    </div>
    <div class="video_padding">
      <x-line text="监控列表"></x-line>
    </div>
    <div class="video_scroll">
      <div class="video_box">
        <div :class="['video_box_item', active === item.id ? 'isActive' : '' ]" v-for="item in videoList" :key="item.id" @click="cut(item)">
          <div class="padding_left">育肥舍一单元</div>
          <div class="padding_right" v-if="active === item.id">
            <Icon name="pause-circle-o" size="20" color="#07C160"></Icon>
            <span class="circle_text">查看中</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Video"
}
</script>
<script setup>
  import { ref } from 'vue';
  import { Icon } from "vant";
  import XLine from "../../components/XLine.vue";

  const active = ref(1);
  const videoList = ref([
    {
      id: 1,
      name: '育肥舍一单元'
    },
    {
      id: 2,
      name: '育肥舍二单元'
    },
    {
      id: 3,
      name: '育肥舍三单元'
    },
    {
      id: 4,
      name: '育肥舍四单元'
    },
  ])

  const cut = (item) => {
    if(active.value === item.id) {
      return;
    } else {
      active.value = item.id;
    }
  }
</script>

<style scoped>
  .task {
    width: 100%;
    height: 100%;
  }
  .task_item {
    text-align: center;
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #018CFF;
    background: #fff;
  }
  .video_item {
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
  }
  .video_white {
    width: 100%;
    height: 180px;
    background: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, .12);
  }
  .video_padding {
    box-sizing: border-box;
    padding: 0 16px;
  }
  .video_scroll {
    width: 100%;
    height: calc(100% - 280px);
    box-sizing: border-box;
    padding: 10px 16px;
  }
  .video_box {
    width: 100%;
    height: 100%;
    overflow: auto;
    background: #fff;
    box-shadow: 0 0 4px rgba(0, 0, 0, .12);
  }
  .video_box_item {
    width: 100%;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    border-bottom: 1px solid #F5F5F5;
    display: flex;
    justify-content: space-between;
  }
  .padding_left {
    box-sizing: border-box;
    padding-left: 20px;
  }
  .padding_right {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding-right: 20px;
  }
  .circle_text {
    padding-left: 5px;
    font-size: 14px;
    color: #07C160;
  }
  .isActive {
    background: #f5f5f5;
  }
  .my_video {
    width: 100%;
    height: 100%;
  }
</style>
