<template>
  <div class="industry-supervise">
    <div class="supervise">
      <div>
        <img src="@/assets/images/check-items.png" />
        <div class="item" v-for="item in supervise" :key="item.name">
          <p v-if="Array.isArray(item.value)" class="count">
            <m-count :value="item.value[0]"  /> / <m-count :value="item.value[1]"  />
          </p>
          <m-count v-else class="count" :value="item.value"  />
          <p>{{item.name.slice(0, 4)}}<br/>{{item.name.slice(4)}}</p>
        </div>
      </div>
      <div>
        <p>房办月查完成情况</p>
        <div class="inner">
          <span v-for="i in 12" :key="i">{{i}}</span>
        </div>
      </div>
    </div>
    <Divider>信息上报</Divider>
    <div class="info-submit">
      <div class="info">
        <div>
          <p>上报完成任务总数</p>
          <m-count class="count" :value="946"  />
        </div>
        <div>
          <p>上报信息条数</p>
          <m-count class="count" :value="1079"  />
        </div>
        <Select value="台风黑格比">
          <Option name="台风黑格比" value="台风黑格比">台风黑格比</Option>
          <Option name="台风" value="台风">台风</Option>
        </Select>
      </div>
      <div class="chart"><m-chart :config="config" :data="mockData" :options="options" /></div>
    </div>
    <Divider>重大事件清单</Divider>
    <div class="important-list">
      <div class="detail" v-for="(item, i) in list" :key="i">
        <div>
          <h5>{{item.community}}</h5>
          <p>{{item.theme}}</p>
        </div>
        <div class="content">
          <div>
            <p>事件类型</p>
            <p>{{item.type}}</p>
          </div>
          <div>
            <p>人员伤亡</p>
            <p><m-count :value="item.die"  /><span class="unit">人</span></p>
          </div>
          <div>
            <p>财产损失</p>
            <p><m-count :value="item.lost"  /><span class="unit">元</span></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IndustrySupervise',
  data() {
    return {
      supervise: [
        {name: '日常巡查完成数', value: 16},
        {name: '重点督查完成数', value: 29},
        {name: '整改跟踪', value: [5, 16]},
        {name: '专项检查完成数', value: 32},
      ],
      list: [
        {community: '保利维拉家园', theme: '上报主题', type: '事件类型', die: 3, lost: 5000},
        {community: '中凯城市之光', theme: '上报主题', type: '事件类型', die: 3, lost: 5000},
      ],
      config: {
        colors: ['#5bd4ff', '#72c011', '#fece35', '#ff6160', '#826bfa', '#cccccc'],
        tooltip: {
          formatter: '{b}：{c}个 ({d}%)',
          confine: true,
        },
        legend: {
          align: 'right',
          orient: 'vertical',
        },
        shape: [
          {type: 'pie', radius: [10 * Number((screen.height / 800).toFixed(1)), 50 * Number((screen.height / 800).toFixed(1))], roseType: 'radius', center: ['32%', '50%']}
        ]
      },
      options: {
        legend: {
          top: '15%',
          formatter: (name) => {
            const data = [
              {name: '空中坠物', value: 15},
              {name: '树木倒伏', value: 20},
              {name: '小区积水', value: 45},
              {name: '车库进水', value: 6},
              {name: '人员受伤', value: 9},
            ]
            return `${name} ${(data.find(e => e.name === name)).value}%`
          }
        }
      },
      mockData: [
        {name: '空中坠物', value: 15},
        {name: '树木倒伏', value: 20},
        {name: '小区积水', value: 45},
        {name: '车库进水', value: 6},
        {name: '人员受伤', value: 9},
      ],
    }
  },
}
</script>

<style lang="stylus" scoped>
.industry-supervise
  display flex
  flex-direction column
  .count
    font-size .12rem
    color $color-yellow
  .supervise
    height 35%
    width 100%
    display flex
    >div
      &:first-child
        width 60%
        position relative
        >img
          width 36%
          position absolute
          top 0
          right 0
          bottom 0
          left 0
          margin auto
        .item
          position absolute
          width 32%
          height 45%
          background rgba(49,94,139, .4)
          border .04rem solid rgba(0,0,0,.25)
          text-align center
          $flex-center()
          flex-direction column
          font-size .08rem
          &:nth-child(1)
            top 0
            left 0
          &:nth-child(2)
            top 0
            right 0
          &:nth-child(3)
            bottom 0
            left 0
          &:nth-child(4)
            bottom 0
            right 0
      &:last-child
        background #0A2F59
        flex 1
        margin-left .05rem
        overflow hidden
        p
          line-height .2rem
          border-bottom .01rem solid $cardFontColor
          text-indent .1rem
        .inner
          display grid
          justify-content space-between
          grid-template-columns repeat(auto-fill, .2rem)
          padding 0 .05rem
          grid-gap .03rem
          span
            $flex-center()
            border-radius .02rem
            width .16rem
            height @width
            background $color-yellow
            margin-top .05rem
  .info-submit
    display flex
    align-items center
    height 45%
    width 100%
    .info
      flex 1
    .chart
      width 65%
      height 100%
  .important-list
    display flex
    flex 1
    margin-top .2rem
    .detail
      width 49%
      margin-right .05rem
      background $section-bg
      padding .03rem .05rem 0
      cursor pointer
      transition background .2s, box-shadow .3s ease-in-out
      &:hover
        background $section-hover
        box-shadow -0.05rem .01rem .05rem .01rem rgba(0,0,0,0.8)
      h5
        font-size .1rem
      .unit
        font-size .08rem
        color #aaa
      >div
        &:first-child
          p
            font-size .09rem
            color #ccc
        &.content
          display flex
          margin .02rem 0
          justify-content space-between
          p
            &:first-child
              color $cardFontColor
              font-size .08rem

</style>
