<template>
  <div class="monitor-form">
    <p v-if="title" class="title">{{title}}</p>
    <Row class="row" v-for="(row, rowIndex) in layout" :key="rowIndex">
      <i-col class="col" v-for="(col, key) in row" :key="key" :span="col.width" :offset="col.offset || 0">
        <div :style="`text-align: ${col.align || 'right'}; width:${labelWidth}rem;`">{{col.label}}：</div>
        <!-- <img v-if="col.type == 'img' && model[key]" @click="handleView(model[key])" :src="model[key]"/> -->
        <template v-if="col.type == 'img' && (model[key] || model['done_photo'])">
          <img style="margin-right:1rem;" v-for="img in model[key].split(',')" v-if="img" :key="img" :src="img" @click="handleView(img)"/>
          <img style="margin-right:1rem;" v-if="model['done_photo']" :src="model['done_photo']" @click="handleView(model['done_photo'])"/>
        </template>
        <div v-else class="content">{{col.format?col.format(model[key]):(model[key]||' ')}}</div>
      </i-col>
    </Row>
    <!-- <m-modal v-model="showImg" title="照片">
      <img v-if="showImg" style="width:100%;max-height:23rem;" :src="curSrc"/>
    </m-modal> -->
  </div>
</template>

<script>
export default {
  name: 'MonitorForm',
  props: {
    title: {
      type: String,
      default: '',
    },
    labelWidth: {
      type: Number,
      default: 10,
    },
    layout: {
      type: Array,
      default() {
        return []
      }
    },
    model: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      showImg: false,
      curSrc: null,
    }
  },
  methods: {
    handleView(src) {
      // this.curSrc = src
      // this.showImg = true
      this.$store.commit('SET_IMGVIEW_SRC', src)
      this.$store.commit('SET_IMGVIEW', true)
    }
  }
}
</script>

<style lang="stylus" scoped>
.monitor-form
  font-size 1rem
  color #fff
  margin-bottom 1rem
  .title
    font-size 1.2rem
    font-weight bold
    color $edgeColor
    padding-bottom 0.5rem
    margin-bottom 1rem
    border-bottom 0.1rem solid $color-map()
  .row
    line-height 3rem
    &:nth-child(2n)
      background-color $color-map(0.15)
  .col
    display flex
    align-items center
    padding 0 1rem
    .content
      flex 1
    img
      width 25%
      height 5rem
      margin 0.5rem 0
      cursor pointer
</style>
