<template>
  <div class="manage-issue">
    <div class="circle-wrapper">
      <i-circle
        v-for="circle in circles"
        :key="circle.title"
        :percent="circle.count"
        :size="90 * 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:.9rem;margin-top:.4rem;">已处置{{circle.count}}%</p>
        </div>
      </i-circle>
    </div>
    <Tabs value="all" size="small" @on-click="handleClick">
      <TabPane label="管理提醒" name="all"/>
      <TabPane label="安全类" name="安全"/>
      <TabPane label="有序类" name="有序"/>
      <TabPane label="干净类" name="干净"/>
    </Tabs>
    <div class="list">
      <div
        class="item"
        v-for="item in datas"
        :key="item.name"
        >
        <span class="title">
          {{item.name}}
        </span>
        <span :style="+item.count !== 0 ? 'color:red' : ''">{{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',
        },
      ],
      datas: [],
    }
  },
  mounted() {
    this.datas = this.list
  },
  computed: {
    list() {
      let data = require('../../../static/govern-issue.json')
      if (this.$route.name === 'linyiercun') {
        data = require('../../../static/govern-linyi.json')
      }
      return data.sort((a, b) => b.count - a.count)
    },
    sizeRate() {
      return Math.floor(screen.height * 1.48 / 100 / 10)
    },
  },
  methods: {
    handleClick(name) {
      if (name === 'all') {
        this.datas = this.list
        return
      }
      this.datas = this.list.filter(item => item.type == name)
    }
  },
}
</script>
<style lang="stylus">
$blue = #3391FF
.manage-issue
  .ivu-tabs-bar
    margin-bottom 0.5rem
    border-bottom .1rem solid $color-map()
  .ivu-tabs-nav
    .ivu-tabs-ink-bar
      background-color $edgeColor
    .ivu-tabs-tab
      font-size 1rem
      padding 0.3rem 0.5rem
      color $blue
      &.ivu-tabs-tab-active
        color #fff
        background $blue
</style>
<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
  .list
    flex 1
    overflow-y auto
    .item
      float left
      width 49%
      height 3rem
      background-color rgba(6,27,50,0.9)
      margin 0.1rem
      padding 0 .7rem
      display flex
      justify-content space-between
      align-items center
      span
        font-weight 700
        &.title
          width 80%
          color #fff
          font-size 0.9rem
          font-weight normal
</style>
