<template>
  <div>
    <el-form class="content" ref="form" :model="form" label-width="110px" :rules="rules" v-loading="loading" element-loading-text="拼命加载中">
      <!-- 计划内容设置 -->
      <section class="dm-form__wrap">
        <div class="page-tip">营销对象为所有客户，包括非会员和会员(微信会员、POS会员)</div>
        <h3 class="dm-title__label border-bottom">计划内容设置</h3>
        <el-form-item label="计划名称" prop="ecmPlanName">
          <dm-input class="w400" :maxlength="30" v-model="form.ecmPlanName" :disabled="!isAdd"></dm-input>
        </el-form-item>
        <el-form-item label="时效" class="is-required">
          <el-radio v-model="form.effectType" :label="0" :disabled="!isAdd" @change="onChangeEffectType">触点</el-radio>
          <el-radio v-model="form.effectType" :label="1" :disabled="!isAdd" @change="onChangeEffectType">重复</el-radio>
          <el-radio v-model="form.effectType" :label="2" :disabled="!isAdd" @change="onChangeEffectType">单次</el-radio>
          <!-- <el-select style="width:262px;" :disabled="!isAdd" v-model="form.effectTime" v-if="form.effectType == 1" placeholder="请选择时间">
            <el-option v-for="(v, i) in dayOptions" :key="i" :label="v.label" :value="v.value"></el-option>
          </el-select> -->
          <!-- <div class="layout--tips mt10" v-if="form.effectType == 1 || form.effectType == 2"> -->
          <!-- <i class="el-icon-info inline-block"></i> -->
          <!-- <div class="layout--tips__content">
              <p><span class="dm-status--primary pl10"></span>{{ form.effectType == 1 ? '重复发送' : '单次发送' }}<b class="bold">图文、文本、图片</b>将使用微信群发接口，占用每个用户每月4条的群发次数</p>
              <p><span class="dm-status--primary pl10"></span>{{ form.effectType == 1 ? '重复发送' : '单次发送' }}<b class="bold">小程序</b>使用客服接口，但客服接口需要用户在48小时之内与微信公众号互动才能发送成功，可能导致成功率过低，不占用每个用户每月4条的群发次数。</p>
              <p><span class="dm-status--primary pl10"></span>{{ form.effectType == 1 ? '重复发送' : '单次发送' }}<b class="bold">短信、话务</b>均不占用群发次数，卡券详见卡券通知方式配置不同投放方式说明。</p>
            </div>
          </div>
          <div class="layout--tips" v-else>
            <span class="dm-status--primary pl10"></span>
            实时发送调用微信客服接口，不占用每个用户每月4条的群发次数
          </div> -->
        </el-form-item>
        <el-form-item label="触发行为" class="width50" v-if="form.effectType == 0">
          <el-select class="w400" :disabled="!isAdd" v-model="form.effectAction" placeholder="选择发送状态" @change="effectActionChange">
            <el-option v-for="(v, i) in effectActionOptions" :key="i" :label="v.label" :value="v.value"></el-option>
          </el-select>
        </el-form-item>
        <!-- 重复执行 -->
        <template v-if="form.effectType == 1">
          <el-form-item label="执行频率" prop="execDate" class="is-required">
            <div class="flex">
              <el-select :disabled="!isAdd" style="width:220px;" class="mr20" v-model="form.execDateType" placeholder="请选择" @change="form.execDate = []">
                <el-option v-for="(v, i) in execDateType" :key="i" :label="`${v.label}执行`" :value="v.value"></el-option>
              </el-select>
              <el-select v-if="form.execDateType !== 1" style="width:220px;" :disabled="!isAdd" class="w180" multiple v-model="form.execDate" clearable placeholder="可多选">
                <el-option v-for="(v, i) in execDateList" :key="i" :label="v.label" :value="v.value"></el-option>
              </el-select>
            </div>
          </el-form-item>
          <el-form-item label="执行时间" class="mt10 is-required">
            <el-time-select v-model="form.effectTime" :disabled="!isAdd" :picker-options="{ start: hasRealTime ? '09:00' : '00:00', step: '01:00', end: '23:00' }" placeholder="请设置"></el-time-select>
          </el-form-item>
        </template>
        <!-- 单次执行 -->
        <template v-if="form.effectType === 2">
          <el-form-item label="执行时间">
            <el-radio-group :disabled="!isAdd" v-model="form.execType">
              <el-radio :label="1">立即执行</el-radio>
              <el-radio :label="0">
                <el-tooltip content="最多只能选择当前时间的30分钟之后" placement="top" open-delay="300">
                  <span class="tooltip-icon">定时执行</span>
                </el-tooltip>
              </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="form.execType === 0">
            <el-date-picker :key="hasRealTime ? 1 : 2" :disabled="!isAdd" class="inputTime" value-format="yyyy-MM-dd HH:mm:ss" @change="changeExecTime" v-model="form.execTime" :picker-options="Object.assign({}, pickerOptions, hasRealTime ? { selectableRange: '09:00:00-23:00:00' } : {})" type="datetime" placeholder="请选择" />
          </el-form-item>
        </template>
        <el-form-item label="常用场景" v-if="form.effectType == 1">
          <div class="fz12 gray">选填，勾选后生效</div>
          <el-checkbox-group v-model="checked" :max="1">
            <div class="pb10" style="display:flex;">
              <el-checkbox :disabled="!isAdd" class="w150" label="brithday_day">会员生日前 </el-checkbox>
              <el-select class="w100" :disabled="!isAdd" v-model="form.brithday_type" placeholder="请选择生日类型" @change="effectActionChange">
                <el-option label="阳历生日" :value="1"></el-option>
                <el-option label="阴历生日" :value="2"></el-option>
              </el-select>
              <el-input-number controls-position="right" :min="checked[0] === 'brithday_day' ? 1 : 0" style="width:244px;" :disabled="checked[0] !== 'brithday_day' || isEdit" v-model="form.brithday_day"></el-input-number> 天
            </div>
            <div class="pb10">
              <el-checkbox :disabled="!isAdd" class="w150" label="attention_day">关注时长超过 </el-checkbox>
              <el-input-number controls-position="right" :min="checked[0] === 'attention_day' ? 1 : 0" :max="100000" style="width:344px;" :disabled="checked[0] !== 'attention_day' || isEdit" v-model="form.attention_day"></el-input-number> 天
            </div>
            <div class="pb10">
              <el-checkbox :disabled="!isAdd" class="w150" label="lastCost_day">最近消费间隔 </el-checkbox>
              <el-input-number controls-position="right" :min="checked[0] === 'lastCost_day' ? 1 : 0" style="width:344px;" :disabled="checked[0] !== 'lastCost_day' || isEdit" v-model="form.lastCost_day"></el-input-number> 天
            </div>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="营销场景" v-if="!isAdd && form.sceneSettingName">
          <el-input class="w400" disabled v-model="form.sceneSettingName"></el-input>
        </el-form-item>
        <el-form-item label="数据对话">
          <template slot="label">
            <span>数据对话</span>
            <el-tooltip class="item" effect="dark" content="数据对话为原营销活动。可不选择，选择后会将该营销活动的数据置于选择的数据对话中一起分析" :open-delay="200">
              <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="!isAdd"></dm-activity-select>
        </el-form-item>
      </section>
      <!-- 消费触发配置 -->
      <section class="dm-form__wrap" v-if="form.effectType == 0 && form.effectAction === 'consume'">
        <h3 class="dm-title__label border-bottom">
          消费触发配置
        </h3>
        <p class="fz14 gray ml10">同时满足以下条件即可触发</p>
        <div class="ecm-content">
          <el-radio :label="1" :disabled="!isAdd" v-model="form.consum_type" @change="handleConsumTypeChange"
            >按照单笔订单实付金额触发
            <span class="gray fz13 ml58"> 仅适用于线下单笔消费；仅限对当天线下的单笔购买消费订单进行触发；重导订单、非购买订单均不触发</span>
          </el-radio>
          <el-radio :label="2" :disabled="!isAdd" style="margin-left:0" v-model="form.consum_type" @change="handleConsumTypeChange"
            >按照当天累计订单实付金额触发
            <span class="gray fz13 ml58">仅适用于线下当天累计消费，请保证订单实时同步；重导订单、非购买订单均不触发</span>
          </el-radio>
        </div>

        <el-form-item v-if="allList.length">
          <div class="no_label_form_label">
            <el-checkbox class="el-form-item__label align-left" :disabled="!isAdd" v-model="consumeChecked.payment">支付方式</el-checkbox>
            <div>
              <span class="fz14 gray" v-if="!consumeChecked.payment">任意支付方式</span>
              <div class="sysp__content clearfix" v-else>
                <el-radio-group v-model="paymentFlag" @change="radioChange" :disabled="!isAdd" style="width:100%;">
                  <el-radio :label="1">包含</el-radio>
                  <el-radio :label="2">剔除</el-radio>
                </el-radio-group>
                <div v-if="paymentList.length" style="width:100%">
                  <p class="gray">商户支付方式</p>
                  <el-checkbox-group v-model="checkList" @change="wen">
                    <el-checkbox v-for="item in paymentList" :disabled="!isAdd" :label="item.payCode" :key="item.payCode">{{ item.payName || '--' }}</el-checkbox>
                  </el-checkbox-group>
                </div>
                <div v-if="gicList.length" style="width:100%">
                  <p class="gray">GIC支付方式</p>
                  <el-checkbox-group v-model="checkList">
                    <el-checkbox v-for="item in gicList" :disabled="!isAdd" :label="item.payCode" :key="item.payCode">{{ item.payName || '--' }}</el-checkbox>
                  </el-checkbox-group>
                </div>
                <div class="fz12 gray">{{ `勾选具体支付方式后，只要订单${paymentFlag == 1 ? '' : '不'}包含所勾选任意一项即满足` }}</div>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="no_label_form_label">
            <el-checkbox class="el-form-item__label align-left" :disabled="!isAdd" v-model="consumeChecked.store" @change="initStoreCardLeft"
              >消费门店<el-tooltip class="item" effect="dark" :open-delay="200"
                ><template slot="content">固定门店：系统基于所选定的门店来判断是否触发<br />按门店条件：系统基于所选的门店条件下所包含的门店来实时判断是否触发；所选门店条件下门店发生变更，立即生效。</template><i style="margin-left:4px;cursor:pointer;color:#c0c4cc;font-size:14px;" class="el-icon-question"></i> </el-tooltip
            ></el-checkbox>
            <div>
              <span class="fz14 gray" v-show="!consumeChecked.store && form.consum_type == 1">所有消费门店</span>
              <span class="fz14 gray" v-show="!consumeChecked.store && form.consum_type !== 1">勾选后，客户当天在所选门店内的订单才会进行统计</span>
              <template v-if="consumeChecked.store">
                <el-radio-group :disabled="!isAdd" v-show="consumeChecked.store" v-model="form.consumerStoreType">
                  <el-radio :label="0">固定门店</el-radio>
                  <el-radio :label="1">按门店条件</el-radio>
                </el-radio-group>
                <vue-gic-store-card style="margin:20px 0 0 35px" v-if="form.consumerStoreType === 0" v-bind="storeParams" :readonly="!isAdd" ref="storeCard" :uuid.sync="form.order_store"></vue-gic-store-card>
                <dm-store-selector style="margin:20px 0 0 35px" v-if="form.consumerStoreType === 1" ref="newStoreCard" :readonly="!isAdd" :uuid.sync="form.order_store_new"></dm-store-selector>
              </template>
            </div>
          </div>
        </el-form-item>
        <el-form-item v-if="xxSysp.goodsEnable">
          <div class="no_label_form_label">
            <el-checkbox class="el-form-item__label align-left" :disabled="!isAdd" v-model="consumeChecked.good">消费商品</el-checkbox>
            <div>
              <span class="fz14 gray" v-show="!consumeChecked.good && form.consum_type == 1">所有消费商品</span>
              <div class="fz14 gray" v-show="!consumeChecked.good && form.consum_type !== 1">勾选后，满足条件的订单中在所选商品范围内的商品金额才会进行统计</div>
              <div class="sysp__content clearfix" v-show="consumeChecked.good">
                <div class="fl" v-if="xxSysp.filterAbbrInfo.length && !Array.isArray(xxSysp.filterAbbrInfo[0])">
                  <template v-for="(item, idx) in xxSysp.filterAbbrInfo">
                    {{ item.optName }}
                    <span :key="idx" class="item">{{ item.text }}</span>
                  </template>
                </div>
                <div class="fl" v-if="xxSysp.filterAbbrInfo.length && Array.isArray(xxSysp.filterAbbrInfo[0])">
                  <div v-for="(item, idx) in xxSysp.filterAbbrInfo" :key="idx">
                    <div class="complex-and" v-if="idx > 0 && (idx < xxSysp.max || xxSysp.isExpand)">【{{ getXxSysFilterText(idx - 1) }}】</div>
                    <template v-for="(el, i) in item">
                      <span :key="i" v-show="idx < xxSysp.max || xxSysp.isExpand">
                        {{ el.optName }}
                        <span class="item">{{ el.text }}</span>
                      </span>
                    </template>
                  </div>
                  <el-button v-if="xxSysp.filterAbbrInfo.length > xxSysp.max" type="text" @click="xxSysp.isExpand = !xxSysp.isExpand">{{ xxSysp.isExpand ? '收起' : '展开' }}<i class="el-icon-arrow-down" :class="{ 'is-expand': xxSysp.isExpand }"></i></el-button>
                </div>
                <el-button type="primary" @click="handleXxSyspClick" class="fl mt5" size="mini">{{ !isAdd ? '查看' : '编辑' }}</el-button>
                <el-button v-show="xxSysp.filterAbbrInfo.length && isAdd" @click="handleXxSyspReset" class="fl mt5" size="mini">清空</el-button>
              </div>
              <div v-show="consumeChecked.good">
                <span style="margin-left: 38px;">是否剔除“赠品”类型商品</span>
                <el-tooltip class="item" effect="dark" :open-delay="200">
                  <template slot="content">当满足消费商品条件的商品为“赠品”类型时，是否进行剔除</template>
                  <i style="margin-left:4px;cursor:pointer;color:#c0c4cc;font-size:14px;" class="el-icon-question"></i>
                </el-tooltip>
                <el-radio-group :disabled="!isAdd" v-model="form.gift_flag" style="margin-left:20px;">
                  <el-radio :label="1" style="width: auto;">不剔除</el-radio>
                  <el-radio :label="0" style="width: auto;">剔除</el-radio>
                </el-radio-group>
              </div>
              <div v-show="consumeChecked.good && form.consum_type == 1" class="fz12" style="color:#f5222d;margin-left: 38px;">勾选消费商品后，消费金额、消费件数仅指适用消费商品的金额和件数。</div>
              <div v-show="consumeChecked.good && form.consum_type == 2" class="fz12" style="color:#f5222d;margin-left: 38px;">勾选消费商品后，消费金额仅指适用消费商品的金额。</div>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="no_label_form_label">
            <el-checkbox class="el-form-item__label align-left" v-model="discount_limit.flag" :disabled="!isAdd">适用商品折扣</el-checkbox>
            <div>
              <div v-if="discount_limit.flag" class="inline-block">
                <el-select :disabled="!isAdd" v-model="discount_limit.type" class="w150" @change="onChangeDiscountLimit">
                  <el-option label="大于等于" :value="1"></el-option>
                  <el-option label="大于" :value="2"></el-option>
                  <el-option label="等于" :value="3"></el-option>
                  <el-option label="小于" :value="4"></el-option>
                  <el-option label="小于等于" :value="5"></el-option>
                  <el-option label="区间" :value="6"></el-option>
                </el-select>
                <el-input-number style="vertical-align: middle" controls-position="right" :disabled="!isAdd" v-model="discount_limit.count" :precision="2" :min="0" :max="discount_limit.count2 || 10" class="w150"></el-input-number>&nbsp;&nbsp;<template v-if="discount_limit.type == 6">至&nbsp;&nbsp;<el-input-number style="vertical-align: middle" controls-position="right" :disabled="!isAdd" v-model="discount_limit.count2" :precision="2" :min="discount_limit.count || 0" :max="10" class="w150"></el-input-number>&nbsp;&nbsp;</template>折<el-popover v-if="discount_limit.type == 6" placement="right" title="" width="200" trigger="hover" content="包含边界值"><i class="el-icon-info ml5 gray" slot="reference"></i></el-popover>
                <div class="fz12 gray">* 商品折扣 = 商品实付 / 吊牌价</div>
              </div>
              <span class="fz14 gray" v-else>不限制消费商品折扣</span>
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="no_label_form_label">
            <el-checkbox class="el-form-item__label align-left" :disabled="!isAdd" v-model="consumeChecked.count">消费件数</el-checkbox>
            <div>
              <span class="fz14 gray" v-show="!consumeChecked.count">任意消费件数</span>
              <div v-show="consumeChecked.count">
                <el-input-number :disabled="!isAdd" controls-position="right" min="" :max="1000000" style="width:150px;" v-model="form.lowest_cost_count" @change="handleLowestCostCount()"></el-input-number>
                <span class="ml5 mr5">至</span>
                <el-input-number :disabled="!isAdd" controls-position="right" min="" :max="1000000" style="width:150px;" v-model="form.max_cost_count" @change="handleLowestCostCount()"></el-input-number>
                <span class="pl5">件</span>
                <el-popover placement="right" title="" width="200" trigger="hover" content="最大值最小值可选填其一或两个都填写，包含边界值，不包含赠品"><i class="el-icon-info ml5 gray" slot="reference"></i></el-popover>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item v-if="form.consum_type == 1">
          <div class="no_label_form_label">
            <el-checkbox class="el-form-item__label align-left" :disabled="!isAdd" v-model="consumeChecked.cost">消费金额</el-checkbox>
            <div>
              <span class="fz14 gray" v-show="!consumeChecked.cost">任意消费金额</span>
              <div v-show="consumeChecked.cost">
                <el-input-number :disabled="!isAdd" controls-position="right" min="" :max="1000000" style="width:150px;" v-model="form.lowest_cost" @change="handleLowestCost()"></el-input-number>
                <span class="ml5 mr5">至</span>
                <el-input-number :disabled="!isAdd" controls-position="right" min="" :max="1000000" style="width:150px;" v-model="form.max_cost" @change="handleLowestCost()"></el-input-number>
                <span class="pl5">元</span>
                <el-popover placement="right" title="" width="200" trigger="hover" content="最大值最小值可选填其一或两个都填写，包含边界值"><i class="el-icon-info ml5 gray" slot="reference"></i></el-popover>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="消费金额" v-if="form.consum_type == 2" :required="true">
          <div class="ml58">
            <el-input-number :disabled="!isAdd" controls-position="right" min="" :max="1000000" style="width:150px;" v-model="form.lowest_cost" @change="handleLowestCost()"></el-input-number>
            <span class="pl5">元</span>
            <span class="fz14 gray ml58">订单传至GIC系统后，计算该客户当天的累计实付金额高于此门槛才会触发；</span>
          </div>
        </el-form-item>
      </section>
      <!-- 会员卡升/降级触发设置 -->
      <section class="dm-form__wrap" v-if="form.effectType == 0 && (form.effectAction === 'degrade' || form.effectAction === 'upgrade')">
        <h3 class="dm-title__label border-bottom">会员卡{{ form.effectAction === 'degrade' ? '降' : '升' }}级触发设置</h3>
        <el-form-item prop="gradeIds" :label="`会员卡${form.effectAction === 'degrade' ? '降' : '升'}级至`">
          <el-select :disabled="!isAdd" v-model="form.gradeIds" multiple placeholder="请选择" class="w300">
            <el-option v-for="v in gradeList" :key="v.gradeId" :label="v.gradeName" :value="v.gradeId" :disabled="v.disabled"></el-option>
          </el-select>
        </el-form-item>
      </section>
      <!-- 储值触发配置 -->
      <section class="dm-form__wrap" v-if="form.effectType == 0 && form.effectAction === 'stored'">
        <h3 class="dm-title__label border-bottom">
          储值触发配置
          <i class="dm-title__label--icon iconfont icon-xinxixianshi"></i>
          <span class="gray fz13">仅适用于线下单笔充值场景；消费、退款等不会触发</span>
        </h3>
        <p class="fz14 gray mb20 ml10">同时满足以下条件即可触发</p>
        <el-form-item>
          <div class="no_label_form_label">
            <el-checkbox class="el-form-item__label align-left" :disabled="!isAdd" v-model="storedChecked">储值金额</el-checkbox>
            <div>
              <span class="fz14 gray" v-show="!storedChecked">任意储值金额</span>
              <div v-show="storedChecked">
                <el-input-number :disabled="!isAdd" controls-position="right" min="" :max="1000000" style="width:150px;" v-model="form.storedLowest"></el-input-number>
                <span class="ml5 mr5">至</span>
                <el-input-number :disabled="!isAdd" controls-position="right" min="" :max="1000000" style="width:150px;" v-model="form.storedMax"></el-input-number>
                <span class="pl5">元</span>
                <el-popover placement="right" title="" width="200" trigger="hover" content="最大值最小值可选填其一或两个都填写，包含边界值"><i class="el-icon-info ml5 gray" slot="reference"></i></el-popover>
              </div>
            </div>
          </div>
        </el-form-item>
      </section>
      <!-- 营销次数配置  重复 -->
      <section class="dm-form__wrap" v-if="form.effectType == 1">
        <h3 class="dm-title__label border-bottom">
          营销次数配置
          <i class="dm-title__label--icon iconfont icon-xinxixianshi"></i>
          <span class="gray fz13">设置本营销计划对同个会员的触发次数</span>
        </h3>
        <div style="padding:20px 0;">
          <label class="mr5">限制对每个用户营销一次</label>
          <el-switch :disabled="!isAdd" v-model="form.marketingOnceFlag" :active-value="1" :inactive-value="0"></el-switch>
          <span class="gray ml10 fz13">{{ form.marketingOnceFlag ? '该营销计划对每个用户执行一次' : '该营销计划对每个用户不限制执行次数' }}</span>
        </div>
      </section>
      <!-- 营销次数配置  实时触点 -->
      <section class="dm-form__wrap" v-if="form.effectType == 0 && ['consume', 'upgrade', 'degrade', 'stored'].includes(form.effectAction)">
        <h3 class="dm-title__label border-bottom">
          营销次数配置
          <i class="dm-title__label--icon iconfont icon-xinxixianshi"></i>
          <span class="gray fz13">设置本营销计划对同个会员的触发次数</span>
        </h3>
        <el-form-item label="营销次数配置" prop="marketingTimesType" v-if="form.consum_type == 1">
          <el-select :disabled="!isAdd" 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="!isAdd" 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>
        <!-- <div v-else>
          <div class="ecm-title">消费触发配置</div>
          <div class="ecm-content">
            <el-radio :label="1">每天触发一次</el-radio>
            <el-radio :label="-1">每天叠加触发</el-radio>
          </div>
        </div> -->

        <el-form-item label="营销次数配置" prop="marketingTimesType" v-else>
          <div class="ecm-content" style="margin:8px 0 0 0;">
            <el-radio :disabled="!isAdd" :label="1" v-model="form.marketingTimesType">每天触发一次 <span class="gray fz13 ml58">客户当天累计消费金额满足所配置的消费金额就会触发，只触发一次</span></el-radio>
            <el-radio :disabled="!isAdd" style="margin-left:0" :label="-1" v-model="form.marketingTimesType">每天叠加触发 <span class="gray fz13 ml58">客户当天累计消费金额每满足所配置的消费金额就会触发，不限制次数。（例如消费金额为2000触发，则客户当天累计消费金额达2000会触发一次，达到4000还会触发一次）</span></el-radio>
          </div>
        </el-form-item>
      </section>

      <!-- 有效时间 -->
      <section class="dm-form__wrap" v-if="form.effectType == 0 || form.effectType == 1">
        <h3 class="dm-title__label border-bottom" v-if="form.consum_type == 2">
          有效时间
          <i class="dm-title__label--icon iconfont icon-xinxixianshi"></i>
          <span class="gray fz13">活动持续时间最长为31天</span>
        </h3>
        <h3 class="dm-title__label border-bottom" v-else>
          有效时间
        </h3>
        <el-form-item label="有效时间" prop="endDate" :show-message="showMessage" v-if="form.consum_type == 1">
          <el-radio :disabled="isEdit && onlineStatus != 0 && form.expireType == 1" v-model="form.expireType" :label="0">长期有效</el-radio>
          <el-radio :disabled="isEdit && onlineStatus != 0 && form.expireType == 0" v-model="form.expireType" :label="1">固定期限</el-radio>
          <template v-if="form.effectType == 1">
            <el-date-picker class="ml10" v-if="form.expireType" v-model="form.beginDate" :disabled="isEdit && onlineStatus != 0" type="date" placeholder="开始时间" @change="checkBeginEndTime"> </el-date-picker>
            <el-date-picker v-if="form.expireType" v-model="form.endDate" :disabled="isEdit && onlineStatus == 2" type="date" :picker-options="endDatePickerOptions" placeholder="结束时间" @change="checkBeginEndTime"> </el-date-picker>
          </template>
          <template v-else>
            <el-date-picker class="ml10" v-if="form.expireType" v-model="form.beginDate" :disabled="isEdit && onlineStatus != 0" type="datetime" placeholder="开始时间" @change="checkBeginEndTime"> </el-date-picker>
            <el-date-picker v-if="form.expireType" v-model="form.endDate" :disabled="isEdit && onlineStatus == 2" type="datetime" :picker-options="endDatePickerOptions" placeholder="结束时间" @change="checkBeginEndTime"> </el-date-picker>
          </template>
        </el-form-item>
        <el-form-item label="固定期限" prop="endDate" :show-message="showMessage" v-else>
          <el-date-picker class="ml10" v-model="form.beginDate" :disabled="isEdit && onlineStatus != 0" type="datetime" placeholder="开始时间" @change="checkBeginEndTime" :picker-options="endDatePickerOptions"> </el-date-picker>
          <el-date-picker v-model="form.endDate" :disabled="isEdit && onlineStatus == 2" type="datetime" :picker-options="isEdit ? endDatePickerOptions2 : endDatePickerOptions3" placeholder="结束时间" @change="checkBeginEndTime"> </el-date-picker>
        </el-form-item>
      </section>
      <!-- 人群筛选器 -->
      <section class="dm-form__wrap">
        <h3 class="dm-title__label border-bottom">
          适用人群
          <i class="dm-title__label--icon iconfont icon-xinxixianshi"></i>
          <span class="gray fz13">适用人群创建后不支持修改</span>
        </h3>
        <div class="pl20 pb20" style="display:flex;align-items:center">
          <el-radio-group style="width: 240px" v-model="form.memberType">
            <el-radio :disabled="!isAdd" :label="0">会员筛选</el-radio>
            <el-radio :disabled="!isAdd" :label="1">会员分组</el-radio>
          </el-radio-group>
          <el-alert v-if="form.memberType == 1 && (form.effectType == 1 || form.effectType == 2)" style="width: 450px" title="执行时间为9:00-23:00之外时，无法选择“非实时”会员分组" type="info" :closable="false" show-icon></el-alert>
        </div>
        <div class="mb20" v-if="form.memberType === 0">
          <vue-gic-people v-bind="storeParams" :projectName="projectName" :isAdd="isAdd" :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="!isAdd" type="primary" @click="getData">确 定</el-button>
            <el-button size="small" @click="cancelFilter">取 消</el-button>
          </div>
        </div>
        <div :class="!isAdd ? 'el-view-mask' : ''" v-if="form.memberType === 1">
          <vue-gic-member-group v-bind="storeParams" :real-time-type="getRealTimeType" :defaltSelected="defaltSelected" :height="500" :projectName="projectName" :headerList="headerList" @handleDataTransferred="handleDataTransferred" @handleDataLeft="handleDataLeft"></vue-gic-member-group>
        </div>
      </section>
      <!-- 营销事件组件 -->
      <section class="dm-form__wrap">
        <h3 class="dm-title__label border-bottom">营销事件</h3>
        <div style="margin-bottom: 20px">
          <div class="layout--tips mt10" style="display:inline-block;min-width:1280px" v-if="form.effectType == 1 || form.effectType == 2">
            <!-- <i class="el-icon-info inline-block"></i> -->
            <div class="layout--tips__content">
              <span class="dm-status--primary pl10"></span>{{ form.effectType == 1 ? '重复' : '单次' }}时效模式下，营销事件选择为“图文/文本/图片”时，将通过服务号“群发接口”进行推送，会占用每个用户每月4条的服务号消息接收次数。
              <br />
              <span class="dm-status--primary pl10"></span>营销事件选择为“小程序”时，是通过服务号“客服接口”进行推送，不会占用每个用户每月4条的服务号消息接收次数。但通过“客服接口”成功推送是有一定前提与限制的，详见文档<el-link href="https://www.yuque.com/exnmlu/hpbb1c/hb43wk" target="_blank" style="color:#1890ff;font-size:12px;vertical-align: top">《智能营销事件发送一览》</el-link>。
            </div>
          </div>
          <div class="layout--tips mt10" style="display:inline-block" v-if="form.effectType == 0 && form.effectAction !== 'consume'">
            <span class="dm-status--primary pl10"></span>
            触点时效模式下，营销事件选择为“图文/文本/小程序/图片”时，将通过服务号“客服接口”进行推送，不会占用每个用户每月4条的服务号消息接收次数。但通过“客服接口”成功推送是有一定前提与限制的，详见文档<el-link href="https://www.yuque.com/exnmlu/hpbb1c/hb43wk" target="_blank" style="color:#1890ff;font-size:12px;vertical-align: top">《智能营销事件发送一览》</el-link>。
          </div>
          <div class="layout--tips mt10" style="display:inline-block" v-if="form.effectType == 0 && form.effectAction === 'consume'">
            <span class="dm-status--primary pl10"></span>
            触点时效模式下，营销事件选择为“图文/文本/小程序/图片”时，将通过服务号“客服接口”进行推送，不会占用每个用户每月4条的服务号消息接收次数。但通过“客服接口”成功推送是有一定前提与限制的，详见文档<el-link href="https://www.yuque.com/exnmlu/hpbb1c/hb43wk" target="_blank" style="color:#1890ff;font-size:12px;vertical-align: top">《智能营销事件发送一览》</el-link>。
            <div>
              <span class="dm-status--primary pl10" style="vertical-align:top"></span>
              <div style="display:inline-block">
                消费触发模式下，营销事件选择“卡券/积分”时：
                <br />
                若订单整单退款：已赠送卡券/积分全部退回；
                <br />
                若订单部分退款：系统判断剩余订单是否满足触发条件，若不满足，未使用卡券/积分全部退回；若仍满足，卡券/固定积分不退回，按订单金额倍数赠送的积分，会扣除退货商品所赠送的积分；
              </div>
            </div>
            <span class="dm-status--primary pl10" style="vertical-align:top"></span>
            <div style="display:inline-block">
              消费触发模式下，消费触发模式选择「按照当天消费累计触发」时，仅允许添加1个“积分”事件，且计划开始后，不允许修改营销事件；
            </div>
          </div>
        </div>

        <!-- 只有实时才是单图文 -->
        <marketing-event :effectType="form.effectType" :readOnly="isInfo || onlineStatus == 2 || (form.consum_type == 2 && isEdit)" :show-delete-tooltip="isEdit && analyseConfig.open_flag == 1" show-out-coupon-icon ref="marketingEvent" @has-card="hasCard" v-if="ecmPlanId" :singleFlag="form.effectType === 0" :integralMultiple="form.effectAction === 'consume' && form.consum_type != 2" :ecmPlanId="ecmPlanId" :isSupportVar="form.effectType === 0" :code="code" :enabledMessageState="enabledMessageState" :cardLimitType="-1" :use-stored="useStoredFlag && ['consume', 'stored'].includes(form.effectAction) && form.effectType == 0 && form.consum_type == 1" :use-qfxx="form.effectType !== 0" :consumType="form.consum_type"> </marketing-event>
        <!-- 只有非实时&&选择卡券了展示提示 -->
        <div v-if="currentCard.comName && form.effectType != 0 && couponAutoGetFlag" class="fz13 regular-font-color line-height2" style="margin-left:120px;margin-top:30px;">
          * 用户在领取卡券后需要<b class="bold">同步至ERP</b>，如果关闭用户<b class="bold">手动领取</b>，卡券在<b class="bold">批量投放</b>时会需要将卡券信息批量同步至ERP。 <br />
          该过程可能需要持续一段时间（具体同步时间和同步卡券张数以及ERP性能有关，参考同步时间为1万张卡券1个小时）。 <br />
          当前支持不需要用户手动领取的卡券库存最大值为<b class="bold">{{ couponAutoGetStock }}</b
          >张。
        </div>
      </section>
      <!-- 只有存在卡券的情况下出现卡券通知方式 -->
      <section class="dm-form__wrap" v-if="currentCard.comName">
        <h3 class="dm-title__label border-bottom">卡券通知方式配置</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="!isAdd && 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>
      <!-- 营销分析设置 -->
      <section class="dm-form__wrap" v-if="xsxsFlag == 1">
        <h3 class="dm-title__label border-bottom">
          <span class="inline-block mr10">营销分析设置</span>
          <span class="gray fz12">开启后，可用于统计这次营销计划的触达转化收益情况。</span>
          <!-- <el-switch :disabled="!isAdd" v-model="analyseConfig.open_flag" :active-value="1" :inactive-value="0" @change="onChangeAnalyseConfig($event, true)"></el-switch> -->
        </h3>
        <div style="padding-bottom:10px;color:#303133">
          <div class="mt20">
            <div class="w150 text-right inline-block mr10">
              <label class="cursor required">
                <span>是否开启营销分析</span>
                <!-- <el-tooltip slot="label" open-delay="200" placement="top">
                  <i style="cursor:pointer;color:#909399;font-size:14px;" class="iconfont icon-xinxixianshi"></i>
                  <div slot="content" style="line-height: 22px;">用于统计本次线索挖掘计划的收益情况</div>
                </el-tooltip> -->
              </label>
            </div>
            <el-radio-group :disabled="!isAdd" v-model="analyseConfig.open_flag" @change="onChangeAnalyseConfig($event, true)">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="0">否</el-radio>
            </el-radio-group>
          </div>
          <template v-if="analyseConfig.open_flag == 1">
            <div class="mt20">
              <div class="w150 text-right inline-block mr10">
                <label class="cursor required">
                  <span>分析天数</span>
                  <el-tooltip slot="label" open-delay="200" placement="top">
                    <i style="cursor:pointer;color:#909399;font-size:14px;" class="iconfont icon-xinxixianshi"></i>
                    <div slot="content" style="width:340px;line-height: 22px;">设置从客户被成功触达的那天起，{{ analyseConfig.marke_days || '--' }}天以内的转化会被作为此营销计划的转化收益</div>
                  </el-tooltip>
                </label>
              </div>
              <span class="mr10">触达日期起</span>
              <el-input-number :disabled="!isAdd" controls-position="right" class="w150" :min="1" :max="90" step-strictly v-model="analyseConfig.marke_days"></el-input-number>
              <span class="ml10">天之内</span>
            </div>
            <div style="margin-top:6px;color:#909399;font-size:12px;margin-left:164px;line-height:18px">
              最短 1 天，最长 90 天 (以自然日计算)
              <br />
              注：时间越长，会员的转化与此次营销的相关度越低，分析触达日期起&lt;31天内的转化数据更为合理，请酌情填写分析天数。
            </div>
            <div class="mt20" v-show="[1, 2].includes(form.effectType)">
              <div class="w150 text-right inline-block mr10">
                <label class="cursor">
                  <span>设置参照组</span>
                  <el-tooltip slot="label" open-delay="200" placement="top">
                    <i style="cursor:pointer;color:#909399;font-size:14px;" class="iconfont icon-xinxixianshi"></i>
                    <div slot="content" style="width:376px;line-height: 22px;">设置后，系统按下方比例随机抽取部分营销人群作为参照，不触发任务。后续可在【触达效果】中查看对照数据结果</div>
                  </el-tooltip>
                </label>
              </div>
              <el-switch :disabled="!isAdd" v-model="analyseConfig.crowd_flag" :active-value="1" :inactive-value="0" @change="onChangeAnalyseConfig($event, false)"></el-switch>
            </div>
            <div v-if="analyseConfig.crowd_flag == 1" class="mt20">
              <label class="w150 text-right inline-block mr10">实验组 (触发任务人群)</label>
              <el-input-number :disabled="!isAdd" controls-position="right" class="w150" :min="1" v-model="analyseConfig.crowd_send"></el-input-number>
              <span class="ml10 mr10">:</span>
              <el-input-number :disabled="!isAdd" controls-position="right" class="w150" :min="1" v-model="analyseConfig.crowd_no_send"></el-input-number>
              <span class="ml10">参照组 (不触发任务人群)</span>
              <el-tooltip v-if="analyseConfig.crowd_no_send > 1" class="item" effect="dark" placement="top" :open-delay="300">
                <i style="cursor:pointer;color:#909399;font-size:14px;vertical-align: middle;" class="iconfont icon-xinxixianshi"></i>
                <div slot="content" style="width:376px;line-height: 22px;">原则：同一用户在同一计划中不会既存在实验组中，又存在于参照组中。 在计划允许对同一个用户重复营销的情况下，如果首次触发时，某些用户已经被归为实验组了，那么下一次触发时，这些用户还会被默认归入到实验组，剩余的再按照比例进行触发。<br />因此对于这些允许对用户进行重复营销的计划，最终在【触达效果】中所呈现的实验组与参照组的人数比例可能和配置的比例不一致。</div>
              </el-tooltip>
            </div>
          </template>
        </div>
      </section>
      <!-- 操作区 -->
      <dm-form-bottom>
        <el-button type="primary" @click="submit('form')" v-if="!isInfo">保 存</el-button>
        <el-button @click="$router.go(-1)">返 回</el-button>
      </dm-form-bottom>
      <!-- 变量弹窗 -->
      <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-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-color-picker class="ml10 vertical-middle" v-model="copyTemplate.headerColor"></el-color-picker> -->
                <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>
          </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>
    </el-form>

    <!-- 消费商品dialog -->
    <el-dialog title="适用商品" :visible.sync="xxSysp.visible" width="690px">
      <vue-gic-goods-selector ref="selector" :projectName="projectName" isCoupon></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 ecmForm from './form.js';
export default ecmForm;
</script>
<style lang="scss" scoped>
.content {
  padding-bottom: 58px;
}
.no_label_form_label {
  margin-left: -100px;
  label {
    display: inline-block;
    width: 140px;
  }
  > div {
    margin-left: 120px;
  }
  /deep/ .el-checkbox {
    margin-left: 16px;
  }
}
.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: #1890ff;
  }
}
/deep/ .act-select {
  width: 400px !important;
}
.el-form-item__label.align-left {
  text-align: left;
}
.complex-and {
  color: #535353;
  font-weight: bold;
  line-height: 1;
}
.el-icon-arrow-down {
  transition: transform 0.2s ease;
}
.is-expand {
  transform: rotate(180deg);
}
.required::before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}
.ecm-title {
  margin-left: 24px;
  // display: inline;
}
.ecm-content {
  display: inline-flex;
  flex-wrap: wrap;
  width: 200px;
  gap: 20px;
  margin: 20px 20px 20px 24px;
}
</style>
