<template>
  <el-dialog
    title="生产监控"
    append-to-body
    :modelValue="openShow"
    width="30%"
    @close="closeDialog"
    fullscreen
  >
    <el-descriptions title="订单信息">
      <template #extra>
        <el-button type="primary" @click="refreshData" :loading="refreshLoading">刷新</el-button>
      </template>
    </el-descriptions>
    <div class="order-box">
      <div
        class="order-item"
        v-for="(item, index) in displayOrderItems"
        :key="index"
        :class="{ 'expand-item': item.isExpandBtn }"
      >
        <!-- 展开按钮 -->
        <template v-if="item.isExpandBtn">
          <el-button type="text" @click="toggleOrderInfo" class="expand-btn">
            {{ orderInfoExpanded ? '收起 ▲' : '展开更多 ▼' }}
          </el-button>
        </template>
        <template v-else>
          {{ item.label }}：
          <span
            v-if="item.clickable"
            style="cursor: pointer; font-weight: 500"
            @dblclick="item.clickHandler"
            >{{ item.value }}</span
          >
          <span v-else-if="item.style" :style="item.style">{{ item.value }}</span>
          <span v-else>{{ item.value }}</span>
        </template>
      </div>

      <!-- 展开/收起按钮 -->
      <div class="order-item" style="width: 100%; text-align: center" v-if="orderInfoExpanded">
        <el-button type="text" @click="toggleOrderInfo" class="expand-btn">
          {{ orderInfoExpanded ? '收起 ▲' : '展开更多 ▼' }}
        </el-button>
      </div>
    </div>
    <el-descriptions title="工序信息"> </el-descriptions>
    <div v-loading="processSelectLoading">
      <div class="scrollContent">
        <div ref="pointView" class="scrollBox">
          <!--  -->
          <div
            v-for="(item, index) in detailsForm.planList"
            :key="item.id"
            :class="[
              'production-process-item',
              index === 0 ? 'production-left-item-box' : '',
              { selected: selectedItemId === item.id },
            ]"
            @click="selectItem(item)"
            class="production-process-item"
            :style="{ borderColor: getProcessBgColor(item.status) }"
          >
            <!-- 工序号和工序名称 -->
            <div
              class="production-process-title"
              :style="{ background: getProcessBgColor(item.status) }"
            >
              <div style="display: flex; align-items: center" :title="'工序号和工序名字'">
                <div>{{ item.orders + '-' + item.ppsName }}</div>
              </div>
              <!-- 1 是 0否 -->
              <el-icon style="font-size: 16px; margin-left: 5px" v-if="item.mainProcess == 1">
                <Star />
              </el-icon>
            </div>
            <div
              class="process_content"
              :style="{ background: getProcessVerticalGradient(item.status) }"
            >
              <!-- 加工班组 -->
              <div class="flex-row" :title="'班组'">
                <span class="icon-text"
                  ><el-icon><User /></el-icon>班组：</span
                >
                <span v-if="item.makeTeam" class="icon-text">
                  {{ item.makeTeam }}
                </span>
              </div>
              <!-- 接收人 -->
              <div class="flex-row" :title="'接收人'">
                <span class="icon-text">
                  <el-icon><User /></el-icon>接收人：</span
                >
                <span class="icon-text">
                  {{ item.status != 1 && item.receiveManName ? item.receiveManName : '-' }}
                </span>
              </div>
              <!-- 计划加工人 -->
              <div class="flex-row" v-if="item.planWorkMan != ''" :title="'计划加工人'">
                <span class="icon-text"
                  ><el-icon><User /></el-icon>计划加工人：</span
                >
                <span class="icon-text">
                  {{ item.planWorkMan }}
                </span>
              </div>
              <!-- 报工人/报工数量 -->
              <div class="flex-row" :title="'报工人和数量'">
                <span class="icon-text"
                  ><el-icon><User /></el-icon>报工人/数量：</span
                >
                <span v-if="item.workManName" class="icon-text">
                  {{ item.workManName }}/{{ item.workQty }}
                </span>
                <span v-else class="icon-text">-</span>
              </div>
              <!-- 额定工时-实际工时 -->
              <div class="flex-row" :title="'额定工时-实际工时'">
                <span class="icon-text">
                  <el-icon><Odometer /></el-icon>额定/实际工时(min)：</span
                >
                <span class="icon-text"> {{ item.hourQuota }}/{{ item.hourActual }} </span>
              </div>
              <!-- 计划开始-计划结束 -->
              <div class="flex-row" :title="'计划开始'">
                <span class="icon-text">
                  <el-icon><Odometer /></el-icon>计划开始：</span
                >
                <span class="icon-text">
                  {{ item.planStartTime }}
                </span>
              </div>
              <div class="flex-row" :title="'计划结束'">
                <span class="icon-text">
                  <el-icon><Odometer /></el-icon>计划结束：</span
                >
                <span class="icon-text">
                  {{ item.planEndTime }}
                </span>
              </div>
              <!-- 实际开始-实际结束 -->
              <div class="flex-row" :title="'实际开始'">
                <span class="icon-text">
                  <el-icon><Edit /></el-icon>实际开始：</span
                >
                <span class="icon-text">{{ item.factStartTime || '-' }}</span>
              </div>
              <div class="flex-row" :title="'实际结束'">
                <span class="icon-text">
                  <el-icon><Edit /></el-icon>实际结束：</span
                >
                <span style="color: #1990ff" class="icon-text"> {{ item.factEndTime || '-' }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="details-box" v-if="selectedItemId && selectedItemInfo.status > 1">
        <div class="details-box-item">
          <div class="de-title">工序详情</div>
          <el-descriptions :column="4" border label-width="100" class="fixed-descriptions">
            <el-descriptions-item label="接收数量" :span="1">{{
              processDetails.qualifiedQty
            }}</el-descriptions-item>
            <el-descriptions-item label="计划开始" :span="1">{{
              selectedItemInfo.planStartTime
            }}</el-descriptions-item>
            <el-descriptions-item label="计划结束" :span="1">{{
              selectedItemInfo.planEndTime
            }}</el-descriptions-item>
            <el-descriptions-item label="接收人" :span="1">{{
              processDetails.receiveName
            }}</el-descriptions-item>
            <el-descriptions-item label="实际开始" :span="1">{{
              selectedItemInfo.factStartTime
            }}</el-descriptions-item>
            <el-descriptions-item label="实际结束" :span="1">{{
              selectedItemInfo.factEndTime
            }}</el-descriptions-item>
            <el-descriptions-item label="试验数量" :span="1">{{
              processDetails.testQty
            }}</el-descriptions-item>
            <el-descriptions-item label="消耗数量" :span="1">{{
              processDetails.lossQty
            }}</el-descriptions-item>
            <el-descriptions-item label="报废数量" :span="1">{{
              processDetails.scrapQty
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div
          class="details-box-item"
          v-if="processDetails.mrList && processDetails.mrList.length >= 0"
        >
          <div class="de-title">加工记录</div>
          <el-table
            :data="processDetails.mrList"
            :sequence="false"
            :no-page="false"
            :export-excel="false"
            border
          >
            <el-table-column label="操作工" align="center" prop="worker" min-width="150" />
            <el-table-column label="加工时间" align="center" prop="makeTime" min-width="150" />
            <el-table-column label="合格数量" align="center" prop="workQty" min-width="150" />
            <el-table-column label="报废数量" align="center" prop="scrapQty" min-width="150" />
            <el-table-column label="备注" align="center" prop="memo" min-width="150" />
          </el-table>
        </div>
        <div
          class="details-box-item"
          v-if="processDetails.trialItemList && processDetails.trialItemList.length > 0"
        >
          <div class="de-title">转试记录</div>
          <el-table :data="processDetails.trialItemList" border>
            <el-table-column label="试验信息" align="center" prop="testName" />
            <el-table-column label="转试人" align="center" prop="testUser" />
            <el-table-column label="转试时间" align="center" prop="testTime" />
            <el-table-column label="试验状态" align="center" prop="testStatus" />
          </el-table>
        </div>
        <div
          class="details-box-item"
          v-if="processDetails.slotList && processDetails.slotList.length > 0"
        >
          <div class="de-title">同槽信息</div>
          <el-table :data="processDetails.slotList" border>
            <el-table-column label="同槽编号" align="center" prop="mtuCode" />
            <el-table-column label="零件号" align="center" prop="partCode" />
            <el-table-column label="批次号" align="center" prop="batchNo" />
            <el-table-column label="数量" align="center" prop="qua" />
            <el-table-column label="生产标识" align="center" prop="prodIdent" />
            <el-table-column label="面积" align="center" prop="area" />
            <el-table-column label="总面积" align="center" prop="totalArea" />
          </el-table>
        </div>
        <div
          class="details-box-item"
          v-if="processDetails.mtuList && processDetails.mtuList.length > 0"
        >
          <div class="de-title">设备使用详情</div>
          <el-table
            :data="processDetails.mtuList"
            :sequence="false"
            :no-page="false"
            :export-excel="false"
            border
          >
            <el-table-column label="挂具编号" align="center" prop="rsCode" />
            <el-table-column label="飞靶编号" align="center" prop="fsCode" />
            <el-table-column label="设备编码" align="center" prop="deviceCode" />
            <el-table-column label="挂次号" align="center" prop="hangNum" min-width="150" />
          </el-table>
        </div>
        <div class="linediv details-box-item" v-if="processDetails.prWorkCheck != null">
          <div class="de-title">检验记录</div>
          <el-descriptions :column="4" label-width="100" class="fixed-descriptions" border>
            <el-descriptions-item label="检验数量">
              {{ processDetails.checkQty }}
            </el-descriptions-item>
            <el-descriptions-item label="合格数量">
              {{ processDetails.qualifiedQty }}
            </el-descriptions-item>
            <el-descriptions-item label="不合格数量">
              {{ processDetails.unqualifiedQty }}
            </el-descriptions-item>
            <el-descriptions-item label="消耗数量">
              {{ processDetails.lossQty }}
            </el-descriptions-item>
            <el-descriptions-item label="报废数量">
              {{ processDetails.scrapQty }}
            </el-descriptions-item>
            <el-descriptions-item label="返工数量">
              {{ processDetails.reworkQty }}
            </el-descriptions-item>
            <el-descriptions-item label="备注">
              {{ processDetails.checkMemo }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div
          class="details-box-item"
          v-if="processDetails.itemList && processDetails.itemList.length > 0"
        >
          <div class="de-title">检验项</div>
          <el-table
            :ref="'myTable'"
            :sequence="false"
            :no-page="false"
            :export-excel="false"
            border
            :data="processDetails.itemList"
          >
            <el-table-column label="项目编号" prop="itemCode" align="center" width="130">
            </el-table-column>
            <el-table-column label="项目" prop="itemName" align="center" width="150" />
            <el-table-column
              label="标准"
              prop="standardName"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column label="测试值" align="center" width="120">
              <template #default="scope">
                  <div>
                    <el-popover
                      v-if="scope.row.itemName&&scope.row.itemName === '厚度检测'"
                      transition="el-zoom-in-bottom"
                      offset="100"
                      placement="top"
                      trigger="hover"
                    >
                      <el-table :data="scope.row.itemDetailList" border>
                        <el-table-column label="编号" width="80" align="center" property="tools" />
                        <el-table-column
                          label="参数1名称"
                          property="gaugeValue1"
                          align="right"
                          width="80"
                        />
                        <el-table-column
                          label="参数1数值"
                          property="gaugeValue2"
                          align="right"
                          width="80"
                        />
                        <el-table-column
                          label="参数2名称"
                          property="gaugeValue3"
                          align="right"
                          width="80"
                        />
                        <el-table-column
                          label="参数2数值"
                          property="gaugeValue4"
                          align="right"
                          width="80"
                        />
                        <el-table-column
                          label="参数3名称"
                          property="gaugeValue5"
                          align="right"
                          width="80"
                        />
                        <el-table-column
                          label="参数3数值"
                          property="gaugeValue6"
                          align="right"
                          width="80"
                        />
                      </el-table>
                      <span>测试值</span>
                    </el-popover>
                    <el-popover
                      v-else-if="scope.row.itemDetailList.length > 0"
                      transition="el-zoom-in-bottom"
                      offset="100"
                      placement="top"
                      trigger="hover"
                      @show="loadDetail(scope.row.wpiId)"
                    >
                      <el-table :data="scope.row.itemDetailList" border>
                        <el-table-column
                          label="镀前镀后"
                          width="80"
                          align="center"
                          property="testType"
                        />
                        <el-table-column
                          label="尺寸"
                          width="120"
                          align="center"
                          property="ruleSize"
                        />
                        <el-table-column label="量具" width="80" align="center" property="tools" />
                        <el-table-column
                          label="测试值1"
                          property="gaugeValue1"
                          align="right"
                          width="80"
                        />
                        <el-table-column
                          label="测试值2"
                          property="gaugeValue2"
                          align="right"
                          width="80"
                        />
                        <el-table-column
                          label="测试值3"
                          property="gaugeValue3"
                          align="right"
                          width="80"
                        />
                        <el-table-column
                          label="测试值4"
                          property="gaugeValue4"
                          align="right"
                          width="80"
                        />
                        <el-table-column
                          label="测试值5"
                          property="gaugeValue5"
                          align="right"
                          width="80"
                        />
                        <el-table-column
                          label="测试值6"
                          property="gaugeValue6"
                          align="right"
                          width="80"
                        />
                        <el-table-column
                          label="测试值7"
                          property="gaugeValue7"
                          align="right"
                          width="80"
                        />
                        <el-table-column
                          label="测试值8"
                          property="gaugeValue8"
                          align="right"
                          width="80"
                        />
                      </el-table>
                      <el-button slot="reference">测试值</el-button>
                    </el-popover>
                    <span v-else>{{ scope.row.checkValue }}</span>
                  </div>
                </template>
            </el-table-column>
            <el-table-column label="试验数量" property="testQty" align="center" width="70" />
            <el-table-column label="消耗数量" property="lossQty" align="center" width="70" />
            <el-table-column label="检验数量" property="checkQty" align="center" width="70" />
            <el-table-column label="检验结果" property="checkResult" align="center" width="80" />
            <el-table-column label="检验人" property="checkMan" align="center" width="90" />
            <el-table-column label="检验时间" property="checkDate" align="center" width="160" />
          </el-table>
        </div>
        <div
          class="details-box-item"
          v-if="
            processDetails.printType == 1 &&
            processDetails.dsRbFilePreserveSlotList &&
            processDetails.dsRbFilePreserveSlotList.length > 0
          "
        >
          <div class="de-title">
            过程质量记录
            <!-- <el-button type="text" @click="syncData()" v-loading="syncLoading"
                >手动同步记录</el-button
              > -->
          </div>
          <preserve-slot-list :slot-list="processDetails.dsRbFilePreserveSlotList" />
        </div>
        <div style="width: 950px">
          <template v-if="selectedItemInfo.ppsName == '玻璃封接清洗'">
            <template v-if="processDetails.prList != null && processDetails.prList.length > 0">
              <el-table :data="[processDetails.prList[0]]" border>
                <el-table-column label="清洗开始时间" align="center" property="inDate" />
                <el-table-column label="清洗结束时间" align="center" property="outDate" />
                <el-table-column label="温度(℃)" align="center" property="tempSlot" />
                <el-table-column label="操作者" align="center" property="createMan" />
              </el-table>
            </template>
            <template v-if="processDetails.prList != null && processDetails.prList.length > 1">
              <el-table :data="[processDetails.prList[1]]" border>
                <el-table-column label="烘干开始时间" align="center" property="inDate" />
                <el-table-column label="烘干结束时间" align="center" property="outDate" />
                <el-table-column label="烘箱温度(℃)" align="center" property="tempSlot" />
                <el-table-column label="操作者" align="center" property="createMan" />
                <el-table-column label="设备编号" align="center" property="deviceId" />
              </el-table>
            </template>
          </template>
          <!-- 如果当前工序是 玻璃封接退火 -->
          <template v-if="selectedItemInfo.ppsName == '玻璃封接退火'">
            <el-table :data="processDetails.prList" border>
              <el-table-column label="数量" align="center" property="dataThree" />
              <el-table-column label="入炉时间" align="center" property="inDate" />
              <el-table-column label="保温开始时间" align="center" property="dataThirteen" />
              <el-table-column label="退火温度" align="center" property="tempSlot" />
              <el-table-column label="保温结束时间" align="center" property="dataTwelve" />
              <el-table-column label="最小真空度(Pa)" align="center" property="dataFourteen" />
              <el-table-column label="出炉时间" align="center" property="outDate" />
              <el-table-column label="操作者" align="center" property="createMan" />
              <el-table-column label="设备编号" align="center" property="deviceId" />
            </el-table>
          </template>
          <!-- 如果当前工序是 玻璃封接预氧化（箱式炉） -->
          <template v-if="selectedItemInfo.ppsName == '玻璃封接预氧化（箱式炉）'">
            <el-table :data="processDetails.prList" border>
              <el-table-column label="数量" align="center" property="dataThree" />
              <el-table-column label="入炉时间" align="center" property="inDate" />
              <el-table-column label="保温开始时间" align="center" property="dataThirteen" />
              <el-table-column label="保温温度" align="center" property="tempSlot" />
              <el-table-column label="保温结束时间" align="center" property="dataTwelve" />
              <el-table-column label="操作者" align="center" property="createMan" />
              <el-table-column label="设备编号" align="center" property="deviceId" />
            </el-table>
          </template>
          <!-- 如果当前工序是 玻璃封接预氧化（链式炉） -->
          <template v-if="selectedItemInfo.ppsName == '玻璃封接预氧化（链式炉）'">
            <el-table :data="processDetails.prList" border>
              <el-table-column label="数量" align="center" property="dataThree" />
              <el-table-column label="湿氮预氧化温度(℃)" align="center" property="tempSlot" />
              <el-table-column label="露点" align="center" property="dataEleven" />
              <el-table-column label="入炉时间" align="center" property="inDate" />
              <el-table-column label="出炉时间" align="center" property="outDate" />
              <el-table-column label="链速" align="center" property="vSpeed" />
              <el-table-column label="操作者" align="center" property="createMan" />
              <el-table-column label="设备编号" align="center" property="deviceId" />
            </el-table>
          </template>
          <!-- 如果当前工序是 玻璃封接（链式炉） -->
          <template v-if="selectedItemInfo.ppsName == '玻璃封接（链式炉）'">
            <el-table :data="processDetails.prList" border>
              <el-table-column label="数量" align="center" property="dataThree" />
              <el-table-column label="封接温度(℃)" align="center" property="tempSlot" />
              <el-table-column label="入炉时间" align="center" property="inDate" />
              <el-table-column label="出炉时间" align="center" property="outDate" />
              <el-table-column label="链速" align="center" property="vSpeed" />
              <el-table-column label="操作者" align="center" property="createMan.userName" />
              <el-table-column label="设备编号" align="center" property="deviceId" />
            </el-table>
          </template>
        </div>
      </div>
      <div
        class="details-box details-box-item"
        v-if="selectedItemId && selectedItemInfo.status == 1"
      >
        <el-empty description="暂无加工、检验记录！"></el-empty>
      </div>
    </div>

    <!-- <el-collapse v-model="activeName">
      <el-collapse-item title="订单信息" name="1">
        <template #title="{ isActive }"> 订单信息 </template>
      </el-collapse-item>
      <el-collapse-item title="工序信息" name="2" >
      </el-collapse-item>
    </el-collapse> -->
  </el-dialog>
</template>
<script>
import { updateProcess } from '../../api/flowManagement/index';
import contentView from './processView.vue';
import preserveSlotList from './preserveSlotList.vue';
import MoveElement from '@/utils/moveElement.js';
import { getOrderDetail, getPlanDetail } from '../../api/workRate/index';

export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    rowItem: {
      type: Object,
      default: () => {},
    },
  },
  components: {
    contentView,
    preserveSlotList,
  },
  computed: {
    // 订单信息列表
    orderItems() {
      // 获取优先级样式
      const getPriorityStyle = importance => {
        if (importance == 1) {
          return 'color: green';
        } else if (importance == 2 || importance == 3) {
          return 'color: red';
        } else {
          return 'color: rgb(251, 170, 8)';
        }
      };
      return [
        { label: '车间订单号', value: this.detailsForm.woCode || '' },
        { label: '流程卡号', value: this.detailsForm.cardNo || '' },
        {
          label: '零件号',
          value: this.detailsForm.partCode || '',
          clickable: true,
          clickHandler: () => this.openDocLink(this.detailsForm.dsPart),
        },
        { label: '批次号', value: this.detailsForm.batchNo || '' },
        { label: '订单数量', value: this.detailsForm.ypQty || '' },
        { label: '状态', value: this.detailsForm.curStatus || '' },
        {
          label: '优先级',
          value: this.detailsForm.priority || '',
          style: getPriorityStyle(this.detailsForm.priority),
        },
        {
          label: '调度员',
          value: this.detailsForm.dispatcher === null ? '' : this.detailsForm.dispatcher,
        },
        { label: '订单下达', value: this.detailsForm.sendDownTime || '' },
        { label: '生产数量', value: this.detailsForm.makeQty || '' },
        { label: '零件名称', value: this.detailsForm.dsPart?.partName || '' },
        { label: '产品型号', value: this.detailsForm.dsPart?.productType || '' },
        { label: '硬度', value: this.detailsForm.dsPart?.hardness || '' },
        { label: '计划完工', value: this.detailsForm.planEndDate || '' },
        {
          label: '需求交期',
          value: this.detailsForm.priority === 4 ? this.detailsForm.demandDate : '',
        },
        { label: '镀种', value: this.detailsForm.dsPart?.plate || '' },
        { label: '面积 (dm²)', value: this.detailsForm.dsPart?.area || '' },
        { label: '材料', value: this.detailsForm.dsPart?.material || '' },
        { label: '生产标识', value: this.detailsForm.prodIdent || '' },
        { label: '镀后入库', value: this.detailsForm.putStoreTime || '' },
        { label: '标记要求', value: this.detailsForm.dsPart?.signMemo || '' },
        { label: '关键信息', value: this.detailsForm.dsPart?.cruxMemo || '' },
        { label: '试验数量', value: this.detailsForm.testQty || '' },
        { label: '消耗数量', value: this.detailsForm.lossQty || '' },
        {
          label: '是否印字',
          value:
            this.detailsForm.yieldType != 1
              ? this.detailsForm.dsPart?.isPrint == 1
                ? '否'
                : this.detailsForm.dsPart?.isPrint == 2
                ? '单'
                : '双'
              : '',
        },
        { label: '工艺路线', value: this.detailsForm.dsPart?.craftWay || '' },
        {
          label: '返工单号',
          value: this.detailsForm.curStatus == 19 ? this.detailsForm.qcReworkCode || '' : '',
          clickable: this.detailsForm.curStatus == 19,
          clickHandler: () => this.openClient(this.detailsForm.qcReworkCode),
        },
        {
          label: '涂色标个数',
          value: this.detailsForm.yieldType == 1 ? this.detailsForm.dsPart?.tsbNum : '',
        },
        {
          label: '涂色带个数',
          value: this.rowItem.yieldType == 1 ? this.detailsForm.dsPart?.tsdNum || '' : '',
        },
        {
          label: '涂箭头个数',
          value: this.rowItem.yieldType == 1 ? this.detailsForm.dsPart?.tjtNum || '' : '',
        },
        { label: '产品系列', value: this.detailsForm.dsPart?.productSeries || '' },
        { label: '工作订单备注', value: this.detailsForm.poMemo || '' },
        {
          label: '会议要求周期',
          value: this.detailsForm.priority === 4 ? this.detailsForm.meetCycle : '',
        },
        {
          label: '审理单号',
          value: this.detailsForm.reworkCode || '',
          clickable: true,
          clickHandler: () => this.openQcSheet(this.detailsForm.reworkCode),
        },
      ];
    },
    // 控制显示的订单项
    displayOrderItems() {
      if (this.orderInfoExpanded) {
        // 展开时显示全部
        // this.orderItems.forEach(item => {
        //   item.isExpandBtn = true; // 重置所有按钮的显示状态
        // });
        return this.orderItems;
      } else {
        // 收起时显示前 9 个，第 10 个位置显示"展开更多"按钮
        const items = this.orderItems.slice(0, 9);
        return [
          ...items,
          {
            label: '',
            value: '',
            isExpandBtn: true, // 标记为展开按钮
          },
        ];
      }
    },
  },
  data() {
    return {
      refreshLoading:false,
      processSelectLoading: false,
      selectedItemId: null,
      selectedItemInfo: {},
      // rowItem: {},
      activeName: '1',
      openShow: false,
      dsPart: {},
      height: 0,
      craftList: [], //工序列表
      color: {
        1: '#707070',
        2: '#22ac38',
        3: '#22ac38',
        5: '#00b7ee',
      },
      checkItemShow: true,
      makeRecShow: true,
      mtuShow: true,
      detailsForm: {},
      statusColorMap: {
        1: 'rgba(108, 117, 125,1)', // 未开始
        2: 'rgba(40, 167, 69, 1)', // 已接收
        3: 'rgba(40, 167, 69, 1)', // 已报工
        4: 'rgba(40, 167, 69, 1)', // 检验中
        5: 'rgba(40, 76, 137, 1)', // 已完成
      },
      statusTextMap: {
        1: '未开始',
        2: '已接收',
        3: '已报工',
        4: '检验中',
        5: '已完成',
      },
      processDetails: {}, //工序详情
      orderInfoExpanded: false,
    };
  },
  mounted() {
    this.openShow = this.showDialog;
    this.height = document.body.clientHeight - 100;
    console.log(this.rowItem, 'rowItem');

    this.getOrderDetail();
    this.$nextTick(() => {
      const el = this.$refs.pointView;
      if (el) {
        new MoveElement(el);
      }
    });
  },
  methods: {
    refreshData() {
      this.refreshLoading = true
      this.getOrderDetail();
      setTimeout(() => {
        this.refreshLoading = false
      }, 500);
    },
    // 切换订单信息展开/收起
    toggleOrderInfo() {
      this.orderInfoExpanded = !this.orderInfoExpanded;
    },
    // 同步数据
    syncData() {
      this.syncLoading = true;
      const { slotList = [] } = this.jsonObj.workPlan || {};
      const { mtuList = [] } = this.jsonObj || {};
      // 1. 同槽编号：取第一个非空 mtuCode 即可（因为都一样）
      let mtnCode = '';
      if (slotList && slotList.length > 0) {
        mtnCode = slotList[0].mtuCode || '';
      }

      // 2. 设备使用情况：找第一个 equipmentCard.deviceCode 和 hangNum 都有值的项
      let deviceCode = '';
      let hangNum = '';
      const validMtu = mtuList.find(item => item.equipmentCard?.deviceCode && item.hangNum != null);
      if (validMtu) {
        deviceCode = validMtu.equipmentCard.deviceCode;
        hangNum = validMtu.hangNum;
      }
      if (mtnCode != '' && deviceCode != '' && hangNum != '') {
        this.$ajax
          .get(
            `/qcProduceRun/getNewDataByParams?deviceCode=${deviceCode}&hangNum=${hangNum}&mtnCode=${mtnCode}`
          )
          .then(res => {
            if (this.$ifAjax(res)) {
              this.$message.success('数据同步成功！');
              this.syncLoading = false;
              this.getMrAndWc(this.itemInfo.item, this.itemInfo.index);
            }
          });
      }

      // TODO: 根据业务需要，将这些值用于后续操作（如保存、传参等）
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.processDetails.itemList[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    // 获取背景渐变色
    getProcessGradientColor(status) {
      const colors = this.statusColorMap[status] || this.statusColorMap[1];
      return `linear-gradient(90deg, ${colors[0]} 0%, ${colors[1]} 100%)`;
    },
    // 获取背景颜色
    getProcessBgColor(status) {
      return this.statusColorMap[status];
    },
    // 获取内容垂直渐变色
    getProcessVerticalGradient(status) {
      const color = this.statusColorMap[status];
      // 将状态颜色的透明度降低到 0.3-0.5

      const lightColor = color.replace(/rgba?\(([^)]+)\)/, (match, rgb) => {
        const values = rgb.split(',').map(v => parseFloat(v.trim()));
        if (values.length === 4) {
          // rgb 转 rgba，添加透明度
          return `rgba(${values[0]}, ${values[1]}, ${values[2]}, 0.2)`;
        }
        return match;
      });

      return `linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, ${lightColor} 100%)`;
    },
    // 获取状态文本
    getStatusText(status) {
      return this.statusTextMap[status] || '-';
    },
    getOrderDetail() {
      let query_ = {
        woId: this.rowItem.woId,
        partCode: this.rowItem.partCode,
      };
      getOrderDetail(query_).then(res => {
        this.detailsForm = res.data.data;
        // 获取详情后，自动选中第一个状态为 2、3、4 的工序
        this.$nextTick(() => {
          this.autoSelectProcess();
        });
      });
    },
    // 自动选中第一个状态为 2、3、4 的工序
    autoSelectProcess() {
      if (!this.detailsForm.planList || this.detailsForm.planList.length === 0) {
        return;
      }

      // 定义需要选中的状态：2-已接收，3-已报工，4-检验中
      const targetStatus = [2, 3, 4];

      // 查找第一个符合条件的工序
      const targetItem = this.detailsForm.planList.find(item => targetStatus.includes(item.status));

      if (targetItem) {
        // 选中该工序
        this.selectItem(targetItem);
        // this.messageAlter(targetItem);
        console.log('自动选中状态为' + targetItem.status + '的工序:', targetItem.ppsName);
      } else {
        // 如果没有符合条件的，选中第一个工序
        const firstItem = this.detailsForm.planList[0];
        if (firstItem) {
          this.selectItem(firstItem);
          console.log('未找到状态为 2、3、4 的工序，默认选中第一个:', firstItem.ppsName);
        }
      }
    },
    selectItem(item) {
      this.selectedItemId = item.id;
      this.selectedItemInfo = item;
      this.processSelectLoading = true;
      // 触发工序详情获取
      this.getProcessDetail(item);
    },
    // 获取工序详情
    async getProcessDetail() {
      let query_ = {
        wpId: this.selectedItemId,
      };
      getPlanDetail(query_)
        .then(res => {
          this.processDetails = res.data.data;
          this.processSelectLoading = false;
        })
        .catch(err => {
          this.processSelectLoading = false;
        });
    },
    // 双击零件跳转
    openDocLink(info) {
      if (info.url != '') {
        window.open(info.url);
      }
    },
    // 优先级样式
    importanceColor(importance) {
      if (importance == 1) {
        return 'color: green';
      } else if (importance == 2 || importance == 3) {
        return 'color: red';
      } else {
        return 'color: rgb(251, 170, 8)';
      }
    },
    // 返工单号
    openClient(qcReworkCode) {
      if (qcReworkCode) {
        this.reviewFormMess = {
          reworkCode: qcReworkCode,
          queryType: true,
        };
      }
      this.reviewFormMessOpen = true;
    },
    // 审理单号
    openQcSheet(rsCode) {
      if (rsCode) {
        this.qcSheet = {
          rsCode: rsCode,
          queryType: true,
        };
      }
      this.qcSheetOpen = true;
    },
    closeDialog() {
      this.openShow = false;
      this.$emit('closeDialog');
    },
  },
};
</script>
<style lang="scss" scoped>
i {
  font-style: normal;
}
.order-box {
  margin: 10px 0 10px 0;
  padding: 0 10px;
  display: flex;
  flex-wrap: wrap;
  .order-item {
    width: 20%;
    margin-bottom: 10px;
  }
  // 展开按钮项样式
  .expand-item {
    width: 100%;
    text-align: left;
    margin-top: 5px;
  }
}
.expand-btn {
  font-size: 13px;
  color: #409eff;
  padding: 5px 10px;

  &:hover {
    color: #66b1ff;
  }
}
:deep(.el-collapse-item__header) {
  background-color: rgb(246, 248, 252);
  border-bottom: 1px solid #ebeef5;
  height: 36px;
  font-size: 14px;
}
:deep(.el-collapse-item__title) {
  height: 36px;
  line-height: 36px;
  padding-left: 14px;
}
:deep(.el-collapse-item__content) {
  padding-bottom: 10px;
}
:deep(.el-collapse-item__wrap) {
  border-bottom: 0;
}

.scrollContent {
  height: 300px;
  width: 100%;
  overflow: hidden;
  position: relative;
  .el-scrollbar__wrap {
    height: 160px;
    margin-bottom: 0px !important;
    margin-right: -5px !important;

    ul {
      margin-right: 10px;
    }
  }

  .box-right {
    position: absolute;
    right: 0;
    top: 0;
    width: 80px;
    background: #fff;
    height: 158px;
    text-align: center;
  }

  .scroll-container {
    padding-right: 80px;
  }
}

.scrollBox {
  white-space: nowrap;
  position: absolute;
  width: 80%;
  margin-top: 20px;
  .right-content {
    width: 200px;
    height: 158px;
    display: inline-block;
  }
  & > ul {
    width: 200px;
    min-height: 207px;
    display: inline-block;
    border: 1px solid rgb(140, 140, 140);
    margin-left: 5px;
    & > li {
      width: 100%;
      padding: 0 10px;
      line-height: 25px;
      font-size: 12px;
      span {
        width: 100%;
      }
      .cardBoxText {
        cursor: pointer;
        display: block;
        width: 60px;
        word-break: keep-all;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 30px;
        i {
          display: block;
          float: left;
          &:nth-child(2) {
            margin-top: 6px;
          }
        }
      }
    }
  }
}

.details-box {
  width: calc(100% - 28px);

  //
  // border:1px solid #ebeef5;

  margin: 0 auto 0;
  height: auto;
  // margin-left: 5px;
  .details-box-item {
    box-shadow: 0px 0px 6px 1px rgba(22, 44, 71, 0.16);
    padding: 5px 10px 20px 10px;
    border-radius: 6px 6px 6px 6px;
    margin-bottom: 15px;
  }
}

.production-process-item {
  border: 1px solid #284c89;
  width: 220px;
  min-height: 170px;
  display: inline-block;
  margin-left: 15px;
  .production-left-item-box {
    margin-top: 0 !important;
  }
  .production-process-title {
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgb(140, 140, 140);
    padding-left: 10px;
    padding-right: 10px;
    color: #fff;
    font-weight: 500;
  }

  .flex-row {
    // margin-bottom: 14px;
    display: flex;
    // justify-content: space-between;
    align-items: center;
    line-height: 25px;
    padding-left: 10px;
    padding-right: 10px;
    // margin-bottom: 16px;
    .icon-text {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 12px !important;

      .el-icon {
        display: inline-flex;
        vertical-align: middle;
        font-size: 14px;
        margin-top: 2px; // 微调图标位置
      }
    }
  }
}
/* 选中时的放大效果 */
.production-process-item.selected {
  transform: scale(1.05); /* 放大10% */
  z-index: 10;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /*  */
  transition: all 0.3s ease;
}

/* 确保容器允许溢出 */
.scrollBox {
  overflow: visible; /* 避免放大时被裁剪 */
  position: relative;
}

/* 可选：未选中项降低透明度（突出选中项） */
.production-process-item:not(.selected) {
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

:deep(.fixed-descriptions) {
  .el-descriptions__body {
    td {
      &:nth-child(odd) {
        // 标签列
        width: 100px;
        min-width: 100px;
      }
      &:nth-child(even) {
        // 内容列
        width: 150px;
        min-width: 150px;
        max-width: 150px;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
.de-title {
  font-weight: bold;
  margin-bottom: 5px;
}

.expand-btn {
  font-size: 13px;
  color: #409eff;
  padding: 5px 10px;

  &:hover {
    color: #66b1ff;
  }
}

.order-box {
  margin: 10px 0 10px 0;
  padding: 0 10px;
  display: flex;
  flex-wrap: wrap;
  .order-item {
    width: 20%;
    margin-bottom: 10px;
  }
}
</style>
