<template>
  <el-card class="container">
    <el-row :gutter="20" class="content">
      <el-col :xs="8" :sm="8" :md="6" :lg="4">
        <div class="left">
          <div class="search">
            <el-select
              v-model="deviceType"
              style="width: 100%"
              @change="onDeviceTypeChange"
            >
              <el-option
                v-for="item in deviceTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="custom-menu">
            <el-menu
              ref="customMenu"
              @select="onInstanceSelect"
            >
              <el-menu-item
                v-for="(instance, index) in deviceInstanceList"
                :id="'instance' + instance.id"
                :key="'instance' + index"
                :index="instance.id.toString()"
              >{{ instance.name }}</el-menu-item>
            </el-menu>
          </div>
        </div>
      </el-col>
      <el-col :xs="16" :sm="16" :md="18" :lg="20">
        <el-form
          :model="form"
        >
          <el-form-item label="宽度:">20cm</el-form-item>
        </el-form>
        <el-timeline>
          <el-timeline-item
            v-for="(image, index) in images"
            :key="index"
            :timestamp="image.step"
          >
            <el-image
              style="width: 400px; height: 400px"
              :src="image.url"
              fit="contain"
              :preview-src-list="[image.url]"
            />
          </el-timeline-item>
        </el-timeline>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { getAllDeviceModel } from '@/api/equipment-management/equipment-instance'
import { getAllInstanceByDeviceTypeId } from '@/api/data-visible/dashboard'
import step1 from '@/assets/step1.jpeg'
import step2 from '@/assets/step2.jpeg'
import step3 from '@/assets/step3.jpeg'
import step4 from '@/assets/step4.jpeg'

export default {
  name: 'ImageIdentification',
  data() {
    return {
      deviceInstance: null,
      instanceList: [],
      deviceType: null,
      deviceTypeList: [],
      deviceInstanceList: [],
      images: [
        {
          content: '活动按期开始',
          step: '原始图片',
          url: step1
        },
        {
          content: '活动按期开始',
          step: '边缘提取',
          url: step2
        },
        {
          content: '活动按期开始',
          step: '图形识别',
          url: step3
        },
        {
          content: '活动按期开始',
          step: '对比图',
          url: step4
        }
      ],
      form: {}
    }
  },
  created() {
    // 初始化设备类型
    getAllDeviceModel()
      .then(res => {
        this.deviceTypeList = res.data.map(v => {
          return {
            value: v.id,
            label: v.name
          }
        })
        if (this.deviceTypeList.length) {
          this.deviceType = this.deviceTypeList[0].value
          // 获取该设备类型下的设备实例
          this.getAllInstanceByDeviceTypeId(this.deviceType)
        }
      })
      .catch(_ => {})
  },
  methods: {
    onDeviceTypeChange(val) {
      // 获取该设备类型下的设备实例
      this.getAllInstanceByDeviceTypeId(val)
    },
    onInstanceSelect(index) {
      const id = parseInt(index)
      const instance = this.deviceInstanceList.find(v => v.id === id)
      if (instance.id !== this.deviceInstance) {
        this.deviceInstance = instance.id
      }
    },
    getAllInstanceByDeviceTypeId(val) {
      getAllInstanceByDeviceTypeId({ deviceTypeId: val })
        .then(res => {
          this.deviceInstanceList = res.data
        })
        .then(_ => this.$nextTick())
        .then(_ => {
          if (this.deviceInstanceList.length) {
            this.deviceInstance = this.deviceInstanceList[0].id
            this.$nextTick()
              .then(_ => {
                document.getElementById(`instance${this.deviceInstanceList[0].id}`).click()
              })
              .catch(_ => {})
          }
        })
        .catch(_ => {})
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  min-height: calc(100vh - 95px);
  .content{
    display: flex;
    min-height: calc(100vh - 135px);
    .left{
      width: 100%;
      height: 100%;
      .search{
        height: 40px;
      }
      .custom-menu{
        background-color: #efeff1;
        height: calc(100% - 40px);
        .el-menu{
          background-color: initial;
          border-right: none;
          border-top: solid 1px #e6e6e6;
          border-left: solid 1px #e6e6e6;
          .el-menu-item.el-menu-item{
            min-width: initial;
            background-color: #efeff1;
          }
          .el-menu-item.is-active{
            background-color: #fff;
            color: #303133;
          }
        }
      }
    }
    .top{
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
