<template>
  <div>
    <!-- 弹框确认组件 -->
    <uni-popup ref="popupDialog" type="dialog" :mask-click="false">
      <view class="popup-content">
        <view class="popup-title">{{ title }}</view>
        <uni-row :gutter="24" style="margin: 10px 0">
          <uni-col :span="8">
            <div>{{ titleTip }}</div>
          </uni-col>
          <uni-col :span="16">
            <div>
              <radio-group @change="radioChange">
                <radio value="2" :checked="radioValue == 2" style="margin-right: 8px">通过</radio>
                <radio value="3" :checked="radioValue == 3">不通过</radio>
              </radio-group>
            </div>
          </uni-col>
        </uni-row>
        <uni-easyinput type="textarea" v-model="remark" placeholder="请输入原因" autoHeight />
        <view class="popup-btns">
          <view class="btn cancel" v-if="showClose" @click="closePopup">{{ leftBtn }}</view>
          <view class="btn confirm" :class="{ disabled: countdown > 0 }" @click="confirm">
            <span>{{ rightBtn }}</span>
            {{ countdown > 0 ? '(' + countdown + ')' : '' }}
          </view>
        </view>
      </view>
    </uni-popup>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  title: { type: String, default: '提示' },
  titleTip: { type: String, default: '结算审批' },
  content: { type: String, default: '是否确定提交？' },
  showClose: { type: Boolean, default: true },
  leftBtn: { type: String, default: '取 消' },
  rightBtn: { type: String, default: '确 定' },
  showRemark: { type: Boolean, default: false },
})

const emit = defineEmits(['confirm'])

const popupDialog = ref(null)
const remark = ref('')
const timer = ref(null)
const countdown = ref(0)
const radioValue = ref('2')

let resolvePromise = null // 用于存储 Promise 的 resolve

// 打开弹框，返回 Promise
const openPopup = () => {
  return new Promise((resolve) => {
    resolvePromise = resolve // 保存 resolve
    popupDialog.value.open()
    remark.value = '' // 每次打开清空

    // 启动倒计时
    if (timer.value) clearInterval(timer.value)
    countdown.value = 3
    timer.value = setInterval(() => {
      if (countdown.value > 0) {
        countdown.value--
      } else {
        clearInterval(timer.value)
        timer.value = null
        countdown.value = 0
      }
    }, 1000)
  })
}

const radioChange = (e) => {
  console.log('🚀 ~ radioChange ~ e:', e.detail.value, radioValue.value)
  radioValue.value = e.detail.value
}

// 关闭弹框
const closePopup = () => {
  popupDialog.value.close()
  if (resolvePromise) resolvePromise({ data: false })
  resolvePromise = null
}

// 点击确认
const confirm = () => {
  if (countdown.value > 0) return
  popupDialog.value.close()
  const params = {
    data: true,
    radioValue: radioValue.value,
    remark: remark.value,
  }
  if (resolvePromise) resolvePromise(params)
  resolvePromise = null
}

// 暴露方法
defineExpose({ openPopup })
</script>

<style lang="scss" scoped>
.popup-content {
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  width: 80vw;
}
.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}
.popup-message {
  font-size: 36rpx;
  font-weight: bold;
  margin: 30px 0;
  text-align: center;
}
.popup-btns {
  display: flex;
  border-top: 1px solid #eee;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
}
.btn {
  margin-top: 3px;
  flex: 1;
  font-size: 34rpx;
}
.cancel {
  color: #666;
  border-right: 1px solid #eee;
}
.confirm {
  color: #007aff;
  font-weight: 500;
  &.disabled {
    color: #999;
  }
}
</style>
