<template>
  <el-button :icon="InfoFilled" circle size="small" text type="info" @click="visible = true" />
  <el-dialog v-model="visible" :title="title" width="640px" append-to-body destroy-on-close>
    <div class="help-content" v-html="content" />
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { InfoFilled } from '@element-plus/icons-vue'

defineProps<{
  title: string
  content: string
}>()

const visible = ref(false)
</script>

<style scoped>
.help-content {
  line-height: 1.8;
  font-size: 14px;
  color: #333;
}
.help-content :deep(h3) {
  margin: 16px 0 8px;
  font-size: 15px;
  color: #303133;
}
.help-content :deep(p) {
  margin: 6px 0;
  text-indent: 2em;
}
.help-content :deep(ul) {
  padding-left: 2em;
  margin: 6px 0;
}
.help-content :deep(li) {
  margin: 4px 0;
}
</style>
