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

      <el-collapse :accordion="false"
        class="update-content"
        v-model="showVersionList">
        <!-- 版本更新说明 -->
        <el-collapse-item name="1">
          <template #title>
            <span class="section-title">LTC功能更新</span>
          </template>
          <ol class="feature-list">
            <li>
              大客户开发生命周期管理、潜在客户评估、客户从对象变更触发审批、基于工商注册信息验证线索真实性。
            </li>
            <li>试用管理、商机阶段任务管理、自动作废商机。
            </li>
            <li>
              商品组合和约束（BOM）、可售范围管理、价目表管理、报价单（按价目表报价/差异化特价/非标品报价）。
            </li>
            <li>
              按价目表生成合同、按报价单生成合同、非标品销售合同。
            </li>
          </ol>
        </el-collapse-item>

        <!-- 国际化功能更新 -->
        <el-collapse-item name="2">
          <template #title>
            <span class="section-title">国际化功能更新</span>
          </template>
          <ol class="feature-list">
            <li>
              大客户开发生命周期管理、潜在客户评估、客户从对象变更触发审批、基于工商注册信息验证线索真实性。
            </li>
            <li>试用管理、商机阶段任务管理、自动作废商机。
            </li>
            <li>
              商品组合和约束（BOM）、可售范围管理、价目表管理、报价单（按价目表报价/差异化特价/非标品报价）。
            </li>
            <li>
              按价目表生成合同、按报价单生成合同、非标品销售合同。
            </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
  }
})

const emit = defineEmits(['update:modelValue']);
const dialogVisible = ref(props.modelValue);

watch(() => props.modelValue, (val) => {
  dialogVisible.value = val;
})

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

const handleViewDetail = () => {
  // 跳转到飞书文档查看版本更新详情文档
  // emit('viewDetail');
};

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

const showVersionList = ref(['1', '2'])
const versionObj = {
  "2.0.1": {
    "breakingChanges": [],
    "changes": [
      {
        "type": "测试",
        "desc": ["测试"]
      }
    ]
  },
  "2.0.0": {
    "breakingChanges": [],
    "changes": [
      {
        "type": "新功能",
        "desc": ["ce"]
      }
    ]
  },
  "1.0.0": {
    "breakingChanges": [],
    "changes": []
  },
  "0.2.0": {
    "breakingChanges": ["主版本发布测试"],
    "changes": [
      {
        "type": "新功能",
        "desc": [
          "测试主版本发布",
          "主版本测试发布"
        ]
      }
    ]
  },
  "0.1.8": {
    "breakingChanges": [],
    "changes": [
      {
        "type": "新功能",
        "desc": ["新版本文件保存测试"]
      },
      {
        "type": "Bug 修复",
        "desc": ["bug 修改测试"]
      },
      {
        "type": "风格",
        "desc": ["测试样式变更"]
      },
      {
        "type": "重构",
        "desc": ["重构测试"]
      }
    ]
  },
  "0.1.6": {
    "breakingChanges": [],
    "changes": [
      {
        "type": "测试",
        "desc": ["测试"]
      }
    ]
  }
}
</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>