<template>
  <div class="issue-detail">
    <div><m-table :layout="layout" :model="data"/></div>
    <div><m-table :layout="tableLayout" :model="tableData"/></div>
  </div>
</template>

<script>
export default {
  name: 'IssueDetail',
  data() {
    return {
      layout: [
        {
          title: '等级',
          key: 'level',
          width: 4,
        },
        {
          title: '响应名称',
          key: 'name',
          width: 4,
        },
        {
          title: '启动条件',
          key: 'start',
          width: 8,
        },
        {
          title: '处置时限',
          key: 'time',
          width: 8,
        },
      ],
      data: [
        {level: '一级响应', name: '自治共治', start: '直接启动', time: '< 48小时', color: '#D82B2B'},
        {level: '二级响应', name: '站站联动', start: '一级响应部门推送启动', time: '< 7天', color: 'gold'},
        {level: '三级响应', name: '协同会商', start: '二级响应部门推送启动', time: '< 30天', color: '#82DF12'},
      ],
      tableLayout: [
        {
          title: '序号',
          key: 'index',
          width: 1,
        },
        {
          title: '管理类别',
          key: 'type',
          width: 2,
        },
        {
          title: '事项名称',
          key: 'name',
          width: 5,
          tooltip: 'des'
        },
        {
          title: '自治共治',
          key: 'level1',
          width: 4,
        },
        {
          title: '站站联动',
          key: 'level2',
          width: 4,
        },
        {
          title: '协同会商',
          key: 'level3',
          width: 4,
        },
        {
          title: '发现方式',
          key: 'discover',
          width: 4,
        },
      ],
      tableData: [],
    }
  },
  mounted() {
    const {data} = require('../../../static/issue-detail.json')
    this.tableData = data
  },
}
</script>

<style lang="stylus" scoped>
.issue-detail
  width 100%
  height 100%
  display flex
  >div
    flex 1
    &:last-child
      flex 2
      margin-left 1rem
</style>
