<template>
  <el-button class="material-download" :plain="!material?.url" @click="handleDownload">
    <el-icon><Download /></el-icon>
    {{ material?.name || "案例文档" }}
  </el-button>
</template>

<script setup>
import { computed } from "vue";
import { ElMessage } from "element-plus";
import { Download } from "@element-plus/icons-vue";

const props = defineProps({
  materialName: {
    type: String,
    default: "",
  },
  materialUrl: {
    type: String,
    default: "",
  },
});

const material = computed(() => {
  const name = String(props.materialName || "").trim();
  const url = String(props.materialUrl || "").trim();
  if (!name || !url || (name === "案例资料.rar" && url === "/file/example.rar")) {
    return null;
  }
  return { name, url };
});

function handleDownload() {
  if (!material.value?.url) {
    ElMessage.warning("暂无案例文档");
    return;
  }
  const link = document.createElement("a");
  link.href = material.value.url;
  link.target = "_blank";
  link.rel = "noopener";
  link.download = material.value.name;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}
</script>

<style lang="scss" scoped>
.material-download {
  max-width: 260px;
  min-height: 40px;
  border-color: rgba(97, 219, 255, 0.55);
  border-radius: 6px;
  color: #a9ecff;
  background: rgba(7, 54, 78, 0.72);
  font-weight: 800;
}

.material-download:hover {
  color: #ffffff;
  border-color: rgba(119, 232, 255, 0.92);
  background: rgba(10, 82, 116, 0.82);
}
</style>
