<template>
  <div class="default-message">
    <div class="default-message-content">
      <div class="default-message-title">{{ title }}</div>
      <div class="default-message-value" v-html="content"></div>
      <div v-if="cancleText">
        <div class="default-message-btns">
          <div class="default-message-cancle default-message-btn"
               :style="setCancleColor()"
               @click.prevent.stop="handleCancel">
            {{ cancleText }}
          </div>
          <div class="default-message-submit default-message-btn"
               :style="setOkColor()" @click.prevent.stop="handleOk">
            {{ okText }}
          </div>
        </div>
      </div>
      <div v-else style="width:50%;margin:0 auto;">
        <div class="default-message-btns">
          <div class="default-message-submit default-message-btn"
               :style="setOkColor()" @click.prevent.stop="handleOk">
            {{ okText }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {defineComponent} from "vue";

export default defineComponent({
  name: "Message",
  props: {
    title: {
      type: String,
      default: "提示",
    },
    content: {
      type: String,
      default: "",
      required: true,
    },
    okText: {
      type: String,
      default: "确定",
    },
    okTextColor: {
      type: String,
      default: "#fff",
    },
    cancleText: {
      type: String,
      default: "",
    },
    cancleTextColor: {
      type: String,
      default: "#fff",
    },
    success: {
      type: Function,
    },
    fail: {
      type: Function,
    },
  },
  setup(props) {
    const setOkColor = () => {
      return `color: ${props.okTextColor}`;
    };
    const setCancleColor = () => {
      return `color: ${props.cancleTextColor}`;
    };

    function removeModal() {
      const modelDom = document.body.querySelector(
          `.__default__container__message__`
      );
      if (modelDom) {
        document.body.removeChild(modelDom);
      }
    }

    const handleCancel = () => {
      removeModal();
      props.fail && props.fail();
    };
    const handleOk = () => {
      removeModal();
      props.success && props.success();
    };
    return {
      setOkColor,
      setCancleColor,

      handleOk,
      handleCancel,
    };
  },
});
</script>
<style lang="scss" scoped>

.default-message {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  background: rgba($color: #000000, $alpha: 0.3);

  .default-message-title {
    text-align: left;
    margin: 15px;
    font-size: 1.5em;
    font-weight: bold;
    color: #333;
  }

  .default-message-content {
    width: 35%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    background-color: #fff;
    transition: all 0.2s ease-in;
    color: rgb(0, 0, 0);
    font-size: 1.25em;
    border: 1px solid rgb(0, 0, 0);
  }

  .default-message-value {
    margin: 15px;
    min-height: 36px;
    position: relative;
    color: rgb(0, 0, 0);
    text-align: left;
    line-height: 36px;
  }

  .default-message-btns {
    display: flex;
    height: 66px;
    position: relative;

    .default-message-btn {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.25em;
      padding: 15px;
      height: 38px;
      width: 80px;
    }

    .default-message-cancle {
      position: relative;
      color: #fff;
      text-align: center;
      border: none;
      background-color: #C93756;
      padding: 5px;
      margin: 10px;
      border-radius: 20px;
    }

    .default-message-submit {
      position: relative;
      color: #fff;
      text-align: center;
      border: none;
      background-color: #000;
      padding: 5px;
      margin: 10px;
      border-radius: 20px;
    }
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}
</style>
