<style lang="less">
.component-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0000001f;
  z-index: 20; //因为导航栏的z-index 为11 故为了遮住导航栏
  .content-wrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 420rpx;
    border-radius: 24rpx 24rpx 0px 0px;
    background: #f2f2f2;
    overflow: hidden;
    .title {
      height: 112rpx;
      line-height: 112rpx;
      text-align: center;
      border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
      background: #ffffff;
      span,
      label {
        font-size: 28rpx;
        color: #000000;
        mix-blend-mode: normal;
        opacity: 0.5;
      }
    }
    .confrim {
      height: 112rpx;
      line-height: 112rpx;
      text-align: center;
      border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
      background: #ffffff;
      span,
      label {
        font-size: 34rpx;
        color: #fa5151;
        mix-blend-mode: normal;
        opacity: 0.9;
      }
    }
    .cancel {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 180rpx;
      padding-top: 32rpx;
      text-align: center;
      background: #ffffff;
      box-sizing: border-box;
      span,
      label {
        font-size: 34rpx;
        line-height: 48rpx;
        color: #000000;
        mix-blend-mode: normal;
        opacity: 0.9;
      }
    }
  }
}
</style>

<template>
  <div class="component-container">
    <div class="content-wrap">
      <div class="title">
        <span>{{ title }}</span>
      </div>
      <div class="confrim">
        <span @click="confirm">{{ confirmText }}</span>
      </div>
      <div class="cancel">
        <span @click="cancel">{{ cancelText }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import wepy from '@wepy/core';

let pageTouchStartY = 0;
let isPageTouchStart = false;
let componentTop = 0;
wepy.component({
  props: {
    // 注意同一个页面使用多个该组件时该值是否要保持唯一
    confirmEmitId: String,
    cancelEmitId: String,
    title: String,
    confirmText: String,
    cancelText: {
      type: String,
      default: '取消',
    },
  },
  ready() {},
  data: {},
  methods: {
    confirm() {
      if (this.confirmEmitId) {
        this.$emit(this.confirmEmitId);
      }
    },
    cancel() {
      if (this.cancelEmitId) {
        this.$emit(this.cancelEmitId);
      }
    },
  },
});
</script>
