<template>
  <van-popup v-model="data.show">
    <div class="model">
      <div class="model-close" @click="modelCloseHandler"></div>
      <div class="model-content">
        <div class="model-head-line"></div>
        <div class="model-title">{{data.title}}</div>

        <div class="successModel" v-if="data.index == 'default'">
          <div class="model-data">{{data.content}}</div>
          <div v-if="data.btnShow" class="sys-btn-02" @click="modelBtnClickHandler">{{data.btnText}}</div>
          <div
            v-if="data.labelBtnShow"
            class="label-btn"
            @click="labelBtnClickHandler"
          >{{data.labelBtnText}}</div>
          <div class="model-bottom-line"></div>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script>
import Vue from "vue";
import { Popup } from "vant";
Vue.use(Popup);

export default {
  props: ["value"],
  data() {
    return {
      data: this.value
    };
  },
  methods: {
    modelCloseHandler() {
      this.$emit("close");
      this.data.show = false;
    },
    modelBtnClickHandler() {
      this.data.show = false;
      typeof this.data.confirmHandler == "function" &&
        this.data.confirmHandler();
    },
    labelBtnClickHandler() {
      this.data.show = false;
      typeof this.data.labelBtnHandler == "function" &&
        this.data.labelBtnHandler();
    }
  },
  created() {
    this.data = this.data
      ? this.data
      : {
          title: "",
          description: "",
          show: false,
          index: "default",
          btnShow: false,
          btnText: "",
          confirmHandler: null,
          labelBtnShow: false,
          labelBtnText: "",
          labelBtnHandler: null
        };
  }
};
</script>

<style lang="less" scoped>
.van-popup {
  background-color: transparent;
  top: 40%;
}
.model {
  display: flex;
  width: 480px;
  min-height: 576px;
  flex-direction: column;
  align-items: flex-end;
}

.model-head-line {
  height: 50px;
  background-color: transparent;
}
.model-bottom-line {
  height: 50px;
  background-color: transparent;
}

.model-close {
  width: 64px;
  height: 116px;
  background: url(../../assets/imgs/model-close.png);
  background-size: 100%;
}

.model-content {
  width: 480px;
  min-height: 460px;
  height: auto;
  background: url(../../assets/imgs/model-bottom.png) no-repeat;
  background-size: 100% auto;
  background-position: bottom;
  border-radius: 30px;
  background-color: #fff;
}

.model-title {
  font-size: 45px;
  font-weight: bold;
}

.model-data {
  font-size: 30px;
  margin: 50px auto 70px auto;
  width: 400px;
  text-align: center;
}

.sys-btn-02 {
  width: 300px;
  font-size: 30px;
  line-height: 80px;
}

.label-btn {
  font-size: 26px;
  text-align: center;
}
</style>