<!-- yl-uni-components library v1.0.3 -->
<!-- github: https://github.com/YolineWu/yl-components -->
<template>
  <view
    v-if="show"
    :class="['c-yl-modal', { 'c-yl-modal--center': center }]"
    @click="clickMask"
  >
    <!-- #ifdef MP -->
    <slot :data="stateData" />
    <view class="c-yl-modal__wrap" v-if="!$slots['default']">
      <slot name="title" :title="title" />
      <view class="c-yl-modal__title" v-if="!$slots['title'] && title">
        {{ title }}
      </view>
      <slot name="content" :content="content" />
      <view class="c-yl-modal__main" v-if="!$slots['content']">
        {{ content }}
      </view>
      <slot name="desc" :desc="desc" />
      <view class="c-yl-modal__desc" v-if="!$slots['desc'] && desc">
        {{ desc }}
      </view>
      <slot
        name="action-bar"
        :cancelText="cancelText"
        :confirmText="confirmText"
      />
      <view class="c-yl-modal__action-bar" v-if="!$slots['action-bar']">
        <view
          class="c-yl-modal__btn-wrap c-yl-modal__btn-wrap--flex-1 c-yl-modal__btn-wrap--cancel"
        >
          <slot name="cancel" :cancelText="cancelText" />
          <button v-if="!$slots['cancel']" @click="clickCancel">
            {{ cancelText }}
          </button>
        </view>
        <view
          class="c-yl-modal__btn-wrap c-yl-modal__btn-wrap--flex-1 c-yl-modal__btn-wrap--confirm"
        >
          <slot name="confirm" :confirmText="confirmText" />
          <button v-if="!$slots['confirm']" @click="clickConfirm">
            {{ confirmText }}
          </button>
        </view>
      </view>
    </view>
    <!-- #endif -->
    <!-- #ifndef MP -->
    <slot :data="stateData">
      <view class="c-yl-modal__wrap">
        <slot name="title" :title="title">
          <view class="c-yl-modal__title" v-if="title">
            {{ title }}
          </view>
        </slot>
        <slot name="content" :content="content">
          <view class="c-yl-modal__main">
            {{ content }}
          </view>
        </slot>
        <slot name="desc" :desc="desc">
          <view class="c-yl-modal__desc" v-if="desc">
            {{ desc }}
          </view>
        </slot>
        <slot
          name="action-bar"
          :cancelText="cancelText"
          :confirmText="confirmText"
        >
          <view class="c-yl-modal__action-bar">
            <view
              class="c-yl-modal__btn-wrap c-yl-modal__btn-wrap--flex-1 c-yl-modal__btn-wrap--cancel"
            >
              <slot name="cancel" :cancelText="cancelText">
                <button @click="clickCancel">
                  {{ cancelText }}
                </button>
              </slot>
            </view>
            <view
              class="c-yl-modal__btn-wrap c-yl-modal__btn-wrap--flex-1 c-yl-modal__btn-wrap--confirm"
            >
              <slot name="confirm" :confirmText="confirmText">
                <button @click="clickConfirm">
                  {{ confirmText }}
                </button>
              </slot>
            </view>
          </view>
        </slot>
      </view>
    </slot>
    <!-- #endif -->
  </view>
</template>
<script  src="../../lib/es/components/yl-modal/yl-modal.mjs" />
<style scoped>
@charset "UTF-8";
/**
 * 可清除原生button, input[type="submit"], input[type="reset"]样式
 */
/** 通过 `::before` 改变 `:hover` 和 `:active` 的样式*/
.c-yl-modal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--yl-modal-z-index);
  background: var(--yl-modal-mask-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.c-yl-modal--center {
  justify-content: center;
}
.c-yl-modal:not(.c-yl-modal--center) > .c-yl-modal__wrap {
  margin-top: var(--yl-modal-margin-top);
}
.c-yl-modal__wrap {
  padding: var(--yl-modal-padding);
  background: var(--yl-modal-bg);
  width: var(--yl-modal-width);
  border-radius: var(--yl-modal-border-radius);
  display: flex;
  flex-direction: column;
}
.c-yl-modal__title {
  font-size: var(--yl-modal-title-size);
  font-weight: bold;
  text-align: center;
}
.c-yl-modal__main {
  margin-top: var(--yl-modal-space-title-main);
}
.c-yl-modal__desc {
  margin-top: var(--yl-modal-space-main-desc);
  color: var(--yl-modal-desc-color);
}
.c-yl-modal__action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--yl-modal-action-bar-gap);
  padding: var(--yl-modal-action-bar-padding);
  margin-top: var(--yl-modal-space-desc-action-bar);
}
.c-yl-modal__btn-wrap {
  width: 100%;
  height: 100%;
}
.c-yl-modal__btn-wrap button {
  -webkit-tap-highlight-color: inherit;
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  line-height: inherit;
  font: inherit;
  font-size: inherit;
  margin: 0;
  cursor: pointer;
  outline: inherit;
  position: relative;
  cursor: pointer;
  cursor: pointer;
  box-shadow: var(--yl-elevation-1);
  cursor: pointer;
  text-align: center;
  padding: var(--yl-modal-btn-padding);
}
.c-yl-modal__btn-wrap button::after {
  border: none;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
  background: none;
}
.c-yl-modal__btn-wrap button:hover::before, .c-yl-modal__btn-wrap button:active::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-color: #999;
  color: #999;
}
.c-yl-modal__btn-wrap button:hover::before {
  opacity: 0.3;
}
.c-yl-modal__btn-wrap button:active::before {
  opacity: 0.2;
}
.c-yl-modal__btn-wrap button:hover {
  box-shadow: var(--yl-elevation-4);
}
.c-yl-modal__btn-wrap button:active {
  box-shadow: var(--yl-elevation-1);
}
.c-yl-modal__btn-wrap--flex-1 {
  flex: 1;
}
.c-yl-modal__btn-wrap--cancel button {
  background: var(--yl-modal-cancel-bg-color);
  color: var(--yl-modal-cancel-text-color);
  border: var(--yl-modal-cancel-border);
}
.c-yl-modal__btn-wrap--confirm button {
  background: var(--yl-modal-confirm-bg-color);
  color: var(--yl-modal-confirm-text-color);
  border: var(--yl-modal-confirm-border);
}
</style>
