<template>
  <show-item>
    {{ '报警处置情况' }}
    <template #container>
      <div class="situation">
        <div class="situation_left">
          <div class="situation_item">
            <div class="situation_item_left">
              <div class="left_relative">
                <img :src="icon.circle1" alt="" class="img1">
                <img :src="icon.circle2" alt="" class="img2">
                <img :src="icon.circle3" alt="" class="img3">
                <div :handlingAlarm="handlingAlarm" class="vls">
                  {{ handlingAlarm[0].status }}
                </div>
              </div>
              <div :handlingAlarm="handlingAlarm" class="situation_text">
                {{ handlingAlarm[0].title }}
              </div>
            </div>
            <div class="situation_item_right">
              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{ handlingAlarm[0].finished }}</span>%</div>
              <div>未完成<span class="color_EE9611 right_text">{{ handlingAlarm[0].unfinished }}</span>%</div>
            </div>
          </div>
          <div class="situation_item">
            <div class="situation_item_left">
              <div class="left_relative">
                <img :src="icon.circle1" alt="" class="img1">
                <img :src="icon.circle2" alt="" class="img2">
                <img :src="icon.circle3" alt="" class="img3">
                <div :handlingAlarm="handlingAlarm" class="vls">
                  {{ handlingAlarm[1].status }}
                </div>
              </div>
              <div :handlingAlarm="handlingAlarm" class="situation_text">
                {{ handlingAlarm[1].title }}
              </div>
            </div>
            <div class="situation_item_right">
              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{ handlingAlarm[1].finished }}</span>%</div>
              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{ handlingAlarm[1].unfinished }}</span>%</div>
            </div>
          </div>
        </div>
        <div class="situation_right">
          <div class="situation_item">
            <div class="situation_item_left">
              <div class="left_relative">
                <img :src="icon.circle1" alt="" class="img1">
                <img :src="icon.circle2" alt="" class="img2">
                <img :src="icon.circle3" alt="" class="img3">
                <div :handlingAlarm="handlingAlarm" class="vls">
                  {{ handlingAlarm[2].status }}
                </div>
              </div>
              <div :handlingAlarm="handlingAlarm" class="situation_text">
                {{ handlingAlarm[2].title }}
              </div>
            </div>
            <div class="situation_item_right">
              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{ handlingAlarm[2].finished }}</span>%</div>
              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{ handlingAlarm[2].unfinished }}</span>%</div>
            </div>
          </div>
          <div class="situation_item">
            <div class="situation_item_left">
              <div class="left_relative">
                <img :src="icon.circle1" alt="" class="img1">
                <img :src="icon.circle2" alt="" class="img2">
                <img :src="icon.circle3" alt="" class="img3">
                <div :handlingAlarm="handlingAlarm" class="vls">
                  {{ handlingAlarm[3].status }}
                </div>
              </div>
              <div :handlingAlarm="handlingAlarm" class="situation_text">
                {{ handlingAlarm[3].title }}
              </div>
            </div>
            <div class="situation_item_right">
              <div>已完成<span :handlingAlarm="handlingAlarm" class="color_AAEEEE right_text">{{ handlingAlarm[3].finished }}</span>%</div>
              <div>未完成<span :handlingAlarm="handlingAlarm" class="color_EE9611 right_text">{{ handlingAlarm[3].unfinished }}</span>%</div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </show-item>
</template>

<script>

import showItem from '@/views/zhangqiu/components/showItem.vue'
export default {
  name: 'HandlingAlarm',
  components: { showItem },
  data() {
    return {
      icon: {
        circle1: require('@/assets/zhangqiu/handlingAlarmCircle1.png'),
        circle2: require('@/assets/zhangqiu/handlingAlarmCircle2.png'),
        circle3: require('@/assets/zhangqiu/handlingAlarmCircle3.png')
      },
      handlingAlarm: [
        {
          title: '井盖',
          finished: '',
          unfinished: '',
          status: ''
        },
        {
          title: '其他气体',
          finished: '',
          unfinished: '',
          status: ''
        },
        {
          title: '燃气',
          finished: '',
          unfinished: '',
          status: ''
        },
        {
          title: '云台',
          finished: '',
          unfinished: '',
          status: ''
        }
      ]
    }
  },
  created() {
    this.getWellSituation()
    this.getOtherGasSituation()
    this.getGasSituation()
    this.getPantiltSituation()
  },
  methods: {
    getWellSituation() {
      this.handlingAlarm[0].status = '111'
      this.handlingAlarm[0].finished = '88'
      this.handlingAlarm[0].unfinished = 100 - this.handlingAlarm[0].finished
    },
    getOtherGasSituation() {
      this.handlingAlarm[1].status = '222'
      this.handlingAlarm[1].finished = '77'
      this.handlingAlarm[1].unfinished = 100 - this.handlingAlarm[1].finished
    },
    getGasSituation() {
      this.handlingAlarm[2].status = '333'
      this.handlingAlarm[2].finished = '66'
      this.handlingAlarm[2].unfinished = 100 - this.handlingAlarm[2].finished
    },
    getPantiltSituation() {
      this.handlingAlarm[3].status = '444'
      this.handlingAlarm[3].finished = '55'
      this.handlingAlarm[3].unfinished = 100 - this.handlingAlarm[3].finished
    }
  }
}
</script>

<style lang="scss">
.situation{
  width: 100%;
  display: flex;

  &_left,&_right{
    flex: 1;
  }
}

.situation_item{
  display: flex;
  align-items: center;
  &_left,&_right{
    flex: 1;
  }
  .left_relative{
    width: 100%;
    height: 84px;
    overflow: hidden;
    position: relative;
    img{
      position: absolute;
    }
    .img1{
      width: 90%;
      height: 90%;
    }
    .img3{
      width: 70%;
      height: 70%;
      top: 47%;
      left: 42%;
      transform: translate(-50%, -50%);
    }
    .img2{
      width: 60%;
      height: 60%;
      top: 48%;
      left: 43%;
      transform: translate(-50%, -50%);
    }
    .vls{
      position:absolute;
      font-size: 23px;
      font-weight: bolder;
      color: #AAEEEE;
      top: 48%;
      left: 43%;
      transform: translate(-50%, -50%)
    }
  }
  .situation_text{
    color: #AAEEEE;
    font-size: 15px;
    text-align: center;
  }
  .situation_item_right{
    color:dimgray;
    font-size: 12px;
  }
  .color_AAEEEE{
    color: #AAEEEE;
  }
  .color_EE9611{
    color: #EE9611;
  }
  .right_text{
    font-size: 18px;
  }
}
</style>