<template>
  <!-- 通知弹窗 -->
  <!-- <div class="kDialogIdx">
    <van-dialog
      closeOnClickOverlay
      v-model:show="dialogShow"
      :title="dialogTitle"
      :showConfirmButton="false"
      :showCancelButton="false"
    >
      <div class="operCheckBox">
        <div class="operCheckCon">
          <div class="l-flex-center">
            {{ dialogContent }}
          </div>
          <slot name="content"></slot>
          <div :class="(cancelBtnTxt&&confirmBtnTxt)?'flex-row justify-between':'l-flex-center'" class="block6">
            <div v-if="cancelBtnTxt" class="mod7 flex-col" @click="cancelClk">
              <span class="info5">{{ cancelBtnTxt }}</span>
            </div>
            <div v-if="confirmBtnTxt" class="mod8 flex-col" @click="confirmClk">
              <span class="info6">{{ confirmBtnTxt }}</span>
            </div>
          </div>
        </div>
      </div>
    </van-dialog>
  </div> -->
  <div class="k-dialog">
    <van-dialog close-on-click-overlay v-model:show="dialogShow" :title="dialogTitle" :show-confirm-button="false"
      :show-cancel-button="false">
      <div class="dialog-content">
        <div class="content-main">
          <div class="text-content">{{ dialogContent }}</div>
          <slot name="content"></slot>

          <div class="action-buttons" :class="{ 'space-between': cancelBtnTxt && confirmBtnTxt }">
            <button v-if="cancelBtnTxt" class="btn cancel-btn" @click="cancelClk">
              {{ cancelBtnTxt }}
            </button>
            <button v-if="confirmBtnTxt" class="btn confirm-btn" @click="confirmClk">
              {{ confirmBtnTxt }}
            </button>
          </div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script>
/**
 * kDialog 公用弹窗组件
 * @description 本组件主要是所有通用弹窗。
 *
 */
import { ref } from "vue";
export default {
  props: {
    // 弹窗标题
    dialogTitle: {
      type: String,
      default: "",
    },
    // 弹窗内容
    dialogContent: {
      type: String,
      default: "",
    },
    // 取消按钮的文字
    cancelBtnTxt: {
      type: String,
      default: "",
    },
    // 确定按钮的文字
    confirmBtnTxt: {
      type: String,
      default: "",
    },
    // 是否点击取消就会关闭弹窗
    isCloseForCancel: {
      type: Boolean,
      default: true,
    },
    // 是否点击确定就会关闭弹窗
    isCloseForConfirm: {
      type: Boolean,
      default: true,
    },
  },
  setup(props, ctx) {
    const dialogShow = ref(false);
    // 打开弹窗
    const openDialog = () => {
      dialogShow.value = true;
    };
    // 关闭弹窗
    const closeDialog = () => {
      dialogShow.value = false;
    };
    // 点击左侧按钮
    const cancelClk = () => {
      if (props.isCloseForCancel) {
        closeDialog();
      }
      ctx.emit("cancelclk", "左侧按钮111");
    };
    // 点击右侧按钮
    const confirmClk = () => {
      if (props.isCloseForConfirm) {
        closeDialog();
      }
      ctx.emit("confirmclk", "右侧按钮222");
    };

    return {
      dialogShow,
      openDialog,
      cancelClk,
      confirmClk,
      closeDialog,
    };
  },
};
</script>

<style lang="less" scoped>
@import "@/common/style/common.less";
// @import "./index.less";
.k-dialog {
  --primary-color: #4d6add;
  --text-color-light: #ffffff;
  --border-color: #d7d7e2;

  .dialog-content {
    padding: 0 10px;
    padding-top: 10px;

    .content-main {
      padding-top: 10px;
      border-top: 1px solid var(--border-color);

      .text-content {
        color: #404d74;
        font-size: 13px;
        text-align: center;
        line-height: 1.5;
        padding: 0 1rem;
      }

      .action-buttons {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 15px;
        margin: 20px 35px;

        &.space-between {
          justify-content: space-between;
        }

        .btn {
          border-radius: 20px;
          padding: 8px 20px;
          font-size: 13px;
          font-family: PingFangSC-Medium;
          border: 1px solid transparent;
          cursor: pointer;
          transition: opacity 0.2s;
          min-width: 80px;
          text-align: center;

          &:active {
            opacity: 0.8;
          }
        }

        .cancel-btn {
          border-color: var(--primary-color);
          color: var(--primary-color);
          background: transparent;
        }

        .confirm-btn {
          background-color: var(--primary-color);
          color: var(--text-color-light);
        }
      }
    }
  }
}
</style>