﻿<!--
 * @Author: qinzhenpen qzp1807@126.com
 * @Date: 2025-05-03 17:28:31
 * @LastEditors: qinzhenpen qzp1807@126.com
 * @LastEditTime: 2025-05-23 14:33:52
 * @FilePath: \e-commerce-internet\src\views\channel\supplier.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <div class="supplier student-training-shell">
    <main class="training-core">
      <section class="task-header">
        <div class="task-badge"><el-icon><Connection /></el-icon> 核心实训 · 供应渠道管理</div>
        <h1 class="task-title">{{ taskTitle }}</h1>
      </section>
      <TrainingTaskBrief :background="taskBackground" :goals="taskGoals" :requirements="taskRequirement" :show-material="false" />
      <section class="task-card">
        <div class="workbench-head">
          <div><p class="section-eyebrow">Training Task</p><h3>任务实训</h3><p class="workbench-description">{{ taskRequirement }}</p></div>
          <div class="workbench-actions"><TrainingMaterialButton :material-name="taskConfig?.materialName" :material-url="taskConfig?.materialUrl" /><button type="button" class="outline-action" @click="exportOutcome"><el-icon><Download /></el-icon>导出实训成果</button></div>
        </div>
        <nav v-if="hasConfiguredSteps" class="step-indicator" aria-label="供应商评估步骤">
          <button v-for="(step, index) in configuredSteps" :key="`${step}-${index}`" type="button" class="step-tab" :class="{ active: activeStep === index + 1 }" :aria-current="activeStep === index + 1 ? 'step' : undefined" @click="setCurrentStep(index + 1)">{{ step }}</button>
        </nav>
        <section v-show="isSectionVisible(1)" class="step-card">
          <div class="step-title-row"><div><p class="section-eyebrow">Step {{ String(activeStep).padStart(2, '0') }}</p><h3>{{ activeStepName }}</h3></div></div>
    <div class="caseBacktitle">
      <img src="@/assets/images/步骤.png" alt="" />
      <span>任务目标</span>
    </div>
    <p>掌握供应商渠道评估的要素，评分办法的设置，学会使用线性权重法计算各供应渠道综合得分，确定供应渠道级别并给出综合评估意见。</p>
    <div class="caseBacktitle">
      <img src="@/assets/images/步骤.png" alt="" />
      <span>任务背景</span>
    </div>
    <p>电商选品中常见的供应渠道包括以下类型：品牌直供：直接与品牌方或总代理合作，确保正品授权和稳定供应。批发市场：如义乌小商品市场、1688平台，适合小批量采购和多样化选品。代工厂/OEM：定制化生产，适合有独特设计需求的产品。跨境电商平台：如亚马逊全球开店、速卖通，提供国际供应链资源。垂直类供应商：专注于特定品类（如母婴、3C）的供应商，具备专业性和深度服务能力</p>
    <el-table
      :data="channelComparisonData"
      border
      style="width: 90%"
      :header-cell-style="{
        color: '#fff',
        fontSize: '14px',
        backgroundColor: '#6A7DE9!important',
      }"
    >
      <el-table-column prop="item" label="项目" align="center" width="120"></el-table-column>
      <el-table-column prop="channelA" label="渠道A：品牌直供" align="center"></el-table-column>
      <el-table-column prop="channelB" label="渠道B：批发市场" align="center"></el-table-column>
      <el-table-column prop="channelC" label="渠道C：代工厂/OEM" align="center"></el-table-column>
      <el-table-column prop="channelD" label="渠道D：跨境电商平台" align="center"></el-table-column>
      <el-table-column prop="channelE" label="渠道E：垂直类供应商" align="center"></el-table-column>
    </el-table>
    <div class="caseBacktitle">
      <img src="@/assets/images/步骤.png" alt="" />
      <span>任务要求</span>
    </div>
    <div class="caseBacktitle">
      <span>任务1：设置评估维度及权重</span>
    </div>
    <div>
      <div style="display: flex; margin-top: 10px">
        <el-table
          :data="evaluationWeights"
          border
          style="width: 30%"
          :header-cell-style="{
            color: '#fff',
            fontSize: '14px',
            backgroundColor: '#6A7DE9!important',
          }"
        >
          <el-table-column prop="dimension" label="评估维度" align="center" width="120"></el-table-column>
          <el-table-column prop="currentWeight" label="权重设置" align="center">
            <template #default="{ row }">
              <el-input v-if="row.dimension !== '合计'" v-model="row.currentWeight" placeholder="请输入内容"></el-input>
              <span v-else>{{ total }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="recommendedRange" label="推荐设置" align="center"></el-table-column>
        </el-table>
        <el-button @click="onClick" class="ml50" type="primary">提交</el-button>
      </div>
    </div>
    <div class="caseBacktitle">
      <span>任务2：设置评分标准</span>
    </div>
    <el-table
      :data="evaluationCriteria"
      border
      style="width: 50%; margin-top: 10px"
      :header-cell-style="{
        color: '#fff',
        fontSize: '14px',
        backgroundColor: '#6A7DE9!important',
      }"
    >
      <el-table-column prop="category" label="项目" align="center" width="120"></el-table-column>
      <el-table-column label="评分标准" align="left">
        <template #default="{ row }">
          <div v-for="standard in row.standards" :key="standard.score" class="standard-item">
            <span>{{ standard.score }}分：{{ standard.description }}</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
        </section>
        <section v-show="isSectionVisible(2)" class="step-card">
          <div class="step-title-row"><div><p class="section-eyebrow">Step {{ String(activeStep).padStart(2, '0') }}</p><h3>{{ activeStepName }}</h3></div></div>
    <div class="caseBacktitle">
      <span>任务3：供应渠道评分</span>
    </div>
    <div style="display: flex">
      <el-table
        :data="supplierEvaluationData"
        border
        style="width: 80%"
        :header-cell-style="{
          color: '#fff',
          fontSize: '14px',
          backgroundColor: '#6A7DE9!important',
        }"
      >
        <el-table-column prop="supplierType" label="供应渠道" align="center" width="120"></el-table-column>
        <el-table-column prop="quality" label="产品质量（分）" align="center">
          <template #default="{ row }">
            <el-input v-model="row.quality" placeholder=""></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="priceCompetitiveness" label="价格竞争力（分）" align="center">
          <template #default="{ row }">
            <el-input v-model="row.priceCompetitiveness" placeholder=""></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="supplyStability" label="供货稳定性（分）" align="center">
          <template #default="{ row }">
            <el-input v-model="row.supplyStability" placeholder=""></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="reputation" label="合作信誉（分）" align="center">
          <template #default="{ row }">
            <el-input v-model="row.reputation" placeholder=""></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="afterSales" label="售后支持（分）" align="center">
          <template #default="{ row }">
            <el-input v-model="row.afterSales" placeholder=""></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="minOrderQuantity" label="最小订单量（分）" align="center">
          <template #default="{ row }">
            <el-input v-model="row.minOrderQuantity" placeholder=""></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="productDiversity" label="产品多样性（分）" align="center">
          <template #default="{ row }">
            <el-input v-model="row.productDiversity" placeholder=""></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="logistics" label="物流配送（分）" align="center">
          <template #default="{ row }">
            <el-input v-model="row.logistics" placeholder=""></el-input>
          </template>
        </el-table-column>
      </el-table>
      <el-button class="ml50" type="primary" @click="onSubmit">提交</el-button>
    </div>
        </section>
        <section v-show="isSectionVisible(3)" class="step-card">
          <div class="step-title-row"><div><p class="section-eyebrow">Step {{ String(activeStep).padStart(2, '0') }}</p><h3>{{ activeStepName }}</h3></div></div>
    <div class="caseBacktitle">
      <span>任务4：使用线性权重法计算各供应渠道综合得分</span>
    </div>
    <el-table
      :data="supplierEvaluationData1"
      border
      style="width: 100%; margin-top: 10px"
      :header-cell-style="{
        color: '#fff',
        fontSize: '14px',
        backgroundColor: '#6A7DE9!important',
      }"
    >
      <el-table-column prop="supplierType" label="供应渠道" align="center" width="120"></el-table-column>
      <el-table-column label="产品质量" align="center">
        <el-table-column prop="quality" label="得分" align="center"></el-table-column>
        <el-table-column label="权重" align="center" prop="weight">
          <template #default="{ row }">
            {{ getWeightByDimension("产品质量") }}
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="价格竞争力" align="center">
        <el-table-column prop="priceCompetitiveness" label="得分" align="center"></el-table-column>
        <el-table-column label="权重" align="center" prop="weight">
          <template #default="{ row }">
            {{ getWeightByDimension("价格竞争力") }}
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="供货稳定性" align="center">
        <el-table-column prop="supplyStability" label="得分" align="center"></el-table-column>
        <el-table-column label="权重" align="center" prop="weight">
          <template #default="{ row }">
            {{ getWeightByDimension("供货稳定性") }}
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="合作信誉" align="center">
        <el-table-column prop="reputation" label="得分" align="center"></el-table-column>
        <el-table-column label="权重" align="center" prop="weight">
          <template #default="{ row }">
            {{ getWeightByDimension("合作信誉") }}
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="售后支持" align="center">
        <el-table-column prop="afterSales" label="得分" align="center"></el-table-column>
        <el-table-column label="权重" align="center" prop="weight">
          <template #default="{ row }">
            {{ getWeightByDimension("售后支持") }}
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="最小订单量" align="center">
        <el-table-column prop="minOrderQuantity" label="得分" align="center"></el-table-column>
        <el-table-column label="权重" align="center" prop="weight">
          <template #default="{ row }">
            {{ getWeightByDimension("最小订单量") }}
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="产品多样性" align="center">
        <el-table-column prop="productDiversity" label="得分" align="center"></el-table-column>
        <el-table-column label="权重" align="center" prop="weight">
          <template #default="{ row }">
            {{ getWeightByDimension("产品多样性") }}
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="物流配送" align="center">
        <el-table-column prop="logistics" label="得分" align="center"></el-table-column>
        <el-table-column label="权重" align="center" prop="weight">
          <template #default="{ row }">
            {{ getWeightByDimension("物流配送") }}
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="综合得分" align="center" prop="weight">
        <template #default="{ row }">
          <el-input v-model="row.comprehensiveScore" placeholder=""></el-input>
        </template>
      </el-table-column>
    </el-table>
        </section>
        <section v-show="isSectionVisible(4)" class="step-card">
          <div class="step-title-row"><div><p class="section-eyebrow">Step {{ String(activeStep).padStart(2, '0') }}</p><h3>{{ activeStepName }}</h3></div></div>
    <div class="caseBacktitle">
      <span>任务5：选择供应渠道级别</span>
    </div>
    <div style="display: flex; gap: 5vw">
      <div style="padding-left: 1vw">
        <span>
          根据综合得分，可以将供应渠道分为以下级别：
          <br />
          8分以上：优秀供应渠道，优先合作。
          <br />
          7-8分：良好供应渠道，可考虑合作。
          <br />
          6-7分：一般供应渠道，需谨慎合作。
          <br />
          6分以下：较差供应渠道，不建议合作。
          <br />
        </span>
      </div>
      <div>
        <span>根据计算结果：</span>
        <div class="online">
          <span>品牌直供：{{ supplierEvaluationData1[0].comprehensiveScore || 0 }}分，</span>
          <el-select placeholder="请选择" v-model="form.option1" @change="onChange">
            <el-option v-for="item in option" :key="item" :value="item" :label="item"></el-option>
          </el-select>
        </div>
        <div class="online mt10">
          <span>垂直类供应商：{{ supplierEvaluationData1[1].comprehensiveScore || 0 }}分，</span>
          <el-select placeholder="请选择" v-model="form.option2" @change="onChange">
            <el-option v-for="item in option" :key="item" :value="item" :label="item"></el-option>
          </el-select>
        </div>
        <div class="online mt10">
          <span>代工厂/OEM：{{ supplierEvaluationData1[2].comprehensiveScore || 0 }}分，</span>
          <el-select placeholder="请选择" v-model="form.option3" @change="onChange">
            <el-option v-for="item in option" :key="item" :value="item" :label="item"></el-option>
          </el-select>
        </div>
        <div class="online mt10">
          <span>批发市场：{{ supplierEvaluationData1[3].comprehensiveScore || 0 }}分，</span>
          <el-select placeholder="请选择" v-model="form.option4" @change="onChange">
            <el-option v-for="item in option" :key="item" :value="item" :label="item"></el-option>
          </el-select>
        </div>
        <div class="online mt10">
          <span>跨境电商平台：{{ supplierEvaluationData1[4].comprehensiveScore || 0 }}分，</span>
          <el-select placeholder="请选择" v-model="form.option5" @change="onChange">
            <el-option v-for="item in option" :key="item" :value="item" :label="item"></el-option>
          </el-select>
        </div>
      </div>
    </div>
    <div class="caseBacktitle">
      <span>任务6：给出综合评估意见</span>
    </div>
    <p style="padding-left: 1vw">
      品牌直供：综合得分最高，产品质量和合作信誉表现优秀，建议优先合作。
      <br />
      垂直类供应商：综合得分较高，售后支持表现突出，可作为主要合作渠道之一。
      <br />
      代工厂/OEM：综合得分中等，产品多样性表现较好，但价格竞争力一般，可作为补充渠道。
      <br />
      批发市场：综合得分中等，价格竞争力较强，但产品质量和供货稳定性一般，可作为备选渠道。
      <br />
      跨境电商平台：综合得分较低，物流配送和供货稳定性表现一般，建议谨慎合作或作为短期应急渠道。
      <br />
    </p>
        </section>
        <div v-if="hasConfiguredSteps" class="step-navigation">
          <button type="button" class="btn-nav" :disabled="activeStep === 1" @click="goPreviousStep"><el-icon><ArrowLeft /></el-icon>上一步</button>
          <button type="button" class="btn-nav btn-save" :disabled="saving" @click="saveCurrentProgress"><el-icon><CircleCheck /></el-icon>保存当前进度</button>
          <button type="button" class="btn-nav btn-primary" :disabled="activeStep === configuredSteps.length" @click="goNextStep">下一步<el-icon><ArrowRight /></el-icon></button>
        </div>
        <div class="taskfooter"><el-button @click="submitTask" :loading="saving">提交任务</el-button><el-button @click="resetTask" :loading="saving">清空填写</el-button></div>
      </section>
    </main>
    <TrainingAiSidebar study-tip="当前任务建议：先设定评估权重，再完成渠道评分、综合得分和合作级别判断。" :progress-items="progressItems" />
  </div>
</template>
<script setup>


import TrainingAiSidebar from "@/views/components/TrainingAiSidebar.vue";
import TrainingMaterialButton from "@/views/components/TrainingMaterialButton.vue";
import TrainingTaskBrief from "@/views/components/TrainingTaskBrief.vue";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
import * as analysisAPI from "@/api/market-demand-mining.js";
import { ArrowLeft, ArrowRight, CircleCheck, Connection, Download } from "@element-plus/icons-vue";
import { getTrainingTaskByKey } from "@/api/trainingTask";
import { getStudentTrainingAnswer, saveStudentTrainingAnswer } from "@/api/studentTrainingAnswer";
import { parseTrainingArray } from "@/views/training/taskKeyMap";
const { proxy } = getCurrentInstance();
let currentStep = ref(0);
const TASK_KEY = "supplier-evaluation";
const taskConfig = ref(null);
const activeStep = ref(1);
const saving = ref(false);
const taskTitle = computed(() => taskConfig.value?.taskName || "供应商评估与选择");
const taskBackground = computed(() => taskConfig.value?.background || "电商选品中存在品牌直供、批发市场、代工厂、跨境电商平台、垂直类供应商等多种供应渠道，需要综合评估各渠道能力。");
const taskRequirement = computed(() => taskConfig.value?.requirements || "掌握供应商渠道评估要素和评分办法，使用线性权重法计算各供应渠道综合得分，确定供应渠道级别并给出综合评估意见。");
const taskGoals = computed(() => parseTrainingArray(taskConfig.value?.objectives, ["掌握供应商渠道评估要素和评分办法", "能够使用线性权重法计算供应渠道综合得分", "形成供应渠道级别与综合评估意见"]));
const configuredSteps = computed(() => parseTrainingArray(taskConfig.value?.steps));
const hasConfiguredSteps = computed(() => configuredSteps.value.length > 0);
const activeStepName = computed(() => configuredSteps.value[activeStep.value - 1] || "供应商评估与选择");
const progressItems = computed(() => configuredSteps.value.map((text, index) => ({ text, status: index + 1 < activeStep.value ? "done" : index + 1 === activeStep.value ? "doing" : "" })));
const form = ref({
  option1: "",
  option2: "",
  option3: "",
  option4: "",
  option5: "",
});
const option = ["优秀供应渠道", "良好供应渠道", "一般供应渠道", "较差供应渠道"];
const channelComparisonData = [
  {
    item: "产品质量",
    channelA: "通常提供高质量产品，符合品牌标准",
    channelB: "产品质量参差不齐，需仔细甄别",
    channelC: "产品质量可靠，符合定制要求",
    channelD: "产品质量一般，需仔细甄别",
    channelE: "产品质量较高，专业领域优势明显",
  },
  {
    item: "价格竞争力",
    channelA: "价格较高，但具有一定市场竞争力",
    channelB: "价格较低，具有明显竞争力",
    channelC: "定制产品价格较高",
    channelD: "价格具有一定的竞争力，但受关税影响",
    channelE: "价格具有竞争力，专业采购渠道",
  },
  {
    item: "供应链稳定性",
    channelA: "通常有稳定的供应链",
    channelB: "供应链稳定性一般，受市场因素影响较大",
    channelC: "供应链稳定性较好，但受生产计划影响",
    channelD: "国际运输存在不确定性",
    channelE: "供应链稳定性高，专业供应链管理",
  },
  {
    item: "合作信誉",
    channelA: "品牌方信誉良好，长期合作关系",
    channelB: "信誉一般，需谨慎选择供应商",
    channelC: "信誉良好，专业生产定制产品",
    channelD: "平台信誉较好，但供应商个体差异大",
    channelE: "信誉良好，专业服务",
  },
  {
    item: "售后支持",
    channelA: "提供全面的售后服务",
    channelB: "售后服务一般，部分供应商提供有限支持",
    channelC: "提供一定的售后服务，但可能有限",
    channelD: "提供一定的售后服务，但受国际贸易影响",
    channelE: "提供全面的售后服务",
  },
  {
    item: "最小订单量",
    channelA: "通常要求一定的最小订单量",
    channelB: "支持小批量采购",
    channelC: "通常要求较高的最小订单量",
    channelD: "支持一件代发",
    channelE: "最小订单量适中",
  },
  {
    item: "产品多样性",
    channelA: "产品种类相对有限，专注于品牌产品",
    channelB: "产品种类丰富，选择多样",
    channelC: "可根据需求定制多样化产品",
    channelD: "产品种类丰富",
    channelE: "专注于特定品类，种类较为丰富",
  },
  {
    item: "物流配送",
    channelA: "物流服务较为高效",
    channelB: "物流服务较为便捷，但运费可能较高",
    channelC: "物流服务一般，需自行安排",
    channelD: "国际物流时间长，运费高",
    channelE: "物流服务较为高效",
  },
];
const evaluationWeights = ref([
  {
    dimension: "产品质量",
    currentWeight: null,
    recommendedRange: "0.15~0.25",
    min: 0.15,
    max: 0.25,
  },
  {
    dimension: "价格竞争力",
    currentWeight: null,
    recommendedRange: "0.10~0.20",
    min: 0.1,
    max: 0.2,
  },
  {
    dimension: "供货稳定性",
    currentWeight: null,
    recommendedRange: "0.10~0.20",
    min: 0.1,
    max: 0.2,
  },
  {
    dimension: "合作信誉",
    currentWeight: null,
    recommendedRange: "0.10~0.20",
    min: 0.1,
    max: 0.2,
  },
  {
    dimension: "售后支持",
    currentWeight: null,
    recommendedRange: "0.05~0.15",
    min: 0.05,
    max: 0.15,
  },
  {
    dimension: "最小订单量",
    currentWeight: null,
    recommendedRange: "0.05~0.15",
    min: 0.05,
    max: 0.15,
  },
  {
    dimension: "产品多样性",
    currentWeight: null,
    recommendedRange: "0.05~0.15",
    min: 0.05,
    max: 0.15,
  },
  {
    dimension: "物流配送",
    currentWeight: null,
    recommendedRange: "0.05~0.15",
    min: 0.05,
    max: 0.15,
  },
  // 合计行（特殊标记）
  {
    dimension: "合计",
    currentWeight: 1.0,
    recommendedRange: "(权重合计为1)",
    isTotal: true,
  },
]);
const evaluationCriteria = [
  {
    category: "产品质量",
    standards: [
      { score: 10, description: "产品符合或超过行业标准，质量稳定，无缺陷" },
      { score: 9, description: "产品质量良好，偶尔有小问题，但不影响使用" },
      { score: 7, description: "产品质量一般，可能存在小问题，但总体可接受" },
      { score: 5, description: "产品质量较差，存在较多问题，但基本可用" },
      { score: 3, description: "产品质量差，存在严重问题，不建议使用" },
    ],
  },
  {
    category: "价格竞争力",
    standards: [
      { score: 10, description: "价格远低于市场平均水平，竞争力极高" },
      { score: 9, description: "价格低于市场平均水平，具有一定竞争力" },
      { score: 7, description: "价格与市场平均水平持平，竞争力一般" },
      { score: 5, description: "价格高于市场平均水平，竞争力较低" },
    ],
  },
  {
    category: "供货稳定性",
    standards: [
      { score: 10, description: "供货非常稳定，从未出现延迟或缺货" },
      { score: 9, description: "供货较为稳定，偶尔有轻微延迟" },
      { score: 7, description: "供货稳定性一般，有时会出现延迟或缺货" },
      { score: 5, description: "供货不稳定，经常出现延迟或缺货" },
    ],
  },
  {
    category: "合作信誉",
    standards: [
      { score: 10, description: "销售表现优秀，客户评价极高" },
      { score: 9, description: "销售良好，偶尔有小问题，但总体可靠" },
      { score: 7, description: "销售一般，存在一些客户投诉，但问题不大" },
      { score: 5, description: "销售较差，存在较多客户投诉或不良记录" },
    ],
  },
  {
    category: "售后支持",
    standards: [
      { score: 10, description: "售后服务优秀，响应及时，解决问题迅速" },
      { score: 9, description: "售后服务较好，响应及时，但可能有轻微不足" },
      { score: 7, description: "售后服务一般，响应时间较长，但基本满足需求" },
      { score: 5, description: "售后服务较差，响应缓慢，客户满意度低" },
    ],
  },
  {
    category: "最小订单量",
    standards: [
      { score: 10, description: "无最低要求，支持单件代发" },
      { score: 9, description: "最小订单量较低（如10-20件）" },
      { score: 7, description: "最小订单量适中（如30-50件）" },
      { score: 5, description: "最小订单量较高（如100-200件）" },
    ],
  },
  {
    category: "产品多样性",
    standards: [
      { score: 10, description: "产品种类丰富，涵盖多个类别和款式" },
      { score: 9, description: "产品种类较多，但主要集中在某一类别" },
      { score: 7, description: "产品种类一般，有一定多样性，但不够丰富" },
      { score: 5, description: "产品种类较少，缺乏多样性" },
    ],
  },
  {
    category: "物流配送",
    standards: [
      { score: 10, description: "物流配送速度快，运费低，覆盖范围广" },
      { score: 9, description: "物流配送较快，运费适中，覆盖范围较广" },
      { score: 7, description: "物流配送一般，运费适中，覆盖范围有限" },
      { score: 5, description: "物流配送较慢，运费较高，覆盖范围有限" },
      { score: 3, description: "物流配送非常慢，运费高，覆盖范围小" },
    ],
  },
];
const supplierEvaluationData = ref([
  {
    supplierType: "品牌直供",
    quality: null,
    priceCompetitiveness: null,
    supplyStability: null,
    reputation: null,
    afterSales: null,
    minOrderQuantity: null,
    productDiversity: null,
    logistics: null,
  },
  {
    supplierType: "批发市场",
    quality: null,
    priceCompetitiveness: null,
    supplyStability: null,
    reputation: null,
    afterSales: null,
    minOrderQuantity: null,
    productDiversity: null,
    logistics: null,
  },
  {
    supplierType: "代工厂/OEM",
    quality: null,
    priceCompetitiveness: null,
    supplyStability: null,
    reputation: null,
    afterSales: null,
    minOrderQuantity: null,
    productDiversity: null,
    logistics: null,
  },
  {
    supplierType: "跨境电商平台",
    quality: null,
    priceCompetitiveness: null,
    supplyStability: null,
    reputation: null,
    afterSales: null,
    minOrderQuantity: null,
    productDiversity: null,
    logistics: null,
  },
  {
    supplierType: "垂直类供应商",
    quality: null,
    priceCompetitiveness: null,
    supplyStability: null,
    reputation: null,
    afterSales: null,
    minOrderQuantity: null,
    productDiversity: null,
    logistics: null,
  },
]);
// 映射字段字典
const weightFieldMapping = {
  产品质量: "qualityWeight",
  价格竞争力: "priceWeight",
  供货稳定性: "stabilityWeight",
  合作信誉: "reputationWeight",
  售后支持: "supportWeight",
  最小订单量: "moqWeight",
  产品多样性: "varietyWeight",
  物流配送: "logisticsWeight",
};
const scoreFieldMapping = {
  qualityWeight: "产品质量",
  priceWeight: "价格竞争力",
  stabilityWeight: "供货稳定性",
  reputationWeight: "合作信誉",
  supportWeight: "售后支持",
  moqWeight: "最小订单量",
  varietyWeight: "产品多样性",
  logisticsWeight: "物流配送",
};
const comprehensiveScore = {
  crossborderScore: null,
  directSupplyScore: null,
  oemScore: null,
  verticalScore: null,
  wholesaleScore: null,
};
const mapping = {
  跨境电商平台: "crossborderScore",
  品牌直供: "directSupplyScore",
  "代工厂/OEM": "oemScore",
  垂直类供应商: "verticalScore",
  批发市场: "wholesaleScore",
};
const mappingkey = {
  crossborderScore: "跨境电商平台",
  directSupplyScore: "品牌直供",
  oemScore: "代工厂/OEM",
  verticalScore: "垂直类供应商",
  wholesaleScore: "批发市场",
};
// 提取权重
const getWeightMap = () => {
  const map = {};
  evaluationWeights.value.forEach((item) => {
    if (!item.isTotal) {
      const key = weightFieldMapping[item.dimension];
      if (key) {
        map[key] = item.currentWeight;
      }
    }
  });
  return map;
};
const supplierEvaluationData1 = ref([
  {
    supplierType: "品牌直供",
    quality: null,
    priceCompetitiveness: null,
    supplyStability: null,
    reputation: null,
    afterSales: null,
    minOrderQuantity: null,
    productDiversity: null,
    logistics: null,
    comprehensiveScore: "",
    weight: "",
    type: "",
  },
  {
    supplierType: "批发市场",
    quality: null,
    priceCompetitiveness: null,
    supplyStability: null,
    reputation: null,
    afterSales: null,
    minOrderQuantity: null,
    productDiversity: null,
    logistics: null,
    comprehensiveScore: "",
    weight: "",
  },
  {
    supplierType: "代工厂/OEM",
    quality: null,
    priceCompetitiveness: null,
    supplyStability: null,
    reputation: null,
    afterSales: null,
    minOrderQuantity: null,
    productDiversity: null,
    logistics: null,
    comprehensiveScore: "",
    weight: "",
  },
  {
    supplierType: "跨境电商平台",
    quality: null,
    priceCompetitiveness: null,
    supplyStability: null,
    reputation: null,
    afterSales: null,
    minOrderQuantity: null,
    productDiversity: null,
    logistics: null,
    comprehensiveScore: "",
    weight: "",
  },
  {
    supplierType: "垂直类供应商",
    quality: null,
    priceCompetitiveness: null,
    supplyStability: null,
    reputation: null,
    afterSales: null,
    minOrderQuantity: null,
    productDiversity: null,
    logistics: null,
    comprehensiveScore: "",
    weight: "",
  },
]);
const total = computed(() => {
  return evaluationWeights.value.filter((item) => !item.isTotal).reduce((sum, item) => sum + parseFloat(Number(item.currentWeight).toFixed(2)), 0);
});
// 权重提交
const onClick = () => {
  // 需要判断权重是否在推荐范围内
  const isValid = evaluationWeights.value.every((item) => {
    if (item.dimension === "合计") return true;
    const weight = parseFloat(item.currentWeight);
    return weight >= item.min && weight <= item.max;
  });
  if (isValid && total.value === 1) {
    proxy.$modal.msgSuccess("权重设置成功");
    supplierEvaluationData1.value.forEach((item, index) => {
      item.weight = evaluationWeights.value[index].currentWeight;
    });
    currentStep.value = 1;
  } else {
    proxy.$modal.msgWarning("权重设置超出范围，请重新设置");
  }
};
// 计算综合得分
const onSubmit = () => {
  if (currentStep.value < 1) {
    proxy.$modal.msgWarning("请先完成权重设置");
    return;
  }
  // 查看全部填写完毕了吗
  const isAllFilled = supplierEvaluationData.value.every((item) => {
    return item.quality !== "" && item.priceCompetitiveness !== "" && item.supplyStability !== "" && item.reputation !== "" && item.afterSales !== "" && item.minOrderQuantity !== "" && item.productDiversity !== "" && item.logistics !== "";
  });
  if (!isAllFilled) {
    proxy.$modal.msgWarning("请填写完整");
    return;
  }
  proxy.$modal.msgSuccess("提交成功");
  currentStep.value = 3;
  syncData();
};
const onInput = (index) => {
  if (currentStep.value < 3) {
    proxy.$modal.msgWarning("请先供应渠道评分");
    supplierEvaluationData1.value[index].comprehensiveScore = "";
    return;
  }
  currentStep.value = 4;
};
const onChange = (index) => {
  if (currentStep.value < 3) {
    proxy.$modal.msgWarning("请先供应渠道综合得分计算");
    for (const key in form.value) {
      form.value[key] = "";
    }
    return;
  }
};
// 同步数据方法
const syncData = () => {
  supplierEvaluationData1.value.forEach((item1) => {
    const matchingItem = supplierEvaluationData.value.find((item2) => item2.supplierType === item1.supplierType);
    if (matchingItem) {
      item1.quality = matchingItem.quality;
      item1.priceCompetitiveness = matchingItem.priceCompetitiveness;
      item1.supplyStability = matchingItem.supplyStability;
      item1.reputation = matchingItem.reputation;
      item1.afterSales = matchingItem.afterSales;
      item1.minOrderQuantity = matchingItem.minOrderQuantity;
      item1.productDiversity = matchingItem.productDiversity;
      item1.logistics = matchingItem.logistics;
    }
  });
};
function normalizeActiveStep(value) {
  if (!configuredSteps.value.length) return 1;
  return Math.min(Math.max(Number(value) || 1, 1), configuredSteps.value.length);
}
function isSectionVisible(section) { return !hasConfiguredSteps.value || activeStep.value === section; }
function buildProgress() {
  return {
    activeStep: activeStep.value,
    form: form.value,
    evaluationWeights: evaluationWeights.value,
    supplierEvaluationData: supplierEvaluationData.value,
    supplierEvaluationData1: supplierEvaluationData1.value,
    currentStep: currentStep.value,
    updatedAt: new Date().toISOString(),
  };
}
function applyProgress(value) {
  if (!value || typeof value !== "object") return;
  activeStep.value = normalizeActiveStep(value.activeStep);
  form.value = { ...form.value, ...(value.form || {}) };
  if (Array.isArray(value.evaluationWeights)) evaluationWeights.value = value.evaluationWeights;
  if (Array.isArray(value.supplierEvaluationData)) supplierEvaluationData.value = value.supplierEvaluationData;
  if (Array.isArray(value.supplierEvaluationData1)) supplierEvaluationData1.value = value.supplierEvaluationData1;
  currentStep.value = Number(value.currentStep) || currentStep.value;
}
async function persistProgress(saveAction = "SAVE", silent = false) {
  await saveStudentTrainingAnswer(TASK_KEY, { saveAction, currentStep: activeStep.value, step1Answer: JSON.stringify(buildProgress()) });
  if (!silent) proxy?.$modal?.msgSuccess(saveAction === "SUBMIT" ? "提交成功" : "保存成功");
}
function setCurrentStep(step) { activeStep.value = normalizeActiveStep(step); persistProgress("SAVE", true).catch(() => {}); }
function goPreviousStep() { setCurrentStep(activeStep.value - 1); }
function goNextStep() { setCurrentStep(activeStep.value + 1); }
async function saveCurrentProgress() { if (saving.value) return; saving.value = true; try { await persistProgress(); } finally { saving.value = false; } }
async function loadTaskConfig() {
  try { const res = await getTrainingTaskByKey(TASK_KEY); taskConfig.value = res?.data || null; activeStep.value = normalizeActiveStep(activeStep.value); }
  catch (error) { taskConfig.value = null; activeStep.value = 1; }
}
async function loadSavedProgress() {
  try { const res = await getStudentTrainingAnswer(TASK_KEY); const raw = res?.data?.step1Answer; if (raw) applyProgress(JSON.parse(raw)); }
  catch (error) { /* Historical progress is optional. */ }
}
function exportOutcome() {
  const blob = new Blob([JSON.stringify(buildProgress(), null, 2)], { type: "application/json;charset=utf-8" });
  const url = URL.createObjectURL(blob); const link = document.createElement("a"); link.href = url; link.download = `${taskTitle.value}-实训成果.json`; link.click(); URL.revokeObjectURL(url);
}
const submitTask = async () => {
  // 判断form是否全部填写
  const isFormFilled = Object.values(form.value).every((value) => value !== "");
  if (!isFormFilled) {
    proxy.$modal.msgWarning("请先完成实训!");
    return;
  }
  supplierEvaluationData1.value.forEach((item) => {
    const key = mapping[item.supplierType];
    if (key) {
      comprehensiveScore[key] = item.comprehensiveScore;
    }
  });
  let params = {
    ...getWeightMap(),
    ...comprehensiveScore,
    userId: userStore.userInfo.userId,
    channelScores: JSON.stringify({
      list: supplierEvaluationData.value,
      form: form.value,
    }),
  };
  if (saving.value) return;
  saving.value = true;
  try {
    await analysisAPI.supplierEvaluationAndSelectionSubmit(params);
    await persistProgress("SUBMIT");
  } finally { saving.value = false; }
};
// 回显方法
const echo = async () => {
  try {
    const res = await analysisAPI.supplierEvaluationAndSelectionEcho({ userId: userStore.userInfo.userId });
    if (!res.data) return;
    let data = JSON.parse(res.data.channelScores);
    supplierEvaluationData.value = data.list;
    form.value = data.form;
    Object.entries(scoreFieldMapping).forEach(([key, value]) => {
      const match = evaluationWeights.value.find((item) => item.dimension === value);
      if (match) {
        match.currentWeight = res.data[key];
      }
    });
    Object.entries(mappingkey).forEach(([key, value]) => {
      const match = supplierEvaluationData1.value.find((item) => item.supplierType === value);
      if (match) {
        match.comprehensiveScore = res.data[key];
      }
    });
    supplierEvaluationData1.value.forEach((item, index) => {
      item.weight = evaluationWeights.value[index].currentWeight;
    });
    currentStep.value = 5;
  } catch (error) {
    // Existing task data is optional when no prior submission exists.
  }
};
//重新实训
const resetTask = async () => {
  if (saving.value) return;
  saving.value = true;
  try {
    await analysisAPI.supplierEvaluationAndSelectionReTrain({ userId: userStore.userInfo.userId });
    proxy.$modal.msgSuccess("重新实训成功");
    // 清空数据
    evaluationWeights.value.forEach((item) => {
      item.currentWeight = "";
    });
    supplierEvaluationData1.value.forEach((item) => {
      item.quality = "";
      item.priceCompetitiveness = "";
      item.supplyStability = "";
      item.reputation = "";
      item.afterSales = "";
      item.minOrderQuantity = "";
      item.productDiversity = "";
      item.logistics = "";
      item.comprehensiveScore = "";
      item.weight = "";
      item.type = "";
    });
    supplierEvaluationData.value.forEach((item) => {
      item.quality = "";
      item.priceCompetitiveness = "";
      item.supplyStability = "";
      item.reputation = "";
      item.afterSales = "";
      item.minOrderQuantity = "";
      item.productDiversity = "";
      item.logistics = "";
    });
    for (const key in form.value) {
      form.value[key] = "";
    }
    currentStep.value = 0;
    activeStep.value = 1;
    await persistProgress("RESET", true);
    proxy.$modal.msgSuccess("清空填写成功");
  } finally { saving.value = false; }
};
// 获取权重的函数
function getWeightByDimension(label) {
  if (!currentStep.value == 2) return;
  const match = evaluationWeights.value.find((item) => item.dimension === label);
  return match ? match.currentWeight : "-";
}
onMounted(async () => {
  await loadTaskConfig();
  await echo();
  await loadSavedProgress();
});
</script>
<style lang="scss" scoped>
.supplier {
  --supplier-panel: rgba(4, 31, 46, 0.78);
  --supplier-panel-strong: rgba(3, 20, 31, 0.95);
  --supplier-line: rgba(54, 174, 221, 0.42);

  min-height: calc(100vh - 84px);
  padding: 0 0 32px;
  color: #d7ecff;
  background:
    radial-gradient(circle at 10% 0%, rgba(15, 129, 189, 0.16), transparent 34%),
    linear-gradient(180deg, rgba(3, 17, 27, 0.94), rgba(5, 19, 30, 0.98));

  :deep(.training-step-area) {
    margin-top: 0 !important;
    border-color: var(--supplier-line) !important;
    background: var(--supplier-panel) !important;
    box-shadow: inset 0 1px 0 rgba(129, 231, 255, 0.12), 0 18px 38px rgba(0, 0, 0, 0.2) !important;
  }

  :deep(.el-table) {
    --el-table-border-color: rgba(63, 164, 207, 0.36);
    --el-table-header-bg-color: #0b577f;
    --el-table-header-text-color: #edfbff;
    --el-table-row-hover-bg-color: rgba(15, 107, 149, 0.32);
    --el-table-bg-color: rgba(2, 20, 31, 0.82);
    --el-table-tr-bg-color: rgba(2, 20, 31, 0.82);
    --el-table-text-color: #d7ecff;
    overflow: hidden;
    margin-top: 12px;
    border: 1px solid var(--supplier-line);
    border-radius: 12px;
    background: var(--supplier-panel-strong);
  }

  :deep(.el-table::before),
  :deep(.el-table__inner-wrapper::before) {
    background-color: transparent;
  }

  :deep(.el-table th.el-table__cell) {
    color: #edfbff !important;
    background: linear-gradient(180deg, #0f76a9, #0a567e) !important;
    font-weight: 800;
  }

  :deep(.el-table td.el-table__cell),
  :deep(.el-table tr) {
    color: #d7ecff !important;
    background: rgba(2, 20, 31, 0.82) !important;
  }

  :deep(.el-table .cell) {
    line-height: 1.65;
  }

  :deep(.el-input__wrapper) {
    min-height: 36px;
    border: 1px solid rgba(76, 169, 211, 0.48);
    border-radius: 7px;
    box-shadow: none !important;
    background: var(--supplier-panel-strong);
  }

  :deep(.el-input__inner) {
    color: #ebf8ff;
  }

  :deep(.el-input__inner::placeholder) {
    color: #7194a8;
  }

  :deep(.el-input__wrapper.is-focus) {
    border-color: #4edbff;
    box-shadow: 0 0 0 3px rgba(50, 205, 255, 0.12) !important;
  }

  :deep(.el-button) {
    border-color: rgba(55, 174, 221, 0.72) !important;
    color: #e9faff !important;
    background: linear-gradient(180deg, #168ab9, #0c628d) !important;
  }

  :deep(.el-button:hover) {
    border-color: #65e5ff !important;
    color: #ffffff !important;
    background: linear-gradient(180deg, #1b9ece, #0f709f) !important;
  }

  .online {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(44, 141, 182, 0.3);
    border-radius: 10px;
    background: rgba(1, 17, 27, 0.3);
  }

  .online span {
    width: auto;
    color: #d7ecff;
  }

  .online :deep(.el-select) {
    min-width: 180px;
    flex: 1 1 180px;
  }

  .taskfooter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    margin-top: 32px;
    padding-top: 28px;
    border-top: 1px solid rgba(55, 174, 221, 0.24);
  }

  .taskfooter :deep(.el-button) {
    min-width: 172px;
    height: 56px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 800;
  }
}

.supplier {
  display: grid;
  grid-template-columns: minmax(720px, 1fr) 340px;
  gap: 24px;
  min-height: calc(100vh - 76px);
  padding: 24px 24px 32px;
  color: #eef5ff;
  background: #06111d;

  .training-core { min-width: 0; padding: 28px; border: 1px solid rgba(0, 180, 255, .25); border-radius: 36px; background: rgba(8, 18, 28, .6); box-shadow: inset 0 1px 0 rgba(169, 229, 255, .08), 0 22px 48px rgba(0, 0, 0, .22); }
  .task-header { margin-bottom: 24px; }
  .task-badge { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 4px 14px; border: 1px solid rgba(99, 217, 255, .55); border-radius: 999px; color: #dff5ff; background: rgba(17, 126, 178, .36); font-size: 12px; font-weight: 700; }
  .task-title { margin: 12px 0 0; color: #fff; font-size: 30px; font-weight: 900; line-height: 1.3; }
  .task-card, .step-card { border: 1px solid rgba(82, 174, 226, .42); border-radius: 26px; background: rgba(0, 25, 42, .64); }
  .task-card { margin-top: 28px; padding: 18px 22px 22px; }
  .workbench-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid rgba(0, 180, 255, .2); }
  .section-eyebrow { margin: 0; color: #71dfff; font-size: 12px; font-weight: 800; line-height: 1.4; }
  .workbench-head h3 { margin: 4px 0 8px; color: #fff; font-size: 26px; font-weight: 800; line-height: 1.3; }
  .workbench-description { margin: 0; color: #d7ecff; font-size: 15px; line-height: 1.8; }
  .workbench-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; flex-shrink: 0; }
  .outline-action, .btn-nav { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 18px; border: 1px solid rgba(99, 217, 255, .55); border-radius: 999px; color: #e9fbff; background: rgba(17, 126, 178, .36); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
  .step-indicator { display: flex; gap: 6px; min-height: 58px; margin: 0 0 32px; padding: 6px; overflow-x: auto; border: 1px solid rgba(0, 180, 255, .3); border-radius: 999px; background: rgba(0, 20, 35, .65); }
  .step-tab { flex: 1 0 max-content; min-height: 46px; padding: 0 18px; border: 1px solid transparent; border-radius: 999px; color: #9ab3d0; background: transparent; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
  .step-tab.active { border-color: rgba(92, 224, 255, .7); color: #fff; background: linear-gradient(95deg, #0a6b9e, #0a5c86); }
  .step-card { margin-top: 32px; padding: 18px 22px 22px; }
  .step-indicator + .step-card, .workbench-head + .step-card { margin-top: 0; }
  .step-title-row { margin-bottom: 14px; }
  .step-title-row h3 { margin: 4px 0 0; color: #fff; font-size: 22px; font-weight: 900; line-height: 1.3; }
  .caseBacktitle { display: flex; align-items: center; gap: 8px; margin: 20px 0 10px; color: #dff5ff; font-size: 16px; font-weight: 800; }
  .caseBacktitle img { display: none; }
  .step-card > p { color: #d7ecff; font-size: 15px; line-height: 1.8; }
  :deep(.el-table) { width: 100% !important; max-width: 100%; margin-top: 12px; border-radius: 18px; }
  :deep(.el-table th.el-table__cell) { background: rgba(8, 55, 82, .98) !important; }
  :deep(.el-input__wrapper) { min-height: 42px; border-radius: 14px; background: #0f1a24; }
  :deep(.el-select__wrapper) { min-height: 42px; border: 1px solid rgba(45, 95, 126, .95); border-radius: 14px; color: #eef5ff; background: #0f1a24; }
  .step-navigation { display: flex; justify-content: center; gap: 14px; margin-top: 22px; }
  .btn-nav.btn-save, .btn-nav.btn-primary { border-color: rgba(92, 224, 255, .7); color: #fff; background: linear-gradient(95deg, #0b84bd, #096491); }
  .btn-nav:disabled { cursor: not-allowed; opacity: .45; }
  .taskfooter { gap: 52px; margin-top: 36px; padding-top: 0; border-top: 0; }
  .taskfooter :deep(.el-button) { min-width: 172px; height: 64px; border: 1px solid #2c83aa !important; border-radius: 6px; color: #dff7ff !important; background: rgba(13, 64, 88, .62) !important; font-size: 24px; font-weight: 900; }
}

@media (max-width: 1100px) { .supplier { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .supplier { padding: 14px; .training-core { padding: 18px; border-radius: 24px; } .workbench-head, .workbench-actions, .step-navigation { flex-direction: column; align-items: stretch; } .workbench-actions, .outline-action, .btn-nav, .taskfooter :deep(.el-button) { width: 100%; } .step-indicator { flex-direction: column; border-radius: 26px; } .step-tab { flex: none; } .taskfooter { gap: 14px; } } }
</style>
