<template>
  <div class="done-component">
    <div>
      <p class="title"><span class="dot"/>风险报警信息</p>
      <m-form :label-width=".6" :model="data" :layout="layout" />
    </div>
    <div v-for="(item, i) in data.details" :key="item.id">
      <p class="title"><span class="dot"/>{{i == 0 ? '物业' : '街道'}}处置</p>
      <m-form :label-width=".6" :model="item" :layout="detailLayout" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'DoneComponent',
  props: {
    data: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      layout: [
        {
          communityName: {
            label: '小区名称',
            width: 24,
          },
          device_name: {
            label: '报警地址',
            width: 24,
          },
          types: {
            label: '报警类型',
            width: 24,
            format: val => this.$com.transType(val)
          },
          create_note: {
            label: '报警内容',
            width: 24,
          },
          create_time: {
            label: '报警时间',
            width: 24,
          },
          state: {
            label: '处置状态',
            width: 24,
            format: val => this.$com.transStatus(val)
          },
        },
      ],
      detailLayout: [
        {
          checkTime: {
            label: '处置时间',
            width: 24,
          },
          backResult: {
            label: '处置结果',
            width: 24,
          },
          imgs: {
            label: '处置图片',
            width: 24,
            type: 'img',
          },
        },
      ],
    }
  },
}
</script>

<style lang="stylus" scoped>
.done-component
  .title
    background rgba(51,145,255,.2)
    color $edgeColor
    padding .05rem 0
    display flex
    align-items center
    font-weight bold
    font-size .11rem
    >.dot
      display inline-block
      width .03rem
      height .12rem
      background $edgeColor
      margin-right .1rem
</style>
