<template>
  <view class="uni-popup-dialog" :class="{ 'uni-dialog-stay': stayStyle }">
    <view v-if="showTitle" class="uni-dialog-title">
      <text class="uni-dialog-title-text" :class="['uni-popup__' + dialogType]">{{ title }}</text>
    </view>
    <view class="uni-dialog-content">
      <!-- 因为支付宝不支持通过slot 传递组件时，slot之内有内容 -->
      <template v-if="content.length">
        <slot name="default">
          <text
            v-if="mode === 'base'"
            class="uni-dialog-content-text"
            :class="{ 'uni-dialog-tip': !showTitle }"
            >{{ content }}</text
          >
          <input
            v-else
            v-model="val"
            class="uni-dialog-input"
            type="text"
            :placeholder="placeholder"
            :focus="focus"
          />
        </slot>
      </template>
      <template v-else>
        <slot />
      </template>
    </view>

    <view class="uni-dialog-button-group">
      <button v-if="!hideCancelBtn" class="uni-dialog-button cancel" @click="close">
        <text
          :class="['uni-dialog-button-text', { 'uni-button-color': warningBtn === 'cancel' }]"
          >{{ cancelTxt }}</text
        >
      </button>
      <!-- #ifdef MP-WEIXIN -->
      <button
        v-if="!hideConfirmBtn"
        class="uni-dialog-button confirm uni-border-left"
        :open-type="openType"
        :app-parameter="appParameter"
        @click="onOk"
        @launchapp="launchappEvent"
        @error="errorEvent"
      >
        <text
          :class="['uni-dialog-button-text', { 'uni-button-color': warningBtn === 'confirm' }]"
          >{{ confirmTxt }}</text
        >
      </button>
      <!-- #endif -->
      <!-- #ifndef MP-WEIXIN -->
      <button
        v-if="!hideConfirmBtn"
        class="uni-dialog-button confirm uni-border-left"
        @click="onOk"
      >
        <text
          :class="['uni-dialog-button-text', { 'uni-button-color': warningBtn === 'confirm' }]"
          >{{ confirmTxt }}</text
        >
      </button>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
/**
 * PopUp 弹出层-对话框样式
 * @description 弹出层-对话框样式
 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
 * @property {String} value input 模式下的默认值
 * @property {String} placeholder input 模式下输入提示
 * @property {String} type = [success|warning|info|error] 主题样式
 *  @value success 成功
 * 	@value warning 提示
 * 	@value info 消息
 * 	@value error 错误
 * @property {String} mode = [base|input] 模式、
 * 	@value base 基础对话框
 * 	@value input 可输入对话框
 * @property {String} content 对话框内容
 * @event {Function} confirm 点击确认按钮触发
 * @event {Function} close 点击取消按钮触发
 */

export default {
  name: "UniPopupDialog",
  inject: ["popup"],
  props: {
    value: {
      type: [String, Number],
      default: ""
    },
    placeholder: {
      type: [String, Number],
      default: "请输入内容"
    },
    /**
     * 对话框主题 success/warning/info/error	  默认 success
     */
    type: {
      type: String,
      default: "error"
    },
    warningBtn: {
      type: String,
      default: "confirm"
    },
    hideCancelBtn: Boolean,
    hideConfirmBtn: Boolean,
    cancelTxt: {
      type: String,
      default: "取消"
    },
    confirmTxt: {
      type: String,
      default: "确定"
    },
    stayStyle: Boolean,
    /**
     * 对话框模式 base/input
     */
    mode: {
      type: String,
      default: "base"
    },
    /**
     * 对话框标题
     */
    title: {
      type: String,
      default: "提示"
    },
    showTitle: {
      type: Boolean,
      default: true
    },
    /**
     * 对话框内容
     */
    content: {
      type: String,
      default: ""
    },
    mkclick: {
      type: Boolean,
      default: false
    },
    openType: {
      type: String,
      default: ""
    },
    appParams: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      dialogType: "error",
      focus: false,
      val: ""
    };
  },
  computed: {
    appParameter() {
      const appParams = this.appParams;
      // console.log("============>appParams", appParams);
      return Object.keys(appParams).length ? JSON.stringify(appParams) : "";
    }
  },
  watch: {
    type(val) {
      this.dialogType = val;
    },
    mode(val) {
      if (val === "input") {
        this.dialogType = "info";
      }
    },
    value(val) {
      this.val = val;
    }
  },
  created() {
    // 对话框遮罩不可点击
    this.popup.mkclick = this.mkclick;
    if (this.mode === "input") {
      this.dialogType = "info";
      this.val = this.value;
    } else {
      this.dialogType = this.type;
    }
  },
  mounted() {
    this.focus = true;
  },
  methods: {
    launchappEvent(options) {
      console.log(`luachApp-------${JSON.stringify(options || {})}`);
      this.$emit("luachapp-suceess");
    },
    errorEvent(error) {
      console.log(`luachApp error-------`, error?.detail?.errMs);
    },
    /**
     * 点击确认按钮
     */
    onOk() {
      this.$emit("confirm", this.val);
      this.mode === "input" ? this.val : "";
      this.popup.close();
    },
    /**
     * 点击取消按钮
     */
    close() {
      this.$emit("cancel");
      this.popup.close();
    }
  }
};
</script>

<style lang="scss" scoped>
.uni-popup-dialog {
  width: 622rpx;
  background-color: #fff;
  padding-top: 48rpx;
}

.uni-dialog-title {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  justify-content: center;
  padding-bottom: 16rpx;
  color: #333333 !important;
}

.uni-dialog-title-text {
  font-size: 32rpx;
  line-height: 44rpx;
  font-weight: 600;
  color: #333 !important;
}

.uni-dialog-content {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0 40rpx 48rpx;
}

.uni-dialog-content-text {
  font-size: 28rpx;
  line-height: 40rpx;
  color: #999;
  text-align: center;
}

.uni-dialog-button-group {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  border-top-color: #ebedf0;
  border-top-style: solid;
  border-top-width: 0.5rpx;
}

.uni-dialog-button {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */

  flex: 1;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 96rpx;
  background-color: transparent;
  border: none;
  border-radius: 0;
}

.uni-border-left {
  border-left-color: #ebedf0;
  border-left-style: solid;
  border-left-width: 0.5rpx;
}

.uni-dialog-button-text {
  font-size: 32rpx;
}

.uni-button-color {
  color: $uni-color-primary;
}

.uni-dialog-input {
  flex: 1;
  font-size: 14px;
}

.uni-popup__success {
  color: $uni-color-success;
}

.uni-popup__warn {
  color: $uni-color-warning;
}

.uni-popup__error {
  color: $uni-color-error;
}

.uni-popup__info {
  color: #909399;
}
.uni-dialog-tip {
  font-size: 32rpx;
  line-height: 44rpx;
  color: #333;
}
.uni-dialog-stay {
  .uni-dialog {
    &-title-text {
      color: #333;
    }
    &-content-text {
      color: #333;
      text-align: left;
    }
    &-button {
      flex: none;
      &-group {
        flex-direction: column-reverse;
        border-width: 0;
        padding: 0 48rpx 44rpx;
      }
      &.cancel {
        padding-top: 36rpx;
        .uni-dialog-button-text {
          font-size: 28rpx;
          color: #ec1500;
          line-height: 40rpx;
        }
      }
      &.confirm {
        background: linear-gradient(270deg, #ff5d00 0%, #ff1900 100%);
        border-left-width: 0;
        height: 72rpx;
        border-radius: 36rpx;
        .uni-dialog-button-text {
          color: #fff;
          font-size: 28rpx;
          line-height: 40rpx;
        }
      }
    }
  }
}
</style>
