<template>
  <show-item>
    {{ '近7日运维状况' }}
    <template #container>
      <div class="operations">
        <div class="operations_left">
          <div class="leftItem">
            <div class="leftItem_left">
              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
            </div>
            <div class="leftItem_right">
              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[0].title}}</div>
              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[0].context}}</div>
            </div>
          </div>
          <div class="leftItem">
            <div class="leftItem_left">
              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
            </div>
            <div class="leftItem_right">
              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[1].title}}</div>
              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[1].context}}</div>
            </div>
          </div>
          <div class="leftItem">
            <div class="leftItem_left">
              <img :src="icon.icon.src" style="width: 50px;height: 50px" alt="icon2">
            </div>
            <div class="leftItem_right">
              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text1">{{sevenDaysOperationStatus[2].title}}</div>
              <div :sevenDaysOperationStatus="sevenDaysOperationStatus" class="leftItem_right_text2">{{sevenDaysOperationStatus[2].context}}</div>
            </div>
          </div>
        </div>
        <div class="operations_right">
          <div class="imgbox">
            <img :src="icon.bottom.src" class="img1" alt="icon3"/>
            <img :src="icon.top.src" class="img2" alt="icon3"/>
            <div :vls="vls" class="vls">{{ vls }}</div>
          </div>
          <div class="desc">{{ '运维完结占比' }}</div>
        </div>
      </div>
    </template>
  </show-item>
</template>

<script>

import showItem from '@/views/zhangqiu/components/showItem.vue'
export default {
  name: 'SevenDaysOperationStatus',
  components: {showItem },
  data() {
    return {
      icon: {
        icon: {
          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusIcon.png')
        },
        top: {
          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusTop.png')
        },
        bottom: {
          src: require('@/views/zhangqiu/resources/sevenDaysOperationStatusBottom.png')
        }
      },
      sevenDaysOperationStatus: [
        {
          title: '运维任务',
          context: '',
        },
        {
          title: '运维事件',
          context: '',
        },
        {
          title: '运维工单',
          context: '',
        }
      ],
      vls:'444'
    }
  },
  created() {
    this.getMissionCount()
    this.getEventCount()
    this.getWorksheetCount()
  },
  methods: {
    getMissionCount() {
      this.sevenDaysOperationStatus[0].context = '111'
    },
    getEventCount() {
      this.sevenDaysOperationStatus[1].context = '222'
    },
    getWorksheetCount() {
      this.sevenDaysOperationStatus[2].context = '333'
    }
  }
}
</script>

<style lang="scss">
.operations{
  width: 100%;
  display: flex;
  &_left,&_right{
    flex:1
  }
  .leftItem{
    margin-top: 10px;
    display: flex;
    align-items: center;
    &_left{
      width: 65px;
      margin-right: 10px;
      img{
        width: 100%;
      }
    }
    &_right{
      &_text1{
        color: #999;
        font-size: 12px;
      }
      &_text2{
        color: #fff;
        font-size: 23px;
        font-weight: bolder;
        text-align: center;
      }
    }
  }
  &_right{
    display: flex;
    align-content:center;
    flex-direction: column;
    .imgbox{
      flex: 2;
      position: relative;
      align-items: center;
      img{
        position:absolute;
        width: 100%;
      }
      .img1{
        top: 48px;
      }
      .img2{
        top: 22px;
      }
      .vls{
        font-size: 23px;
        font-weight: bolder;
        color: #fff;
        text-align: center;
        margin-top: 72px;

      }
    }
    .desc{
      flex: 1;
      font-size: 23px;
      font-weight: bolder;
      color: #fff;
      text-align: center;
    }
  }
}
</style>