<template>
  <div class="modal-wrapper" v-show="modalShow">
    <div
      class="ui-modal"
      :style="{
        width: width + 'px',
        top: position === 'center' ? '50%' : '50px',
        marginLeft: -width / 2 + 'px',
        transform:
          position === 'center' ? 'translateY(-50%)' : 'translateY(50px)',
      }"
    >
      <header class="header">
        <h1>{{ headerText }}</h1>
        <a href="javascript:;" @click="cancel"> &times;</a>
      </header>
      <article class="content">
        <p>{{ contentText }}</p>
      </article>
      <div class="but-group" v-if="butGroupShow">
        <button class="but but-confirm" @click="confirm">
          {{ confirmText }}
        </button>
        <button class="but but-close" @click="cancel">
          {{ cancelText }}
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs, watch } from "vue";
export default {
  name: "Modal",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    width: {
      type: Number,
      default: 300,
    },
    headerText: String,
    contentText: String,
    position: {
      type: String,
      default: "center",
    },
    butGroupShow: {
      type: Boolean,
      default: false,
    },
    confirmText: {
      type: String,
      default: "是",
    },
    cancelText: {
      type: String,
      default: "否",
    },
  },
  setup(props, ctx) {
    const state = reactive({
      modalShow: props.show,
    });
    /*
     *确认回调
     */
    const confirm = () => {
      state.modalShow = false;
      ctx.emit("confirm");
    };
    /*
     *取消回调
     */
    const cancel = () => {
      state.modalShow = false;
      ctx.emit("close");
    };

    /*
     *监听props变化
     */
    watch(
      () => {
        return props.show;
      },
      (val) => {
        state.modalShow = val;
      }
    );

    return {
      confirm,
      cancel,
      ...toRefs(state),
    };
  },
};
</script>

<style lang="scss" scoped>
.modal-wrapper {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 999;
  .ui-modal {
    position: fixed;
    left: 50%;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 1px 2px 3px #333;
    a {
      text-decoration: none;
      outline: none;
      color: #333;
    }
    h1,
    p {
      font-weight: normal;
      margin: 0;
    }
    button {
      outline: none;
      border: none;
    }
    .header {
      height: 44px;
      padding: 0 15px;
      box-sizing: border-box;

      h1 {
        display: inline-block;
        font-size: 18px;
        line-height: 44px;
      }
      a {
        float: right;
        font-size: 20px;
        margin-top: 4px;
      }
    }
    .content {
      padding: 15px;
      box-sizing: border-box;
      word-break: break-all;
    }
    .but-group {
      height: 30px;
      padding: 10px 15px;
      .but {
        float: right;
        min-width: 80px;
        height: 30px;
        border-radius: 3px;
        cursor: pointer;
      }
      .but-confirm {
        margin-left: 15px;
        background-color: #f9d81a;
        color: #fff;
      }
      .but-close {
        background-color: #ddd;
        color: #666;
      }
    }
  }
}
</style>