<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>
        <span v-html="el"></span>
      </span>
    </p>
    <p style="margin-top:12px;color:#606266">
      <span>群发失败设置：</span>
      <template v-if="item.qfxx.failSetting == 1">
        <span v-if="item.qfxx.telFlag">话务</span>
        <span v-if="item.qfxx.smsFlag && item.qfxx.telFlag"> / </span>
        <span v-if="item.qfxx.smsFlag">短信</span>
      </template>
      <template v-else>
        <span>未开启</span>
      </template>
    </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 || '[]');
      const items = res.filter(el => el.statusFlag == 0);
      return [...new Set(res.map(el => el.type))].map(el => {
        if (items.length > 0 && items.some(item => item.type == el)) {
          return `${mapName[el]} (<span style="color:#F56C6C">已失效</span>)`;
        } else {
          return 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>
