<template>
  <show-item>
    {{ '已安装设备' }}
    <template #container>
      <div class="showItem">
        <div class="showItem_left">
          <div class="itemconT">
            <div class="itemconT_left">
              <div class="itemconT_img">
                <div class="itemconT_img_img">
                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
                </div>
              </div>
            </div>
            <div class="itemconT_right">
              <div class="right_text">
                <div :deviceInstalled="deviceInstalled" class="text1">
                 {{ deviceInstalled[0].context }}{{ deviceInstalled[0].flag }}
                </div>
                <div class="text2">
                  {{ deviceInstalled[0].typeName }}
                </div>
              </div>
            </div>
          </div>
          <div class="itemconT">
            <div class="itemconT_left">
              <div class="itemconT_img">
                <div class="itemconT_img_img">
                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
                </div>
              </div>
            </div>
            <div class="itemconT_right">
              <div class="right_text">
                <div :deviceInstalled="deviceInstalled" class="text1">
                  {{ deviceInstalled[1].context }}{{ deviceInstalled[1].flag }}
                </div>
                <div class="text2">
                  {{ deviceInstalled[1].typeName }}
                </div>
              </div>
            </div>
          </div>
          <div class="itemconT">
            <div class="itemconT_left">
              <div class="itemconT_img">
                <div class="itemconT_img_img">
                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
                </div>
              </div>
            </div>
            <div class="itemconT_right">
              <div class="right_text">
                <div :deviceInstalled="deviceInstalled" class="text1">
                  {{ deviceInstalled[2].context }}{{ deviceInstalled[2].flag }}
                </div>
                <div class="text2">
                  {{ deviceInstalled[2].typeName }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="showItem_right">
          <!-- y右边 -->
          <div class="itemconT">
            <div class="itemconT_left">
              <div class="itemconT_img">
                <div class="itemconT_img_img">
                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
                </div>
              </div>
            </div>
            <div class="itemconT_right">
              <div class="right_text">
                <div class="text1">
                  {{ deviceInstalled[3].context }}{{ deviceInstalled[3].flag }}
                </div>
                <div class="text2">
                  {{ deviceInstalled[3].typeName }}
                </div>
              </div>
            </div>
          </div>
          <div class="itemconT">
            <div class="itemconT_left">
              <div class="itemconT_img">
                <div class="itemconT_img_img">
                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
                </div>
              </div>
            </div>
            <div class="itemconT_right">
              <div class="right_text">
                <div class="text1">
                  {{ deviceInstalled[4].context }}{{ deviceInstalled[4].flag }}
                </div>
                <div class="text2">
                  {{ deviceInstalled[4].typeName }}
                </div>
              </div>
            </div>
          </div>
          <div class="itemconT">
            <div class="itemconT_left">
              <div class="itemconT_img">
                <div class="itemconT_img_img">
                  <img :src="icon.src" style="width: 70%;height: 70%;" alt="icon1">
                </div>
              </div>
            </div>
            <div class="itemconT_right">
              <div class="right_text">
                <div class="text1">
                  {{ deviceInstalled[5].context }}{{ deviceInstalled[5].flag }}
                </div>
                <div class="text2">
                  {{ deviceInstalled[5].typeName }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </show-item>
</template>

<script>

import showItem from '@/views/zhangqiu/components/showItem.vue'
import { getDevice } from "@/views/zhangqiu/api/zq.js"
import axios from 'axios'
export default {
  name: 'DeviceInstalled',
  components: { showItem },
  data() {
    return {
      icon: {
        src: require('@/assets/zhangqiu/deviceInstalledIcon.png')
      },
      deviceInstalled:
        [
          {
            typeName: '电子标识器',
            context: '',
            flag: '个'
          },
          {
            typeName: '云台',
            context: '',
            flag: '台'
          },
          {
            typeName: '井盖状态监测仪',
            context: '',
            flag: '个'
          },
          {
            typeName: '燃气智能监测仪',
            context: '',
            flag: '个'
          },
          {
            typeName: '可燃气体',
            context: '',
            flag: '台'
          },
          {
            typeName: '管盯',
            context: '',
            flag: '个'
          }
        ]
    }
  },
  created() {
    this.getDeviceList()
  },
  methods: {
    getDeviceList() {
      getDevice().then(response => {
        console.log(response)
        this.deviceInstalled[0].context = response.data[0].count
        this.deviceInstalled[1].context = response.data[1].count
        this.deviceInstalled[2].context = response.data[2].count
        this.deviceInstalled[3].context = response.data[3].count
        this.deviceInstalled[4].context = response.data[4].count
        this.deviceInstalled[5].context = response.data[5].count
        console.log(this.deviceInstalled[0].context)
      })
    }
  }
}
</script>

<style lang="scss">
.showItem{
  display: flex;
  &_left,&_right{
    flex: 1;
  }
  .itemconT{
    margin-top: 5px;
    display: flex;
    align-items: center;
    &_left,&_right{
      display: flex;
      //display: 1;
    }
    &_img{
      display: flex;
      flex-direction: column;
      align-items: center;
      &_img{
        width: 60px;
        height: 60px;
        overflow: hidden;
        img{
          width: 100%;
          height: 100%;
        }
      }
    }
    .text1{
      font-size: 15px ;
      color: #00A3CC;
      font-weight: bolder;
    }
    .text2{
      font-size: 15px ;
      color: #fff;
    }
  }
}
</style>