dianshang-qianduan/src/views/product/price.vue

<!--
 * @Author: qinzhenpen qzp1807@126.com
 * @Date: 2025-04-28 15:05:56
 * @LastEditors: qinzhenpen qzp1807@126.com
 * @LastEditTime: 2025-05-08 17:17:01
 * @FilePath: \e-commerce-internet\src\views\product\price.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="price student-training-shell">
    <main class="training-core">
      <section class="task-header"><div class="task-badge"><el-icon><Money /></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 workbench-head--actions-only"><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="产品定价步骤"><template v-for="(step,index) in configuredSteps" :key="`${step}-${index}`"><button type="button" :class="['step-tab',{active:activeStep===index+1,complete:activeStep>index+1}]" :aria-current="activeStep===index+1?'step':undefined" :aria-label="`第${index+1}步：${step}`" @click="setCurrentStep(index+1)"><span class="step-marker">{{ String(index+1).padStart(2,'0') }}</span><span class="step-copy"><strong class="step-name" :title="step">{{ step }}</strong><span class="step-action">{{ activeStep===index+1?'当前步骤':'点击切换' }} <span aria-hidden="true">→</span></span></span></button><span v-if="index<configuredSteps.length-1" class="step-connector" aria-hidden="true"></span></template></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>
      PSM分析技术的理论基础
      <br />
      在开发新产品时，厂商对产品价格的看法和消费者对产品价格的知觉经常会不一致，因此厂商往往不愿意事先设定产品的价格，而希望能通过调查从消费者那里得到产品价格的可接受范围。
      <br />
      价格敏感度测试(Price Sensitivity Measure ment，PSM）不需要预先给定好价格，而是让每位被访者自己表示他们的可接受价格范围。
      <br />
      目的：可用于新产品开发、产品线的扩张（产品线内产品项目的增加）、产品范围的扩张（增加产品线）等情况下，确定产品价格的可接受值或范围。
      <br />
      样本的选择：对于产品的开发，必须从所有可能使用新产品的消费总体中抽取有代表性的样本。对于产品线或产品范围的扩张，样本可以从原来的品牌使用者中抽取。
      <br />
    </p>
    <div class="caseBacktitle">
      <img src="@/assets/images/步骤.png" alt="" />
      <span>二、实验实训</span>
    </div>
    <p>假如淘宝某店铺计划推出一款针对大学生群体的洗面奶，您对下列价格区间有何想法？</p>
    <el-table
      :data="priceList1"
      border
      style="width: 60%"
      :header-cell-style="{
        color: '#fff',
        fontSize: '14px',
        backgroundColor: '#6A7DE9!important',
      }"
    >
      <el-table-column label="价格区间" align="center" prop="label"></el-table-column>
      <el-table-column label="太便宜，可能有陷阱" align="center" prop="value">
        <template #default="{ row }">
          <el-radio v-model="row.value" label="1" class="hidden-label"></el-radio>
        </template>
      </el-table-column>
      <el-table-column label="很划算，肯定会购买" align="center" prop="value">
        <template #default="{ row }">
          <el-radio v-model="row.value" label="2" class="hidden-label"></el-radio>
        </template>
      </el-table-column>
      <el-table-column label="有点贵，还可以接受" align="center" prop="value">
        <template #default="{ row }">
          <el-radio v-model="row.value" label="3" class="hidden-label"></el-radio>
        </template>
      </el-table-column>
      <el-table-column label="太贵，直接放弃" align="center" prop="value">
        <template #default="{ row }">
          <el-radio v-model="row.value" label="4" class="hidden-label"></el-radio>
        </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>
    <p>洗面奶价格梯度表，累计百分比用百分数表示，保留两位小数。</p>
    <el-table
      :data="priceList2"
      border
      style="width: 80%"
      :header-cell-style="{
        color: '#fff',
        fontSize: '14px',
        backgroundColor: '#6A7DE9!important',
      }"
    >
      <el-table-column label="价格区间" align="center" prop="label"></el-table-column>
      <el-table-column label="太便宜，可能有陷阱" align="center">
        <el-table-column label="" align="center" prop="pricevalue1"></el-table-column>
        <el-table-column label="累计总和" align="center" prop="toocheapsum1">
          <template #default="{ row }">
            <el-input v-model="row.toocheapsum1" placeholder="" />
          </template>
        </el-table-column>
        <el-table-column label="累计百分比" align="center" prop="percentage1">
          <template #default="{ row }">
            <el-input v-model="row.percentage1" placeholder="">
              <template #suffix>%</template>
            </el-input>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="很划算，肯定会购买" align="center">
        <el-table-column label="" align="center" prop="pricevalue2"></el-table-column>
        <el-table-column label="累计总和" align="center" prop="toocheapsum2">
          <template #default="{ row }">
            <el-input v-model="row.toocheapsum2" placeholder="" />
          </template>
        </el-table-column>
        <el-table-column label="累计百分比" align="center" prop="percentage2">
          <template #default="{ row }">
            <el-input v-model="row.percentage2" placeholder="">
              <template #suffix>%</template>
            </el-input>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="有点贵，还可以接受" align="center">
        <el-table-column label="" align="center" prop="pricevalue3"></el-table-column>
        <el-table-column label="累计总和" align="center" prop="toocheapsum3">
          <template #default="{ row }">
            <el-input v-model="row.toocheapsum3" placeholder="" />
          </template>
        </el-table-column>
        <el-table-column label="累计百分比" align="center" prop="percentage3">
          <template #default="{ row }">
            <el-input v-model="row.percentage3" placeholder="">
              <template #suffix>%</template>
            </el-input>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column label="太贵，直接放弃" align="center">
        <el-table-column label="" align="center" prop="pricevalue4"></el-table-column>
        <el-table-column label="累计总和" align="center" prop="toocheapsum4">
          <template #default="{ row }">
            <el-input v-model="row.toocheapsum4" placeholder="" />
          </template>
        </el-table-column>
        <el-table-column label="累计百分比" align="center" prop="percentage4">
          <template #default="{ row }">
            <el-input v-model="row.percentage4" placeholder="">
              <template #suffix>%</template>
            </el-input>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
        </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>
    <p>太便宜和很划算向下累积，有点贵和太贵向上累积，画出每一个价格下开始觉得太便宜、便宜划算，开始觉得贵、太贵的累积人数百分比曲线图。</p>
    <div class="cnetent">
      <div class="left">
        <el-button @click="draw" style="margin-bottom: 20px">绘制</el-button>
        <div id="main" ref="main" style="width: 100%; height: 50vh"></div>
      </div>
      <div class="right">
        <div style="display: flex">
          <div class="online">
            <span>最优价格点:</span>
            <el-input style="width: 100px" type="text" v-model="formInline.optimalPrice" />
          </div>
          <div class="online ml20">
            <span>可接受价格点:</span>
            <el-input style="width: 100px" type="text" v-model="formInline.acceptablePrice" />
          </div>
        </div>
        <div class="online mt20">
          <span>可接受价格范围:</span>
          <el-input style="width: 100px" type="text" v-model="formInline.range1" />
          <span class="p10">----------</span>
          <el-input style="width: 100px" type="text" v-model="formInline.range2" />
        </div>
        <p>PSM模型在产品定价过程中的作用以及不足：</p>
        <el-input v-model="textarea2" :autosize="{ minRows: 11, maxRows: 11 }" type="textarea" placeholder="" />
      </div>
    </div>
        </section><section v-show="hasConfiguredSteps && activeStep > 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><p>请复核价格梯度、PSM 曲线、最优价格点和可接受价格范围后，保存或提交实训成果。</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="当前任务建议：完成价格敏感度数据整理，绘制 PSM 曲线并给出最优与可接受价格范围。" :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 * as echarts from "echarts";
import * as analysisAPI from "@/api/market-demand-mining.js";
import { ArrowLeft, ArrowRight, CircleCheck, Download, Money } 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();
import useUserStore from "@/store/modules/user";
import popModel from "@/views/components/popModal.vue";
const userStore = useUserStore();
const TASK_KEY = "product-pricing";
const taskConfig = ref(null);
const activeStep = ref(1);
const saving = ref(false);
const taskTitle = computed(() => taskConfig.value?.taskName || "产品定价");
const taskBackground = computed(() => taskConfig.value?.background || "PSM 价格敏感度分析通过价格区间问卷数据，帮助产品团队确定合理的定价区间。" );
const taskRequirement = computed(() => taskConfig.value?.requirements || "使用 PSM 模型完成价格梯度整理、曲线分析与定价结论输出。" );
const taskGoals = computed(() => parseTrainingArray(taskConfig.value?.objectives, ["理解 PSM 价格敏感度模型", "能够完成价格梯度与累计百分比计算", "能够给出合理定价区间"]));
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 formInline = ref({
  optimalPrice: "",
  acceptablePrice: "",
  range1: "",
  range2: "",
});
const textarea2 = ref("");
const dialogVisible = ref(false);
const reTraining = () => {
  proxy.$message.success("重新实训");
};
onMounted(() => {});
const main = ref(null);
const priceList1 = ref([
  {
    label: "15元以内",
    value: "",
  },
  {
    label: "15-20元",
    value: "",
  },
  {
    label: "20-30元",
    value: "",
  },
  {
    label: "30-50元",
    value: "",
  },
  {
    label: "50-70元",
    value: "",
  },
  {
    label: "70-100元",
    value: "",
  },
  {
    label: "100-200元",
    value: "",
  },
  {
    label: "200元以上",
    value: "",
  },
]);
const priceList2 = ref([
  {
    label: "15元以内",
    pricevalue1: "126",
    pricevalue2: "56",
    pricevalue3: "0",
    pricevalue4: "0",
    toocheapsum1: "",
    toocheapsum2: "",
    toocheapsum3: "",
    toocheapsum4: "",
    percentage1: "",
    percentage2: "",
    percentage3: "",
    percentage4: "",
  },
  {
    label: "15-20元",
    pricevalue1: "85",
    pricevalue2: "102",
    pricevalue3: "0",
    pricevalue4: "0",
    toocheapsum1: "",
    toocheapsum2: "",
    toocheapsum3: "",
    toocheapsum4: "",
    percentage1: "",
    percentage2: "",
    percentage3: "",
    percentage4: "",
  },
  {
    label: "20-30元",
    pricevalue1: "36",
    pricevalue2: "198",
    pricevalue3: "5",
    pricevalue4: "0",
    toocheapsum1: "",
    toocheapsum2: "",
    toocheapsum3: "",
    toocheapsum4: "",
    percentage1: "",
    percentage2: "",
    percentage3: "",
    percentage4: "",
  },
  {
    label: "30-50元",
    pricevalue1: "2",
    pricevalue2: "85",
    pricevalue3: "30",
    pricevalue4: "0",
    toocheapsum1: "",
    toocheapsum2: "",
    toocheapsum3: "",
    toocheapsum4: "",
    percentage1: "",
    percentage2: "",
    percentage3: "",
    percentage4: "",
  },
  {
    label: "50-70元",
    pricevalue1: "0",
    pricevalue2: "25",
    pricevalue3: "98",
    pricevalue4: "8",
    toocheapsum1: "",
    toocheapsum2: "",
    toocheapsum3: "",
    toocheapsum4: "",
    percentage1: "",
    percentage2: "",
    percentage3: "",
    percentage4: "",
  },
  {
    label: "70-100元",
    pricevalue1: "0",
    pricevalue2: "2",
    pricevalue3: "126",
    pricevalue4: "35",
    toocheapsum1: "",
    toocheapsum2: "",
    toocheapsum3: "",
    toocheapsum4: "",
    percentage1: "",
    percentage2: "",
    percentage3: "",
    percentage4: "",
  },
  {
    label: "100-200元",
    pricevalue1: "0",
    pricevalue2: "0",
    pricevalue3: "159",
    pricevalue4: "89",
    toocheapsum1: "",
    toocheapsum2: "",
    toocheapsum3: "",
    toocheapsum4: "",
    percentage1: "",
    percentage2: "",
    percentage3: "",
    percentage4: "",
  },
  {
    label: "200元以上",
    pricevalue1: "0",
    pricevalue2: "0",
    pricevalue3: "109",
    pricevalue4: "192",
    toocheapsum1: "",
    toocheapsum2: "",
    toocheapsum3: "",
    toocheapsum4: "",
    percentage1: "",
    percentage2: "",
    percentage3: "",
    percentage4: "",
  },
]);
// 校验空值并只提示一次
function validateAndAlertOnce() {
  let hasEmptyValue = false; // 标记是否发现空值
  // 遍历数组检查空值
  priceList2.value.forEach((item) => {
    Object.keys(item).forEach((key) => {
      if (item[key] === "") {
        hasEmptyValue = true; // 发现空值，标记为 true
        // 可选择替换空值（如果需要）
        item[key] = ""; // 替换为空值时的默认值
      }
    });
  });

  // 只在发现空值时提示一次
  if (hasEmptyValue) {
    // alert("数据中存在空值，已自动替换为默认值 0。");
    proxy.$modal.msgWarning("请填写完整数据!");
    return false; // 返回 false，表示存在空值
  }
  return true; // 没有空值，返回 true
}
const draw = () => {
  const isValid = validateAndAlertOnce();
  if (!isValid) return;
  const minPicture = priceList2.value.map((item) => item.percentage1);
  const calculatePrice = priceList2.value.map((item) => item.percentage2);
  const minexpensive = priceList2.value.map((item) => item.percentage3);
  const expensive = priceList2.value.map((item) => item.percentage4);
  const priceRanges = ['15元以内',"15-20元", "20-30元", "30-50元", "50-70元", "70-100元", "100-200元", "200元以上"];
  var myChart = echarts.init(main.value);
  myChart.setOption({
    title: {
      text: "PSM价格数据分析",
      left: "center",
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["太便宜", "很划算", "有点贵", "太贵了"],
      top: 30,
    },
    xAxis: {
      type: "category",
      name: "价格区间",
      data: priceRanges,
    },
    yAxis: {
      type: "value",
      name: "销售数量 (件)",
      min: 0,
      max: 100,
    },
    series: [
      {
        name: "太便宜",
        type: "line",
        data: minPicture,
        color: "#1f77b4",
        symbol: "circle",
        symbolSize: 8,
      },
      {
        name: "太贵了",
        type: "line",
        data: expensive,
        color: "#d62728",
        symbol: "circle",
        symbolSize: 8,
      },
      {
        name: "有点贵",
        type: "line",
        data: minexpensive,
        color: "#2ca02c",
        symbol: "circle",
        symbolSize: 8,
      },
      {
        name: "很划算",
        type: "line",
        data: calculatePrice,
        color: "#ff7f0e",
        symbol: "circle",
        symbolSize: 8,
      },
    ],
    grid: {
      left: "2%",
      right: "15%",
      bottom: "10%",
      containLabel: true,
    },
    graphic: [
      {
        type: "text",
        left: 391, // 或 "60%" 等
        top: 334,
        z: 100, // 设置更高的图层层级
        style: {
          text: "P4",
          font: "bold 14px sans-serif",
          fill: "#2ca02c",
          // 显示在线条墙上面
          distance: 10,
        },
      },
      {
        type: "text",
        left: 300, // 或 "60%" 等
        top: 380,
        z: 100, // 设置更高的图层层级
        symbol: "circle",
        style: {
          text: "P1",
          font: "bold 14px sans-serif",
          fill: "#1f77b4",
          // 显示在线条墙上面
          distance: 10,
        },
      },
      {
        type: "text",
        left: 350, // 或 "60%" 等
        top: 388,
        z: 100, // 设置更高的图层层级
        symbol: "circle",
        style: {
          text: "P2",
          font: "bold 14px sans-serif",
          fill: "#d62728",
          // 显示在线条墙上面
          distance: 10,
        },
      },
      {
        type: "text",
        left: 430, // 或 "60%" 等
        top: 380,
        z: 100, // 设置更高的图层层级
        symbol: "circle",
        style: {
          text: "P3",
          font: "bold 14px sans-serif",
          fill: "#ff7f0e",
          // 显示在线条墙上面
          distance: 10,
        },
      },
    ],
  });
};
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, formInline: formInline.value, textarea2: textarea2.value, priceList1: priceList1.value, priceList2: priceList2.value, updatedAt: new Date().toISOString() }; }
function applyProgress(value) { if (!value || typeof value !== "object") return; activeStep.value = normalizeActiveStep(value.activeStep); formInline.value = { ...formInline.value, ...(value.formInline || {}) }; textarea2.value = value.textarea2 || ""; if (Array.isArray(value.priceList1)) priceList1.value = value.priceList1; if (Array.isArray(value.priceList2)) priceList2.value = value.priceList2; }
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 () => {
  const minPicture = priceList2.value.map((item) => item.percentage1);
  const minPriceValue = priceList2.value.map((item) => item.toocheapsum1);
  const calculatePrice = priceList2.value.map((item) => item.percentage2);
  const calculatevalue = priceList2.value.map((item) => item.toocheapsum2);
  const minexpensive = priceList2.value.map((item) => item.percentage3);
  const minexpensivevalue = priceList2.value.map((item) => item.toocheapsum3);
  const expensive = priceList2.value.map((item) => item.percentage4);
  const tooSum = priceList2.value.map((item) => item.toocheapsum4);
  //   判断数组是否为空
  if (minPicture.includes("") || minPriceValue.includes("") || calculatePrice.includes("") || calculatevalue.includes("") || minexpensive.includes("") || minexpensivevalue.includes("") || expensive.includes("") || priceList1.value.some((item) => !item.value)) {
    return proxy.$modal.msgWarning("请填写完整数据");
  }
  //   判断formInline的值是否为空
  if (formInline.value.optimalPrice == "" || formInline.value.acceptablePrice == "" || formInline.value.range1 == "" || formInline.value.range2 == "") {
    return proxy.$modal.msgWarning("请填写完整数据");
  }
  const params = {
    acceptablePrice: formInline.value.acceptablePrice,
    acceptablePriceRange: formInline.value.range1 + "," + formInline.value.range2,
    optimalPrice: formInline.value.optimalPrice,
    cheapPercentage: minPicture.join(","),
    cheapSum: minPriceValue.join(","),
    context: textarea2.value,
    costEffectivePercentage: calculatePrice.join(","),
    costEffectiveSum: calculatevalue.join(","),
    expensivePercentage: minexpensive.join(","),
    expensiveSum: minexpensivevalue.join(","),
    tooExpensivePercentage: expensive.join(","),
    tooSum: tooSum.join(","),
    priceRange: JSON.stringify(priceList1.value),
    displayStatus: 1,
  };
  if (saving.value) return;
  saving.value = true;
  try { await analysisAPI.productPricingSubmit({ stuAnswer: params, userId: userStore.userInfo.userId }); await persistProgress("SUBMIT"); } finally { saving.value = false; }
};
// 回显接口
const loadTaskInfo = async () => {
  try {
    const res = await analysisAPI.productPricingEcho({ userId: userStore.userInfo.userId });
    if (!res.data) return;
    formInline.value.optimalPrice = res.data.optimalPrice;
    formInline.value.acceptablePrice = res.data.acceptablePrice;
    formInline.value.range1 = res.data.acceptablePriceRange.split(",")[0];
    formInline.value.range2 = res.data.acceptablePriceRange.split(",")[1];
    textarea2.value = res.data.context;
    priceList1.value = JSON.parse(res.data.priceRange !== "" ? res.data.priceRange : priceList1.value);
    priceList2.value.forEach((item, index) => {
      item.toocheapsum1 = res.data.cheapSum.split(",")[index];
      item.toocheapsum2 = res.data.costEffectiveSum.split(",")[index];
      item.toocheapsum3 = res.data.expensiveSum.split(",")[index];
      item.percentage1 = res.data.cheapPercentage.split(",")[index];
      item.percentage2 = res.data.costEffectivePercentage.split(",")[index];
      item.percentage3 = res.data.expensivePercentage.split(",")[index];
      item.percentage4 = res.data.tooExpensivePercentage.split(",")[index];
      item.toocheapsum4 = res.data.tooSum.split(",")[index];
    });
    draw();
  } catch (error) { /* Existing submission is optional. */ }
};
// 重新实训
const resetTask = async () => {
  if (saving.value) return;
  saving.value = true;
  try {
    await analysisAPI.productPricingReTrain({ userId: userStore.userInfo.userId, module: "产品定价" });
    proxy.$modal.msgSuccess("重新实训成功");
    // 清楚数据
    formInline.value.optimalPrice = "";
    formInline.value.acceptablePrice = "";
    formInline.value.range1 = "";
    formInline.value.range2 = "";
    textarea2.value = "";
    // 清除数据
    priceList1.value.forEach((item) => {
      item.value = "";
    });
    priceList2.value.forEach((item) => {
      item.toocheapsum1 = "";
      item.toocheapsum2 = "";
      item.toocheapsum3 = "";
      item.toocheapsum4 = "";
      item.percentage1 = "";
      item.percentage2 = "";
      item.percentage3 = "";
      item.percentage4 = "";
    });
    activeStep.value = 1;
    await persistProgress("RESET", true);
    proxy.$modal.msgSuccess("清空填写成功");
  } finally { saving.value = false; }
};
onMounted(async () => {
  await loadTaskConfig();
  await loadTaskInfo();
  await loadSavedProgress();
});
</script>
<style lang="scss" scoped>
.price {
  --price-panel: rgba(4, 31, 46, 0.78);
  --price-panel-strong: rgba(3, 20, 31, 0.95);
  --price-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(--price-line) !important;
    background: var(--price-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(--price-line);
    border-radius: 12px;
    background: var(--price-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),
  :deep(.el-textarea__inner) {
    border: 1px solid rgba(76, 169, 211, 0.48);
    border-radius: 7px;
    color: #ebf8ff;
    box-shadow: none !important;
    background: var(--price-panel-strong);
  }

  :deep(.el-input__wrapper) {
    min-height: 36px;
  }

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

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

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

  :deep(.el-radio__inner) {
    border-color: #48bfe8;
    background: rgba(3, 20, 31, 0.9);
  }

  :deep(.el-radio__input.is-checked .el-radio__inner) {
    border-color: #4edbff;
    background: #159ac9;
  }

  :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;
  }

  :deep(.hidden-label) {
    .el-radio__label {
      display: none;
    }
  }

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

  .cnetent {
    display: flex;
    gap: 24px;
    align-items: stretch;
    padding: 18px;
    border: 1px solid rgba(44, 141, 182, 0.3);
    border-radius: 12px;
    background: rgba(1, 17, 27, 0.24);
    .left {
      width: 50%;
      height: 100%;
    }
    .right {
      width: 50%;
      height: 100%;
    }
  }

  .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;
  }

  @media (max-width: 960px) {
    .cnetent {
      flex-direction: column;

      .left,
      .right {
        width: 100%;
      }
    }
  }
}

.price {
  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%; border-radius: 18px; }:deep(.el-table th.el-table__cell) { background: rgba(8,55,82,.98) !important; }:deep(.el-input__wrapper),:deep(.el-textarea__inner) { border-radius: 14px; 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; }
}
.price {
  .workbench-actions { margin-left: auto; }
  .step-indicator { display:flex; align-items:center; gap:12px; width:calc(100% + 24px); min-height:0; margin:0 -12px 32px; padding:18px 22px; overflow-x:auto; border:1px solid rgba(0,180,255,.3); border-radius:18px; background:linear-gradient(110deg,rgba(4,39,58,.9),rgba(2,20,33,.94)); box-shadow:inset 0 1px 0 rgba(169,229,255,.08); }
  .step-tab { display:flex; flex:1 0 145px; align-items:center; min-height:66px; padding:8px 10px; border:1px solid rgba(68,141,177,.35); border-radius:8px; color:#9ab3d0; background:rgba(3,27,43,.52); text-align:left; transition:transform .2s,color .2s,background .2s,border-color .2s,box-shadow .2s; }
  .step-tab:hover,.step-tab:focus-visible { transform:translateY(-2px); border-color:rgba(89,223,255,.82); color:#fff; background:rgba(8,92,131,.52); box-shadow:0 8px 18px rgba(0,0,0,.2); outline:none; }
  .step-tab.active { border-color:rgba(89,226,255,.85); color:#fff; background:linear-gradient(95deg,#0a6b9e,#0a5c86); box-shadow:0 8px 20px rgba(0,120,170,.22); }
  .step-marker { display:inline-flex; flex:0 0 38px; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid rgba(113,223,255,.55); border-radius:50%; color:#bdefff; background:rgba(3,27,43,.72); font-size:13px; font-weight:900; }
  .step-copy { display:grid; min-width:0; gap:4px; margin-left:10px; }.step-copy strong { display:-webkit-box; overflow:hidden; color:inherit; font-size:14px; line-height:1.25; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.step-copy span { color:#7ec7e7; font-size:12px; font-weight:700; }.step-tab.active .step-marker { border-color:#a8f3ff; color:#fff; background:linear-gradient(135deg,#0bb2ed,#0a6b9e); box-shadow:0 0 0 4px rgba(77,215,255,.13),0 0 18px rgba(77,215,255,.4); }.step-tab.complete .step-marker { border-color:#59e0ca; color:#dffbff; background:rgba(13,132,119,.5); }.step-connector { flex:0 0 28px; height:2px; background:rgba(77,167,220,.54); color:#78cfe9; font-size:16px; line-height:0; text-align:right; }.step-connector.complete { background:#55ddcc; color:#75f0df; }
}
@media (max-width:1100px) { .price { grid-template-columns:1fr; } } @media (max-width:900px) { .price { 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 { align-items:stretch; flex-direction:column; width:100%; margin-right:0; margin-left:0; overflow:visible; border-radius:20px; }.step-tab { flex:0 0 auto; width:100%; }.step-connector { flex:0 0 22px; width:2px; height:22px; margin-left:29px; text-align:center; writing-mode:vertical-rl; }.taskfooter { gap:14px; }.cnetent { flex-direction:column; .left,.right { width:100%; } } } }
.step-tab.active { border-color:rgba(89,226,255,.85); color:#fff; background:linear-gradient(115deg,rgba(4,109,155,.78),rgba(5,62,102,.64)); box-shadow:0 0 18px rgba(24,183,235,.22),inset 0 1px 0 rgba(176,246,255,.2); }.step-tab.active .step-marker { border-color:#72e8ff; color:#fff; background:linear-gradient(135deg,#08b7e8,#1375d0); box-shadow:0 0 0 5px rgba(25,179,237,.14),0 0 18px rgba(46,208,255,.58); }.step-tab.complete { color:#dffbff; }.step-tab.complete .step-marker { border-color:rgba(84,230,221,.85); color:#062b37; background:#6ef0e1; box-shadow:0 0 12px rgba(79,231,218,.35); }.step-connector.complete { background:linear-gradient(90deg,#6ef0e1,#1cb8e9); color:#63e6f1; box-shadow:0 0 9px rgba(53,218,235,.46); }
.price .step-indicator { position:relative; display:flex; align-items:center; gap:0; width:calc(100% + 24px); margin:0 -12px 32px; padding:18px 22px; overflow-x:auto; border-radius:18px; background:linear-gradient(90deg,rgba(6,42,61,.58),rgba(1,18,31,.42)),rgba(0,0,0,.3); }
.price .step-tab { display:flex; flex:1 0 145px; align-items:center; min-width:0; min-height:66px; padding:8px 10px; border:1px solid rgba(68,141,177,.35); border-radius:8px; color:#9ab3d0; background:rgba(3,27,43,.52); text-align:left; }
.price .step-tab.active { border-color:rgba(89,226,255,0.85); color:#fff; background:linear-gradient(115deg,rgba(4,109,155,0.78),rgba(5,62,102,0.64)); box-shadow:0 0 18px rgba(24,183,235,.22); }
.price .step-copy { display:grid; min-width:0; gap:4px; margin-left:10px; }.price .step-name { display:-webkit-box; overflow:hidden; font-size:14px; line-height:1.25; -webkit-box-orient:vertical; -webkit-line-clamp:2; }.price .step-action { color:#66b6d4; font-size:10px; font-weight:800; }.price .step-connector { position:relative; flex:0 1 40px; min-width:18px; height:2px; margin:0 8px; overflow:visible; background:rgba(98,169,201,.34); }.price .step-connector::after { position:absolute; top:50%; right:-1px; width:6px; height:6px; border-top:1px solid #73b1ce; border-right:1px solid #73b1ce; content:""; transform:translateY(-50%) rotate(45deg); }.price .step-tab.complete + .step-connector { background:linear-gradient(90deg,#6ef0e1,#1cb8e9); }
@media (max-width:900px) { .price .step-indicator { flex-direction:column; width:100%; margin-right:0; margin-left:0; overflow:visible; }.price .step-tab { flex:0 0 auto; width:100%; }.price .step-connector { flex:0 0 20px; min-width:0; width:2px; height:20px; margin-left:29px; } }
.workbench-head--actions-only {
  justify-content: flex-end;
  margin-bottom: 18px;
  padding-bottom: 0;
  border-bottom: 0;
}
</style>