<template>
  <div class="bk-popover">
    <div class='mask' v-if='mask' @click="maskClick"></div>
    <div class='bk-popover-content'>
      <div class='popover-arrow' 
        :class='arrowConfig.direction' 
        v-if='arrowConfig.show' 
        :style="{left: arrowConfig.positionLeft, top: arrowConfig.positionTop}"
      ></div>
      <!-- 单个内容 -->
      <div v-if="type === 'text'" class='content-text' @click='(e) => contentClick(content, e)'>
        <img :src="content.beforeIcon" alt="icon" v-if='content.beforeIcon' class='before-icon'>
        <div class='content-detail' v-html='content.text'></div>
        <img :src="content.afterIcon" alt="icon" v-if='content.afterIcon' class='after-icon'>
      </div>
      <!-- 列表 -->
      <div v-if="type === 'list'" class='content-list'>
        <div class='content-list-item' v-for='item in content' :data-id='item.id' :key="item.id" @click='(e) => {
          return contentClick(item, e)
        }'>
          <img :src="item.beforeIcon" alt="icon" v-if='item.beforeIcon' class='before-icon'>
          <div class='content-detail' v-html='item.text'></div>
          <img :src="item.afterIcon" alt="icon" v-if='item.afterIcon' class='after-icon'>
        </div>
      </div>
      <!-- 图片 -->
      <div v-if="type === 'img'" class='content-img' @click='(e) => contentClick(content, e)'>
        <img :src="content.url" alt="图片">
      </div>
      <!-- 滚动图片 -->
      <div v-if="type === 'swiperImg'" class='content-swiper-img'>
        <swiper indicator-dots autoplay interval="2000" duration="1000">
          <block v-for="item in content" :key='item.id'>
            <swiper-item @click='(e) => contentClick(item, e)'>
              <img :src="item.url" mode='widthFix'/>
            </swiper-item>
          </block>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>
/* 由于mpvue 不支持插槽，solt, 所以定义几种类型，作为公共组件的type
* list: 列表
[{
  id: 1, // 唯一 标识，必传
  text: 'scan qrcode', // 内容
  beforeIcon: '/static/images/success.png' // 前后图标
}]
* text: 单个内容
{
  beforeIcon: // 前后图标
  text: "<div class='sub-text'>徘徊着的，在路上的，你要走吗？</div>", // 内容，支持html标签
  afterIcon: '/static/images/success.png'
}
* img: 图片
{
  url: //图片路径
}
* swiperImg: 左右滑滑动框图片
[
  {
    id: //唯一标识，必传，
    url: // 图片路径
  }
]

实例：
popoverConfig = {
  mask: true,
  maskClick: this.togglePopover,
  arrowConfig: {
    direction: 'top',
    show: true,
    positionLeft: '50%'
  },
  type: 'list',
  content: [
    {
      id: 1,
      text: 'scan qrcode',
      beforeIcon: '/static/images/success.png'
    },
    {
      id: 2,
      text: '扫码',
      beforeIcon: '/static/images/error.svg'
    },
    {
      id: 3,
      text: 'are you ok, dude',
      beforeIcon: '/static/images/error.svg'
    }
  ],
  contentClick: this.popoverClickItem
}
*/
export default {
  props: {
    type: 'String', // 类型 text, list, img, swiperImg
    content: ['Array', 'String', 'Object'],
    mask: 'Boolean', // 是否显示遮罩
    maskClick: 'Function', // 遮罩点击事件
    contentClick: 'Function', // 内容点击事件，第一个参数为content, 或者 item， 第二个参数为dom对象
    arrowConfig: { // 配置箭头
      show: { // 是否显示，默认显示
        type: 'Boolean',
        default: true
      },
      direction: {// 箭头方向， top, right, bottom, left
        type: 'String',
        default: 'top'
      },
      positionLeft: 'String', // 离左边框的距离，百分比，默认居中，如果配置bottom, top, 只调试left
      positionTop: 'String' // 离上边框的距离，百分比，默认居中,如果配置left, right, 只调试top
    }
  }
}
</script>

<style scoped>
.mask {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 10;
  background:rgba(0,0,0,0.4);
}

.bk-popover-content {
  position: relative;
  z-index: 11;
  display: flex;
  border:solid 3px rgba(0,0,0,.21);
  display: inline-table;
  max-width: 670px;
  border-radius: 8px;
}

.content-text, .content-list, .content-img, .content-swiper-img {
  background: #fff;
  padding: 16px;
  font-size: 26px;
  border-radius: 8px;
}
 .content-swiper-img swiper {
  min-width: 600px;
 }

.bk-popover-content .content-text {
  display: flex;
  align-items: center;
}
.bk-popover-content .content-list-item {
  display: flex;
  align-items: center;
}
.content-list-item {
  border-bottom: solid 2px #ddd;
  padding: 20px 0;
  margin: 0 16px;
}
.content-list-item:last-child {
  border-bottom: 0;
}

.content-detail {
  flex: 1;
}
.before-icon, .after-icon{
  width: 36px;
  height: 36px;
}
.before-icon {
  margin-right: 16px;
}
.after-icon {
  margin-left: 16px;
}

.popover-arrow {
  position: absolute;
  border: solid rgba(0,0,0,.21);
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 6px;
  background-color: #fff;
}
.top {
  transform: rotate(-135deg) translateX(-50%);
  top: -13px;
  left: 50%;
}
.bottom {
  transform: rotate(45deg) translateX(-50%);
  left: 50%;
  bottom: -13px;
}
.left {
  transform: rotate(135deg);
  top: 40%;
  left: -10px;
}
.right {
  transform: rotate(-45deg);
  top: 40%;
  right: -10px;
}
</style>

