<template>
  <div class="Modal">
    <div class="content">
      <div v-if="!option.showIcon" :class="option.changeImportant?'modal_desc':'modal_title'">
        {{title_text}}
      </div>
      <div v-else>
        <img class="icon" src="../assets/ic_fri.png" alt="">
      </div>
      <div :class="option.changeImportant?'modal_title':'modal_desc'" :style="option.showIcon?'margin-top:.2rem':''">
        {{title_desc}}
      </div>
      <div v-if="option.subDesc" :class="option.changeImportant?'modal_title':'modal_desc'" style="margin-top: .1rem">
        {{option.subDesc}}
      </div>
      <div class="btn_container">
        <div class="cancel_btn" @click="closeModal" v-if="option.showCancel">
          取消
        </div>
        <div class="confirm_btn" @click="confirmModal">
          {{option.btnText?option.btnText:'确定'}}
        </div>
      </div>
    </div>

  </div>
</template>

<style scoped>
  .icon {
    width: 1.07rem;
    margin-top: .4rem;
  }

  div.Modal {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.7);
    border: 1px solid transparent;
    text-align: center;
  }

  div.Modal .content {
    width: 5.8rem;
    height: 3.7rem;
    background: #ffffff;
    border-radius: 0.2rem;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border: 1px solid transparent;
  }

  div.Modal .content .modal_title {
    font-size: 0.36rem;
    color: #282828;
    margin-top: 0.6rem;
    font-weight: bold;
  }

  div.Modal .content .modal_desc {
    margin-top: 0.6rem;
    font-size: 0.3rem;
    padding: 0 0.5rem;
    color: #8a8a8a;
    line-height: 1.2;
  }

  .btn_container {
    width: 100%;
    display: flex;
    position: absolute;
    bottom: 0;
  }

  div.Modal .content .cancel_btn {
    flex: 1;
    border-top: 1px solid #e8e8e8;
    border-right: 1px solid #e8e8e8;
    padding: 0.36rem 0;
    color: rgba(136, 136, 136, 1);
    font-weight: bold;
    /*height: 1.02rem;*/
    font-size: 0.3rem;
  }

  div.Modal .content .confirm_btn {
    flex: 1;
    border-top: 1px solid #e8e8e8;
    padding: 0.36rem 0;
    color: rgba(26, 211, 212, 1);
    font-weight: bold;
    /*height: 1.02rem;*/
    font-size: 0.3rem;
  }
</style>

<script>
  export default {
    name: "Modal",
    components: {},
    data() {
      return {};
    },
    methods: {
      // 关闭弹窗
      confirmModal() {
        this.$emit("confirmModal", this.option.scb)
      },
      closeModal() {
        this.$emit("close", true);
      },
      // 邀请好友
      inviteFriend() {
      },
      // 立即报名
      joinModal() {
      }
    },
    props: ["title", "desc", "option"],
    computed: {
      title_text() {
        return this.title;
      },
      title_desc() {
        return this.desc;
      }
    }
  };
</script>
