<template>
  <section class="dm-marketing">
    <!-- 操作区 -->
    <div class="dm-marketing__opt--wrap" v-if="list.length === 0">
      <i class="el-icon-plus dm-marketing__opt--icon" @click="optTopShow = !optTopShow"></i>
      <transition name="fade">
        <opt @addItem="addItem" :options="allOptions" v-if="optTopShow"></opt>
      </transition>
    </div>
    <!-- item组件区 -->
    <div class="dm-marketing__content--wrap" v-if="list.length">
      <div class="dm-marketing__content">
        <!-- 组件 区域 -->
        <div class="dm-marketing__content__item" v-for="(v, i) in list" :key="i">
          <component :is="v.comName" :item="v.item"></component>
          <template v-if="!readOnly">
            <i class="el-icon-edit dm-marketing__opt--icon" v-if="v.comName === 'item-integral'" @click="editItem(v, i)"></i>
            <dm-delete @confirm="delItem(v)">
              <i class="el-icon-delete dm-marketing__opt--icon"></i>
            </dm-delete>
          </template>
        </div>
      </div>
    </div>
    <!-- 弹窗组件 -->
    <component :is="dialogCom" @sendItem="saveToList" :item="currentItem" :show.sync="dialogShow" :isSupportVar="isSupportVar" :cardLimitType="cardLimitType" :integralMultiple="integralMultiple"></component>
  </section>
</template>

<script>
// saveUpdateMarketingType,getMarketingEvent,getMarketingTypeDetails
// import { deleteMarketingType } from './assets/api.js';
// 删除组件
import dmDelete from './components/dm-delete.vue';
// 操作组件
import opt from './components/opt.vue';
// 页面item组件
import itemCard from './components/item-card.vue';
import itemIntegral from './components/item-integral.vue';
//弹窗组件
import libCard from './components/lib-card.vue';
import libIntegral from './components/lib-integral.vue';

// 全部的操作项
const allOptions = [
  { name: '卡券', value: 'card', key: 1, img: require('./assets/img/card.svg') },
  { name: '积分', value: 'integral', key: 2, img: require('./assets/img/integral.svg') }
];
export default {
  name: 'vue-gic-marketing-event',
  components: {
    opt: opt,
    'dm-delete': dmDelete,
    'item-card': itemCard,
    'item-integral': itemIntegral,
    'lib-card': libCard,
    'lib-integral': libIntegral
  },
  props: {
    //  页面编码——- 1001-智能引擎; 1002-微信营销; 1003-被关注回复; 1004-关键字回复
    code: {
      type: String,
      default: '1001'
    },
    ecmPlanId: {
      type: String,
      default: ''
    },
    // 是否能发短信的flag
    enabledMessageState: {
      type: Number,
      default: 1
    },
    isSupportVar: {
      type: Boolean,
      default: false
    },
    cardLimitType: {
      type: Number,
      default: 1
    },
    integralMultiple: {
      // 积分 是否需要倍数（场景：消费触发）
      type: Boolean,
      default: false
    },
    singleFlag: {
      // 图文 实时发送这个参数为true，过滤图文仅要单图文
      type: Boolean,
      default: false
    },
    readOnly: {
      // 只读
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [],
      dialogShow: false,
      dialogCom: '',
      options: [],
      allOptions: allOptions,
      maxEventCount: 1, //item最大数
      currentItem: {},
      optShow: false,
      optTopShow: true
    };
  },
  created() {
    // this.init();
  },
  methods: {
    // 保存操作
    saveToList(val) {
      if (val.comName === 'integral' && this.list.length > 0) {
        this.list[0].item.integralCount = val.integralCount;
      } else {
        this.hasReturn();
        this.list.push({ comName: 'item-' + val.comName, item: val });
      }
    },
    // 新增前置 不能超过营销事件限制数量
    addItem(v) {
      if (this.isOverMaxCount()) {
        this.$message({ type: 'warning', message: `最多只能添加${this.maxEventCount}个签到福利` });
        return;
      }
      this.dialogCom = 'lib-' + v.value;
      // 新增的时候设置为空对象
      this.currentItem = {};
      this.dialogShow = true;
    },
    // 删除操作
    delItem(item) {
      const index = this.list.findIndex(v => v.item.coupCardId === item.item.coupCardId);
      this.list.splice(index, 1);
      this.hasReturn();
    },
    //  判断是否大于最大数量
    isOverMaxCount() {
      return this.list.length >= this.maxEventCount;
    },
    //判断营销列表里是否包含积分--订单倍数 提供给父级使用
    hasIntegralMultiple() {
      return this.list.some(v => v.comName === 'item-integral' && v.item.integralType === 2);
    },
    // 积分编辑前置
    editItem(obj) {
      this.currentItem = obj.item;
      this.dialogCom = 'lib-' + obj.item.comName;
      this.$nextTick(_ => {
        this.dialogShow = true;
      });
    },
    //判断营销列表里是否有卡券 提供给父级使用
    hasReturn() {
      let item = {};
      try {
        this.list.forEach(v => {
          if (v.comName === 'item-card') {
            item = v;
            throw new Error();
          }
        });
      } catch (e) {
        console.log(e);
      }
      this.$emit('has-card', item);
    }
  }
};
</script>
<style lang="scss">
@import url('./assets/style/index.css');

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
  transform: translate(0);
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
  display: none;
}
.dm-marketing {
  .dm-marketing__opt {
    padding-right: 0 !important;
  }
}
</style>
