<template>
  <!-- <div class="el-Cart-button">

      <div class="el-Cart-button-left">
        <el-button type="primary" @click="AddInfo"
          ><el-icon><Plus /></el-icon>新 增</el-button
        >
      </div>

      <div class="el-Cart-button-right">
 
        <button @click="refresh">
          <el-icon color="#ccc"><Refresh /></el-icon>
        </button>
  
        <button @click="menu = true">
          <el-icon color="#ccc"><Operation /></el-icon>
        </button>
      
        <button @click="search">
          <el-icon color="#ccc"><Search /></el-icon>
        </button>
      </div>
    </div> -->

  <!-- <el-table
      v-loading="loading"
      element-loading-text="数据正在更新中..."
      :data="ElData"
      border
      style="width: 100%"
      ref="tableRef"
      @select-all="selectAll"
      @select="selectChange"
    >
      <el-table-column type="selection" width="55" fixed />
      <el-table-column type="index" fixed width="50" height="100" label="#" align="center" />



      <el-table-column
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        :fixed="item.fixed"
        align="center"
        v-for="(item) in ElmenuData"
        :key="item.label"
      >
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :fixed="item.fixed"
          align="center"
        >
    
          <template #header>
            <el-input
              clearable
              v-if="item.type == 4"
              v-model="item.values"
              :placeholder="`请输入${item.label}`"
            />
            <el-select
              v-model="item.values"
              class="m-2"
              placeholder="请选择"
              size="large"
              v-if="item.type == 6"
              @change="TcChenge($event, item)"
              :clearable="true"
            >
              <el-option
                v-for="item in item.checkarr"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </template>
 
          <template #default="props">
  
            <div class="ElBtnClass" v-if="item.type == 10">
              <el-button @click="view(props.row)">查看</el-button>
              <el-button @click="ViewEvent(props.row)">编辑</el-button>
              <el-button @click="ViewEvent(props.row)">回复</el-button>
              <el-button @click="Delete(props.row)">删除</el-button>
              <el-button @click="CompletionButton(props.row)">完结</el-button>
            </div>
            <span v-if="item.type == 4">{{
              props.row[item.prop] != null ? props.row[item.prop] : '/'
            }}</span>
          </template>
        </el-table-column>
      </el-table-column>
    </el-table> -->

  <basic-container>
    <div class="avue-crud">
      <!-- 搜索模块 -->
      <el-row v-if="!search">
        <!-- 查询模块 -->
        <el-form :inline="true" :model="query" class="el-fr-d">
          <el-form-item label="交期:" class="el-times">
            <!--            <el-input v-model="query.stockupArea" placeholder="请输入备货区"></el-input>-->
            <el-date-picker
              v-model="stockupDate"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :shortcuts="shortcuts"
              clearable
            />
          </el-form-item>
          <el-form-item label="创建时间:" class="el-times">
            <!--            <el-input v-model="query.stockupArea" placeholder="请输入备货区"></el-input>-->
            <el-date-picker
              v-model="stockupDate"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :shortcuts="shortcuts"
              clearable
            />
          </el-form-item>
          <!-- 查询按钮 -->
          <el-form-item class="el-btn">
            <el-button type="primary" icon="el-icon-search" @click="searchChange">搜 索</el-button>
            <el-button icon="el-icon-delete" @click="searchReset()">清 空</el-button>
          </el-form-item>
        </el-form>
      </el-row>

      <!-- 控件模块 -->
      <el-row>
        <div class="avue-crud__header">
          <!-- 头部左侧按钮模块 -->
          <div class="avue-crud__left">
            <el-button type="primary" @click="AddInfo">
              <el-icon><Plus /></el-icon>新 增</el-button
            >
          </div>
          <!-- 头部右侧按钮模块 -->
          <div class="avue-crud__right">
            <el-button icon="el-icon-refresh" @click="searchChange" circle></el-button>
            <el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
            <el-button icon="Search" @click="searchHide" circle></el-button>
          </div>
        </div>
      </el-row>

      <!-- 首页表格 -->
      <el-row>
        <!-- 列表模块 -->
        <tablecmt
          :columnList="columnList"
          :tableData="data"
          :loading="loadingObj.list"
          @inputTxt="inputsc"
          @timeCheck="timesc"
          @btnCheck="btnsc"
          @selectCheck="selectsc"
          @selection="selectionChange"
        >
          <template #default="slotProps">
            <template v-if="slotProps.scope.column.label === '操作'">
              <div class="ElBtnClass">
                <el-button @click="view(slotProps.scope)">查看</el-button>
                <el-button @click="ViewEvent(slotProps.scope)">编辑</el-button>
                <el-button @click="ViewEvent(slotProps.scope)">回复</el-button>
                <el-button @click="Delete(slotProps.scope)">删除</el-button>
                <el-button @click="CompletionButton(slotProps.scope)">完结</el-button>
              </div>
            </template>
          </template>
        </tablecmt>
      </el-row>

      <!-- 分页模块 -->
      <el-row class="el-fy">
        <div class="avue-crud__pagination flex-c-sb" style="width: 100%">
          <div></div>
          <el-pagination
            align="right"
            background
            @size-change="sizeChange"
            @current-change="currentChange"
            :current-page="page.currentPage"
            :page-sizes="[30, 50, 80, 120]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
          >
          </el-pagination>
        </div>
      </el-row>
    </div>

    <!-- 新增弹窗  -->
    <el-dialog v-model="Indexdialog" :title="FromDisabled ? '详情' : '新增'" width="60%">
      <el-form :model="Indexform" label-width="100px" class="IndexFrom" ref="IndexForm">
        <el-form-item label="异常类型">
          <el-select
            v-model="Indexform.workOrderType"
            :disabled="FromDisabled"
            clearable
            placeholder="选择工单异常类型"
            @change="abnormalChange"
          >
            <el-option
              v-for="item in IndexException"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="发现节点">
          <el-select
            v-model="Indexform.discoveryNode"
            :disabled="FromDisabled"
            clearable
            placeholder="选择发现节点"
            @change="DiscoveringNodesChange"
          >
            <el-option
              v-for="item in DiscoveringNodes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="异常工单号">
          <el-input
            v-model="Indexform.workOrderNumber"
            :disabled="FromDisabled"
            placeholder="请输入异常工单号"
            clearable
          />
        </el-form-item>
        <!-- 必填 -->
        <el-form-item label="运单号">
          <el-input
            v-model="Indexform.waybillNumber"
            :disabled="FromDisabled"
            placeholder="请输入云单号"
            clearable
          />
        </el-form-item>

        <el-form-item label="少货件数">
          <el-input
            v-model="Indexform.waybillNumber"
            :disabled="FromDisabled"
            placeholder="请输入少货件数"
            clearable
          />
        </el-form-item>

        <el-form-item label="窜货件数">
          <el-input
            v-model="Indexform.waybillNumber"
            :disabled="FromDisabled"
            placeholder="请输入窜货件数"
            clearable
          />
        </el-form-item>

        <el-form-item
          label="包条码"
          v-if="SelectType == 1 || SelectType == 2 || SelectType == 3 || StateType"
        >
          <el-input
            v-model="Indexform.waybillNumber"
            :disabled="FromDisabled"
            placeholder="请输入包条码,多个用逗号隔开"
            clearable
          />
        </el-form-item>

        <!-- 必填 -->
        <el-form-item label="订单自编号">
          <el-input
            v-model="Indexform.orderCode"
            :disabled="FromDisabled"
            placeholder="请输入订单自编号"
            clearable
          />
        </el-form-item>

        <el-form-item
          label="车次号"
          v-if="groundlineSet || groundlineType == 1 || groundlineType == 3 || groundlineType == 4"
        >
          <el-input
            v-model="Indexform.trainNumber"
            placeholder="请输入车次号(干线卸车环节)"
            clearable
            :disabled="FromDisabled"
          />
        </el-form-item>
        <!-- 必填 -->
        <el-form-item label="一级品">
          <el-input
            v-model="Indexform.first"
            :disabled="FromDisabled"
            placeholder="请输入一级品类"
            clearable
          />
        </el-form-item>
        <!-- 必填 -->
        <el-form-item label="二级品">
          <el-input
            v-model="Indexform.secondary"
            :disabled="FromDisabled"
            placeholder="请输入二级品类"
            clearable
          />
        </el-form-item>

        <el-form-item label="车辆路线">
          <el-input
            v-model="Indexform.vehicleRoute"
            placeholder="请输入车辆路线车次号(通过车次号自动带出车辆路线)"
            clearable
            :disabled="FromDisabled"
          />
        </el-form-item>

        <el-form-item label="送货时间">
          <el-date-picker
            v-model="Indexform.deliverGoodsTime"
            type="datetime"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择送货时间"
          />
        </el-form-item>

        <el-form-item
          label="发现时间"
          v-if="groundlineSet || groundlineType == 2 || groundlineType == 3 || groundlineType == 4"
        >
          <el-date-picker
            v-model="Indexform.discoveryTime"
            type="datetime"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择发现时间"
            :disabled="FromDisabled"
          />
        </el-form-item>

        <el-form-item
          label="配送时间"
          v-if="groundlineSet || groundlineType == 3 || groundlineType == 4"
        >
          <el-date-picker
            v-model="Indexform.deliveryTime"
            type="datetime"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择入库"
            :disabled="FromDisabled"
          />
        </el-form-item>

        <el-form-item label="入库时间" v-if="groundlineSet || groundlineType == 2">
          <el-date-picker
            v-model="Indexform.warehousingTime"
            type="datetime"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择入库"
            :disabled="FromDisabled"
          />
        </el-form-item>
        <!-- 必填 -->
        <el-form-item label="运单商场">
          <el-input
            v-model="Indexform.waybillMall"
            :disabled="FromDisabled"
            placeholder="请输入运单商场"
            clearable
          />
        </el-form-item>

        <el-form-item
          label="配送司机"
          v-if="groundlineSet || groundlineType == 3 || groundlineType == 4"
        >
          <el-input
            v-model="Indexform.deliveryDriver"
            :disabled="FromDisabled"
            placeholder="请输入配送司机"
            clearable
          />
        </el-form-item>
        <!-- 必填 -->
        <el-form-item label="异常问题描述">
          <el-input
            v-model="Indexform.problemDescription"
            :disabled="FromDisabled"
            placeholder="请输入异常问题"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="责任人(库内作业环节)"
          v-if="groundlineSet || groundlineType == 2 || groundlineType == 3 || groundlineType == 4"
        >
          <el-input
            v-model="Indexform.personResponsible"
            :disabled="FromDisabled"
            placeholder="请输入责任人"
            clearable
          />
        </el-form-item>

        <el-form-item label="备注">
          <el-input
            v-model="Indexform.remarks"
            :disabled="FromDisabled"
            placeholder="请输入备注"
            clearable
          />
        </el-form-item>
      </el-form>
      <!-- 必填 -->
      <div class="el_clzr">
        <el-form-item label="处理方">
          <el-select
            v-model="Indexform.processor"
            :disabled="FromDisabled"
            clearable
            multiple
            placeholder="请选择处理方"
          >
            <el-option
              v-for="item in warehouseData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <!-- 必填 -->
        <el-form-item label="责任方">
          <el-select
            v-model="Indexform.duty"
            :disabled="FromDisabled"
            clearable
            multiple
            placeholder="请选择责任方"
          >
            <el-option
              v-for="item in warehouseData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </div>
      <div class="Transport_damage_photos" v-if="SelectType == 1 || SelectType == 3 || StateType">
        <span class="title">运损照片</span>
        <el-upload
          v-model:file-list="fileList"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="图片" />
        </el-dialog>
      </div>
      <template #footer>
        <span class="dialog-footer" v-if="!FromDisabled">
          <el-button @click="Indexdialog = false">取消</el-button>
          <el-button type="primary" @click="ConfirmForm"> 提交 </el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 完结弹窗  -->

    <el-dialog
      :style="{ height: eightyPercentHeight + 'px', overflowY: 'scroll' }"
      v-model="enddialog"
      title="完结"
      width="70%"
      :before-close="handleClose"
    >
      <el-form :model="endFrom" label-width="90px" class="endClass">
        <el-form-item label="运单商场">
          <el-input v-model="endFrom.name" placeholder="请输入运单商场" />
        </el-form-item>

        <el-form-item label="运单号">
          <el-input v-model="endFrom.name" placeholder="请输入运单号" />
        </el-form-item>

        <el-form-item label="订单自编号">
          <el-input v-model="endFrom.name" placeholder="请输入订单自自编号" />
        </el-form-item>

        <el-form-item label="包条码">
          <el-input v-model="endFrom.name" placeholder="请输入包条码" />
        </el-form-item>

        <el-form-item label="品类">
          <el-input v-model="endFrom.name" placeholder="请输入品类" />
        </el-form-item>

        <el-form-item label="异常状态">
          <el-input v-model="endFrom.name" placeholder="异常状态" />
        </el-form-item>

        <el-form-item label="运损发现节点">
          <el-select v-model="endFrom.a" class="m-2" placeholder="Select">
            <el-option
              v-for="item in TransportLossNode"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="车次号">
          <el-input v-model="endFrom.name" placeholder="请输入车次号" />
        </el-form-item>
        <el-form-item label="运损发现时间">
          <el-date-picker
            v-model="endFrom.warehousingTime"
            type="datetime"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择运损发现时间"
            :disabled="FromDisabled"
          />
        </el-form-item>
        <el-form-item label="送货时间">
          <el-date-picker
            v-model="endFrom.warehousingTime"
            type="datetime"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择送货时间"
            :disabled="FromDisabled"
          />
        </el-form-item>

        <div class="selector">
          <span class="title">处理方</span>

          <el-select
            v-model="endFrom.value"
            multiple
            filterable
            default-first-option
            :reserve-keyword="false"
            placeholder="请选择处理方"
          >
            <el-option
              v-for="item in optionss"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>

        <div class="selector">
          <span class="title">责任方</span>
          <el-select
            v-model="endFrom.value"
            multiple
            filterable
            default-first-option
            :reserve-keyword="false"
            placeholder="请选择处理方"
          >
            <el-option
              v-for="item in optionss"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>

        <!-- <el-form-item label="处理结果"> -->
        <div class="selector">
          <span class="title">处理结果</span>
          <el-select
            v-model="endFrom.value"
            multiple
            filterable
            default-first-option
            :reserve-keyword="false"
            placeholder="请选择处理方"
            @change="changeProcessingResults"
          >
            <el-option
              v-for="item in ProcessingResults"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <!-- </el-form-item> -->
      </el-form>

      <div class="ProcessingResults">
        <div class="title">处理结果-理赔金额</div>
        <div class="Listadmiration">
          <div class="name" v-for="(item, index) in ProcessingList" :key="index">
            <span>{{ item.name }}:</span>
            <el-input-number
              v-model="item.input"
              :min="item.min"
              :max="item.max"
              @change="handleChange"
            />
          </div>

          <!-- <div class="name">
            <span>下补单:</span>
            <el-input-number v-model="endFrom.num" :min="1" :max="10" @change="handleChange" />
          </div>
          <div class="name">
            <span>赔付运费:</span>
            <el-input-number v-model="endFrom.num" :min="1" :max="10" @change="handleChange" />
          </div>
          <div class="name">
            <span>维修:</span>
            <el-input-number v-model="endFrom.num" :min="1" :max="10" @change="handleChange" />
          </div>
          <div class="name">
            <span>用库存:</span>
            <el-input-number v-model="endFrom.num" :min="1" :max="10" @change="handleChange" />
          </div>
          <div class="name">
            <span>赔商家:</span>
            <el-input-number v-model="endFrom.num" :min="1" :max="10" @change="handleChange" />
          </div> -->
        </div>

        <div class="lptime">
          <span class="name">理赔支付时间</span>
          <el-date-picker
            v-model="endFrom.warehousingTime"
            type="datetime"
            format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss"
            placeholder="请选择运理赔支付时间"
            :disabled="FromDisabled"
          />
        </div>
      </div>

      <!-- 图片  -->
      <div class="Transport_damage_photos" v-if="SelectType == 1 || SelectType == 3 || StateType">
        <span class="title">图片</span>
        <el-upload
          v-model:file-list="fileList"
          action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </div>
      <el-form-item label="备注">
        <el-input v-model="endFrom.name" placeholder="请输入备注" />
      </el-form-item>
      <!-- 表格 -->
      <div class="recordCl">
        <el-row>
          <!-- 列表模块 -->
          <tablecmt
            :columnList="recordList"
            :tableData="recorddata"
            :loading="loadingObj.list"
            @inputTxt="recordinputsc"
            @timeCheck="recordtimesc"
            @btnCheck="recordbtnsc"
            @selectCheck="recordselectsc"
            @selection="recordselectionChange"
          >
            <template #default="slotProps">
              <template v-if="slotProps.scope.column.label === '操作'">
                <div class="ElBtnClass">
                  <el-button @click="view(slotProps.scope)">查看</el-button>
                  <el-button @click="ViewEvent(slotProps.scope)">编辑</el-button>
                  <el-button @click="ViewEvent(slotProps.scope)">回复</el-button>
                  <el-button @click="Delete(slotProps.scope)">删除</el-button>
                  <el-button @click="CompletionButton(slotProps.scope)">完结</el-button>
                </div>
              </template>
            </template>
          </tablecmt>
        </el-row>
      </div>
      <div class="el_Completion">
        <span class="title">完结信息</span>
        <div class="el-ckbtn">
          <el-button type="primary" @click="AddCompensation">添加赔款方</el-button>
          <el-button type="primary" @click="AddPayee">添加收款方</el-button>
        </div>
        <div class="payanindemnity" v-for="(item, index) in CompensationParty" :key="index">
          <span class="title">{{ item.state == 0 ? '赔款方' : '收款方' }}{{ item.cld }}</span>
          <div class="sk_input"><el-input v-model="item.name" placeholder="赔款方" /></div>
          <div class="sk_input"><el-input v-model="item.reason" placeholder="原因" /></div>
          <div class="sk_input"><el-input v-model="item.nunm" placeholder="金额" /></div>
          <el-button type="danger" round @click="payremove(item.state, index)">移除</el-button>
        </div>
      </div>

      <div>
        <span>仲裁原因</span>
        <el-input
          style="margin-top: 12px"
          v-model="endFrom.textarea"
          :rows="5"
          type="textarea"
          placeholder="请输入仲裁原因"
        />
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="enddialog = false">取消</el-button>
          <el-button type="primary" @click="dialogVisible = false"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </basic-container>

  <!-- <div class="page">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="pageList"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="PageSizeChange"
        @current-change="SizeChange"
      />
    </div> -->
</template>

<script setup>
import { ElMessage } from 'element-plus';
import { ElMessageBox } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
import { $_getList, $_submit, $_getDetail, $_remove } from '@/api/aftersales/aftersalesWorkOrder';
import { getDictionaryBiz } from '@/api/system/dict'; //字典
import { getDetailWarehouse, getDeptWarehouse } from '@/api/basicdata/basicdataWarehouse'; //处理方
import { ref, reactive, toRefs, computed, onMounted, nextTick } from 'vue';
import { columnList, recordList } from '@/option/aftersales/vueTvemp.js';
import {  processRowProperty } from '@/utils/util';
import dayjs from 'dayjs';
const currentPage = ref(1); // 默认页码
const pageSize = ref(30); // 默认每一页几条
const total = ref(0); //页码总页数
const pageList = ref([5, 10, 50, 100, 200]); // 选择每页显示多少条
const background = ref(true); // 是否开启背景颜色
const disabled = ref(false); // 是否禁止使用页码功能
const loading = ref(false); //首页表格加载效果
const Indexdialog = ref(false); //新增弹窗
const Indexform = ref({}); //首页新增表单
const IndexException = ref([]); //异常类型下拉选择
const DiscoveringNodes = ref([]); //发现节点下拉选择
const warehouseData = ref([]); //处理方
const IndexForm = ref(null); //首页表实例
const FromDisabled = ref(false); //详情禁止输入框
const SelectType = ref(null); //类型
const StateType = ref(true); //类型
const dialogImageUrl = ref('');
const dialogVisible = ref(false);
const groundlineType = ref(null); //干线状态
const groundlineSet = ref(true); //干线条件都满足
const enddialog = ref(false); //完结弹窗
const endFrom = ref({}); //完结弹窗表单
const screenHeight = ref(0); // 屏幕高度
const eightyPercentHeight = ref(0); // 80% 高度
const list = ref([]);
const options = ref([]);
const ProcessingList = ref([]); //赔付方式列表
const CompensationParty = ref([{ name: '', state: 0, num: 0, reason: '', cld: 1 }]); //赔付款方
const details = reactive({
  /** 是否开启搜索 */
  search: true,
  /** 表格搜索条件 */
  query: {},
  /** 时间快捷选择设置 */
  shortcuts: [
    {
      text: '最近一周',
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
        return [start, end];
      },
    },
    {
      text: '最近一个月',
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
        return [start, end];
      },
    },
    {
      text: '最近三个月',
      value: () => {
        const end = new Date();
        const start = new Date();
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
        return [start, end];
      },
    },
  ],
  /** 时间选择器数据 */
  stockupDate: [],
  /** 列表 */
  columnList,

  /** 列表数据 */
  data: [{}],
  // 处理记录
  recordList,
  // 处理记录数据
  recorddata: [{}],
  /** 页面loading */
  loadingObj: {
    /** 列表加载loading */
    list: false,
    packageListLoading: false,
  },
  /** 列表复选框选中的数据 */
  selectionList: [],
  /** 是否显示设置表格 */
  drawerShow: false,
  /** 分页参数 */
  page: {
    currentPage: 1,
    pageSize: 50,
    total: 0,
  },

  /** 弹出层显示 */
  popUpShow: {
    /** 包件明细 */
    packageOrderListlVisited: false,
    /** 二维码 */
    QRCodeVisible: false,
    /** 修改客户信息 */
    editClientInfoVisible: false,
  },
  /** 列表Dom节点 */
  listNode: '',
  form: {},
  /** 全屏 */
  fullscreenObj: {
    /** 包明细 */
    packageOrderListlVisited: false,
  },
});

const {
  search,
  query,
  shortcuts,
  stockupDate,
  data,
  loadingObj,
  selectionList,
  drawerShow,
  page,
  trickleLoadingPage,
  zeroAdditionalRecordingInfo,
  popUpShow,
  recorddata,
} = toRefs(details);

const ProcessingResults = [
  {
    value: '0',
    label: '维修',
  },
  {
    value: '1',
    label: '补漆',
  },
  {
    value: '2',
    label: '下补单',
  },
  {
    value: '3',
    label: '赔付运费',
  },
  {
    value: '4',
    label: '用库存',
  },
  {
    value: '5',
    label: '赔商家',
  },
  {
    value: '6',
    label: '赔客户',
  },
];
const fileList = ref([
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
  {
    name: 'plant-1.png',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
]);

const TransportLossNode = ref([
  { label: '在库操作环节', value: 1 },
  { label: '干线卸车环节', value: 2 },
  { label: '入库环节', value: 3 },
  { label: '配送环节', value: 4 },
  { label: '中转卸车环节', value: 5 },
  { label: '安装环节', value: 6 },
]);

// 按钮配置
const ElButtonS = ref([
  // 1.link    切换按钮样式(文本模式-false ,按钮模式-tre)
  // 2.class   按钮样式名(用于切换按钮样式)
  // 3.space   是否开启按钮文子直接间距(true开启 ,false关闭)
  // 4.size    按钮尺寸默认小尺寸('large'| 'default'| 'small')
  // 5.icon    按钮图标
  // 6.table   按钮名称
  {
    link: false,
    class: 'el-btn-view',
    space: true,
    size: 'small',
    icon: 'el-icon-view',
    table: '详情',
  },
]);

const ElData = ref([]); // 首页表格数据
// 首页表格菜单
const ElmenuData = ref([
  {
    prop: 'workOrderType',
    label: '异常类型',
    type: 6,
    values: '',
    width: '150',
    checkarr: [],
    fixed: false,
    sortable: true,
    header: true,
  },
  {
    prop: 'discoveryNode',
    label: '发现节点',
    type: 1,
    values: '',
    width: '150',
    checkarr: [],
    fixed: false,
    sortable: true,
    header: true,
  },
  {
    prop: 'workOrderNumber',
    label: '异常工单号',
    type: 1,
    values: '',
    width: '150',
    checkarr: [],
    fixed: false,
    sortable: true,
    header: true,
  },
  {
    prop: 'waybillNumber',
    label: '运单号',
    type: 1,
    values: '',
    width: '180',
    checkarr: [],
    fixed: false,
    sortable: true,
    header: true,
  },
  {
    prop: 'orderCode',
    label: '订单自编号',
    type: 1,
    values: '',
    width: '180',
    checkarr: [],
    fixed: false,
    sortable: true,
    header: true,
  },
  {
    prop: 'trainNumber',
    label: '车次号',
    type: 1,
    values: '',
    width: '180',
    checkarr: [],
    fixed: false,
    sortable: true,
    header: true,
  },
  {
    prop: 'first',
    label: '一级品',
    type: 1,
    values: '',
    width: '180',
    checkarr: [],
    fixed: false,
    sortable: true,
    header: true,
  },
  {
    prop: 'secondary',
    label: '二级品',
    type: 1,
    values: '',
    width: '180',
    checkarr: [],
    fixed: false,
    sortable: true,
    header: true,
  },
  {
    prop: 'vehicleRoute',
    label: '车辆线路',
    type: 1,
    values: '',
    width: '180',
    checkarr: [],
    fixed: false,
    sortable: true,
    header: true,
  },
  {
    prop: 'deliverGoodsTime',
    label: '送货时间',
    type: 1,
    values: '',
    width: '180',
    checkarr: [],
    fixed: false,
    sortable: true,
    header: true,
  },
  {
    prop: 'discoveryTime',
    label: '发现时间',
    type: 1,
    values: '',
    width: '180',
    checkarr: [],
    fixed: false,
    sortable: true,
    header: true,
  },
  {
    prop: 'warehousingTime',
    label: '入库时间',
    type: 1,
    values: '',
    width: '180',
    checkarr: [],
    fixed: false,
    sortable: true,
    header: true,
  },
  {
    prop: 'waybillMall',
    label: '运单商场',
    type: 1,
    values: '',
    width: '180',
    checkarr: [],
    fixed: false,
    sortable: true,
    header: true,
  },
  {
    prop: 'deliveryTime',
    label: '配送时间',
    type: 1,
    values: '',
    width: '180',
    checkarr: [],
    fixed: false,
    sortable: true,
    header: true,
  },
  {
    prop: 'deliveryDriver',
    label: '配送司机',
    type: 1,
    values: '',
    width: '180',
    checkarr: [],
    fixed: false,
    sortable: true,
    header: true,
  },
  {
    prop: 'workOrderStatus',
    label: '工单状态',
    type: 1,
    values: '',
    width: '180',
    checkarr: [],
    fixed: false,
    sortable: true,
    header: true,
  },
  {
    prop: 'customerServiceName',
    label: '归属客服名称',
    type: 1,
    values: '',
    width: '180',
    checkarr: [],
    fixed: false,
    sortable: true,
    header: true,
  },
  {
    prop: 'overTime',
    label: '完结时间',
    type: 1,
    values: '',
    width: '180',
    checkarr: [],
    fixed: false,
    sortable: true,
    header: true,
  },
  {
    prop: 'problemDescription',
    label: '异常问题描述',
    type: 1,
    values: '',
    width: '180',
    checkarr: [],
    fixed: false,
    sortable: true,
    header: true,
  },
  {
    prop: 'personResponsible',
    label: '责任人(库内作业环节)',
    type: 1,
    values: '',
    width: '180',
    checkarr: [],
    fixed: false,
    sortable: true,
    header: true,
  },
  {
    prop: 'processNumber',
    label: '钉钉流程号',
    type: 1,
    values: '',
    width: '180',
    checkarr: [],
    fixed: false,
    sortable: true,
    header: true,
  },
  {
    prop: 'reviewedBy',
    label: '审核人',
    type: 1,
    values: '',
    width: '180',
    checkarr: [],
    fixed: false,
    sortable: true,
    header: true,
  },
  {
    prop: 'auditTime',
    label: '审核时间',
    type: 1,
    values: '',
    width: '180',
    checkarr: [],
    fixed: false,
    sortable: true,
    header: true,
  },
  {
    prop: 'entryTime',
    label: '财务入账时间',
    type: 1,
    values: '',
    width: '180',
    checkarr: [],
    fixed: false,
    sortable: true,
    header: true,
  },
  {
    prop: 'remarks',
    label: '备注',
    type: 1,
    values: '',
    width: '180',
    checkarr: [],
    fixed: false,
    sortable: true,
    header: true,
  },
  {
    prop: '',
    label: '操作',
    type: 10,
    values: '',
    width: '200',
    checkarr: [],
    fixed: 'right',
    sortable: true,
    header: true,
  },
]);

const IndexTable = val => {
  let data = {
    ...val,
  };
  columnList[2].checkarr = [];//重置下拉搜索框
  columnList[3].checkarr = [];
  data.current = page.value.currentPage; //页码
  data.size = page.value.pageSize; //条数
  updateDictionary(columnList[2].checkarr, 'pc_work_order'); //异常类型
  updateDictionary(columnList[3].checkarr, 'pc_discovery_node'); //发现环节
  $_getList(data).then(res => {
    console.log(res, '页面初始化');
    page.value.total = res.data.data.total; //总页数
    console.log(columnList[3].checkarr, 'columnList[3].checkarr');
    if (res.data.data.records.length) {
      res.data.data.records.forEach(item => {
        console.log(item.discoveryNode, 'item.discoveryNode');
        // 对为null的数据进行处理
        for (const property in item) {
          if (item[property] == null) {
            item[property] = '/';
          }
        }
        // 对状态进行处理
        if (item.workOrderType == 1) {
          item.workOrderTypeName = columnList[2].checkarr[0].label; //货损
        } else if (item.workOrderType == 2) {
          item.workOrderTypeName = columnList[2].checkarr[1].label; //少货
        } else if (item.workOrderType == 3) {
          item.workOrderTypeName = columnList[2].checkarr[2].label; //窜货
        } else if (item.workOrderType == 4) {
          item.workOrderTypeName = columnList[2].checkarr[3].label; //加急
        } else if (item.workOrderType == 5) {
          item.workOrderTypeName = columnList[2].checkarr[4].label; //其他
        }

        if (item.discoveryNode == 1) {
          item.discoveryNodeName = columnList[3].checkarr[0].label; //提货环节
        } else if (item.discoveryNode == 2) {
          item.discoveryNodeName = columnList[3].checkarr[1].label; //发货环节
        } else if (item.discoveryNode == 3) {
          item.discoveryNodeName = columnList[3].checkarr[2].label; //干线卸车环节
        } else if (item.discoveryNode == 4) {
          item.discoveryNodeName = columnList[3].checkarr[3].label; //库内作业环节
        } else if (item.discoveryNode == 5) {
          item.discoveryNodeName = columnList[3].checkarr[4].label; //配送装车环节
        } else if (item.discoveryNode == 6) {
          item.discoveryNodeName = columnList[3].checkarr[5].label; //其他
        } else if (item.discoveryNode == 7) {
          item.discoveryNodeName = columnList[3].checkarr[6].label; //配送签收环节
        } else if (item.discoveryNode == 8) {
          item.discoveryNodeName = columnList[3].checkarr[7].label; //安装环节
        }
      });
      details.data = res.data.data.records;

      loading.value = false; //关闭加载效果
    } else {
      details.data = res.data.data.records = res.data.data.records;
    }
  });
};

// 页面初始化
const OnLoad = async () => {
  details.loadingObj = true;
  // 在组件挂载后获取屏幕高度
  screenHeight.value = window.innerHeight;
  // 计算80%的高度
  eightyPercentHeight.value = screenHeight.value * 0.8;
  loading.value = true; //开启加载效果
  let data = {};
  console.log(page, 'page');
  data.current = page.value.currentPage; //页码
  data.size = page.value.pageSize; //条数
  console.log(data, '要提交的数据');

  updateDictionary(columnList[2].checkarr, 'pc_work_order'); //异常类型
  updateDictionary(columnList[3].checkarr, 'pc_discovery_node'); //发现环节
  IndexTable();
};

OnLoad();
// 字典公共函数
function updateDictionary(targetArray, dictionaryType) {
  getDictionaryBiz(dictionaryType).then(res => {
    console.log(res, '字典');
    res.data.data.forEach(item => {
      targetArray.push({
        value: item.dictKey,
        label: item.dictValue,
      });
    });
  });
}
// 字典请求函数
const AddInfo = () => {
  Indexform.value = {}; //清空表单
  IndexException.value = [];
  DiscoveringNodes.value = [];
  Indexdialog.value = true; //开启新增弹窗
  FromDisabled.value = false; //禁用输入框
  updateDictionary(IndexException.value, 'pc_work_order'); //异常类型
  updateDictionary(DiscoveringNodes.value, 'pc_discovery_node'); //发现环节
  getDeptWarehouse({}).then(res => {
    console.log(res, '处理方');
    res.data.data.forEach(item => {
      warehouseData.value.push({
        value: item.id,
        label: item.name,
      });
    });
  });
};

// 首页新增表单确定
const ConfirmForm = () => {
  console.log(Indexform.value.processor, 'Indexform.value.processor');
  FromDisabled.value = false; //启用输入框
  let processorEntityList = [];
  let ProcessingParty = {
    //处理方
    businessName: warehouseData.value.find(row => row.value == Indexform.value.processor)?.label,
    businessId: Indexform.value.processor,
    conditions: 1,
    typesOf: 2,
  };
  processorEntityList.push(ProcessingParty);
  let ResponsibleParty = {
    //责任方
    businessName: warehouseData.value.find(row => row.value == Indexform.value.duty).label,
    businessId: Indexform.value.duty,
    conditions: 1,
    typesOf: 1,
  };
  processorEntityList.push(ResponsibleParty);
  Indexform.value.processorEntityList = processorEntityList;
  let DataSubmit = { ...Indexform.value };
  delete DataSubmit.duty, //移除多余字段
    delete DataSubmit.processor; //移除多余字段
  console.log(DataSubmit, '处理好的表单信息');
  Indexdialog.value = false; //关闭表单弹窗
  $_submit(DataSubmit).then(res => {
    if (res.data.code == 200) {
      ElMessage({
        message: res.data.msg,
        type: 'success',
      });
      IndexTable();
    }
  });
};

// 首页查看详情按钮
const view = val => {
  console.log(val, '当前行数据');
  FromDisabled.value = true; //禁用输入框
  updateDictionary(IndexException.value, 'pc_work_order'); //异常类型
  updateDictionary(DiscoveringNodes.value, 'pc_discovery_node'); //发现环节
  getDeptWarehouse({}).then(res => {
    res.data.data.forEach(item => {
      warehouseData.value.push({
        value: item.id,
        label: item.name,
      });
    });
  });
  $_getDetail({
    id: val.row.id,
  }).then(res => {
    console.log(res, '查看详情返回值');
    if (res.data.data) {
      Indexform.value = res.data.data;
      Indexdialog.value = true; //展开弹窗
    }
  });
};
// 首页删除
const Delete = val => {
  ElMessageBox.confirm(`是否删除该条数据?`)
    .then(() => {
      $_remove({
        ids: val.id,
      }).then(res => {
        console.log(res, '删除成功后的返回值');
        if (res.data.code == 200) {
          ElMessage({
            message: res.data.msg,
            type: 'success',
          });

          OnLoad(); //添加成功初始化程序
        }
      });
    })
    .catch(() => {
      // catch error
    });
};
// 完结按钮
const CompletionButton = () => {
  enddialog.value = true; //开启完结弹窗
};
// 异常类型事件
const abnormalChange = val => {
  console.log(val);
  StateType.value = false;
  if (val == 1 || val == 2 || val == 3) {
    SelectType.value = val;
  } else {
    StateType.value = true;
  }
};
// 添加赔款方
const AddCompensation = () => {
  console.log('添加赔款方');
  let som = 1;
  CompensationParty.value.forEach(item => {
    if (item.state == 0) {
      som++;
    }
  });
  CompensationParty.value.push({ name: '', state: 0, num: 0, reason: '', cld: som });
};
// 添加收款方
const AddPayee = () => {
  let som = 1;
  CompensationParty.value.forEach(item => {
    if (item.state == 1) {
      som++;
    }
  });
  CompensationParty.value.push({ name: '', state: 1, num: 0, reason: '', cld: som });
};
// 移除按钮
const payremove = (state, val) => {
  // 判断赔付方，至少保留一条数据
  let som = 0;
  if (state == 0) {
    CompensationParty.value.forEach(item => {
      if (item.state == 0) {
        som++;
      }
    });
    if (som == 1) {
      ElMessage({
        message: '赔款必填最少一条',
        type: 'warning',
      });
      return;
    }
  }
  CompensationParty.value.splice(val, 1);
};
// 发现节点事件
const DiscoveringNodesChange = val => {
  groundlineSet.value = false; //干线条件都满足
  if (val == 1 || val == 2 || val == 3 || val == 4 || val == 5) {
    groundlineType.value = val; //干线状态
  } else {
    groundlineSet.value = true; //展示所有搜索框
  }
};
// 照片
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};

const handlePictureCardPreview = uploadFile => {
  dialogImageUrl.value = uploadFile.url;
  dialogVisible.value = true;
};

/** 表格表头输入框搜索 */
const inputsc = (index, row) => {
  details.query[row.prop] = index;
  IndexTable(details.query);
};

/** 表格表头时间选择 */
const timesc = (index, row) => {
  console.log(index, row);
  if (!!index) {
    index = dayjs(index).format('YYYY-MM-DD');
  }
  details.query[row.prop] = index;
  if (!index) {
    delete details.query[row.prop];
  }
};

/** 表格表头输入框搜索 */
const btnsc = val => {
  console.log(val);
};



// // 下拉框搜索公共函数
// const updateDetailQuery = (index, propName, obj) => {
//   // 更新或删除查询参数
//   if (index) {
//     obj[propName] = index;
//   } else {
//     delete obj[propName];
//   }
// };
// const processRowProperty = (index, row, details) => {
//   const nameRegex = /(\w+)Name$/; // 捕获以'Name'结尾的属性名
//   const match = row.prop.match(nameRegex);
  
//   // 如果属性以'Name'结尾，则更新相应的查询参数
//   if (match) {
//     const basePropName = match[1]; // 获取不包含'Name'的属性名
//     updateDetailQuery(index, basePropName, details.query);
//   } else {
//     updateDetailQuery(index, row.prop, details.query);
//   }
//   // 如果提供的index为假值，从query中删除原始属性
//   if (!index) {
//     delete details.query[row.prop];
//   }
// };


/** 表格表头下拉框选择 */
const selectsc = (index, row) => {
  console.log('index :>> ', index);
  console.log('row :>> ', row);
  
  processRowProperty(index, row, details);
  console.log(details.query, details.query);
  IndexTable(details.query);
};

function onLoad() {}

/** 表格表头复选框选择 */
const selectionChange = list => {
  console.log(list);
  details.selectionList = list;
};

/** 页码改变执行的回调 */
const currentChange = () => {
  console.log('');
};

const changeProcessingResults = val => {
  // 首先删除取消的项目
  ProcessingList.value = ProcessingList.value.filter(item => val.includes(item.state - 1));

  // 然后添加或保持新的项目
  val.forEach(num => {
    let newItem = { input: '', min: 0, max: 1000, state: num + 1 };
    // 根据num为newItem的name字段赋值
    switch (num) {
      case '0':
        newItem.name = '维修';
        break;
      case '1':
        newItem.name = '补漆';
        break;
      case '2':
        newItem.name = '下补单';
        break;
      case '3':
        newItem.name = '赔付运费';
        break;
      case '4':
        newItem.name = '用库存';
        break;
      case '5':
        newItem.name = '赔商家';
        break;
      case '6':
        newItem.name = '赔客户';
        break;
      default:
        console.log('未知的编号：', num);
        return; // 如果不是我们想处理的num，跳过之后的逻辑
    }

    // 如果列表中不存在则加入新项目
    if (!ProcessingList.value.some(item => item.state === newItem.state)) {
      ProcessingList.value.push(newItem);
      console.log(`添加：${newItem.name}`);
    }
  });
};

// 处理结果选择事件
</script>

<style scoped lang="scss">
.el-card {
  height: 100%;
  :deep(.el-card__body) {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
}
.page {
  height: 30px;
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding-bottom: 14px;
  justify-content: flex-end;
}
:deep(.el-Cart-button) {
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
}
.el-Cart-button-right {
  display: flex;
  margin: 0 0px;
  justify-content: space-between;
}
.el-Cart-button-right {
  display: flex;
  margin: 0 0px;
  justify-content: space-between;
  align-items: center;
  button {
    background-color: transparent;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    margin-right: 8px;

    &:hover {
      background-color: #172e601f;
      i {
        color: #0e2549;
      }
    }
    // 去掉最后一个按钮右侧边距
    &:last-child {
      margin-right: 0;
    }
  }
}
.IndexFrom {
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    margin: 10px;
    width: 31%;
    height: 46px;
    display: flex;
    align-items: center;
  }
  .el-form-item__content {
    .el-input {
      height: 36px;
      width: 206px;
    }
  }
  .el-input__wrapper {
    height: 32px !important;
  }
  :deep(.el-input) {
    width: 100% !important;
  }
  :deep(.el-input__wrapper) {
    height: 30px !important;
  }
  :deep(.el-select) {
    width: 100%;
  }
}
.Transport_damage_photos {
  padding: 6px;
  .title {
    font-size: 14px;
    margin-bottom: 9px;
    display: block;
  }
}
.endClass {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  .el-form-item {
    margin: 6px;
    width: 32%;
  }
  .el-select {
    width: 100%;
  }
  :deep(.el-input) {
    width: 100%;
  }
  :deep(.el-input__wrapper) {
    height: 26px;
  }
  .Transport_damage_photos {
    .title {
      font-size: 14px;
    }
  }
}
.ProcessingResults {
  width: 100%;
  height: 260px;
  border: 1px solid #ccc;
  position: relative;
  padding: 26px;
  box-sizing: border-box;
  margin-top: 20px;
  .title {
    position: absolute;
    top: -20px;
    left: 20px;
    font-size: 26px;
    background-color: #fff;
  }
}
.selector {
  display: flex;
  width: 100%;
  padding: 16px;
  padding-left: 6px;
  .title {
    width: 108px;
  }
}
.Listadmiration {
  display: flex;
  flex-wrap: wrap;
  .name {
    display: flex;
    margin: 10px 5%;
    span {
      display: block;
      width: 90px;
    }
  }
}
.ElBtnClass {
  button {
    border: none;
    padding: 0;
    background-color: transparent;
  }
  button:hover {
    background-color: transparent;
  }
}
:deep(.el-card) {
  height: 100%;
}
.avue-crud {
  height: 100%;
  display: flex;
  flex-direction: column;
}
:deep(.el-card__body) {
  height: 100%;
}
.lptime {
  margin-top: 30px;
  padding-left: 50px;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  :deep(.el-input__wrapper) {
    height: 30px;
  }
  .name {
    margin-bottom: 10px;
  }
}
.recordCl {
  height: 200px;
  overflow-y: scroll;
}
.el_Completion {
  padding: 10px 0;
  .title {
    font-size: 14px;
  }
}
.el-ckbtn {
  margin-top: 10px;
}
.payanindemnity {
  display: flex;
  align-items: center;
  margin-top: 20px;
  .title {
    width: 76px;
    height: 100%;
    display: flex;
    display: block;
    align-items: center;
  }
  .sk_input {
    margin: 0 5px;
    width: 300px;
  }
  .el-button {
    background-color: #ff0000;
    border: none;
  }
}
.el_clzr {
  margin-top: 24px;
  padding: 0 18px;
  padding-left: 8px;

  :deep(.el-select) {
    width: 100%;
  }
  :deep(.el-input) {
    height: 38px;
  }
}
.el-fy{
  flex: 1;
    display: flex;
    align-items: flex-end;
    margin-bottom: 10px;
}
</style>
