<template>
  <view class="update-mask" v-if="visible" @click.stop>
    <view class="update-dialog" @click.stop>
      <image class="update-icon" src="/static/images/ic_update.png" mode="aspectFit" />
      <text class="update-title">有新版本请更新</text>
      <view class="update-btn" @click="handleUpdate">
        <text class="update-btn-text">去更新</text>
      </view>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  visible: { type: Boolean, default: false },
  downloadUrl: { type: String, default: '' }
})

function handleUpdate() {
  if (!props.downloadUrl) return
  // #ifdef APP-PLUS
  plus.runtime.openURL(props.downloadUrl)
  // #endif
  // #ifdef H5
  window.open(props.downloadUrl)
  // #endif
}
</script>

<style scoped>
.update-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.update-dialog {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 560rpx;
  padding: 60rpx 40rpx;
  background-color: #fff;
  border-radius: 24rpx;
}

.update-icon {
  width: 160rpx;
  height: 160rpx;
  margin-bottom: 40rpx;
}

.update-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 48rpx;
}

.update-btn {
  width: 400rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #1A73EC;
  border-radius: 40rpx;
}

.update-btn-text {
  font-size: 30rpx;
  color: #fff;
  font-weight: 500;
}
</style>
