<template>
  <div>
  <div class="dashboard-container">
    <!--<div class="dashboard-img"/>-->
    <div class="title">
      <span class="title-name">算法分类</span>
      <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect" style="flex: 1">
        <el-menu-item index="0">目标识别</el-menu-item>
        <el-menu-item index="1">行为识别</el-menu-item>
        <el-menu-item index="2">人脸识别</el-menu-item>
        <!--<el-menu-item index="3">物体识别</el-menu-item>-->
      </el-menu>
    </div>
    <div class="block-container">
      <div class="block" v-for="(value,key,index) in list" :key="index">
        <simple-block :data="value">
          <img :src="value.img" @click="click(value)">
        </simple-block>
      </div>
    </div>
  </div>
  <video-info v-show="dialogFormVisible" ref="videoinfo" />
</div>
</template>

<script>
  import SimpleBlock from '../../components/block/simpleBlock'
  import VideoInfo from './video'
export default {
  name: 'Dashboard',
  components: {SimpleBlock,VideoInfo},
  data() {
    return {
      activeIndex: '0',
      list: [],
      data:[
        [ {name:'安全帽识别',img:require('@/assets/index_images/p5.png'),video:require('@/assets/video/v5.mp4'), text:'基于计算机图像视觉分析技术，配合现场摄像头，自动识别现场作业人员的安全帽穿戴情况，协助管理部门进行高效率监督监管。'},
          {name:'火焰识别',img:require('@/assets/index_images/p3.png'),video:require('@/assets/video/v3.mp4'), text:'基于计算机图像视觉分析技术，配合现场摄像头，自动识别现场火焰情况，协助管理部门进行高效率监督监管。'},
          {name:'烟雾识别',img:require('@/assets/index_images/p2.png'),video:require('@/assets/video/v2.mp4'), text:'基于计算机图像视觉分析技术，配合现场摄像头，自动识别现场烟雾情况，协助管理部门进行高效率监督监管。'},
          {name:'人体识别',img:require('@/assets/index_images/p4.png'),video:require('@/assets/video/v1.mp4'), text:'基于计算机图像视觉分析技术，配合现场摄像头，自动识别现人员情况，协助管理部门进行高效率监督监管。'},
          {name:'办公室识别',img:require('@/assets/index_images/p7.png'),video:require('@/assets/video/v7.mp4'), text:'基于计算机图像视觉分析技术，配合现场摄像头，自动识别办公用品，鼠标、键盘、绿植、水本等。'}
        ],
        [{name:'抽烟识别',img:require('@/assets/index_images/p9.png'),video:require('@/assets/video/v9.mp4'), text:'基于计算机图像视觉分析技术，配合现场摄像头，自动识别场景内抽烟的行为。'},
          {name:'戴口罩识别',img:require('@/assets/index_images/p3.png'),video:require('@/assets/video/v5.mp4'), text:'基于计算机图像视觉分析技术，配合现场摄像头，自动识别场景内人员是否佩戴口罩。'},
          {name:'安全帽识别',img:require('@/assets/index_images/p5.png'),video:require('@/assets/video/v5.mp4'), text:'基于计算机图像视觉分析技术，配合现场摄像头，自动识别现场作业人员的安全帽穿戴情况，协助管理部门进行高效率监督监管。'}
        ],
        [{name:'人脸识别',img:require('@/assets/index_images/p8.png'),video:require('@/assets/video/v8.mp4'), text:'基于计算机图像视觉分析技术，配合现场摄像头，自动切割场景中人员的面部图像，用于人脸识别作为输入。'}],
        [{name:'办公室识别',img:require('@/assets/index_images/p7.png'),video:require('@/assets/video/v7.mp4'), text:'基于计算机图像视觉分析技术，配合现场摄像头，自动识别办公用品，鼠标、键盘、绿植、水本等。'}]
      ],
      dialogFormVisible: false // 是否显示编辑框
    }
  },
  mounted(){
    this.list = this.data[0]
  },
  methods: {
    click(val){
      this.dialogFormVisible = true
      this.$refs.videoinfo.initDialog(val)
    },
    handleSelect(key, keyPath) {
      this.list = this.data[key]
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
  &-container {
    margin-bottom: 30px;
    height: 100%;
  }
  &-img{
    background: url("../../assets/index_images/u6.png") no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    height: 250px;
  }
}
.title{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: space-between;
  align-items: center;
  background-color: white;
  .title-name{
    width: 150px;
    font-weight: bold;
    padding-left: 20px;
  }
}
.block-container{
  padding: 20px;
  background-color: white;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  /*justify-content: space-between;*/
  flex-wrap: wrap;
  /*margin: 0.04rem;*/
  .block{
    width: 25%;
    height: 45%;
  }
}
</style>