<template>
  <div class="em-wrapper">
    <div class="monitor-list">
      <div v-for="item in detail" :key="item.label">
        <m-brief :label="item.label" :count="item.value" :icon="require(`@/assets/images/${item.icon}`)"
          labelColor="#47B3FF" :countColor="item.color || '#fff'" />
      </div>
    </div>
    <div v-if="show" class="chart">
      <m-chart v-if="show" :data="chartData" :config="chartConfig"/>
    </div>
    <div class="list">
      <m-scroll :length="listData.length" :limit="5">
        <div v-for="(item, i) in listData" :key="i">
          <p style="display:flex;justify-content:space-between;"><b>{{item.date}}</b> <i>{{item.address}}</i></p>
          <p>{{item.des}}</p>
        </div>
      </m-scroll>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Monitoring',
  props: {
    show: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      chartConfig: {
        colors: [
          '#2FC25B',
          '#FACC14',
          '#F04864',
          '#ccc',
        ],
        legend: {
          align: 'left',
          orient: 'vertical',
        },
        shape: [{
          key: 'value',
          type: 'pie',
          center: ['70%', '45%'],
          radius: ['50%', '70%']
        }]
      },
    }
  },
  mounted() {
  },
  computed: {
    chartData() {
      return this.list.map(item => {
        return {
          name: item.label,
          value: item.value
        }
      })
    },
    list() {
      return [{
        label: '无问题',
        icon: 'icon1.png',
        value: 5317,
        color: 'green',
      },
      {
        label: '轻微隐患',
        icon: 'icon2.png',
        value: 1936,
        color: 'gold',
      },
      {
        label: '严重隐患',
        icon: 'icon3.png',
        value: 36,
        color: 'red',
      },
      {
        label: '未上报',
        icon: 'icon4.png',
        value: 5809,
      },
      ]
    },
    detail() {
      return [{
        label: '已上报小区',
        icon: 'icon1.png',
        value: 66,
        color: 'green',
      },
      {
        label: '未上报小区',
        icon: 'icon2.png',
        value: 22,
        color: 'red',
      },
      ]
    },
    listData() {
      return [
        {
          date: this.$moment().subtract(1, 'days').format('YYYY-MM-DD'),
          address: '浦三路288弄15号203室',
          des: '居民来电报修家中断电，请处理。',
        },
        {
          date: this.$moment().subtract(1, 'days').format('YYYY-MM-DD'),
          address: '临沂路81弄52号103室',
          des: '阳台上下水道堵塞（上门前联系下住户手机）（非浦2管辖范围）',
        },
        {
          date: this.$moment().subtract(1, 'days').format('YYYY-MM-DD'),
          address: '浦三路277弄34号',
          des: '顶楼平改坡天窗要掉落了，需要物业上门拿下来，排除危险。',
        },
        {
          date: this.$moment().subtract(1, 'days').format('YYYY-MM-DD'),
          address: '东方路3344弄7号202室',
          des: '居民来电报修下水道泛水，请处理。',
        },
        {
          date: this.$moment().subtract(1, 'days').format('YYYY-MM-DD'),
          address: '南码头路260弄5号603室',
          des: '来电报修反映称6楼公共走廊的雨棚脱落一半，随时掉落，存在安全隐患，要求速去处理。',
        },
        {
          date: this.$moment().subtract(1, 'days').format('YYYY-MM-DD'),
          address: '兰陵路23弄23号601室',
          des: '靠近阳台左边墙面屋顶漏水',
        },
      ]
    },
  }
}

</script>

<style lang="stylus" scoped>
.em-wrapper
  width 100%
  height 100%
.chart
  width 100%
  height 28%
.monitor-list
  display flex
  flex-wrap wrap
  height 15%
  >div
    width 50%
    position relative
    overflow hidden
    z-index 1
.list
  height 55%
  overflow auto
  div
    padding 0.5rem 0
    border-bottom 0.1rem solid rgba(255, 165, 0, 0.2)
  p
    &:first-child
      color gold
</style>
