<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'
import { getOperation } from "@/views/zhangqiu/api/zq.js"

export default {
  name: 'SevenDaysOperationStatus',
  components: { showItem },
  data() {
    return {
      icon: {
        icon: {
          src: require('@/assets/zhangqiu/sevenDaysOperationStatusIcon.png')
        },
        top: {
          src: require('@/assets/zhangqiu/sevenDaysOperationStatusTop.png')
        },
        bottom: {
          src: require('@/assets/zhangqiu/sevenDaysOperationStatusBottom.png')
        }
      },
      sevenDaysOperationStatus: [
        {
          title: '运维工单',
          context: ''
        },
        {
          title: '运维任务',
          context: ''
        },
        {
          title: '运维事件',
          context: ''
        }
      ],
      vls : '1'
    }
  },
  created() {
    // this.getMissionCount()
    // this.getEventCount()
    // this.getWorksheetCount()
    this.getOperationList()
  },
  methods: {
    getOperationList() {
      getOperation().then(response => {
        console.log(response)
        this.sevenDaysOperationStatus[0].context = response.data.data[1].count
        this.sevenDaysOperationStatus[1].context = response.data.data[2].count
        this.sevenDaysOperationStatus[2].context = response.data.data[3].count
        this.vls = response.data.data[0].count
        console.log(this.vls, '-------------------')
        })
    }
    // 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>