<template>
  <div class="issue-detail">
    <div>
      <div>
        <h2>联勤联动处置要求</h2>
        <Row class="row require row-title">
          <i-col v-for="(col, i) in layout" :span="col.width" :key="i" class="col">{{col.title}}</i-col>
        </Row>
        <Row class="row require" v-for="(row, i) in data" :key="i">
          <i-col v-for="(col, i) in layout" :key="'col'+i" :span="col.width" class="col">{{row[col.key]}}</i-col>
        </Row>
      </div>
      <div class="color-bar require"><span/><span/><span/></div>
      <div>
        <h2>管理分类评分模型</h2>
        <Row class="row row-title">
          <i-col v-for="(col, i) in modeLayout" :span="col.width" :key="i" class="col">{{col.title}}</i-col>
        </Row>
        <Row class="row" v-for="(row, i) in modeData" :key="i">
          <i-col v-for="(col, i) in modeLayout" :key="'col'+i" :span="col.width" class="col">{{row[col.key]}}</i-col>
        </Row>
      </div>
      <!-- <div class="color-bar"><span/><span/><span/></div>
      <p>
        评分标准：<br/>
        每项分类的初始总分为100分，每发生一件且上未解决的事件，按其对应的分类扣减分值，得出最终该类别总分。
      </p> -->
      <div class="face-wrapper">
        <div><img src="@/assets/images/face1.png"/><p>90分以上(含)</p></div>
        <div><img src="@/assets/images/face2.png"/><p>80(含)~90分</p></div>
        <div><img src="@/assets/images/face3.png"/><p>80分以下</p></div>
      </div>
    </div>
    <div>
      <h2>小区综合治理管理要素清单表</h2>
      <Row class="row row-title" :gutter="8">
        <i-col v-for="(col, i) in tableLayout" :span="col.width" :key="i" class="col" :style="col.align ? `text-align: ${col.align}` : null">{{col.title}}</i-col>
      </Row>
      <div class="scroll-content">
        <Row class="row" v-for="(row, i) in tableData" :key="i" :gutter="8">
          <i-col v-for="(col, i) in tableLayout" :key="'col'+i" :span="col.width" class="col" :style="col.align ? `text-align: ${col.align}` : null">
            {{row[col.key]}}
            <Tooltip v-if="col.tooltip" max-width="10rem" :content="row[col.tooltip]" transfer>
              <Icon style="font-size:1.2rem;cursor:pointer;margin-left:0.2rem;" type="md-alert" color="gold"/>
            </Tooltip>
          </i-col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IssueDetail',
  data() {
    return {
      layout: [
        {
          title: '联动模式',
          key: 'type',
          width: 6,
        },
        {
          title: '启动条件',
          key: 'condition',
          width: 12,
        },
        {
          title: '处置时限',
          key: 'time',
          width: 6,
        },
      ],
      data: [
        {type: '自治共治', condition: '居民区直接启动', time: '< 48小时'},
        {type: '站站联动', condition: '居民区推送街镇', time: '< 7天'},
        {type: '协同会商', condition: '街镇推送条线部门', time: '< 30天'},
      ],
      modeLayout: [
        {
          title: '管理类别',
          key: 'type',
          width: 6,
        },
        {
          title: '分值占比',
          key: 'rate',
          width: 6,
        },
        {
          title: '事件项数',
          key: 'num',
          width: 6,
        },
        {
          title: '每项分值',
          key: 'count',
          width: 6,
        },
      ],
      modeData: [
        {type: '安全管理', rate: '50%', num: '7项', count: '7.2分'},
        {type: '有序管理', rate: '30%', num: '13项', count: '2.3分'},
        {type: '干净管理', rate: '20%', num: '4项', count: '5分'},
        {type: '合计', rate: '100%', num: '24项', count: '-'},
      ],
      tableLayout: [
        {
          title: '序号',
          key: 'index',
          width: 2,
        },
        {
          title: '管理类别',
          key: 'type',
          width: 3,
        },
        {
          title: '事项名称',
          key: 'name',
          width: 5,
          tooltip: 'des'
        },
        {
          title: '自治共治',
          key: 'level1',
          width: 4,
          align: 'left',
        },
        {
          title: '站站联动',
          key: 'level2',
          width: 3,
          align: 'left',
        },
        {
          title: '协同会商',
          key: 'level3',
          width: 4,
          align: 'left',
        },
        {
          title: '发现方式',
          key: 'discover',
          width: 3,
          align: 'left',
        },
      ],
      tableData: [],
    }
  },
  mounted() {
    const {data} = require('../../../static/issue-detail.json')
    this.tableData = data
  },
}
</script>

<style lang="stylus" scoped>
$border = 0.1rem solid $color-blue
$yellow = #fee902
$blue = #01a7ff
$green = #8fd618
$orange = #fd983f
$qing = #1ea7c7
$lv = #32e4af

.issue-detail
  width 100%
  height 75vh
  display flex
  color #fff
  text-align center
  font-size 1.2rem
  overflow hidden
  h2
    margin 1rem 0
  .row
    line-height 3rem
    &.row-title
      text-align center
      font-size 1.4rem
      background #7175a0 !important
      font-weight bold
      color #fff !important
  >div
    flex 2
    height 100%
    &:first-child
      flex 1
      margin-right 1rem
      p
        text-align left
        font-size 1rem
        margin-top 0.5rem
      .color-bar
        display flex
        justify-content flex-end
        &.require
          >span
            background $qing
            &:first-child
              background $orange
            &:last-child
              background $lv
        >span
          display block
          width 2rem
          height 1.2rem
          background $blue
          margin 1rem 0 0 1rem
          &:first-child
            background $yellow
          &:last-child
            background $green
      .row
        border $border
        border-bottom none
        &.require
          &:nth-child(3)
            color $orange
          &:nth-child(4)
            color $qing
          &:nth-child(5)
            color $lv
        &:nth-child(3)
          color $yellow
        &:nth-child(4)
          color $blue
        &:nth-child(5)
          color $green
        &:last-child
          border-bottom $border
        .col
          border-right $border
          &:last-child
            border none
      .face-wrapper
        display flex
        margin-top 1.5rem
        >div
          width 33.3%
          p
            text-align center
          img
            width 3.5rem
    &:last-child
      .scroll-content
        height 85%
        overflow-y auto
        overflow-x hidden
      .row
        border-bottom $border
        background rgba(113,117,160,0.3)
        &:nth-child(2n + 1)
          background rgba(0,0,0,0.1)
</style>
