<template>
  <!--文字说明-->
  <el-drawer title="触达效果说明" :visible.sync="drawer" :direction="direction" custom-class="touch_drawer h670" v-if="contentTitle == '触达效果'">
    <ul class="content">
      <li>数据更新频率：1天1次</li>
      <li>
        <span class="squre"></span>
        <div class="text">
          <p>1.转化效果趋势图</p>
          <p>按日展示。当天转化人数可能是因为之前的触达影响的，所以当日触达转化额人数可能大于触达人数。</p>
        </div>
      </li>
      <li>
        <span class="squre"></span>
        <div class="text">
          <p>2.计划整体效果</p>
          <p>配置了参照组的，展示参照组转化情况，即计划中设定的非触达人群的转化情况；</p>
        </div>
      </li>
      <li>
        <span class="squre"></span>
        <div class="text">
          <p>3.线索转化对比</p>
          <p>导购线索：计划中触达到门店导购端的都归入导购线索，包括话务、企微任务；<br />后台线索：计划中非导购线索的触达，包括图文、文本、小程序、图片、卡券等。</p>
        </div>
      </li>
      <li>
        <span class="squre"></span>
        <div class="text">
          <p>4.转化收益</p>
          <p>
            ① 触达后产生的消费在触达收益计算有效期内的，计入转化效益，有效期见计划配置；<br />
            ② 导购和后台线索均有触达，消费在两者触达的有效期内的，收益归给导购线索；<br />
            ③ 一个触达转化消费，在多个导购触达任务的收益计算有效期内的，该笔转化只记给第一个触达任务；<br />
            ④ 转化收益只计销售单，不看退货单和换货单；金额是应付还是实付看ERP传入的值。<br />
            ⑤『触达率』：触达人数 / 计划触达人数 <br />
            ⑥『转化率』：转化人数 / 触达人数； 参照组不存在触达人数，转化率 = 转化人数 / 计划人数
          </p>
        </div>
      </li>
    </ul>
  </el-drawer>
  <el-drawer title="【导购线索】说明" :visible.sync="drawer" :direction="direction" custom-class="touch_drawer h850" v-else-if="contentTitle == '导购线索'">
    <ul class="content">
      <li>数据更新频率：1天1次</li>
      <!-- <li>导购线索：计划中触达到门店导购端的都归入导购线索，包括话务、企微任务。</li>
       -->
      <li>
        <span class="squre"></span>
        <div class="text">
          <p>1.导购线索</p>
          <p>计划中触达到门店导购端的都归入导购线索，包括话务、企微任务。</p>
        </div>
      </li>
      <li>
        <span class="squre"></span>
        <div class="text">
          <p>2.导购线索概况 - 趋势图</p>
          <p>按日展示。当天转化人数可能是因为之前的触达影响的，所以当日触达转化额人数可能大于触达人数。</p>
        </div>
      </li>
      <li>
        <span class="squre"></span>
        <div class="text">
          <p>3. 导购线索转化</p>
          <p>
            ①『计划触达人数』： 新建计划时确定的要通过导购线索进行触达的人数；区域、门店粒度的为任务下发人数。<br />
            ②『任务完成率』： 导购任务完成数 / 任务总数，任务完成数不含放弃数。<br />
            ③『任务总数』： 下发的任务总数。一些任务可能下发失败，故任务人数可能小于计划触达人数；1个导购可能被触发多个任务，任务总数记多个，和人数不一样。<br />
            ④『触达人数』：任务触达的人数<br />
            ⑤『触达率』：『触达人数』/『计划触达人数』<br />
            ⑥『转化人数』：通过导购线索触达，且触达的会员在触达效益计算有效期内前来消费的人数。多个导购线索任务触达的，转化只记在首个触达任务上<br />
            ⑦『转化率』：『转化人数』/『触达人数』<br />
            ⑧『转化订单数』：通过导购线索触达，且触达的会员在触达效益计算有效期内前来消费的订单，只看销售单<br />
            ⑨『转化收益』：转化的金额，只计销售单，不看退货单和换货单；金额是应付还是实付看ERP传入的值。
          </p>
        </div>
      </li>
      <li>
        <span class="squre"></span>
        <div class="text">
          <p>4.区域详情</p>
          <p>
            任务完成情况：不同任务的完成情况，任务完成数不含放弃。<br />
            触达效果：导购线索中不同任务完成方式的触达转化情况。话务任务暂不区分私人电话和企业电话，所以完成方式为 话务。<br />
            注意：区域详情合计按任务门店统计汇总，上方计划整体数据以企业粒度单独计算，数据不完全一致。
          </p>
        </div>
      </li>
    </ul>
  </el-drawer>
  <el-drawer title="【后台线索】说明" :visible.sync="drawer" :direction="direction" custom-class="touch_drawer h670" v-else-if="contentTitle == '后台线索'">
    <ul class="content">
      <li>数据更新频率：1天1次</li>
      <!-- <li>导购线索：计划中触达到门店导购端的都归入导购线索，包括话务、企微任务。</li>
       -->
      <li>
        <span class="squre"></span>
        <div class="text">
          <p>1.后台线索</p>
          <p>计划中非导购线索的触达，包括图文、文本、小程序、图片、卡券等。</p>
        </div>
      </li>
      <li>
        <span class="squre"></span>
        <div class="text">
          <p>2.后台线索概况 - 趋势图</p>
          <p>按日展示。当天转化人数可能是因为之前的触达影响的，所以当日触达转化额人数可能大于触达人数。</p>
        </div>
      </li>
      <li>
        <span class="squre"></span>
        <div class="text">
          <p>3. 后台线索转化</p>
          <p>
            ①『计划触达人数』： 新建计划时确定的要通过后台线索进行触达的人数<br />
            ②『触达人数』：任务触达的人数<br />
            ③『触达率』：『触达人数』/『计划触达人数』<br />
            ④『转化人数』：通过后台线索触达，且触达的会员在触达效益计算有效期内前来消费的人数。导购和后台线索均有触达，消费在两者触达的有效期内的，收益归给导购线索；<br />
            ⑤『转化率』：『转化人数』/『触达人数』<br />
            ⑥『转化订单数』：通过后台线索触达，且触达的会员在触达效益计算有效期内前来消费的订单，只看销售单<br />
            ⑦『转化收益』：转化的金额，只计销售单，不看退货单和换货单；金额是应付还是实付看ERP传入的值。
          </p>
        </div>
      </li>
      <li>
        <span class="squre"></span>
        <div class="text">
          <p>4.区域详情</p>
          <p>区域粒度的『触达人数』和『触达率』按服务门店统计，其余转化信息按消费门店统计。</p>
        </div>
      </li>
    </ul>
  </el-drawer>
  <el-drawer title="数据说明" :visible.sync="drawer" :direction="direction" custom-class="touch_drawer h380" v-else-if="contentTitle == '智能营销'">
    <ul class="content">
      <li>更新频率：营销人次实时统计，其余指标1天更新1次；</li>
      <li>
        ①【营销人次】：本智能营销计划预计营销的人次；<br />
        ②【计划触达人数】：本计划计划触达的人数。一些预计营销的人中因为一些系统特殊情况导致触发失败的，不会计入在内；重复营销的，只记1人。<br />
        ③【触达人数】：通过计划中各种营销方式触达到的会员人数；<br />
        ④【转化人数】：触达的人中，在触达收益有效期内前来消费的人数；<br />
        ⑤【线索转化收益】：转化人数带来的收益，只计销售单，不看退货单和换货单；金额是应付还是实付看ERP传入的值。<br />
        ⑥ 说明：未开启营销分析开关的，除营销人次外其他指标信息不统计；
      </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">
.h850 {
  height: 850px !important;
}
.h670 {
  height: 670px !important;
}
.h380 {
  height: 380px !important;
}
.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: absolute;
  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 {
        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>
