<template>
  <div class="dashboard-container">
    <div class="menu">
      <div class="item" v-for="(value,key) in menu" @mouseover="mouseover(key)">{{value}}</div>
    </div>
    <div class="line"/>
    <div v-if="list.length!=0" style="margin-left: 40px;margin-bottom: 20px;">
      <el-menu :default-active="activeIndex"
               class="el-menu-demo"
               mode="horizontal"
               @select="handleSelect">
        <el-menu-item  v-for="(value,index) in list" :index="index.toString()" >{{value.name}}</el-menu-item>
      </el-menu>
    </div>
    <div class="content">
      <div class="title">功能介绍</div>
      <div class="title-name">
        <div class="title-img" :style="{backgroundImage:`url(${activeValue.icon})`}"/>
        {{activeValue.name}}</div>
      <div class="title-content">{{activeValue.text}}</div>
      <div class="title">功能演示</div>
      <div class="play">
        <div class="left">
          <el-image style="width: 100%" :src="imageUrl" fit="contain"/>
          <div class="block" v-for="(img,index) in activeValue.img" :key="img">
            <el-image :src="img" @click="upload(img,index)"/>
          </div>
          <div class="block">
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
                  <el-image :src="require('@/assets/open_images/add.png')" class="avatar-uploader"/>
            </el-upload>
          </div>
          <div class="tip">此处仅供功能展示，图片类型支持PNG、JPG、JPEG、BMP，大小不超过2M。该接口实际能力的图片格式及大小要求以接口文档为准</div>
        </div>
        <div class="right">
          <el-input
            style="width: 100%;font-size: 16px"
            type="textarea"
            :rows="20"
            readonly
            v-model="result">
          </el-input>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Open',
  components: {},
  data() {
    return {
      result:'识别结果：\n{}' ,
      imageUrl:require('@/assets/open_images/person/11.jpg'),
      dialogImageUrl: '',
      dialogVisible: false,
      menu:['图像识别','生物识别','语音识别','文字识别'],
      data:[[
        {
          name: '人体识别',
          icon:require('@/assets/open_images/p1.png'),
          path:'person',
          text:'检测图像中的所有人体，标记出每个人体的坐标位置；不限人体数量，适应人体轻度遮挡、截断的情况。精准定位人体的21个主要关键点，包含头顶、五官、颈部、四肢主要关节部位；支持人体背面、侧面、中低空斜拍、大动作等复杂场景。'},
        {
          name: '火焰识别',icon:require('@/assets/open_images/p2.png'),path:'fire',
          text:'检测图片中的所有火焰，标记出每处火焰位置。'},
        {
          name: '烟雾识别',icon:require('@/assets/open_images/p3.png'),path:'smoke',
          text:'检测图片中的所有烟雾，标记出每处烟雾位置。'},
        {
          name: '电子围栏',icon:require('@/assets/open_images/p4.png'),path:'fence',
          text:'检测图片中的所有电子围栏，标记出每处电子围栏位置。'},
        {
          name: '安全帽识别',icon:require('@/assets/open_images/p5.png'),path:'hat',
          text:'检测图片中的所有安全帽，标记出每处安全帽位置。'}
       ],
      [
        {
          name: '人脸识别',icon:require('@/assets/open_images/p6.png'),path:'face',
          text:'检测图片中的人脸并标记出人脸坐标，支持同时识别多张人脸。支持单人脸或多人脸的精准定位，返回常用的72、150、201人脸关键点坐标位置，除支持人脸轮廓定位外，还支持眉毛、眼睛、瞳孔、鼻子、嘴、额头等五官位置的精准定位。'},
        {
          name: '虹膜识别',icon:require('@/assets/open_images/p7.png'),path:'eye',
          text:'检测图片中的人眼虹膜并标记出虹膜坐标。'}
      ],[],[]],
      activeIndex: '0',
      activeValue: {},
      list: [],
      dialogFormVisible: false // 是否显示编辑框
    }
  },
  mounted(){
    let arr = ['1','2','3','4']
    for(var item of this.data){
      if(item.length !== 0 ){
        for(var val of item){
          val.img = arr.map(a => {
            return require('@/assets/open_images/'+ val.path+ '/' + a + '.jpg')})
          val.reason = arr.map(a => {
            return require('@/assets/open_images/'+ val.path+ '/' + a + '1.jpg')})
        }
      }
    }
    this.list = this.data[0]
    this.activeValue = this.list[0]
    this.imageUrl = this.activeValue.reason[0]
  },
  methods: {
    upload(img,index){
      console.log(img,index)
      this.imageUrl = this.activeValue.reason[index]
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isBMP = file.type === 'image/bmp';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG&&!isPNG&&!isBMP) {
        this.$message.error('上传头像图片只能是 JPG/PNG/BMP 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return (isJPG || isBMP  || isPNG) && isLt2M;
    },
    mouseover(key) {
      this.list = this.data[key]
      this.activeIndex = ''
      for(var item in this.list){
        if(this.activeValue.name === this.list[item].name){
          this.activeIndex = item.toString()
        }
      }
    },
    handleSelect(key, keyPath) {
      this.activeValue  = this.list[key]
      this.imageUrl = this.activeValue.reason[0]
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .el-menu-item {
    height: 50px !important;
    &:hover{
      color: #409eff !important;
    }
  }
  .el-menu--horizontal>.el-menu-item.is-active{
    color: #409eff !important;
  }
  .el-menu.el-menu--horizontal {
    border-bottom: solid 1px #fff !important;
  }
  .menu{
    display: flex;
    height: 100%;
    margin-top: 20px;
    margin-left: 20px;
    .item{
      width: 100px;
      height: 30px;
      color: #909399;
      text-align: center;
      &:hover{
        border-bottom: 2px solid #409eff;
        color: #409eff;
      }
    }
  }
  .line{
    width: 100%;height: 1px;
    background-color: #e6e6e6;
    margin-left: 20px;
  }
.content{
  width: 100%;
  height: 100%;
  color: #666666;
  padding: 0px 40px;
  .title{
    font-weight: bold;
    font-size: 20px;
    width: 100%;
    text-align: center;
    margin-bottom: 10px;
  }
  .title-name{
    font-size: 18px;
    display: flex;
    width: 100%;
    height: 40px;
    align-items: center;
    .title-img{
      -webkit-background-size: 100% 100%;
      background-size: 100% 100%;
      height: 40px;
      width: 40px;
      margin-right: 15px;
    }
  }
  .title-content{
    font-size: 16px;
    padding: 10px 30px;
    line-height: 25px;
    text-indent:2em;
    margin-bottom: 20px;
  }
  .play{
    display: flex;
    margin: 40px 100px;
    .left{
      padding-right: 10px;
      width: 70%;
      .tip{
        font-size: 14px;
      }
      .block {
        text-align: center;
        display: inline-block;
        width: 20%;
        min-height: 90px;
        box-sizing: border-box;
        vertical-align: top;
        padding-right: 10px;
      }
      .avatar-uploader {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
      }
      .avatar-uploader:hover {
        border-color: #409EFF;
      }
    }
    .right{
      flex: 1;
    }
  }
}

</style>