<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="(month, i) in months" :class="getClass(month)" :key="i">{{i+1}}</span>
        </div>
      </div>
    </div>
    <Divider>信息上报</Divider>
    <div class="info-submit">
      <div class="info">
        <div>
          <p>上报完成任务总数</p>
          <m-count class="count" :value="+reportSum.finish"  />
        </div>
        <div>
          <p>上报信息条数</p>
          <m-count class="count" :value="+reportSum.total"  />
        </div>
        <Select v-model="reportId">
          <Option value="2008041192891503">台风黑格比</Option>
        </Select>
      </div>
      <div class="chart" v-if="chartData.length > 0"><m-chart :config="config" :data="chartData" :options="options" /></div>
    </div>
    <Divider>重大事件清单</Divider>
    <div class="important-list">
      <template v-if="importantList.length > 0">
      <div class="detail" v-for="(item, i) in importantList" :key="i">
        <div>
          <h5>{{item.sectname}}</h5>
          <!-- <p>{{item.taskid}}</p> -->
        </div>
        <div class="content">
          <div>
            <p>事件内容</p>
            <p>{{item.rpcontent}}</p>
          </div>
          <!-- <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>
      </template>
      <div v-else class="no-data">
        <img src="@/assets/images/building.png" />
        <p>— 暂无数据 —</p>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'IndustrySupervise',
  data() {
    return {
      reportId: '2008041192891503',
      months: [
        'Jan',
        'Feb',
        'Mar',
        'Apr',
        'May',
        'Jun',
        'Jul',
        'Aug',
        'Sept',
        'Oct',
        'Nov',
        'Dec',
      ],
      config: {
        colors: ['#5bd4ff', '#72c011', '#fece35', '#ff6160', '#826bfa', '#cccccc'],
        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) => {
            return `${name} ${(this.chartData.find(e => e.name === name)).value}%`
          }
        }
      },
    }
  },
  computed: {
    ...mapState([
      'reportInfo',
      'reportSum',
      'importantList',
    ]),
    industryInfo() {
      return this.$store.state.industryInfo
    },
    supervise() {
      const {dailySupervision = 0, keySupervision = 0, notOther = 0, other = 0, specialExamination = 0} = this.industryInfo
      return [
        {name: '日常巡查完成数', value: +dailySupervision},
        {name: '重点督查完成数', value: +keySupervision},
        {name: '整改跟踪', value: [+notOther, +other]},
        {name: '专项检查完成数', value: +specialExamination},
      ]
    },
    chartData() {
      return this.reportInfo.map(item => ({
        name: item.rpcontent,
        value: Number((item.rpcontentCount && item.rpcontentCount.replace('%', '')) || 0),
      }))
    },
  },
  methods: {
    getClass(month) {
      const {monthCompletion = {}} = this.industryInfo
      if (!month || !monthCompletion[month]) return null
      switch (monthCompletion[month]) {
      case 'c':
        return 'red'
      case 'w':
        return 'yellow'
      case 'i':
        return 'green'
      default:
        return null
      }
    },
  },
  watch: {
    reportId: {
      handler(cur) {
        this.$store.commit('SET_REPORT_ID', cur)
        this.$store.dispatch('getReportInfo')
      },
      immediate: true,
    }
  }
}
</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 63%
        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 .17rem
            height @width
            margin-top .05rem
            background #13427a
            &.red
              background #cc4d4d
            &.yellow
              background $color-yellow
            &.green
              background #6eb629

  .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
    .no-data
      $flex-center()
      flex-direction column
      width 100%
      height 100%
      color #999
      img
        width .35rem
        height @width
    .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>
