//电梯加装
<template>
  <div class="box">
    <div class="title">
      全区电梯加装情况
    </div>
    <div class="content">
         <div class="task" v-for="(item,index) in list " :key="index">
          <p>{{item.name}}</p>
          <p class="sum">{{Math.floor(+item.value*1000)/10}}%</p>
          <div class="all">
            <div class="done" :style="`width:${Math.floor(+item.value*1000)/100+'rem'}`"/>
            <div class="yuan" :style="`left:${Math.floor(+item.value*1000)/100-.5+'rem'}`"/>
          </div>
        </div>
    </div>
  </div>
</template>

<script >
import {mapActions, mapState} from 'vuex'

export default {
  props: {
  
  },
  data(){
    return{
      list: [
        {
          name: '加装意愿收集率',
          value: 0
        },
        {
          name: '加装意愿同意率',
          value: 0

        },
        {
          name: '加装已公告率',
          value: 0
        },
        {
          name: '加装已完工率',
          value: 0
        },
      ]
    }
  },
  created(){
    this.getADDelevator({pageSize: 5, pageNo: 1}).then(res => {
      let arr = this.$com.confirm(res, 'data.content.heard', [])
      arr.forEach((ele, index) => {
        this.list[index].name = ele.name
        this.list[index].value = ele.value
      })
    })

  },
  methods: {
    ...mapActions([
      'getADDelevator'
    ]),
    clickMonth(item){
      // console.log(item)
    },
  }

}
</script>

<style scoped>
.box{
  background: #fff; 
  display: flex;
  flex-direction: column;
}
.box .title{
  height: 35px;
  padding-left: 20px;
  line-height: 35px;
  font-size: 15px;
  font-weight: 550;
  border-bottom: 1px solid #ccc;
}
.box .content{
  flex:1;
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  white-space: nowrap;

}
.box .content .task {
  width: 50%;
  /* height: 50%; */
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;

}
.box .content .task p{
  padding: 0;
  margin: 0;
  width: 100%;
  font-size: 12px;

}

.box .content .task .sum{
  color: rgb(0, 151, 153);
  font-size: 12px;
}
.box .content .task .all{
  height: .5rem;
  width: 7rem;
  margin-left: .5rem;
  background: rgb(242,243,245);
  border-radius: 5px;
  position: relative;
}
.box .content .task .all .done{
  position: absolute;
  height: .5rem;
  background: rgb(135,216,217);
  border-radius:5px;
  left: 0;
}
.box .content .task .all .yuan{
  width: 1rem;
  height: 1rem;
  background: rgb(0,187,187);
  border-radius: 50%;
  position: absolute;
  top: -.25rem;

}

</style>