<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('@/views/zhangqiu/resources/handlingAlarmCircle1.png'),
        circle2: require('@/views/zhangqiu/resources/handlingAlarmCircle2.png'),
        circle3: require('@/views/zhangqiu/resources/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>