<template>
  <div
    class="fixed mask-bg-black items-center justify-center top0 h100vh left0 w100vw flex"
    v-show="visible"
  >
    <div class="w450 bg-white pr30 pl30 pt30 pb30">
      <div class="flex items-center">
        <img class="w30 h24" src="@/assets/img/driverExam/analy_icon.png" />
        <span class="font16 font-bold text-black ml10">{{ title }}</span>
      </div>
      <div class="font14 text-black text-left mt20">{{ content }}</div>
      <div class="w280 mr-auto ml-auto flex justify-between">
        <div
          @click="emitConfirm"
          class="font14 w110 lh40 bg-primary-yellow mt30 mr-auto ml-auto round4 cursor-pointer"
        >
          确定
        </div>
        <div
          @click="hideDialog"
          class="font14 w110 lh40 bg-primary-yellow mt30 mr-auto ml-auto round4 cursor-pointer"
        >
          取消
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  setup(props, context) {
    return {
      hideDialog: () => {
        context.emit("update:visible", false);
      },
      emitConfirm:()=>{
         context.emit("confirm", false);
      }

    };
  },
  props: {
    title: {
      type: String,
      default: "提示",
    },
    content: {
      type: String,
      default: "提示",
    },
    visible: {
      type: Boolean,
      default: false,
    },
  },
});
</script>

<style scoped>
.mask-bg-black {
  background: rgba(0, 0, 0, 0.45);
}
.bg-primary-yellow {
  background: #f9de5b;
}
.w100vw {
  width: 100vw;
}
</style>