<template>
  <div class="dm-form__wrap scan-form">
    <el-form ref="form" :model="form" label-width="110px" :rules="rules" v-loading="loading" element-loading-text="拼命加载中">
      <h3 class="title">计划内容设置</h3>
      <el-form-item label="计划名称" prop="ecmPlanName">
        <dm-input class="w400" :maxlength="9" v-model="form.ecmPlanName" :disabled="disabled"></dm-input>
      </el-form-item>
      <el-form-item v-if="form.expireType" label="计划时间" prop="ecmTime">
        <el-date-picker :picker-options="pickerOptions" :disabled="disabled" v-model="form.beginDate" type="datetime" placeholder="开始时间" @change="checkBeginEndTime"> </el-date-picker>
        <span class="ml5 mr5">-</span>
        <el-date-picker :disabled="disabled" default-time="23:59:59" v-model="form.endDate" type="datetime" :picker-options="endDatePickerOptions" placeholder="结束时间" @change="checkBeginEndTime"> </el-date-picker>
      </el-form-item>
      <el-form-item label="数据对话">
        <template slot="label">
          <span>数据对话</span>
          <el-tooltip class="item" effect="dark" content="数据对话为原营销活动。可不选择，选择后会将该营销活动的数据置于选择的数据对话中一起分析" :open-delay="300">
            <i style="cursor:pointer;color:#c0c4cc;font-size:14px;" class="el-icon-question"></i>
          </el-tooltip>
        </template>
        <dm-activity-select :actId.sync="form.marketingActivityId" :readOnly="disabled"></dm-activity-select>
      </el-form-item>
      <h3 class="title mt46">
        营销次数配置
      </h3>
      <el-form-item label="营销次数配置" prop="marketingTimesType">
        <el-select :disabled="disabled" v-model="form.marketingTimesType" class="w150 vertical-middle">
          <el-option v-for="(v, i) in marketingTimesTypeOptions" :key="i" :value="v.value" :label="v.label"></el-option>
        </el-select>
        <span class="vertical-middle" v-if="form.marketingTimesType !== -1"><el-input-number :disabled="disabled" controls-position="right" class="w150" :min="1" v-model="form.marketingTimes"></el-input-number> 次</span>
        <span class="pl20 fz13 gray"> * 该营销计划{{ marketingTimesTips }}</span>
      </el-form-item>
      <h3 class="title mt46">扫码营销设置</h3>
      <el-form-item label="二维码门店">
        <div>
          <vue-gic-store-card v-if="isAdd || isRequested" :creatorId="isAdd ? '' : creatorId" :uuid.sync="effectTriggerJson.store_widget_id"></vue-gic-store-card>
          <span v-if="disabled && info.effectTriggerJson.store_widget_id != effectTriggerJson.store_widget_id" class="gray fz12 ml10"><i class="el-icon-warning mr5 red fz12"></i>扫码营销活动已经开始，门店修改无效</span>
        </div>
        <el-checkbox :disabled="disabled" v-model="effectTriggerJson.first_subscribe" :true-label="1" :false-label="0">仅限制用户首次关注服务号触发</el-checkbox>
      </el-form-item>
      <!-- 适用人群start -->
      <h3 class="title mt46">
        适用人群
      </h3>
      <div>
        <el-radio-group class="pl20 pb20" v-model="form.memberType">
          <el-radio :disabled="disabled" :label="0">会员筛选</el-radio>
          <el-radio :disabled="disabled" :label="1">会员分组</el-radio>
        </el-radio-group>
        <div class="mb20" v-if="form.memberType === 0">
          <!-- 编辑-可编辑 无searchJson -->
          <vue-gic-people v-if="isEdit && !disabled && !hasMemberSearchDTO" v-bind="storeParams" :projectName="projectName" :isAdd="!disabled" :triggerReset="true" :hasSearchData="hasSearchData" :sceneValue="sceneValue" ref="peopleFilter" @findFilter="findFilter" @getBackData="getBackData" @editHide="editHide" @editShow="editShow" @hideBtn="hideBtn" />
          <vue-gic-people v-else v-bind="storeParams" :projectName="projectName" :isAdd="!disabled" :triggerReset="true" :useId="useId" :hasSearchData="hasSearchData" :sceneValue="sceneValue" ref="peopleFilter" @findFilter="findFilter" @getBackData="getBackData" @editHide="editHide" @editShow="editShow" @hideBtn="hideBtn" />
          <div class="gic-people--button" v-show="toggleTag">
            <el-button size="small" :disabled="disabled" type="primary" @click="getData">确 定</el-button>
            <el-button size="small" @click="cancelFilter">取 消</el-button>
          </div>
        </div>
        <div :class="disabled ? 'el-view-mask' : ''">
          <vue-gic-member-group v-if="form.memberType === 1" v-bind="storeParams" :defaltSelected="defaltSelected" :height="500" :projectName="projectName" :headerList="headerList" @handleDataTransferred="handleDataTransferred" @handleDataLeft="handleDataLeft"></vue-gic-member-group>
        </div>
      </div>
      <!-- 适用人群end -->
      <h3 class="title mt46">营销事件</h3>
      <div>
        <!-- 只有实时才是单图文 -->
        <marketing-event style="margin-top:0;" show-out-coupon-icon :readOnly="isInfo" ref="marketingEvent" @has-card="hasCard" v-if="ecmPlanId" :singleFlag="form.effectType === 0" :integralMultiple="form.effectAction === 'consume'" :ecmPlanId="ecmPlanId" :isSupportVar="form.effectType === 0" :code="code" :enabledMessageState="enabledMessageState" :cardLimitType="-1" scence="scan"></marketing-event>
        <!-- 只有存在卡券的情况下出现卡券通知方式 -->
        <section v-if="currentCard.comName">
          <h3 class="title mt46">卡券通知方式配置</h3>
          <el-form-item label="通知方式" class="is-required" prop="cardNoticeType">
            <el-radio v-model="form.cardNoticeType" :label="0"
              >不通知
              <el-tooltip open-delay="200" placement="top-start" content="不会通知用户，但是卡券会放入用户账户">
                <i class="iconfont icon-xinxixianshi pl5 gray"></i>
              </el-tooltip>
            </el-radio>
            <el-radio v-if="disabled && cardNoticeType === 1" v-model="form.cardNoticeType" :label="1"
              >微信{{ form.effectType ? '群发' : '客服' }}接口
              <el-tooltip open-delay="200" placement="top-start" :content="form.effectType ? '建议大规模发券、智能营销定时计划使用，占用每个会员每月4次的营销次数。' : '客服接口需要用户在48小时之内与微信公众号互动才能发送成功，不占用每个用户每月4条的群发次数。'">
                <i class="iconfont icon-xinxixianshi pl5 gray"></i>
              </el-tooltip>
            </el-radio>
            <el-radio v-model="form.cardNoticeType" :label="2" :disabled="$store.getters.getLimitWechatTemplateMessage || form.templateUseEnable === 0"
              >微信模板消息
              <el-tooltip placement="top-start">
                <span slot="content">建议小规模发券、智能营销实时计划使用，滥用可能导致模板消息被封。参考微信<a target="_blank" href="https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1433751288">《模板消息运营规范》</a></span>
                <i class="iconfont icon-xinxixianshi pl5 gray"></i>
              </el-tooltip>
            </el-radio>
          </el-form-item>
          <!-- 模板消息选择 -->
          <el-form-item label="模板消息选择" v-if="(form.cardNoticeType === 1 && form.effectType === 0 && form.templateNoticeFlag === 1) || form.cardNoticeType === 2">
            <el-select style="width:262px;" v-model="triggerCode" v-if="form.templateUseEnable" placeholder="请选择模板消息" @change="changeTemplate">
              <el-option v-for="(v, i) in templateOptions" :key="i" :label="v.templateName" :value="v.triggerCode"></el-option>
            </el-select>
          </el-form-item>
          <!-- 如果时效是实时（0）并且通知方式是微信群发接口（1） 出现补发设置-->
          <el-form-item label="补发设置" prop="templateNoticeFlag" v-if="form.cardNoticeType === 1 && form.effectType === 0">
            <el-checkbox v-model="form.templateNoticeFlag" :true-label="1" :false-label="0"
              >发送失败使用微信模板消息补发该通知
              <el-tooltip placement="top-start" content="若微信客服接口调用失败，则使用微信模板消息进行补发卡券领取通知。">
                <i class="iconfont icon-xinxixianshi pl5 gray"></i>
              </el-tooltip>
            </el-checkbox>
          </el-form-item>
          <!-- 通知非 不通知-->
          <el-form-item label="效果预览" v-if="form.cardNoticeType">
            <div>
              <!-- 通知方式是微信群发接口 -->
              <item-card :item="currentCard.item" class="mr20" v-if="form.cardNoticeType === 1"></item-card>
              <!-- 模板消息预览 -->
              <!-- （如果时效是实时（0）并且通知方式是微信群发接口（1） 并且 勾选了补发设置 出现补发设置） 或者  通知方式是微信群发接口是模板消息  -->
              <div class="ecm-msg__preview" v-if="(form.cardNoticeType === 1 && form.effectType === 0 && form.templateNoticeFlag === 1) || form.cardNoticeType === 2">
                <div class="ecm-msg__preview--inner">
                  <h4 class="pre-templateName">{{ template.templateName }}</h4>
                  <p class="fz13 gray pre-updateTime">{{ template.updateTime | filterDate }}</p>
                  <p class="pre-header" :style="'color:' + template.headerColor + ';'">{{ template.headerText }}</p>
                  <p class="pre-keyName" v-for="(v, i) in template.templateKeyDataList" :key="i">
                    <template v-if="v.keyName">
                      {{ v.keyName }}
                      <span :style="`color:${v.color}`">示例文字</span>
                    </template>
                  </p>
                  <p class="pre-remark" :style="'color:' + template.remarkColor + ';'">{{ template.remarkText }}</p>
                  <div class="pre-foot">
                    <span class="fz13">详情</span>
                    <i class="el-icon-arrow-right"></i>
                  </div>
                </div>
                <div class="text-center">
                  <el-button type="text" :disabled="form.templateUseEnable === 0" @click="editTemplatePre">修改</el-button>
                  <el-button type="text" :disabled="form.templateUseEnable === 0" @click="resetTemplate">重置</el-button>
                </div>
              </div>
            </div>
            <div class="ecm-send__tips">
              <i class="el-icon-info pl5 gray"></i>
              <span class="fz13">若一个智能营销计划中添加多张卡券，{{ form.cardNoticeType === 1 ? '则会推送多条对话框卡券投放' : '只会推送一条模板消息卡券领取' }}通知{{ form.templateNoticeFlag ? '；使用模板消息补发时只会推送一条模板消息卡券领取通知。' : '。' }}</span>
            </div>
          </el-form-item>
        </section>
      </div>
      <div style="margin-top:76px;margin: 76px 0 20px 46px;">
        <el-button @click="$router.go(-1)">返 回</el-button>
        <el-button type="primary" @click="submit('form')" v-if="!isInfo">{{ isAdd ? '确认新建' : '保存' }}</el-button>
      </div>
    </el-form>

    <!-- 变量弹窗 -->
    <var-dialog :options="options" :show.sync="varDialogShow" @get-data="insetVar"></var-dialog>
    <!-- 模板消息修改弹窗 -->
    <el-dialog title="修改模板消息" :visible.sync="editDialogShow" width="600px" :before-close="close">
      <div class="ecm-msg__edit">
        <div class="ecm-msg__edit--inner">
          <el-form>
            <el-form-item label-width="100px" label="头部文案">
              <el-input type="textarea" :style="'color:' + copyTemplate.headerColor" v-model="copyTemplate.headerText" :rows="4" class="w450" :maxlength="200" @input="filterWord('headerText')"></el-input>
              <div class="input-suffix clearfix">
                <el-button type="text" class="ml10 vertical-middle" @click="insetVarPre('headerText')">插入变量</el-button>
                <span class="gray fz13 fr mr10">{{ copyTemplate.headerText.length }}/200</span>
              </div>
            </el-form-item>
            <el-form-item label-width="100px" :label="v.keyName" v-for="(v, i) in copyTemplate.templateKeyDataList" :key="i">
              <div v-if="v.keyName">
                <span class="vertical-middle">显示接收人{{ v.keyName }}</span>
                <el-color-picker class="ml10 vertical-middle" v-model="v.color"></el-color-picker>
              </div>
            </el-form-item>
            <el-form-item label-width="100px" label="尾部文案">
              <el-input type="textarea" :style="'color:' + copyTemplate.remarkColor" v-model="copyTemplate.remarkText" :rows="4" class="w450" :maxlength="200" @input="filterWord('remarkText')"></el-input>
              <div class="input-suffix clearfix">
                <el-color-picker class="ml10 vertical-middle" v-model="copyTemplate.remarkColor"></el-color-picker>
                <el-button type="text" class="vertical-middle" @click="insetVarPre('remarkText')">插入变量</el-button>
                <span class="gray fz13 fr mr10">{{ copyTemplate.remarkText.length }}/200</span>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogShow = false">取 消</el-button>
        <el-button type="primary" @click="editTemplate" v-loading="loading">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 消费商品dialog -->
    <el-dialog title="适用商品" :visible.sync="xxSysp.visible" width="690px">
      <vue-gic-goods-selector ref="selector" :projectName="projectName"></vue-gic-goods-selector>
      <div slot="footer" class="dialog-footer">
        <el-button @click="xxSysp.visible = false">{{ !isAdd ? '关闭' : '取消' }}</el-button>
        <el-button v-if="isAdd" type="primary" @click="xxSyspConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import scanForm from './scan-form.js';
export default scanForm;
</script>

<style lang="scss" scoped>
.scan-form {
  .title {
    font-size: 16px;
    font-weight: 500;
    color: #303133;
    line-height: 22px;
    margin-bottom: 23px;
  }
  .mt46 {
    margin-top: 46px;
  }
}
</style>
<style lang="scss" scoped>
.no_label_form_label {
  margin-left: -100px;
  label {
    display: inline-block;
    width: 120px;
  }
  > div {
    margin-left: 120px;
  }
}
.ecm-msg__edit {
  display: inline-block;
  vertical-align: top;
  max-height: 400px;
  overflow: auto;
  &--inner {
    background: #fff;
    width: 565px;
    // margin: 15px auto;
    // padding: 10px;
    /deep/ .input-suffix {
      width: 448px;
      height: 40px;
      background: #f0f2f5;
      border: 1px solid #e4e7ed;
      border-top: none;
      border-radius: 0 0 4px 4px;
    }
    /deep/ .el-textarea__inner {
      color: inherit;
    }
    /deep/ .el-form-item {
      margin-bottom: 3px;
    }
  }
}
.ecm-msg__preview {
  position: relative;
  width: 320px;
  display: inline-block;
  vertical-align: middle;
  &--inner {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    background: #fff;
    width: 320px;
    min-height: 100px;
    top: 103px;
    left: 37px;
    padding: 20px 10px 10px;

    .pre-templateName {
      font-size: 17px;
      font-weight: 700;
    }
    .pre-updateTime {
      font-size: 14px;
      line-height: 1.5;
    }
    .pre-header {
      font-size: 15px;
      margin: 10px 0;
    }
    .pre-keyName {
      font-size: 14px;
      line-height: 1.5;
    }
    .pre-remark {
      font-size: 15px;
      margin: 20px 0 10px 0;
    }
    .pre-foot {
      border-top: 1px solid #dcdfe6;
      padding-top: 5px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
.ecm-send__tips {
  display: inline-block;
  border: 1px solid #b3d8ff;
  padding: 10px 20px;
  background: #ecf5ff;
  margin: 10px;
  i {
    color: #2f54eb;
  }
}
/deep/ .act-select {
  width: 400px !important;
}
.el-form-item__label.align-left {
  text-align: left;
}
</style>
