<script setup lang="ts">
import { QuestionFilled } from "@element-plus/icons-vue";
import { Events } from "~/dim/event";
const emit = defineEmits([Events.cancel, Events.done]);
const props = defineProps<{ spuCode: string }>();
import { useSpu } from "~/api/spu/spuService";
import { download } from "~/domain/download";
const { spuDown,spuStatDown } = useSpu();
let spuCode:Ref<string> = ref('')
let downStat:Ref<any> = ref({
  left:0,
  limit:0,
  used:0
})
watchEffect(() => {
  if (!process.server) {
    if (props.spuCode) {
      spuCode.value = props.spuCode as string;
      spuStatDownFun()
    }
  }
});
async function spuDownFun() {
  // const res: any = await spuDown('');
  // if (res.code == 200) {
  // }
  if(downStat.value.left<1){
    return ElMessage.error(`您的下载包总次数为${downStat.value.limit}次已全部用完！如需继续下载，请联系您的销售经理，若无销售经理，可扫描网站右下角获取你专属的销售经理。`)
  }
  download(
    `/seller/spu/download/${spuCode.value}`,
    {  },
    `${spuCode.value}_${new Date().getTime()}.zip`
  );
  setTimeout(() => {
    emit(Events.done, true);
  }, 1000);
}
async function spuStatDownFun() {
  const res: any = await spuStatDown(spuCode.value);
  if (res.code == 200) {
    downStat.value = res.data
  }
}
onMounted(() => {});
</script>
<template>
  <el-col :xs="24" :sm="24" :md="24" :xl="24">
    <el-row class="mb30 down-text">
      <img src="@/assets/img/ico/doubt.png">
      <div v-if="downStat.left>0">您的下载包总次数为<span class="mainColor">{{downStat.limit}}</span>次！已用次数为<span class="mainColor">{{downStat.used}}</span>次!剩余次数为<span class="mainColor">{{downStat.left}}</span>次!</div>
      <div v-else>您的下载包总次数为{{downStat.limit}}次已全部用完！如需继续下载，请联系您的销售经理，若无销售经理，可扫描网站右下角获取你专属的销售经理。</div>

    </el-row>
    <el-row justify="end" class="mt10">
      <el-button class="btn_edge" @click="emit(Events.cancel);">
        取消
      </el-button>
      <el-button class="btn_main" @click="spuDownFun">
        确定
      </el-button>
    </el-row>
  </el-col>
</template>
<style lang="scss" scoped>
.down-text{
  font-size: 16px;
    color: #333;
    display: flex;
    align-items: center;
    margin-right: 10px;
  img{
    width: 40px;
    min-width: 40px;
    height: 40px;
    margin-right: 10px;
  }
  div{
    max-width: 280px;
  }
}
</style>
  