<template>
  <section class="dm-marketing">
    <!-- 操作区 -->
    <div class="dm-marketing__opt--wrap">
      <span class="dm-marketing__opt--label">添加内容</span>
      <i class="el-icon-plus dm-marketing__opt--icon"></i>
      <opt @addItem="addItem" :options="options"></opt>
    </div>
    <!-- item组件区 -->
    <div class="dm-marketing__content--wrap" v-if="list.length">
      <span class="dm-marketing__content--label">回复内容</span>
      <div class="dm-marketing__content">
        <!-- 组件 区域 -->
        <div class="dm-marketing__content__item" v-for="(v,i) in list" :key="i">
          <i class="dm-marketing__content--index">{{i+1}}</i>
          <component :is="v.comName" :item="v.item"></component>
          <i class="el-icon-edit dm-marketing__opt--icon" v-if="v.comName === 'item-teltask' || v.comName === 'item-text' || v.comName === 'item-wxa'" @click="editItem(v)"></i>
          <dm-delete @confirm="delItem(v)">
            <i class="el-icon-delete dm-marketing__opt--icon"></i>
          </dm-delete>
        </div>
      </div>
    </div>
    <i class="el-icon-plus dm-marketing__opt--icon--bottom" v-if="list.length && list.length < maxEventCount" @click="optShow = !optShow"></i>
    <transition name="fade">
      <opt @addItem="addItem" :options="options" v-if="list.length && list.length < maxEventCount && optShow" style="margin:20px 0 0 15px;"></opt>
    </transition>
    <!-- 弹窗组件 -->
    <component :is="dialogCom" @sendItem="saveToList" :item="currentItem" :show.sync="dialogShow"></component>
  </section>
</template>

<script>
import { getMarketingEvent,getMarketingTypeDetails,saveUpdateMarketingType,deleteMarketingType } from './assets/api.js';
// 删除组件
import dmDelete from './components/dm-delete.vue';
// 操作组件
import opt from './components/opt.vue';
// 页面item组件
import itemTeletext from './components/item-teletext.vue';
import itemWxa from './components/item-wxa.vue';
import itemCard from './components/item-card.vue';
import itemText from './components/item-text.vue';
import itemImage from './components/item-image.vue';
import itemMessage from './components/item-Message.vue';
import itemTeltask from './components/item-teltask.vue';
//弹窗组件
import libTeletext from './components/lib-teletext.vue';
import libMessage from './components/lib-Message.vue';
import libCard from './components/lib-card.vue';
import libText from './components/lib-text.vue';
import libWxa from './components/lib-wxa.vue';
import libImage from './components/lib-image.vue';
import libTeltask from './components/lib-teltask.vue';

// 全部的操作项目
const allOptions = [
    {name:'图文',value:'teletext',key:1,img:require('./assets/img/teletext.svg')},
    {name:'文本',value:'text',key:2,img:require('./assets/img/text.svg')},
    {name:'小程序',value:'wxa',key:3,img:require('./assets/img/wxa.svg')},
    {name:'图片',value:'image',key:4,img:require('./assets/img/image.svg')},
    {name:'卡券',value:'card',key:5,img:require('./assets/img/card.svg')},
    {name:'短信',value:'message',key:6,img:require('./assets/img/message.svg')},
    {name:'话务',value:'teltask',key:7,img:require('./assets/img/teltask.svg')}
];
export default {
  name:'dm-marketing',
  components:{
    'opt': opt,
    'dm-delete': dmDelete,
    'item-teletext': itemTeletext,
    'item-wxa': itemWxa,
    'item-card': itemCard,
    'item-text': itemText,
    'item-image': itemImage,
    'item-message': itemMessage,
    'item-teltask': itemTeltask,

    'lib-teletext': libTeletext,
    'lib-message': libMessage,
    'lib-card': libCard,
    'lib-text': libText,
    'lib-wxa': libWxa,
    'lib-image': libImage,
    'lib-teltask': libTeltask
  },
  props:{
    //  页面编码——- 1001-智能引擎; 1002-微信营销; 1003-被关注回复; 1004-关键字回复
    code:{
      type:String,
      default:'1001'
    },
    ecmPlanId:{
      type:String,
      default:''
    }
  },
  data() {
    return{
      list:[],
      dialogShow:false,
      dialogCom:'',
      options:[],
      maxEventCount:0, //item最大数
      currentItem:{},
      optShow: false
    }
  },
  created() {
    this.init();
  },
  methods:{
    // 初始化获取配置项
    init() {
      getMarketingEvent({pageCode:this.code}).then(res => {
        if (res.errorCode === 0) {
          this.maxEventCount = Number(res.result.maxEventCount || 0);
          let list = res.result.list || [];
          let optionNameList = list.map(v => v.eventName);
          allOptions.map(v => {
            if (optionNameList.indexOf(v.name) >= 0) {
              this.options.push(v);
            }
          })
          this.getMarketingList();
        } else {
           this.$message({type:'warning',message:'组件初始化失败'});
        }
        console.log(res);
      })
    },
    // 初始化获取列表
    getMarketingList() {
      console.log(this.ecmPlanId)
      getMarketingTypeDetails({ecmPlanId:this.ecmPlanId}).then(res => {
        if (res.errorCode === 0) {
          this.list = [];
          let result = res.result.typeRelationList || [];
          let brandInfo = res.result.enterprise || {};
          // 七种类型 处理
          result.map(v => {
            switch (v.marketingType) {
              case 'teletext':  // 1 图文
                this.list.push(
                  {comName:'item-teletext',
                  item:{...v.imageText,
                    ecmMarketingTypeRelationId:v.ecmMarketingTypeRelationId,
                    relationId:v.relationId,
                    ecmPlanId:v.ecmPlanId
                  }
                })
              break;
              case 'text':  // 2 文本
                this.list.push(
                  {comName:'item-text',
                  item:{...v.text,
                    ecmMarketingTypeRelationId:v.ecmMarketingTypeRelationId,
                    relationId:v.relationId,
                    ecmPlanId:v.ecmPlanId
                  }
                })
              break;
              case 'wxa': // 3 小程序
                this.list.push(
                  {comName:'item-wxa',
                  item:{...v.wxa,
                    ecmMarketingTypeRelationId:v.ecmMarketingTypeRelationId,
                    relationId:v.relationId,
                    ecmPlanId:v.ecmPlanId,
                    brandLogo:brandInfo.qcloudImageUrl,
                    brandName:brandInfo.brandName
                  }
                })
              break;
              case 'card': // 5 卡券
                this.list.push(
                  {comName:'item-card',
                  item:{...v.card,
                    ecmMarketingTypeRelationId:v.ecmMarketingTypeRelationId,
                    relationId:v.relationId,
                    ecmPlanId:v.ecmPlanId,
                    brandLogo:brandInfo.qcloudImageUrl
                  }
                })
              break;
              case 'image': // 4 图片
                this.list.push(
                  {comName:'item-image',
                  item:{...v.image,
                    ecmMarketingTypeRelationId:v.ecmMarketingTypeRelationId,
                    relationId:v.relationId,
                    ecmPlanId:v.ecmPlanId
                  }
                })
              break;
              case 'message': // 6 短信
                this.list.push(
                  {comName:'item-message',
                  item:{...v.sms,
                    ecmMarketingTypeRelationId:v.ecmMarketingTypeRelationId,
                    relationId:v.relationId,
                    ecmPlanId:v.ecmPlanId
                  }
                })
              break;
              case 'teltask': // 7 话务
                this.list.push(
                  {comName:'item-teltask',
                  item:{...v.teltask,
                    ecmMarketingTypeRelationId:v.ecmMarketingTypeRelationId,
                    relationId:v.relationId,
                    ecmPlanId:v.ecmPlanId
                  }
                })
              break;
            }
          })

          console.log(res);
        }
      });
    },
    // 保存操作
    saveToList(val) {
      console.log(val);
      let params = {
        ecmPlanId:this.ecmPlanId,  //从prop中取
        marketingType:val.comName,
      }

      if (val.ecmMarketingTypeRelationId) { // 营销事件类型主键id, 新增不传, 修改必传
        params.ecmMarketingTypeRelationId = val.ecmMarketingTypeRelationId
      }
      // 七种传值  1.话务
      if (val.comName === 'teltask') {
        params.title = val.title;
        params.teltask = {// ecm话务对象
            title:val.title,
            content:val.content,
            lateDays:val.lateDays
        }
      }
      // 2.文本
      if (val.comName === 'text') {
        params.title = val.content;
        params.text = {// ecm话务对象
            content:val.content
        }
      }
      // 3.小程序
      if (val.comName === 'wxa') {
        params.title = val.title;
        params.wxa = {
          title:val.title,
          mediaId:val.mediaId,
          pagePath:val.pagePath
        }
      }
      //4.图文
      if (val.comName === 'teletext') {
        params.title = val.title;
        params.relationId = val.imageTextWechatId;
      }

      //5.图片
      if (val.comName === 'image') {
        params.title = val.title;
        params.relationId = val.imageMediaId;
      }

      //6.卡券
      if (val.comName === 'card') {
        params.title = val.cardName;
        params.relationId = val.coupCardId;
      }

      //7.短信
      if (val.comName === 'message') {
        params.title = val.title;
        params.relationId = val.smsTemplateId;
      }


      saveUpdateMarketingType({marketingType:JSON.stringify(params)}).then(res => {
        console.log(res);
        this.getMarketingList();
      });
    },
    // 新增前置
    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) {
      console.log(item)
      deleteMarketingType({ecmMarketingTypeRelationId:item.item.ecmMarketingTypeRelationId}).then(res => {
        if (res.errorCode === 0) {
          this.getMarketingList();
        }
      })
    },
    // 编辑前置
    editItem(obj) {
      this.currentItem  = obj.item;
      this.dialogCom = 'lib-' + obj.comName.slice(5);
      this.$nextTick(_ => {
        this.dialogShow = true;
      })
    },
    // 辅助函数 判断是否大于最大数量
    isOverMaxCount() {
      return this.list.length >= this.maxEventCount;
    }
  }

}
</script>
<style lang="scss">
@import url('./assets/style/index.css');

.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
  // transform: translate(-100%);
    transform: translate(0);
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
  display: none;
  // transform: translate(-100%);


}
</style>
