
<template>
  <div class="supervision">
    <div class="people">
      <div class="head">
        <p>
          检察人员
          <span>[{{$store.state.supervisionPeopleList.length}}]</span>
        </p>
        <div class="line"/>
      </div>
      <div class="list">
        <div v-for="(data,i) in $store.state.supervisionPeopleList" :key="i">
          <img :src="require(`@/assets/images/${data.img}`)" alt="">
          <p>{{data.name}}</p>
        </div>
      </div>
    </div>
    <div class="community">
      <div class="head">
        <p>检察小区</p>
        <div class="line"/>
      </div>
      <div class="list">
        <div v-for="(data,i) in $store.state.supervisionCommunityList" :key="i" @click="$emit('clickCommunity',data)">
          <p>{{data.title}}</p>
        </div>
      </div>
    </div>
    <div class="situation">
      <div class="head">
        <p>检察情况</p>
        <div class="line"/>
      </div>
      <div class="content">
        <img :src="require(`@/assets/images/modify.png`)">
        <div v-for="(data,i) in $store.state.supervisionSituationList" :key="i">
          <div>
            <p>整改单</p>
            <p><span>{{data.successNum}}/</span>{{data.num}}</p>
          </div>
          <a-progress hide-info :stroke-width="8"  strokeColor="#00f2ff" :percent="data.successNum/data.num*100" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Supervision'

}
</script>
<style lang="stylus">
.supervision .ivu-progress-inner
  background #0d87fc
</style>
<style lang="stylus" scoped>
.head
  display flex
  align-items center
  .line
    flex 1
    background #094981
    height 0.1rem
    margin-left 0.5rem
  >p
    color #fff
    font-weight 700
    >span
      color $edgeColor
.list
  display flex
  flex-wrap wrap

.supervision
  width 100%
  height 100%
  >div
    margin-bottom 1rem
  .people
    .list
      >div
        width 20%
        display flex
        align-items center
        color $fontColor
        margin-top .5rem
        font-size 0.8rem
        >img
          width 1rem
          height 1rem
          margin 0 .2rem
  .community
    .list
      >div
        width 33.3%
        border-left 0.2rem solid yellow
        margin 0.5rem 0
        padding 0 .5rem
        p
          white-space nowrap
          overflow hidden
          text-overflow ellipsis
          color #5587b7
          font-weight 600
          font-size 0.8rem
  .situation
    .content
      margin-top 1rem
      display flex
      align-items center
      img
        width 2.5rem
        height 2.5rem
        margin-right 0.5rem
      >div
        width 100%
        >div
          display flex
          justify-content space-between
          p
            color lightblue
            font-size 0.8rem
            &:last-child
              font-family $font-pang
              color #fff
              span
                color $edgeColor

</style>
