<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].title}}</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].title}}</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].title}}</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].title}}</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].title}}</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].title}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </show-item>
</template>

<script>

import showItem from '@/views/zhangqiu/components/showItem.vue'
export default {
  name: 'DeviceInstalled',
  components: {showItem},
  data() {
    return {
      icon:{
        src: require('@/views/zhangqiu/resources/deviceInstalledIcon.png')
      },
      deviceInstalled:
        [
          {
            title: '井盖',
            context: '',
            flag: '个'
          },
          {
            title: '燃气终端',
            context: '',
            flag: '台'
          },
          {
            title: '云台',
            context: '',
            flag: '台'
          },
          {
            title: '燃气管盯',
            context: '',
            flag: '个'
          },
          {
            title: '可燃气体',
            context: '',
            flag: '台'
          },
          {
            title: '电子标识器',
            context: '',
            flag: '个'
          }
        ]
    }
  },
  created() {
    this.getWellCount()
    this.getGasCount()
    this.getCloudCount()
    this.getTubeCount()
    this.getGasdectorCount()
    this.getElecCount()
  },
  methods: {
    getWellCount() {
      this.deviceInstalled[0].context = '2250'
    },
    getGasCount() {
      this.deviceInstalled[1].context = '1050'
    },
    getCloudCount() {
      this.deviceInstalled[2].context = '8250'
    },
    getTubeCount() {
      this.deviceInstalled[3].context = '1231'
    },
    getGasdectorCount() {
      this.deviceInstalled[4].context = '2141'
    },
    getElecCount() {
      this.deviceInstalled[5].context = '8250'
    }
  }
}
</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>