<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>
      <div class="inline-block dm-marketing__opt">
        <span class="dm-marketing__opt__item" @click="addItem(1)">
          <img src="./img/imgText.svg" alt="" srcset=""><span> 图文</span>
        </span>
        <span class="dm-marketing__opt__item" @click="addItem(2)">
          <img src="./img/text.svg" alt="" srcset=""><span> 文本</span>
        </span>
        <span class="dm-marketing__opt__item" @click="addItem(3)">
          <img src="./img/app.svg" alt="" srcset=""><span> 小程序</span>
        </span>
        <span class="dm-marketing__opt__item" @click="addItem(4)">
          <img src="./img/img.svg" alt="" srcset=""><span> 图片</span>
        </span>
        <span class="dm-marketing__opt__item" @click="addItem(5)">
          <img src="./img/card.svg" alt="" srcset=""><span> 卡券</span>
        </span>
        <span class="dm-marketing__opt__item" @click="addItem(6)">
          <img src="./img/msg.svg" alt="" srcset=""><span> 短信</span>
        </span>
        <span class="dm-marketing__opt__item" @click="addItem(7)">
          <img src="./img/tel.svg" alt="" srcset=""><span> 话务</span>
        </span>
      </div>
    </div>
    <div class="dm-marketing__content--wrap">
      <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>
          <com-img-text></com-img-text>
        </div> -->
        <!-- 图文 -->
        <div class="dm-marketing__content__item" >
          <i class="dm-marketing__content--index">1</i>
          <com-img-text></com-img-text>
          <i class="el-icon-delete dm-marketing__opt--icon"></i>
        </div>
        <!-- 文本 -->
        <div class="dm-marketing__content__item" >
          <i class="dm-marketing__content--index">2</i>
          <span class="dm-text__wrap ellipsis-l2 inline-block">目前GIC中，营销回复的内容没有统一的组件，各种营销回复为不同的组件，当一个页面中需要添加各种营销回复时，页面的样式过于零散。因此，需要制作回复内容统一的组件。需要使用到的界面有：微信营销-新建、编辑；公众号配置-自动关注回复；公众号配置-关键字回复；</span>
          <i class="el-icon-edit dm-marketing__opt--icon"></i>
          <i class="el-icon-delete dm-marketing__opt--icon"></i>
        </div>
        <!-- 图片 -->
        <div class="dm-marketing__content__item" >
          <i class="dm-marketing__content--index">3</i>
          <div class="dm-img__item__wrap">
            <img src="./img/loaderror.png" alt="">
          </div>
          <i class="el-icon-delete dm-marketing__opt--icon"></i>
        </div>
        <!-- 小程序 -->
        <div class="dm-marketing__content__item" >
          <i class="dm-marketing__content--index">4</i>
          <com-app></com-app>
          <i class="el-icon-edit dm-marketing__opt--icon"></i>
          <i class="el-icon-delete dm-marketing__opt--icon"></i>
        </div>
         <!-- 卡券 -->
        <div class="dm-marketing__content__item" >
          <i class="dm-marketing__content--index">5</i>
          <com-card></com-card>
          <i class="el-icon-delete dm-marketing__opt--icon"></i>
        </div>
         <!-- 短信-->
        <div class="dm-marketing__content__item" >
          <i class="dm-marketing__content--index">6</i>
          <div class="dm-msg__item__wrap">
            <div class="dm-msg__item">
              <p class="dm-msg__item--title">会员日活动</p>
              <p class="dm-msg__item--content">目前GIC中，营销回复的内容没有统一的组件，各种营销回复为不同的组件，当一个页面中需要添加各种营销回复时，页面的样式过于零散。因此，需要制作回复内容统一的组件。需要使用到的界面有：微信营销-新建、编辑；公众号配置-自动关注回复；公众号配置-关键字回复；</p>
            </div>
          </div>
          <i class="el-icon-delete dm-marketing__opt--icon"></i>
        </div>
         <!-- 话务-->
        <div class="dm-marketing__content__item" >
          <i class="dm-marketing__content--index">7</i>
          <div class="dm-tel__item__wrap">
            <div class="dm-tel__item">
              <p class="dm-tel__item--title">会员日活动</p>
              <p class="dm-tel__item--content">目前GIC中，营销回复的内容没有统一的组件，各种营销回复为不同的组件，当一个页面中需要添加各种营销回复时，页面的样式过于零散。因此，需要制作回复内容统一的组件。需要使用到的界面有：微信营销-新建、编辑；公众号配置-自动关注回复；公众号配置-关键字回复；</p>
            </div>
          </div>
          <i class="el-icon-edit dm-marketing__opt--icon"></i>
          <i class="el-icon-delete dm-marketing__opt--icon"></i>
        </div>
      </div>
    </div>
    <i class="el-icon-plus dm-marketing__opt--icon--bottom"></i>
    <el-dialog title="选择" :visible.sync="dialogShow" width="800px" :before-close="close">
      <img-text-lib></img-text-lib>
    <span slot="footer" class="dialog-footer">
      <el-button @click="close">关 闭</el-button>
      <el-button type="primary" @click="close">确 定</el-button>

    </span>
  </el-dialog>
  </section>
</template>

<script>
import comImgText from './components/img-text-item.vue';
import comApp from './components/app-item.vue';
import comCard from './components/card-item.vue';


import ImgTextLib from './components/img-text-lib.vue';


export default {
  name:'dm-marketing',
  components:{
    'com-img-text':comImgText,
    'com-app':comApp,
    'com-card':comCard,


    'img-text-lib':ImgTextLib
  },
  data() {
    return{
      list:Array(6),
      dialogShow:false,
    }
  },
  methods:{
    close() {
      this.dialogShow = false;
    },
    addItem(index) {
      this.dialogShow = true;
    }
  }

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