<template>
  <view class="popup-mask" v-if="visible" @click.self="close('cancel')">
    <view class="popup-container">
      <!-- <view class="popup-title">请输入账号和密码</view>
      <input class="filter_input" v-model="username" placeholder="账号" />
      <input class="filter_input" v-model="password" type="password" placeholder="密码" /> -->
      <view class="setup-item">
        <view class="filter_label">账号</view>
        <input type="text" class="setup-input" v-model="username">
      </view>
      <view class="setup-item">
        <view class="filter_label">密码</view>
        <input type="password" class="setup-input" v-model="password">
      </view>
      <view class="dialog-buttons">
        <!-- <button @click="close('cancel')">取消</button>
        <button @click="confirm">确定</button> -->
        <button class="cancel-btn" @click="close('cancel')">取消</button>
				<button class="confirm-btn" type="primary" @click="confirm">复核确认</button>		
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      username: '',
      password: '',
      resolvePromise: null,
      rejectPromise: null
    };
  },
  methods: {
    // 显示弹窗，返回 Promise
    show() {
      this.visible = true;
      this.username = '';
      this.password = '';
      return new Promise((resolve, reject) => {
        this.resolvePromise = resolve;
        this.rejectPromise = reject;
      });
    },
    confirm() {
      if (this.username && this.password) {
        this.resolvePromise({ username: this.username, password: this.password });
        this.close();
      } else {
        uni.showToast({ title: '请输入账号和密码', icon: 'none' });
      }
    },
    close(type) {
      this.visible = false;
      if (type === 'cancel') {
        this.rejectPromise(new Error('用户取消'));
      }
      this.resolvePromise = null;
      this.rejectPromise = null;
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '../common/style/mixin.styl';
.setup-item
	width 100%
	margin-bottom 18rpx
.setup-label
	_font(24rpx,40rpx,#000)
.setup-input
	_wh(100%, 80rpx)
	background #fff
	_font(28rpx,80rpx,#323232)
	padding 0 28rpx
	border 2px solid #e9ecf3
	border-radius 12rpx
.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.popup-container {
  width: 80%;
  background-color: #fff;
  border-radius: 10px;
  padding: 10px 20px 0px 20px;
}
.popup-title {
  text-align: center;
  font-size: 18px;
  margin-bottom: 20px;
}
.popup-input {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 15px;
}
.popup-buttons {
  display: flex;
  justify-content: space-between;
}
/* 按钮区域 */
.dialog-buttons {
  display: flex;
  border-top: 1px solid #f0f0f0;
}

.dialog-buttons button {
  flex: 1;
  border-radius: 0;
  height: 48px;
  line-height: 48px;
  font-size: 16px;
  background: transparent;
  border: none;
  margin: 0;
}
.cancel-btn {
  color: #666;
  border-right: 1px solid #f0f0f0;
}

.cancel-btn::after {
  border: none;
}

.confirm-btn {
  color: #007aff;
  font-weight: 500;
}

.confirm-btn::after {
  border: none;
}

/* 分隔线样式 */
.button-divider {
  width: 1px;
  height: 24px;
  background-color: #e5e5e5;
  flex-shrink: 0;
}
</style>