<template>
  <van-popup v-model="show" closeable :style="{ height: '55%', width: '70%' }" @closed="closed">
    <div class="popup-heater">{{ title }}</div>
    <div class="popup-body">
      <slot> </slot>
    </div>
    <div class="popup-footer">
      <button v-show="showCancel" @click="button_cancel">{{ cancelText }}</button>
      <button v-show="showConfirm" @click="button_confirm">{{ confirmText }}</button>
    </div>
  </van-popup>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { Popup } from "vant";

Vue.use(Popup);
/**
 * @Description 弹窗
 * @Author JiangTao
 * @Date 2021-11-10 下午 06:12
 */
@Component({
  name: "BasePopup",
})
export default class BasePopup extends Vue {
  @Prop({ default: false }) value: boolean | undefined; // 显示弹窗
  @Prop({ default: false }) showCancel: boolean | undefined;
  @Prop({ default: false }) showConfirm: boolean | undefined;
  @Prop({ default: "取消" }) cancelText: string | undefined;
  @Prop({ default: "确认" }) confirmText: string | undefined;
  @Prop({ default: "提示信息" }) title: string | undefined;
  show: boolean | undefined = false;
  @Watch("value")
  onshow() {
    this.show = this.value;
  }

  closed() {
    this.show = false;
    this.$emit("input", false);
  }
  button_cancel() {
    this.$emit("cancel");
    this.closed();
  }
  button_confirm() {
    this.$emit("confirm");
  }
}
</script>

<style scoped>
.popup-heater {
  width: 100%;
  height: 13%;
  line-height: 55px;
  padding-left: 3%;
  font-size: 18px;
  font-family: "Arial Normal", "Arial";
  border-bottom: 1px solid #d7d7d7;
}
.popup-body {
  width: 96%;
  height: 70%;
  padding: 3.5% 0;
  margin: 0 auto;
}
.popup-footer {
  width: 50%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-content: center;
}
.popup-footer button {
  flex: 1;
  border-radius: 30px;
  padding: 2% 0;
  margin: 0 2%;
  font-size: 16px;
  outline: none;
}
.popup-footer > button:nth-child(1) {
  border: 1px solid #d7d7d7;
  color: #999999;
  background-color: white;
}
.popup-footer > button:nth-child(2) {
  border: 1px solid #FF574C;
  color: white;
  background-color: #FF574C;
}
</style>