<template>
  <div style="width: 100%">
    <div class="box" v-for="(item,index) in data[deptName]">
      <input v-if="activeCheckbox" type="checkbox" style="width: 25px;height: 25px;position: relative;top:-10px;left: 115px"/>
      <div style="line-height:30px;border-radius: 15px;border: 3px solid gray;margin:3% 7%;background-color: white">
        {{item.name}}
      </div>
      <div style="text-align: center;margin-top: 12px">
        <img :src="item.headImage" :style="{width: myStyle.headImgWidth||'100%'}">
      </div>
      <div style="line-height:30px;border-radius: 5px;border: 3px solid gray;margin:2% 5%;background-color: white;color: gray">产能:30米/小时</div>
      <hr style="margin: 1%"/>
      <div style="line-height:25px;border-radius: 5px;border: 3px solid gray;margin:1% 5%;background-color: white;color: blue">今日计划:240米</div>
      <div style="line-height:25px;border-radius: 5px;border: 3px solid gray;margin:1% 5%;background-color: white;color: green">今日产量:170.4米</div>
      <el-progress type="line" :text-inside="true" :stroke-width="25" :style="{width:'90%',margin:'3% 5%'}"
                   :percentage="Math.round(170.4/240*100,2)"
                   :color="'green'" text-color="white"/>
    </div>
  </div>
</template>

<script>
import XEUtils from 'xe-utils'
export default {
  name:"Content",
  props:{
    data:Object,
    deptName:String,
    type:String,
    myStyle:Object,
    users:Number
  },
  data(){
    return {
      activeName:'1',
      activeCheckbox:false,
    }
  },
  methods:{
    itemClick(item){
      this.$emit('initDetail',item);
    },
    test(){
      return XEUtils.random(1,60)
    }
  }
}
</script>

<style scoped>
.box{
  width:20%;
  height: 430px;
  text-align: center;
  border: 3px solid yellow;
  border-radius: 25px;
  float: left;
  margin: 25px;
}
.deptName{
  color: white;
  border:1px solid blue;
  border-radius:15px;
  background-color: blue;
  width: 80%;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  box-shadow: 2px 2px 2px 1px black;
}
</style>
