<template>
  <!--文字说明-->
  <el-drawer title="触达效果说明" :visible.sync="drawer" :modal="false" :direction="direction" custom-class="touch_drawer h" v-if="contentTitle == '触达效果'">
    <ul class="content">
      <li>数据更新频率：1天1次</li>
      <li>
        <span class="squre"></span>
        <div class="text">
          <p>转化收益计算方式</p>
          <p>通过智能营销触达到顾客后，顾客在收益有效期内进行消费，会被视为该智能营销计划的转化。<br />如：1月1日智能营销计划下发话务任务，让导购联系1月生日会员到店消费，收益有效期设置为14天。导购在1月3日完成任务联系到顾客。如果该顾客在1月17日前来店消费，则将该顾客记入触达顾客转化人数，该顾客消费订单数和金额记入触达顾客订单数和转化收益。<br />如果出现补单和退单的情况，时间在七天以内的补单订单，会按照收益计算规则进行统计；时间在七天以内的退单，会按照退单实际情况扣减相应数据。七天之外的退补单不再对已计算转化数据产生影响。</p>
        </div>
      </li>
      <li>
        <span class="squre"></span>
        <div class="text">
          <p>计划整体效果</p>
          <p>统计整个计划的营销效果。任意一个渠道触达顾客即视为触达。如果计划中多个渠道触达同一个顾客，统计人数时会进行去重，仅计算为1个人。</p>
        </div>
      </li>
      <li>
        <span class="squre"></span>
        <div class="text">
          <p>卡券收益</p>
          <p>
            ①智能营销计划中投放卡券所产生的营销效果，仅有通过当前智能营销任务发出的卡券才会被统计，其他渠道投放卡券的数据不会包含<br />
            ②由于是单独从“卡券”维度统计，因此只要是使用了该计划所发送优惠券的都会计入，即使顾客使用该优惠券的订单超过了收益有效期。比如实际使用该卡券发生在被触达之后很久，远远超过了收益有效期，在此收益模块中，也会将该订单纳入统计，而“计划整体效果”中不会包含该超过了收益有效期的订单相关数据。<br />
            ③如果一个顾客使用了多张卡券，在统计单个卡券效果时，会根据实际情况分别计算（这可能导致每个优惠券的数据相加求和大于计划整体）。
          </p>
        </div>
      </li>
      <li>
        <span class="squre"></span>
        <div class="text">
          <p>各渠道触达效果（企微群发任务、话务任务、短信、微信）</p>
          <p>
            计划中触达渠道的营销效果，会对每个触达渠道分别进行统计。<br />
            如果计划中使用了多种触达渠道触达了某个顾客，且该顾客在收益有效期内进行了消费。在统计单个触达渠道的效果时，会在每个触达渠道中都算上该顾客（这可能导致每个渠道的数据相加求和大于计划整体，因为“计划整体”的触达转化效果是会去重的）。<br />
            各触达渠道“实际触达”的定义如下：<br />
            ① 群发任务：通过企业微信实际发送群发消息成功即视为触达<br />
            ② 短信：运营商返回发送成功的即视为触达。 <br />
            ③ 微信：微信发送接口返回成功即视为触达。<br />
            ④ 话务：导购完成话务任务（不含放弃）即视为触达。
          </p>
        </div>
      </li>
    </ul>
  </el-drawer>
  <el-drawer title="数据说明" :visible.sync="drawer" :modal="false" :direction="direction" custom-class="touch_drawer h" v-else-if="contentTitle == '智能营销'">
    <ul class="content">
      <li>更新频率：营销人次实时统计，其余指标1天更新1次；</li>
      <li>
        <span class="squre"></span>
        <div class="text">
          <p>营销人次</p>
          <p>本次计划各次营销的人数汇总。如计划执行两次，第一次选中10000人使用了2个卡券1个短信，第二次选中相同的10000人使用了群发，整体营销人次为20000</p>
        </div>
      </li>
      <li>
        <span class="squre"></span>
        <div class="text">
          <p>计划触达人数</p>
          <p>当前智能营销在计划创建时，按照条件圈选的顾客人数。如果当前计划中，通过不同触达方式或不同时间，计划触达同一个顾客，会进行去重统计，仅计算为1个人；</p>
        </div>
      </li>
      <li>
        <span class="squre"></span>
        <div class="text">
          <p>触达人数</p>
          <p>当前智能营销通过指定触达方式，实际触达到的顾客数。如果当前计划中，通过不同触达方式或不同时间，实际触达了同一个顾客，会进行去重统计，仅计算为1个人；</p>
        </div>
      </li>
      <li>
        <span class="squre"></span>
        <div class="text">
          <p>转化人数</p>
          <p>当前智能营销实际触达顾客中，在收益有效期内消费的顾客人数。无论顾客消费了几次，会进行去重统计，仅计算为1个人；</p>
        </div>
      </li>
      <li>
        <span class="squre"></span>
        <div class="text">
          <p>转化收益</p>
          <p>当前智能营销实际触达顾客中，在收益有效期内消费的顾客实付订单金额。只计销售单，不看退货单和换货单。</p>
        </div>
      </li>
      <li>
        <span class="squre"></span>
        <div class="text">
          <p>卡券收益</p>
          <p>当前智能营销计划发出优惠券后，使用优惠券的订单金额。如果一笔订单使用了超过1张优惠券，该金额仅计算一次；</p>
        </div>
      </li>
      <li>
        <span class="squre"></span>
        <div class="text">
          <p>说明</p>
          <p>未开启营销分析开关的，除营销人次外其他指标信息不统计；</p>
        </div>
      </li>
    </ul>
  </el-drawer>
</template>

<script>
export default {
  props: {
    drawer: {
      type: Boolean,
      default: false
    },
    direction: {
      type: String,
      default: 'rtl'
    },
    contentTitle: String
  },
  watch: {
    drawer(newVal) {
      this.$emit('update:drawer', newVal);
    }
  }
};
</script>

<style lang="scss">
.h {
  height: 80vh !important;
  overflow-y: scroll;
}
.touch_drawer {
  width: 395px !important;
  background: #ffffff;
  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.15) !important;
  border-radius: 2px !important;
  border: 1px solid #dcdfe6 !important;
  position: fixed;
  top: 64px !important;
  right: 24px !important;
  padding: 14px 24px 21px 20px;
  .el-drawer__header {
    padding: 0;
    margin-bottom: 22px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    color: #303133;
    line-height: 22px;
    span {
      font-weight: 600;
    }
  }
  .content {
    li {
      display: flex;
      margin-bottom: 20px;
      font-size: 13px;
      font-weight: 400;
      color: #606266;
      font-family: PingFangSC-Regular, PingFang SC;
      line-height: 20px;
      &:last-child {
        margin-bottom: 0;
      }
      .squre {
        min-width: 10px;
        height: 4px;
        background: #1890ff;
        display: inline-block;
        margin: 8px 8px 0 0;
      }
      .text {
        p {
          line-height: 20px;
          &:nth-child(1) {
            font-size: 14px;
            font-weight: 600;
            color: #303133;
            margin-bottom: 5px;
            font-family: PingFangSC-Medium, PingFang SC;
          }
          &:nth-child(2) {
            font-size: 13px;
            font-weight: 400;
            color: #606266;
            font-family: PingFangSC-Regular, PingFang SC;
          }
        }
      }
    }
  }
}
</style>
