<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="5 * 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 v-if="analysisChart" class="chart">
      <m-chart :config="config" :data="data"/>
    </div>
    <div v-else class="list">
      <div
        class="item"
        v-for="item in datas"
        :key="item.name"
        >
        <span class="title" :title="item.name">
          {{item.name}}
        </span>
        <span :style="+item.count !== 0 ? 'color:red' : ''">{{item.count}}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ManageIssue',
  data() {
    return {
      analysisChart: true,
      circles: [
        {
          title: '安全',
          count: 88.6,
          color: '#fee902',
        },
        {
          title: '有序',
          count: 92.4,
          color: '#01a7ff',
        },
        {
          title: '干净',
          count: 100,
          color: '#8fd618',
        },
      ],
      datas: [],
      config: {
        colors: ['rgba(143, 214, 24, .9)', 'rgba(1, 167, 255, .9)', 'rgba(254, 233, 2, .9)'],
        legend: {hide: true},
        shape: [
          {key: 'clean', name: '干净', type: 'line', areaStyle: {}},
          {key: 'orderly', name: '有序', type: 'line', areaStyle: {}},
          {key: 'safe', name: '安全', type: 'line', areaStyle: {}},
        ],
        xAxis: {key: 'date'},
      },
      data: [
        {date: '5月1日', safe: 88.6, orderly: 96.2, clean: 97.1},
        {date: '5月2日', safe: 88.6, orderly: 100, clean: 100},
        {date: '5月3日', safe: 100, orderly: 88.6, clean: 97.1},
        {date: '5月4日', safe: 94.3, orderly: 100, clean: 97.1},
        {date: '5月5日', safe: 94.3, orderly: 96.2, clean: 94.2},
        {date: '5月6日', safe: 100, orderly: 92.4, clean: 97.1},
        {date: '5月7日', safe: 88.6, orderly: 100, clean: 100},
        {date: '5月8日', safe: 100, orderly: 84.8, clean: 100},
        {date: '5月9日', safe: 94.3, orderly: 100, clean: 100},
        {date: '5月10日', safe: 100, orderly: 88.6, clean: 100},
        {date: '5月11日', safe: 88.6, orderly: 92.4, clean: 97.1},
        {date: '5月12日', safe: 100, orderly: 92.4, clean: 100},
        {date: '5月13日', safe: 100, orderly: 100, clean: 97.1},
        {date: '5月14日', safe: 94.3, orderly: 100, clean: 97.1},
        {date: '5月15日', safe: 88.6, orderly: 92.4, clean: 100},
        {date: '5月16日', safe: 100, orderly: 100, clean: 100},
        {date: '5月17日', safe: 100, orderly: 100, clean: 100},
        {date: '5月18日', safe: 100, orderly: 96.2, clean: 100},
        {date: '5月19日', safe: 100, orderly: 100, clean: 100},
        {date: '5月20日', safe: 94.3, orderly: 100, clean: 97.1},
        {date: '5月21日', safe: 82.9, orderly: 96.2, clean: 97.1},
        {date: '5月22日', safe: 100, orderly: 100, clean: 97.1},
        {date: '5月23日', safe: 100, orderly: 92.4, clean: 97.1},
        {date: '5月24日', safe: 94.3, orderly: 96.2, clean: 100},
        {date: '5月25日', safe: 100, orderly: 96.2, clean: 94.2},
        {date: '5月26日', safe: 100, orderly: 100, clean: 100},
        {date: '5月27日', safe: 100, orderly: 88.6, clean: 97.1},
        {date: '5月28日', safe: 94.3, orderly: 100, clean: 100},
        {date: '5月29日', safe: 88.6, orderly: 100, clean: 94.2},
        {date: '5月30日', safe: 94.3, orderly: 100, clean: 100},
        {date: '5月31日', safe: 100, orderly: 100, clean: 97.1},
      ],
    }
  },
  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
        this.analysisChart = true
        return
      }
      this.analysisChart = false
      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
  .chart
    width 100%
    height 50%
  .list
    flex 1
    overflow-y auto
    .item
      float left
      width 49%
      height 2.4rem
      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
          overflow hidden
          white-space nowrap
          text-overflow ellipsis
</style>
