<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-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">
        <div class="demo-image__preview">
          <el-row>
            <descriptions
              label-position="top"
              label-width="80px"
              style="margin-left: 30px"
            >
              <descriptions-item label="标准尺寸" value="">
                <div style="font-weight: bold;color:blue">240mm</div>
              </descriptions-item>
              <descriptions-item label="故障尺寸" value="">
                <div style="font-weight: bold;color:red">230mm</div>
              </descriptions-item>
            </descriptions>
            <descriptions
              label-position="top"
              label-width="80px"
              style="margin-left: 30px"
            >
              <descriptions-item label="当前尺寸" value="">
                <div style="font-weight: bold;color:green">232mm</div>
              </descriptions-item>
              <descriptions-item label="采集时间" value="">
                <div style="font-weight: bold;color:green">2020-08-08 12:31</div>
              </descriptions-item>
            </descriptions>
          </el-row>
          <el-row style="margin-top: 100px">
            <el-col v-for="(item,index) in images" :key="index" :span="6" style="text-align: center">
              <div style="font-weight: bold;">{{ item.step }}</div>
              <el-image
                style="width: 240px; height: 180px;margin: 10px auto"
                :src="item.url"
                :preview-src-list="srcList"
              />
            </el-col>
          </el-row>
        </div>
      </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: [],
      srcList: [
        step1,
        step2,
        step3,
        step4
      ],
      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>
