<template>
  <div class="manage-issue">
    <div class="circle-wrapper">
      <i-circle
        v-for="circle in circles"
        :key="circle.title"
        :percent="circle.count"
        :size="80 * sizeRate"
        :trail-width="2 * sizeRate"
        :stroke-width="6 * sizeRate"
        trail-color="gray"
        :stroke-color="circle.color">
        <div>
          <b>{{circle.title}}</b>
          <p style="font-size:.8rem;margin-top:.2rem;">未完成{{circle.count}}%</p>
        </div>
      </i-circle>
    </div>
    <div class="list">
      <div
        class="item"
        v-for="item in list"
        :key="item.name"
        >
        <span class="title">
          <img src="@/assets/images/xf.png"/>
          {{item.name}}
        </span>
        <span>{{item.count}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ManageIssue',
  data() {
    return {
      circles: [
        {
          title: '更安全',
          count: 40,
          color: '#fee902',
        },
        {
          title: '更有序',
          count: 80,
          color: '#01a7ff',
        },
        {
          title: '更干净',
          count: 19,
          color: '#8fd618',
        },
      ],
    }
  },
  computed: {
    list() {
      if (this.$route.name === 'linyiercun') {
        return require('../../../static/govern-linyi.json')
      } else {
        return require('../../../static/govern-issue.json')
      }
    },
    sizeRate() {
      return Math.floor(screen.height * 1.48 / 100 / 11)
    },
  },
}
</script>

<style lang="stylus" scoped>
.manage-issue
  width 100%
  height 100%
  overflow hidden
  display flex
  flex-direction column
  .circle-wrapper
    display flex
    align-items center
    height 40%
    justify-content space-around
    margin-bottom .5rem
  .list
    display flex
    flex-wrap wrap
    // height 60%
    flex 1
    overflow-y auto
    .item
      width 49%
      background-color rgba(6,27,50,0.9)
      margin 0.1rem
      padding 0 .7rem
      display flex
      justify-content space-between
      align-items center
      span
        color gold
        font-weight 700
        &.title
          display flex
          align-items center
          width 80%
          color #fff
          font-size 0.8rem
          font-weight normal
          >img
            width 1.25rem
            height 1.25rem
            margin-right 0.8rem
</style>
