<template>
  <div class="dm-qywx__item__wrap">
    <div class="fz16">{{ qfxx.qfxxEnterpriseName }}</div>
    <div class="divider"></div>
    <div>{{ item.title }}</div>
    <div style="margin-top:12px;color:#606266;white-space:pre-wrap;word-break:break-word">{{ qfxx.remark }}</div>
    <p style="margin-top:12px;color:#606266">
      <span>群发内容：</span>
      <span v-for="(el, index) in materials" :key="el">
        <template v-if="index !== 0">/</template>
        {{ el }}
      </span>
    </p>
  </div>
</template>

<script>
export default {
  name: 'item-qfxx',
  props: {
    item: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  computed: {
    qfxx() {
      return this.item.qfxx || {};
    },
    materials() {
      let mapName = {
        1: '文本',
        2: '图片',
        3: '网页',
        4: '视频',
        5: '文件',
        6: '小程序'
      };
      let res = JSON.parse(this.item.qfxx.chatContent || '[]');
      return [...new Set(res.map(el => el.type))].map(el => mapName[el]);
    }
  }
};
</script>
<style lang="scss" scoped>
.divider {
  margin-top: 12px;
  margin-bottom: 18px;
  height: 1px;
  background-color: #dcdfe6;
}
/deep/ .el-checkbox {
  margin: 0;
  margin-right: 20px;
}
</style>
