<template>
  <div class="wrap">
    <el-dialog v-model="dialogVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      width="40%"
      @close="handleClose"
      draggable
      overflow >
      <template #header>
        <p class="el-dialog__title">版本更新说明</p>
        <div class="version-tag">V{{ nowVersion }} 更新内容</div>
      </template>

      <el-collapse :accordion="false"
        class="update-content"
        v-model="showVersionList">
        <!-- 版本更新说明 -->
        <el-collapse-item v-for="item in versionList"
          :name="item.title">
          <template #title>
            <span class="section-title">{{ item.title }}</span>
          </template>
          <ol class="feature-list">
            <li v-for="o in item.content">
              {{ o }}
            </li>
          </ol>
        </el-collapse-item>
      </el-collapse>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleViewDetail">查看详情</el-button>
          <el-button type="primary"
            @click="handleConfirm">我知道了</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, defineEmits } from 'vue';

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  nowVersion: { // 当前最新版本
    type: String,
    default: ''
  },
  versionList: { // 版本信息说明数据源
    type: Array,
    default: () => [{
      title: '',
      content: ['']
    }]
  }
})

const emit = defineEmits(['update:modelValue']);
const dialogVisible = ref(props.modelValue);
const showVersionList = ref(props.versionList.map((o) => o.title))

watch(() => props.modelValue, (val) => {
  dialogVisible.value = val;
})
watch(() => props.versionList, (val) => {
  showVersionList.value = val.map((o) => o.title)
})

const handleClose = () => {
  emit('update:modelValue', false);
};

const handleViewDetail = () => {
  // 跳转到飞书文档查看版本更新详情文档（打开新标签页面）
  window.open('https://wangxiaolu.feishu.cn/docx/MJf8d6Rrsood6IxnIsKch1clnwc', '_blank')
};

const handleConfirm = () => {
  emit('update:modelValue', false);
  emit('confirm') // 确定保存
};

</script>

<style lang="scss"
  scoped>
  .wrap {
    ::v-deep(.el-overlay) {
      .el-overlay-dialog {
        .el-dialog {
          // 从上到下的渐变蓝色
          background: linear-gradient(to bottom, #3879e0, #ffffff);

          // 自定义对话框样式
          .el-dialog__header {
            height: auto;

            .el-dialog__title {
              color: white;
              font-size: 24px;
              margin: 0;
            }

            .el-dialog__headerbtn .el-dialog__close {
              color: white;

              &:hover {
                color: #f5f5f5;
              }
            }
          }

          .version-tag {
            margin-top: 10px;
            color: white;
            line-height: 1.5;
          }
        }

      }

      // 更新内容
      .update-content {
        .el-collapse-item__header {
          font-weight: 500;
          color: #333;
          padding-left: 30px;

          .section-title {
            position: relative;

            &::before {
              content: "";
              position: absolute;
              left: -12px;
              top: 50%;
              transform: translateY(-50%);
              width: 4px;
              height: 16px;
              background-color: #8B0000; // 暗红色指示条
              border-radius: 2px;
            }
          }
        }

        .feature-list {
          list-style: decimal;
          padding: 0 40px;

          li {
            color: #444;
          }
        }
      }
    }
  }
</style>