<!--
  重置密码弹窗
  @author pangu
-->
<template>
  <el-dialog
    v-model="visible"
    title="重置密码成功"
    width="400px"
    :close-on-click-modal="false"
  >
    <div class="reset-pwd-content">
      <el-icon class="success-icon" color="#67C23A" size="48">
        <CircleCheckFilled />
      </el-icon>
      <p class="tip-text">密码已重置，请复制新密码发送给用户</p>
      <el-input
        v-model="newPassword"
        readonly
        class="pwd-input"
      >
        <template #append>
          <el-button :icon="DocumentCopy" @click="handleCopy">复制</el-button>
        </template>
      </el-input>
    </div>
    <template #footer>
      <el-button type="primary" @click="visible = false">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { CircleCheckFilled, DocumentCopy } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { computed } from 'vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  newPassword: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:modelValue'])

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

const newPassword = computed(() => props.newPassword)

/**
 * 复制密码
 */
const handleCopy = async () => {
  try {
    await navigator.clipboard.writeText(props.newPassword)
    ElMessage.success('复制成功')
  } catch (e) {
    // 降级方案
    const textarea = document.createElement('textarea')
    textarea.value = props.newPassword
    document.body.appendChild(textarea)
    textarea.select()
    document.execCommand('copy')
    document.body.removeChild(textarea)
    ElMessage.success('复制成功')
  }
}
</script>

<style scoped>
.reset-pwd-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}
.success-icon {
  margin-bottom: 16px;
}
.tip-text {
  color: #606266;
  margin-bottom: 20px;
  font-size: 14px;
}
.pwd-input {
  width: 100%;
}
</style>
