<template>
  <div class="doxs">
    <el-scrollbar :height="`${height - 100}px`">
      <div class="content">
        <div class="import" @click="openKnowledge">
          <img src="@/assets/images/导入.png" alt="" />
          <span>任务知识导入</span>
        </div>
        <!-- <div v-if="knowledgeFlag" v-html="knowledgeHtml"></div> -->
        <div>
          <div class="caseBack">
            <div class="title">
              <img src="@/assets/images/caseIcon.png" alt="" />
              <span>案例背景：</span>
            </div>
            <span style="line-height: 25px; font-size: 14px">
              购物篮分析是指通过分析消费者在电商平台上的购物数据，了解他们购买商品之间的关联性，在做商品推荐和货架摆放布局时候，将关联度高的商品放一起捆绑销售，从而提升销售额。
              <br />
              现有某购物商场的购物篮数据，请分析两两搭配销售的价值。A、B、C、D分别代表不同的商品
            </span>
            <div style="margin-top: 10px; display: flex">
              <el-table
                :data="fileTable1"
                style="width: 650px"
                border
                :header-cell-style="{
                  color: '#fff',
                  fontSize: '14px',
                  backgroundColor: '#0b577f',
                }"
              >
                <el-table-column label="购物篮ID/订单ID" align="center" prop="id"></el-table-column>
                <el-table-column label="商品1" align="center" prop="goods1"></el-table-column>
                <el-table-column label="商品2" align="center" prop="goods2"></el-table-column>
                <el-table-column label="商品3" align="center" prop="goods3"></el-table-column>
              </el-table>
              <div class="download" @click="downloadData">下载数据</div>
            </div>
            <p style="line-height: 25px; font-size: 14px">
              计算公式如下：
              <br />
              1.支持度是指A和B两个商品同时被购买的概率，AB组合的支持度=同时包含A和B商品的订单数/总订单数*100%=P(A∩B)
              <br />
              2.置信度是指购买A之后又购买了B的条件概率,是买了A和B的订单占所有买了A的订单里的占比，A对B的置信度=P(A∩B)/P(A)
              <br />
              3.提升度是指在购买A产品这个条件下购买B产品的可能性与没有这个条件下购买B产品的可能性之比（置信度/无条件概率），A对B的提升度=A对B的置信度/P(B）。
              <br />
              一般而言，提升度如果小于1，则该推荐规则不应该被使用。
            </p>
          </div>
          <div class="line"></div>
          <div class="caseBack">
            <div class="title">
              <img src="@/assets/images/步骤.png" alt="" />
              <span>第一步，划分商品组合</span>
            </div>
            <span style="line-height: 25px; font-size: 14px">
              根据购物篮A、B、C、D四种不同的商品，按照两两搭配的方式，可能有以下几种组合。
              <br />
              请按照A、B、C、D顺序依次两两组合：
            </span>
            <div style="margin-top: 10px; display: flex">
              <div style="display: flex">
                <div>
                  <el-select v-model="combinationValue1" placeholder="请选择" style="width: 95px" size="small">
                    <el-option label="A" value="A" />
                    <el-option label="B" value="B" />
                    <el-option label="C" value="C" />
                    <el-option label="D" value="D" />
                  </el-select>
                  —
                  <el-select v-model="combinationValue2" placeholder="请选择" style="width: 95px" size="small">
                    <el-option label="A" value="A" />
                    <el-option label="B" value="B" />
                    <el-option label="C" value="C" />
                    <el-option label="D" value="D" />
                  </el-select>
                </div>
                <div style="display: flex; align-items: start">
                  <el-button class="addBtn" @click="addCombination">添加组合</el-button>
                  <img src="@/assets/images/箭头.png" alt="" />
                  <div class="comList">
                    <ul>
                      <p style="color: #fff">商品组合</p>
                      <li v-for="(item, index) in list" :key="index">
                        <span>{{ item }}</span>
                        <span v-if="item" style="float: right; margin-right: 5px; cursor: pointer" @click="deleteItem(index)">-</span>
                      </li>
                    </ul>
                    <div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
                      <span v-if="comListError" style="color: red">X</span>
                      <span v-if="!comListError" style="color: #00bb00">√</span>
                    </div>
                  </div>
                </div>
              </div>

              <div class="submit" @click="step1Submit">提交</div>
            </div>
          </div>
          <div class="line"></div>
          <div class="caseBack">
            <div class="title">
              <img src="@/assets/images/步骤.png" alt="" />
              <span>第二步，计算无条件概率</span>
            </div>
            <span style="line-height: 25px; font-size: 14px">根据购物篮信息，计算A、B、C、D四种商品的无条件概率。</span>
            <div style="margin-top: 10px; display: flex">
              <el-table
                :data="step2Data"
                style="width: 350px"
                border
                :header-cell-style="{
                  color: '#fff',
                  fontSize: '14px',
                  backgroundColor: '#0b577f',
                }"
              >
                <el-table-column label="商品组合" align="center" prop="name"></el-table-column>
                <el-table-column label="概率（100%）" align="center" prop="amount">
                  <template #default="scope">
                    <el-input v-model="scope.row.params" placeholder="请输入" style="width: 70px"></el-input>
                    %
                    <div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
                      <span v-if="scope.row.isError" style="color: red">X</span>
                      <span v-if="!scope.row.isError" style="color: #00bb00">√</span>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="submit" @click="step2Submit">提交</div>
            </div>
          </div>
          <div class="line"></div>
          <div class="caseBack">
            <div class="title">
              <img src="@/assets/images/步骤.png" alt="" />
              <span>第三步，计算支持度、置信度、提升度</span>
            </div>
            <span style="line-height: 25px; font-size: 14px">
              按照第一步中的两两组合情况，依次计算各自组合的支持度、置信度、提升度。
              <br />
              计算结果保留小数点后两位小数。
            </span>
            <div style="margin-top: 10px; display: flex">
              <el-table
                :data="step3Data"
                style="width: 650px"
                border
                :header-cell-style="{
                  color: '#fff',
                  fontSize: '14px',
                  backgroundColor: '#0b577f',
                }"
              >
                <el-table-column label="商品组合" align="center" prop="data1"></el-table-column>
                <el-table-column label="支持度" align="center" prop="amount">
                  <template #default="scope">
                    <el-input v-model="scope.row.params1" placeholder="请输入" style="width: 70px"></el-input>
                    %
                    <div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
                      <span v-if="scope.row.isError1" style="color: red">X</span>
                      <span v-if="!scope.row.isError1" style="color: #00bb00">√</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="置信度" align="center" prop="amount">
                  <template #default="scope">
                    <el-input v-model="scope.row.params2" placeholder="请输入" style="width: 70px"></el-input>
                    %
                    <div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
                      <span v-if="scope.row.isError2" style="color: red">X</span>
                      <span v-if="!scope.row.isError2" style="color: #00bb00">√</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="提升度" align="center" prop="amount">
                  <template #default="scope">
                    <el-input v-model="scope.row.params3" placeholder="请输入" style="width: 70px"></el-input>
                    %
                    <div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
                      <span v-if="scope.row.isError3" style="color: red">X</span>
                      <span v-if="!scope.row.isError3" style="color: #00bb00">√</span>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="submit" @click="step3Submit">提交</div>
            </div>
          </div>
          <div class="line"></div>
          <div class="caseBack">
            <div class="title">
              <img src="@/assets/images/步骤.png" alt="" />
              <span>第四步，判断两两搭配销售价值</span>
            </div>
            <span style="line-height: 25px; font-size: 14px">
              当A对B的提升度＞1，则表示买A再买B的概率大于本身买B的概率，就表示买A对买B带来了提升效果。
              <br />
              当A对B的提升度＜1，则表示买A再买B的概率小于本身买B的概率，就表示买A对买B带来了负向效果。
              <br />
              当A对B的提升度 = 1，则代表买A对买B没有影响。
            </span>
            <div style="margin-top: 10px; display: flex">
              <el-table
                :data="step4Data"
                style="width: 350px"
                border
                :header-cell-style="{
                  color: '#fff',
                  fontSize: '14px',
                  backgroundColor: '#0b577f',
                }"
              >
                <el-table-column label="商品组合" align="center" prop="data1" width="120"></el-table-column>
                <el-table-column label="支持度" align="center" prop="amount">
                  <template #default="scope">
                    <el-select v-model="scope.row.params" placeholder="请选择" style="width: 95px" size="small">
                      <el-option label="提升效果" value="提升效果" />
                      <el-option label="负向效果" value="负向效果" />
                      <el-option label="没有影响" value="没有影响" />
                    </el-select>
                    <div v-if="showAnswerFlag" style="margin-left: 3px; display: inline-block">
                      <span v-if="scope.row.isError" style="color: red">X</span>
                      <span v-if="!scope.row.isError" style="color: #00bb00">√</span>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="submit" @click="step4Submit">提交</div>
            </div>
            <p style="line-height: 25px; font-size: 14px">进一步的分析，可以分析支持度最高top10的商品组合、置信度最高top10的商品组合、提升度最高top10的商品组合。</p>
          </div>
          <div class="line"></div>
          <div class="caseBack">
            <div class="title">
              <img src="@/assets/images/步骤.png" alt="" />
              <span>第五步，制定营销策略</span>
            </div>
            <span style="line-height: 25px; font-size: 14px">通过购物篮分析，能给实际销售带来的价值：</span>
            <div class="customerType" style="width: 887px">
              <img src="@/assets/images/促销.png" alt="" />
              <span>优化商品配置：可以厘清哪些商品可以一起购买,关联商品可以优化陈列方式、进行促销等;</span>
            </div>
            <div class="customerType" style="width: 887px">
              <img src="@/assets/images/需求.png" alt="" />
              <span>了解客户需求：分析出顾客的购买习惯，顾客购买商品的时间、地点等;</span>
            </div>
            <div class="customerType" style="width: 887px">
              <img src="@/assets/images/趋势.png" alt="" />
              <span>分析销售趋势：利用数据仓库对品种和库存的趋势进行分析,选定需要补充的商品,研究顾客购买趋势,分析季节性购买模式,确定降价商品。</span>
            </div>
          </div>
        </div>
      </div>
    </el-scrollbar>
    <div class="taskfooter">
      <el-button @click="submitData">提交任务</el-button>
      <el-button @click="retrain">重新实训</el-button>
    </div>
    <pop-modal :showModel="dialogVisible" @closePop="handlClose">
      <template v-slot:content>
        <div v-html="knowledgeHtml"></div>
      </template>
    </pop-modal>
  </div>
</template>

<script setup>
import popModal from "@/views/components/popModal.vue";
import { getUserInfo } from "@/utils/auth";
import * as portraitModel from "@/api/portraitModel";
import * as echarts from "echarts";
import { downBlobFile } from "@/utils/index.js";
import { onBeforeUnmount, onMounted } from "vue";
const { proxy } = getCurrentInstance();
const height = ref(window.innerHeight - 140);
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const timer = ref(null);
const timeCount = ref(0);
const showAnswerFlag = ref(false);
const comListError = ref(false);
const knowledgeHtml = ref(
  `<p style="text-align: left;">一、理解购物篮分析</p><p style="text-align: left;"><span style="font-family: 微软雅黑;">购物篮分析是指通过分析消费者在电商平台上的购物数据，了解他们购买商品之间的关联性，从而发现潜在的消费行为和需求，为电商平台提供决策支持。通过购物篮分析，电商平台可以更好地理解用户的购物习惯和偏好，从而为用户提供更加精准的推荐和产品布局。</span></p><p>购物篮分析的关键衡量指标有三个：支持度、置信度、提升度</p><p>为了更好地解释这三个指标，这里我先跟大家举个例子，后续就用这个例子说明。</p><p>某超市30天订单数一共10000单，其中包含A商品的订单有600单，包含B商品的订单有400单，同时包含A和B两种商品的订单有300单。</p><p>购买A商品的概率 P(A)=(600/10000)*100%=6%</p><p>购买B商品的概率 P(B)=(400/10000)*100%=4%</p><p>同时购买A商品和B商品的概率 P(A∩B)=(300/10000)*100%=3%</p><p style="text-align: left;">1.支持度</p><p style="text-align: left;">支持度是指A和B两个商品同时被购买的概率，代表了这个组合的可靠程度。</p><p style="text-align: left;">AB组合的支持度=同时包含A和B商品的订单数/总订单数*100%</p><p style="text-align: left;">在本例中,AB组合的支持度=P(A∩B)=(300/10000) *100%=3%</p><p style="text-align: left;">2.置信度</p><p style="text-align: left;">置信度是指购买A之后又购买了B的条件概率,是买了A和B的订单占所有买了A的订单里的占比。代表买了A的用户有多大概率会再买B，既买A产品对B产品产生了多大的影响。</p><p style="text-align: left;">A对B的置信度=同时包含A和B商品的订单数/包含A商品的订单数*100%</p><p style="text-align: left;">在本例中，A对B的置信度=P(A∩B)/P(A)=(300/600)*100%=50%</p><p style="text-align: left;">3.提升度</p><p style="text-align: left;">A对B提升度=A对B的置信度/P(B)，是指在购买A产品这个条件下购买B产品的可能性与没有这个条件下购买B 产品的可能性之比。</p><p style="text-align: left;">它的计算方法是：A对B的置信度/P(B)。提升度和置信度一样，也是一个条件概率。</p><p style="text-align: left;"> &nbsp; &nbsp; 当置信度&gt;P(B)时,A对B的提升度&gt;1，则表示买A再买B的概率大于本身买B的概率,就表示买A对买B带来了提升效果。</p><p style="text-align: left;"> &nbsp; &nbsp; 当置信度＜P(B)时,A对B的提升度&lt;1，则表示买A再买B的概率小于本身买B的概率,就表示买A对买B带来了负向效果。</p><p style="text-align: left;"> &nbsp; &nbsp; 当置信度等于P(B)时,A对B的提升度=1，则代表买A对买B没有影响。</p><p style="text-align: left;">在本例中，A对B的提升度=A对B的置信度/P(B)=50%/4%=12.5，表示商品A对商品B有较大的提升，有较大的搭配价值，建议搭配。</p><p style="text-align: left;">二、利用购物篮分析优化产品推荐</p><p style="text-align: left;"><span style="font-family: 微软雅黑;">1. 推荐算法优化：根据用户的历史购物数据，结合用户画像和行为数据，制定更加精准的推荐算法。通过分析用户的购买行为，了解他们的购物习惯和偏好，为不同的用户提供个性化的推荐。</span></p><p style="text-align: left;"><span style="font-family: 微软雅黑;">2. 动态推荐：根据用户在购物过程中的实时行为，实时调整推荐结果，确保推荐内容与用户需求高度匹配。</span></p><p style="text-align: left;"><span style="font-family: 微软雅黑;">3. 推荐内容丰富度：除了商品推荐外，还可以考虑推荐相关服务、优惠券、套餐等，增加用户购物的丰富度和满意度。</span></p><p style="text-align: left;">三、利用购物篮分析优化产品布局</p><p style="text-align: left;"><span style="font-family: 微软雅黑;">1. 商品分类优化：根据用户的购物习惯和偏好，对商品进行分类和布局，提高用户在搜索和浏览过程中的便利性。</span></p><p style="text-align: left;"><span style="font-family: 微软雅黑;">2. 突出热销商品：通过分析用户的购买数据，了解哪些商品最受用户欢迎，将热销商品放在更加显眼的位置，提高用户的点击率和购买率。</span></p><p style="text-align: left;"><span style="font-family: 微软雅黑;">3. 季节性商品布局：根据季节变化，提前布局相关季节性商品，提高用户在特定季节的购买欲望。</span></p><p style="text-align: left;">四、利用购物篮分析提升客户服务体验</p><p style="text-align: left;"><span style="font-family: 微软雅黑;">1. 客户反馈处理：通过购物篮分析，了解用户对哪些商品、服务和功能存在不满，及时调整和优化，提高用户满意度。</span></p><p style="text-align: left;"><span style="font-family: 微软雅黑;">2. 售后服务优化：针对购买后可能出现的问题和售后需求，提前做好应对措施和解决方案，提高用户的售后服务体验。</span></p><p style="text-align: left;"><span style="font-family: 微软雅黑;">3. 个性化客服：针对不同用户的购物习惯和偏好，提供个性化的客服服务，提高用户对电商平台的信任度和忠诚度。</span></p><p style="text-align: left;">五、利用购物篮分析进行数据驱动的营销策略</p><p style="text-align: left;"><span style="font-family: 微软雅黑;">1. 优惠券策略：根据用户的购物数据和习惯，制定个性化的优惠券策略，提高用户的购买意愿和转化率。</span></p><p style="text-align: left;"><span style="font-family: 微软雅黑;">2. 组合营销：针对用户的购买行为和需求，制定有针对性的组合营销策略，提高用户的购买量和忠诚度。</span></p><p style="text-align: left;"><span style="font-family: 微软雅黑;">3. 社交媒体推广：通过社交媒体平台，利用购物篮分析结果进行精准推广，提高品牌知名度和用户参与度。</span></p><p style="text-align: left;"><br></p>`
);
const list = ref([]);
const combinationValue1 = ref("");
const combinationValue2 = ref("");
const dialogVisible = ref(false);
const knowledgeFlag = ref(false);
const combinationRight = ref(["A—B", "A—C", "A—D", "B—C", "B—D", "C—D"]);
const step1Data = ref([
  {
    name: "A",
    amount: "2300",
  },
  {
    name: "B",
    amount: "2300",
  },
  {
    name: "C",
    amount: "2300",
  },
  {
    name: "D",
    amount: "2300",
  },
]);
const fileTable1 = ref([
  {
    id: "1",
    goods1: "A",
    goods2: "B",
    goods3: "C",
  },
  {
    id: "2",
    goods1: "A",
    goods2: "C",
    goods3: "D",
  },
  {
    id: "3",
    goods1: "B",
    goods2: "C",
    goods3: "",
  },
  {
    id: "4",
    goods1: "A",
    goods2: "B",
    goods3: "D",
  },
  {
    id: "5",
    goods1: "C",
    goods2: "D",
    goods3: "",
  },
]);
const step2Data = ref([
  {
    name: "P（A）",
    amount: "3",
    account: "800",
  },
  { name: "P（B）", amount: "4", account: "1200" },
  { name: "P（C）", amount: "6", account: "600" },
  { name: "P（D）", amount: "7", account: "1400" },
]);
const step3Data = ref([
  {
    data1: "A-B",
    data2: "5900",
  },
  {
    data1: "A-C",
    data2: "2400",
  },
  {
    data1: "A-D",
    data2: "1100",
  },

  {
    data1: "B-C",
    data2: "600",
  },
  {
    data1: "B-D",
    data2: "600",
  },
  {
    data1: "C-D",
    data2: "600",
  },
]);
const step4Data = ref([
  {
    data1: "A—B",
    data2: "5900",
  },
  {
    data1: "A—C",
    data2: "2400",
  },
  {
    data1: "A—D",
  },
  {
    data1: "B—C",
    data2: "600",
  },
  {
    data1: "B—D",
    data2: "600",
  },
  {
    data1: "C—D",
    data2: "600",
  },
]);
const step5Data = ref([
  {
    title: "平均值",
  },
]);
const step6Data = ref([
  {
    data1: "1",
    data2: "小明",
    data3: "4",
    data4: "2",
    data5: "4",
  },
  {
    data1: "2",
    data2: "小红",
    data3: "5",
    data4: "2",
    data5: "2",
  },
  {
    data1: "3",
    data2: "小李",
    data3: "5",
    data4: "1",
    data5: "1",
  },
]);
const rulesTable = ref([
  {
    data1: "1.重要价值用户",
    data2: "高",
    data3: "高",
    data4: "高",
  },
  {
    data1: "2.重要发展用户",
    data2: "高",
    data3: "低",
    data4: "高",
  },
  {
    data1: "3.重要保持用户",
    data2: "低",
    data3: "高",
    data4: "高",
  },
  {
    data1: "4.重要挽留用户",
    data2: "低",
    data3: "低",
    data4: "高",
  },
  {
    data1: "5.一般价值用户",
    data2: "高",
    data3: "高",
    data4: "低",
  },
  {
    data1: "6.一般发展用户",
    data2: "高",
    data3: "低",
    data4: "低",
  },
  {
    data1: "7.一般保持用户",
    data2: "低",
    data3: "高",
    data4: "低",
  },
  {
    data1: "8.一般挽留用户",
    data2: "低",
    data3: "低",
    data4: "低",
  },
]);
const typeData = ref([
  {
    data1: "A类商品",
    data2: "占总销售额的80%，需要重点关注",
  },
  {
    data1: "B类商品",
    data2: "占总销售额的10%，给予次要关注",
  },
  {
    data1: "C类商品",
    data2: "占总销售额的10%，给予一般关注",
  },
]);
const step1Error = ref(0);
const step2Error = ref(0);
const step3Error = ref(0);
const step4Error = ref(0);
const step1AnswerFlag = ref(false);
const step2AnswerFlag = ref(false);
const step3AnswerFlag = ref(false);
const step4AnswerFlag = ref(false);
const errorNum = ref(0);
onMounted(() => {
  getData();
});
onBeforeUnmount(() => {
  saveData();
});
const deleteItem = (index) => {
  list.value.splice(index, 1);
};
const moveUp = (index, row) => {
  console.log("上移", index, row);
  if (index > 0) {
    const upDate = step2Data.value[index - 1];
    step2Data.value.splice(index - 1, 1);
    step2Data.value.splice(index, 0, upDate);
  } else {
    alert("已经是第一条，不可上移");
  }
};
const moveDown = (index, row) => {
  console.log("下移", index, row);
  if (index + 1 === step2Data.value.length) {
    alert("已经是最后一条，不可下移");
  } else {
    const downDate = step2Data.value[index + 1];
    step2Data.value.splice(index + 1, 1);
    step2Data.value.splice(index, 0, downDate);
  }
};
const addCombination = () => {
  if (list.value[0] === "-") {
    list.value = [];
  }
  // list.value = [];
  if (combinationValue1.value == "" || combinationValue2.vlaue == "") {
    proxy.$modal.msgError("请选择组合");
    return;
  }
  list.value.push(combinationValue1.value + "—" + combinationValue2.value);
};
const step1Submit = () => {
  step1Error.value = 0;
  // console.log(isArrayContained(list.value, combinationRight.value)); // 输出：true
  if (!isArrayContained(list.value, combinationRight.value)) {
    step1Error.value = 1;
    comListError.value = true;
  } else {
    comListError.value = false;
  }
  console.log("错误数", step1Error.value);
  proxy.$modal.msgSuccess("提交成功");
  step1AnswerFlag.value = true;
};
function isArrayContained(arr1, arr2) {
  return arr2.every((element) => arr1.includes(element));
}
const step2Submit = () => {
  // console.log(0);
  step2Error.value = 0;
  for (let i in step2Data.value) {
    // console.log(fileTable1.value[i]);
    if (!step2Data.value[i].params) {
      proxy.$modal.msgError("请先完成所有填空");
      return;
    }
  }
  if (step2Data.value[0].params && step2Data.value[0].params !== "60") {
    step2Error.value++;
    step2Data.value[0].isError = true;
  } else {
    step2Data.value[0].isError = false;
  }
  if (step2Data.value[1].params && step2Data.value[1].params !== "60") {
    step2Error.value++;
    step2Data.value[1].isError = true;
  } else {
    step2Data.value[1].isError = false;
  }
  if (step2Data.value[2].params && step2Data.value[2].params !== "80") {
    step2Error.value++;
    step2Data.value[2].isError = true;
  } else {
    step2Data.value[2].isError = false;
  }
  if (step2Data.value[3].params && step2Data.value[3].params !== "60") {
    step2Error.value++;
    step2Data.value[3].isError = true;
  } else {
    step2Data.value[3].isError = false;
  }
  console.log(step2Error.value, "错误数");
  proxy.$modal.msgSuccess("提交成功");
  step2AnswerFlag.value = true;
};
const step3Submit = () => {
  step3Error.value = 0;
  for (let i in step3Data.value) {
    // console.log(fileTable1.value[i]);
    if (!step3Data.value[i].params1 || !step3Data.value[i].params2 || !step3Data.value[i].params3) {
      proxy.$modal.msgError("请先完成所有填空");
      return;
    }
  }
  if (step3Data.value[0].params1 && step3Data.value[0].params1 !== "40" && step3Data.value[0].params1 !== "40.00") {
    step3Error.value++;
    step3Data.value[0].isError1 = true;
  } else {
    step3Data.value[0].isError1 = false;
  }
  if (step3Data.value[0].params2 && step3Data.value[0].params2 !== "66.67") {
    step3Error.value++;
    step3Data.value[0].isError2 = true;
  } else {
    step3Data.value[0].isError2 = false;
  }
  if (step3Data.value[0].params3 && step3Data.value[0].params3 !== "111.11") {
    step3Error.value++;
    step3Data.value[0].isError3 = true;
  } else {
    step3Data.value[0].isError3 = false;
  }
  if (step3Data.value[1].params1 && step3Data.value[1].params1 !== "20" && step3Data.value[1].params1 !== "20.00") {
    step3Error.value++;
    step3Data.value[1].isError1 = true;
  } else {
    step3Data.value[1].isError1 = false;
  }
  if (step3Data.value[1].params2 && step3Data.value[1].params2 !== "33.33") {
    step3Error.value++;
    step3Data.value[1].isError2 = true;
  } else {
    step3Data.value[1].isError2 = false;
  }
  if (step3Data.value[1].params3 && step3Data.value[1].params3 !== "41.67") {
    step3Error.value++;
    step3Data.value[1].isError3 = true;
  } else {
    step3Data.value[1].isError3 = false;
  }
  if (step3Data.value[2].params1 && step3Data.value[2].params1 !== "40" && step3Data.value[2].params1 !== "40.00") {
    step3Error.value++;
    step3Data.value[2].isError1 = true;
  } else {
    step3Data.value[2].isError1 = false;
  }
  if (step3Data.value[2].params2 && step3Data.value[2].params2 !== "60.00" && step3Data.value[2].params2 !== "60") {
    step3Error.value++;
    step3Data.value[2].isError2 = true;
  } else {
    step3Data.value[2].isError2 = false;
  }
  if (step3Data.value[2].params3 && step3Data.value[2].params3 !== "100.00" && step3Data.value[2].params3 !== "100") {
    step3Error.value++;
    step3Data.value[2].isError3 = true;
  } else {
    step3Data.value[2].isError3 = false;
  }
  if (step3Data.value[3].params1 && step3Data.value[3].params1 !== "20" && step3Data.value[3].params1 !== "20.00") {
    step3Error.value++;
    step3Data.value[3].isError1 = true;
  } else {
    step3Data.value[3].isError1 = false;
  }
  if (step3Data.value[3].params2 && step3Data.value[3].params2 !== "33.33") {
    step3Error.value++;
    step3Data.value[3].isError2 = true;
  } else {
    step3Data.value[3].isError2 = false;
  }
  if (step3Data.value[3].params3 && step3Data.value[3].params3 !== "41.67") {
    step3Error.value++;
    step3Data.value[3].isError3 = true;
  } else {
    step3Data.value[3].isError3 = false;
  }
  if (step3Data.value[4].params1 && step3Data.value[4].params1 !== "20" && step3Data.value[4].params1 !== "20.00") {
    step3Error.value++;
    step3Data.value[4].isError1 = true;
  } else {
    step3Data.value[4].isError1 = false;
  }
  if (step3Data.value[4].params2 && step3Data.value[4].params2 !== "33.33") {
    step3Error.value++;
    step3Data.value[4].isError2 = true;
  } else {
    step3Data.value[4].isError2 = false;
  }
  if (step3Data.value[4].params3 && step3Data.value[4].params3 !== "55.56") {
    step3Error.value++;
    step3Data.value[4].isError3 = true;
  } else {
    step3Data.value[4].isError3 = false;
  }
  if (step3Data.value[5].params1 && step3Data.value[5].params1 !== "40" && step3Data.value[5].params1 !== "40.00") {
    step3Error.value++;
    step3Data.value[5].isError1 = true;
  } else {
    step3Data.value[5].isError1 = false;
  }
  if (step3Data.value[5].params2 && step3Data.value[5].params2 !== "50.00" && step3Data.value[5].params2 !== "50") {
    step3Error.value++;
    step3Data.value[5].isError2 = true;
  } else {
    step3Data.value[5].isError2 = false;
  }
  if (step3Data.value[5].params3 && step3Data.value[5].params3 !== "83.33") {
    step3Error.value++;
    step3Data.value[5].isError3 = true;
  } else {
    step3Data.value[5].isError3 = false;
  }
  console.log(step3Error.value, "错误数");
  proxy.$modal.msgSuccess("提交成功");
  step3AnswerFlag.value = true;
  // console.log(999);
};
const step4Submit = () => {
  step4Error.value = 0;
  for (let i in step4Data.value) {
    // console.log(fileTable1.value[i]);
    if (!step4Data.value[i].params) {
      proxy.$modal.msgError("请先完成所有填空");
      return;
    }
  }
  if (step4Data.value[0].params && step4Data.value[0].params !== "提升效果") {
    step4Error.value++;
    step4Data.value[0].isError = true;
  } else {
    step4Data.value[0].isError = false;
  }
  if (step4Data.value[1].params && step4Data.value[1].params !== "负向效果") {
    step4Error.value++;
    step4Data.value[1].isError = true;
  } else {
    step4Data.value[1].isError = false;
  }
  if (step4Data.value[2].params && step4Data.value[2].params !== "没有影响") {
    step4Error.value++;
    step4Data.value[2].isError = true;
  } else {
    step4Data.value[2].isError = false;
  }
  if (step4Data.value[3].params && step4Data.value[3].params !== "负向效果") {
    step4Error.value++;
    step4Data.value[3].isError = true;
  } else {
    step4Data.value[3].isError = false;
  }
  if (step4Data.value[4].params && step4Data.value[4].params !== "负向效果") {
    step4Error.value++;
    step4Data.value[4].isError = true;
  } else {
    step4Data.value[4].isError = false;
  }
  if (step4Data.value[5].params && step4Data.value[5].params !== "负向效果") {
    step4Error.value++;
    step4Data.value[5].isError = true;
  } else {
    step4Data.value[5].isError = false;
  }
  // console.log(666);
  console.log(step4Error.value, "错误数");
  proxy.$modal.msgSuccess("提交成功");
  step4AnswerFlag.value = true;
};
const saveData = () => {
  const params = {
    stepFiveA: list.value.join(","),
    stepFiveB: step2Data.value[0].params,
    stepFiveC: step2Data.value[1].params,
    stepFiveD: step2Data.value[2].params,
    stepSixA: step2Data.value[3].params,
    stepSixB: step3Data.value[0].params1,
    stepSixC: step3Data.value[0].params2,
    stepSixD: step3Data.value[0].params3,
    stepSevenA: step3Data.value[1].params1,
    stepSevenB: step3Data.value[1].params2,
    stepSevenC: step3Data.value[1].params3,
    stepSevenD: step3Data.value[2].params1,
    stepEightA: step3Data.value[2].params2,
    stepEightB: step3Data.value[2].params3,
    stepEightC: step3Data.value[3].params1,
    stepEightD: step3Data.value[3].params2,
    stepNineA: step3Data.value[3].params3,
    stepNineB: step3Data.value[4].params1,
    stepNineC: step3Data.value[4].params2,
    stepNineD: step3Data.value[4].params3,
    stepTenA: step3Data.value[5].params1,
    stepTenB: step3Data.value[5].params2,
    stepTenC: step3Data.value[5].params3,
    stepTenD: step4Data.value[0].params,
    stepElevenA: step4Data.value[1].params,
    stepOneA: step4Data.value[2].params,
    stepOneB: step4Data.value[3].params,
    stepOneC: step4Data.value[4].params,
    stepOneD: step4Data.value[5].params,
    errorField: errorNum.value,
    subState: 0,
  };
  portraitModel
    .saveData({
      userId: JSON.parse(getUserInfo()).userId,
      module: "品类结构优化-购物篮分析",
      project: "产品评估与考核",
      ...params,
    })
    .then((res) => {})
    .catch((error) => {});
};

const getData = () => {
  portraitModel
    .getData({
      userId: JSON.parse(getUserInfo()).userId,
      module: "品类结构优化-购物篮分析",
      project: "产品评估与考核",
    })
    .then((res) => {
      if (res.data.stepFiveA) {
        list.value = res.data.stepFiveA.split(",");
      }

      step2Data.value[0].params = res.data.stepFiveB;
      step2Data.value[1].params = res.data.stepFiveC;
      step2Data.value[2].params = res.data.stepFiveD;
      step2Data.value[3].params = res.data.stepSixA;
      step3Data.value[0].params1 = res.data.stepSixB;
      step3Data.value[0].params2 = res.data.stepSixC;
      step3Data.value[0].params3 = res.data.stepSixD;
      step3Data.value[1].params1 = res.data.stepSevenA;
      step3Data.value[1].params2 = res.data.stepSevenB;
      step3Data.value[1].params3 = res.data.stepSevenC;
      step3Data.value[2].params1 = res.data.stepSevenD;
      step3Data.value[2].params2 = res.data.stepEightA;
      step3Data.value[2].params3 = res.data.stepEightB;
      step3Data.value[3].params1 = res.data.stepEightC;
      step3Data.value[3].params2 = res.data.stepEightD;
      step3Data.value[3].params3 = res.data.stepNineA;
      step3Data.value[4].params1 = res.data.stepNineB;
      step3Data.value[4].params2 = res.data.stepNineC;
      step3Data.value[4].params3 = res.data.stepNineD;
      step3Data.value[5].params1 = res.data.stepTenA;
      step3Data.value[5].params2 = res.data.stepTenB;
      step3Data.value[5].params3 = res.data.stepTenC;
      step4Data.value[0].params = res.data.stepTenD;
      step4Data.value[1].params = res.data.stepElevenA;
      step4Data.value[2].params = res.data.stepOneA;
      step4Data.value[3].params = res.data.stepOneB;
      step4Data.value[4].params = res.data.stepOneC;
      step4Data.value[5].params = res.data.stepOneD;
      // 提交回显
      step1AnswerFlag.value = res.data.stepNewEleven;
      step2AnswerFlag.value = res.data.stepNewShier;
      step3AnswerFlag.value = res.data.stepNewShisan;
      step4AnswerFlag.value = res.data.stepNewShisi;

      // step6Data.value[0].params2 = res.data.stepTwoA;
      // step6Data.value[0].params3 = res.data.stepTwoB;
      // step6Data.value[1].params1 = res.data.stepTwoC;
      // step6Data.value[1].params2 = res.data.stepThreeA;
      // step6Data.value[1].params3 = res.data.stepThreeB;
      // step6Data.value[2].params1 = res.data.stepThreeC;
      // step6Data.value[2].params2 = res.data.stepThreeD;
      // step6Data.value[2].params3 = res.data.stepFourA;
      // step7Data.value[0].params = res.data.stepFourB;
      // step7Data.value[1].params = res.data.stepFourC;
      // step7Data.value[2].params = res.data.stepFourD;
      // console.log(list.value);
      //回显答案
      if (res.data.subState & (res.data.subState == 1)) {
        showAnswerFlag.value = true;
        if (!isArrayContained(list.value, combinationRight.value)) {
          comListError.value = true;
        } else {
          comListError.value = false;
        }

        if (step2Data.value[0].params && step2Data.value[0].params !== "60") {
          step2Data.value[0].isError = true;
        } else {
          step2Data.value[0].isError = false;
        }
        if (step2Data.value[1].params && step2Data.value[1].params !== "60") {
          step2Data.value[1].isError = true;
        } else {
          step2Data.value[1].isError = false;
        }
        if (step2Data.value[2].params && step2Data.value[2].params !== "80") {
          step2Data.value[2].isError = true;
        } else {
          step2Data.value[2].isError = false;
        }
        if (step2Data.value[3].params && step2Data.value[3].params !== "60") {
          step2Data.value[3].isError = true;
        } else {
          step2Data.value[3].isError = false;
        }

        if (step3Data.value[0].params1 && step3Data.value[0].params1 !== "40" && step3Data.value[0].params1 !== "40.00") {
          step3Data.value[0].isError1 = true;
        } else {
          step3Data.value[0].isError1 = false;
        }
        if (step3Data.value[0].params2 && step3Data.value[0].params2 !== "66.67") {
          step3Data.value[0].isError2 = true;
        } else {
          step3Data.value[0].isError2 = false;
        }
        if (step3Data.value[0].params3 && step3Data.value[0].params3 !== "111.11") {
          step3Data.value[0].isError3 = true;
        } else {
          step3Data.value[0].isError3 = false;
        }
        if (step3Data.value[1].params1 && step3Data.value[1].params1 !== "20" && step3Data.value[1].params1 !== "20.00") {
          step3Data.value[1].isError1 = true;
        } else {
          step3Data.value[1].isError1 = false;
        }
        if (step3Data.value[1].params2 && step3Data.value[1].params2 !== "33.33") {
          step3Data.value[1].isError2 = true;
        } else {
          step3Data.value[1].isError2 = false;
        }
        if (step3Data.value[1].params3 && step3Data.value[1].params3 !== "41.67") {
          step3Data.value[1].isError3 = true;
        } else {
          step3Data.value[1].isError3 = false;
        }
        if (step3Data.value[2].params1 && step3Data.value[2].params1 !== "40" && step3Data.value[2].params1 !== "40.00") {
          step3Data.value[2].isError1 = true;
        } else {
          step3Data.value[2].isError1 = false;
        }
        if (step3Data.value[2].params2 && step3Data.value[2].params2 !== "60.00" && step3Data.value[2].params2 !== "60") {
          step3Data.value[2].isError2 = true;
        } else {
          step3Data.value[2].isError2 = false;
        }
        if (step3Data.value[2].params3 && step3Data.value[2].params3 !== "100.00" && step3Data.value[2].params3 !== "100") {
          step3Data.value[2].isError3 = true;
        } else {
          step3Data.value[2].isError3 = false;
        }
        if (step3Data.value[3].params1 && step3Data.value[3].params1 !== "20" && step3Data.value[3].params1 !== "20.00") {
          step3Data.value[3].isError1 = true;
        } else {
          step3Data.value[3].isError1 = false;
        }
        if (step3Data.value[3].params2 && step3Data.value[3].params2 !== "33.33") {
          step3Data.value[3].isError2 = true;
        } else {
          step3Data.value[3].isError2 = false;
        }
        if (step3Data.value[3].params3 && step3Data.value[3].params3 !== "41.67") {
          step3Data.value[3].isError3 = true;
        } else {
          step3Data.value[3].isError3 = false;
        }
        if (step3Data.value[4].params1 && step3Data.value[4].params1 !== "20" && step3Data.value[4].params1 !== "20.00") {
          step3Data.value[4].isError1 = true;
        } else {
          step3Data.value[4].isError1 = false;
        }
        if (step3Data.value[4].params2 && step3Data.value[4].params2 !== "33.33") {
          step3Data.value[4].isError2 = true;
        } else {
          step3Data.value[4].isError2 = false;
        }
        if (step3Data.value[4].params3 && step3Data.value[4].params3 !== "55.56") {
          step3Data.value[4].isError3 = true;
        } else {
          step3Data.value[4].isError3 = false;
        }
        if (step3Data.value[5].params1 && step3Data.value[5].params1 !== "40" && step3Data.value[5].params1 !== "40.00") {
          step3Data.value[5].isError1 = true;
        } else {
          step3Data.value[5].isError1 = false;
        }
        if (step3Data.value[5].params2 && step3Data.value[5].params2 !== "50.00" && step3Data.value[5].params2 !== "50") {
          step3Data.value[5].isError2 = true;
        } else {
          step3Data.value[5].isError2 = false;
        }
        if (step3Data.value[5].params3 && step3Data.value[5].params3 !== "83.33") {
          step3Data.value[5].isError3 = true;
        } else {
          step3Data.value[5].isError3 = false;
        }

        if (step4Data.value[0].params && step4Data.value[0].params !== "提升效果") {
          step4Data.value[0].isError = true;
        } else {
          step4Data.value[0].isError = false;
        }
        if (step4Data.value[1].params && step4Data.value[1].params !== "负向效果") {
          step4Data.value[1].isError = true;
        } else {
          step4Data.value[1].isError = false;
        }
        if (step4Data.value[2].params && step4Data.value[2].params !== "没有影响") {
          step4Data.value[2].isError = true;
        } else {
          step4Data.value[2].isError = false;
        }
        if (step4Data.value[3].params && step4Data.value[3].params !== "负向效果") {
          step4Data.value[3].isError = true;
        } else {
          step4Data.value[3].isError = false;
        }
        if (step4Data.value[4].params && step4Data.value[4].params !== "负向效果") {
          step4Data.value[4].isError = true;
        } else {
          step4Data.value[4].isError = false;
        }
        if (step4Data.value[5].params && step4Data.value[5].params !== "负向效果") {
          step4Data.value[5].isError = true;
        } else {
          step4Data.value[5].isError = false;
        }
      }
    })
    .catch((error) => {});
};
const downloadData = () => {
  // portraitModel
  //   .downloadDataByBasket({})
  //   .then((res) => {
  //     // console.log(res,'--');
  //     const blob = new Blob([res], { type: "application/vnd.ms-excel" });
  //     downBlobFile(`案例数据-品类结构优化-购物篮分析`, blob);
  //   })
  //   .catch((error) => {});
  window.open(baseUrl + "/api/downDataByUserPortrait/analysisByShopBasket");
};
const submitData = () => {
  // console.log("asdasdasdsdsds");
  if (!step1AnswerFlag.value || !step2AnswerFlag.value || !step3AnswerFlag.value || !step4AnswerFlag.value) {
    proxy.$modal.msgError("请先完成所有步骤！");
    return;
  }
  errorNum.value = step1Error.value + step2Error.value + step3Error.value + step4Error.value;
  console.log(errorNum.value, "总错误次数");
  if (errorNum.value > 5) {
    errorNum.value = 5;
  }

  saveDataSubmit();
};
const saveDataSubmit = () => {
  const params = {
    stepFiveA: list.value.join(","),
    stepFiveB: step2Data.value[0].params,
    stepFiveC: step2Data.value[1].params,
    stepFiveD: step2Data.value[2].params,
    stepSixA: step2Data.value[3].params,
    stepSixB: step3Data.value[0].params1,
    stepSixC: step3Data.value[0].params2,
    stepSixD: step3Data.value[0].params3,
    stepSevenA: step3Data.value[1].params1,
    stepSevenB: step3Data.value[1].params2,
    stepSevenC: step3Data.value[1].params3,
    stepSevenD: step3Data.value[2].params1,
    stepEightA: step3Data.value[2].params2,
    stepEightB: step3Data.value[2].params3,
    stepEightC: step3Data.value[3].params1,
    stepEightD: step3Data.value[3].params2,
    stepNineA: step3Data.value[3].params3,
    stepNineB: step3Data.value[4].params1,
    stepNineC: step3Data.value[4].params2,
    stepNineD: step3Data.value[4].params3,
    stepTenA: step3Data.value[5].params1,
    stepTenB: step3Data.value[5].params2,
    stepTenC: step3Data.value[5].params3,
    stepTenD: step4Data.value[0].params,
    stepElevenA: step4Data.value[1].params,
    stepOneA: step4Data.value[2].params,
    stepOneB: step4Data.value[3].params,
    stepOneC: step4Data.value[4].params,
    stepOneD: step4Data.value[5].params,
    stepNewEleven: step1AnswerFlag.value,
    stepNewShier: step2AnswerFlag.value,
    stepNewShisan: step3AnswerFlag.value,
    stepNewShisi: step4AnswerFlag.value,
    errorField: errorNum.value,
    subState: 1,
  };
  portraitModel
    .saveData({
      userId: JSON.parse(getUserInfo()).userId,
      module: "品类结构优化-购物篮分析",
      project: "产品评估与考核",
      ...params,
    })
    .then((res) => {
      proxy.$modal.msgSuccess("提交成功");
    })
    .catch((error) => {});
};
const retrain = () => {
  showAnswerFlag.value = false;
  portraitModel
    .retrainTask({
      userId: JSON.parse(getUserInfo()).userId,
      module: "品类结构优化-购物篮分析",
      project: "产品评估与考核",
    })
    .then((res) => {
      proxy.$modal.msgSuccess("重新实训成功");
      list.value = ["-"];
      for (let i in step2Data.value) {
        step2Data.value[i].params = "";
      }
      for (let i in step3Data.value) {
        step3Data.value[i].params1 = "";
        step3Data.value[i].params2 = "";
        step3Data.value[i].params3 = "";
      }
      for (let i in step4Data.value) {
        step4Data.value[i].params = "";
      }
      // step2Select1.value = "";
      // step2Select2.value = "";
      // step2Select3.value = "";
      // step2Select4.value = "";
      // step2Select5.value = "";
      // step3Select1.value = "";
      // step3Select2.value = "";
    })
    .catch((error) => {});
};
defineExpose({
  submitData,
  retrain,
  // practicalTraining,
});
const openKnowledge = () => {
  dialogVisible.value = true;
  // startCount();
};
const handlClose = () => {
  console.log("123");
  dialogVisible.value = false;
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
  console.log("阅读时长", timeCount.value + "s");
  submitTimeCount();
  timeCount.value = 0;
};
const startCount = () => {
  timer.value = setInterval(() => {
    timeCount.value++;
  }, 1000);
};
const submitTimeCount = () => {
  // portraitModel
  //   .timeCountSubmit({
  //     stuScoreDetailsDTO: {
  //       userId: JSON.parse(getUserInfo()).userId,
  //       viewingTime: timeCount.value,
  //     },
  //   })
  //   .then((res) => {})
  //   .catch((error) => {});
};
</script>

<style scoped lang="scss">
.content {
  width: 100%;
  color: #d7ecff;
  background:
    radial-gradient(circle at 12% 0%, rgba(18, 133, 189, 0.16), transparent 30%),
    rgba(3, 24, 37, 0.94);
  border: 1px solid rgba(54, 174, 221, 0.55);
  border-radius: 12px;
  padding: 18px;
  box-shadow: inset 0 1px 0 rgba(129, 231, 255, 0.1);

  .import {
    display: flex;
    font-size: var(--student-fs-button-lg);
    font-weight: bold;
    width: 150px;
    height: 50px;
    background: linear-gradient(95deg, #0b84bd, #096491);
    text-align: center;
    align-items: center;
    line-height: 50px;
    cursor: pointer;
    img {
      margin-left: 20px;
      margin-right: 8px;
    }
  }
  .caseBack {
    color: #d7ecff;
    .title {
      font-weight: bold;
      margin-top: 10px;
      display: flex;
      align-items: center;
      span {
        margin-left: 10px;
      }
    }
    .download {
      cursor: pointer;
      margin-left: 20px;
      color: #000;
      padding-left: 10px;
      font-size: var(--student-fs-button);
      text-align: center;
      line-height: 31px;
      width: 89px;
      height: 31px;
      background: linear-gradient(95deg, #0b84bd, #096491);
    }
    .submit {
      cursor: pointer;
      margin-left: 20px;
      color: #000;
      padding-left: 10px;
      font-size: var(--student-fs-button);
      text-align: center;
      line-height: 31px;
      width: 99px;
      height: 31px;
      background: linear-gradient(95deg, #0b84bd, #096491);
    }
    .customerType {
      padding-left: 10px;
      display: flex;
      align-items: center;
      width: 945px;
      height: 26px;
      // background: #003b75;
      background: rgba(1, 14, 26, 0.72);
      border-radius: 10px;
      // border: 1px solid #0052a3;
      font-size: var(--student-fs-caption);
      margin-top: 10px;
      img {
        margin-right: 10px;
      }
    }
  }
  .line {
    width: min(1400px, 100%);
    height: 1px;
    border: 0;
    background: rgba(54, 174, 221, 0.35);
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .addBtn {
    background-color: #6af5fb;
    color: #080138;
    height: 31px;
    border: 1px solid #6af5fb;
    margin-left: 10px;
  }
  .comList {
    display: flex;
    ul {
      text-align: center;
      list-style-type: none;
      border: 1px solid #7190d4;
      border-bottom: none;
      width: 124px;
      padding: 0;
      // padding: 0;
      margin: 0;
      p {
        width: 122px;
        height: 40px;
        line-height: 40px;
        background: linear-gradient(180deg, #0f76a9, #0a567e);
        margin: 0;
      }
      li {
        padding: 0;
        margin: 0;
        line-height: 30px;
        width: 122px;
        height: 30px;
        // background: #003b75;
        background: rgba(2, 20, 31, 0.82);
        border-bottom: 1px solid #7190d4;
        font-size: var(--student-fs-body);
      }
    }
  }
}
// ::v-deep .el-table tr {
//   background-color: #002652 !important;
//   color: #fff;
// }
::v-deep .el-table tr {
  background-color: rgba(2, 20, 31, 0.82) !important;
  color: #d7ecff;
}
/* 将悬停背景色改为红色 */
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: rgba(15, 107, 149, 0.32) !important;
}
::v-deep .el-table td {
  padding-top: 4px;
  padding-bottom: 4px;
}

: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;
  border: 1px solid rgba(54, 174, 221, 0.42);
  border-radius: 10px;
}

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

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

:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
  background-color: rgba(15, 107, 149, 0.32) !important;
}

:deep(.el-input__wrapper),
:deep(.el-select__wrapper) {
  border: 1px solid rgba(76, 169, 211, 0.48);
  color: #ebf8ff;
  box-shadow: none !important;
  background: rgba(3, 20, 31, 0.95);
}

.content {
  .import {
    width: auto;
    min-width: 156px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid rgba(79, 213, 244, 0.72);
    border-radius: 999px;
    color: #e9faff;
    background: linear-gradient(180deg, #168ab9, #0c628d);
    box-shadow: 0 8px 18px rgba(0, 121, 173, 0.22);
  }

  .import img {
    margin-left: 0;
  }

  .caseBack {
    .download,
    .submit {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: auto;
      min-width: 92px;
      min-height: 40px;
      padding: 0 16px;
      border: 1px solid rgba(79, 213, 244, 0.72);
      border-radius: 999px;
      color: #e9faff;
      line-height: 1;
      background: linear-gradient(180deg, #168ab9, #0c628d) !important;
      box-shadow: 0 6px 14px rgba(0, 121, 173, 0.2);
    }

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

    .customerType {
      box-sizing: border-box;
      width: min(887px, 100%) !important;
      min-height: 48px;
      height: auto;
      padding: 11px 14px;
      color: #d7ecff;
      line-height: 1.6;
      background: linear-gradient(90deg, rgba(11, 84, 122, 0.56), rgba(3, 35, 53, 0.72));
      border: 1px solid rgba(64, 174, 219, 0.36);
      border-radius: 9px;
    }

    .customerType img {
      margin-right: 12px;
    }
  }

  .addBtn {
    min-height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    border-color: rgba(79, 213, 244, 0.72);
    color: #e9faff;
    background: linear-gradient(180deg, #168ab9, #0c628d);
  }

  .comList ul {
    overflow: hidden;
    border-color: rgba(64, 174, 219, 0.42);
    border-radius: 8px;
  }

  .comList ul p {
    color: #edfbff !important;
    background: linear-gradient(180deg, #0f76a9, #0a567e);
  }

  .comList ul li {
    color: #d7ecff;
    background: rgba(2, 20, 31, 0.82);
    border-bottom-color: rgba(64, 174, 219, 0.26);
  }
}

.taskfooter { display: none; }
</style>
