<template>
<div>
  <div v-for="(item, index) in pattern" v-bind:key="index">
    <div v-if="item.tag">
      <m-tag :pattern="item" :mty="mty" :seqlist="seqlist" :extra="extra">
        <template v-slot:icon v-if="index == 0">
          <slot name="icon"></slot>
        </template>
      </m-tag>
    </div>
    <div v-if="item.cyclist">
      <cyc-list :pattern="item" :mty="mty" :seqlist="seqlist" :extra="extra"></cyc-list>
    </div>
    <div v-if="item.seqlist">
      <seq-list :pattern="item" :mty="mty" :seqlist="seqlist" :extra="extra"></seq-list>
    </div>
  </div>
</div>
</template>
<script>


export default {
  name: 'message-area',
  props: {
    pattern: {
      type: Array,
      default: () => []
    },
    mty: {
      type: String
    },
    seqlist: {
      type: Array,
      default: () => []
    },
    extra: {
      type: Object,
      default: () => {}
    }
  },
  data: function () {
    return {}
  }
}
</script>