logpm_page/src/views/aftersales/aftersalesWorkOrderInfo.vue

<template>
  <div class="content-max" v-loading="pageState" element-loading-text="Loading...">
    <el-card class="box-card el_last">
      <div>
        <el-tabs type="border-card" class="topClass">
          <el-tab-pane label="订单信息"></el-tab-pane>
          <el-tab-pane label="零担信息"></el-tab-pane>
        </el-tabs>

        <el-form
          :model="Indexform"
          label-width="100px"
          class="IndexFrom"
          ref="IndexForm"
          :rules="rules"
          disabled
        >
          <el-form-item label="异常类型" class="el_inputTop">
            <el-select v-model="Indexform.workOrderType" clearable placeholder="选择工单异常类型">
              <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="发现节点" class="el_inputTop">
            <el-select v-model="Indexform.discoveryNode" clearable placeholder="选择发现节点">
              <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="异常工单号" class="el_inputTop el_Workordernumber">
            <el-input
              v-model="Indexform.workOrderNumber"
              disabled
              :placeholder="
                Indexform.workOrderNumber ? Indexform.workOrderNumber : '暂未生成工单号'
              "
              clearable
            />
          </el-form-item>

          <el-tabs type="border-card" class="PackageInformation">
            <el-tab-pane label="包件信息">
              <template #label>
                <span class="custom-tabs-label">
                  <el-icon>
                    <Box />
                  </el-icon>
                  <span>包件信息</span>
                </span>
              </template>
              <div class="ResponsibilityBoxS">
                <div class="el_btbox" v-for="(item, index) in PackageInfo" :key="index">
                  <div class="leftbox">
                    <div class="maxBox" v-if="identifying != '2'">
                      <el-form-item label="包条码">
                        <el-tooltip
                          :content="item.packageCode ? item.packageCode : '包条码'"
                          placement="top"
                        >
                          <el-input
                            v-model="item.packageCode"
                            placeholder="请输入包条码"
                            clearable
                            :rows="2"
                            @change="ChangePackageInfo(item.packageCode, index)"
                          />
                        </el-tooltip>
                      </el-form-item>
                    </div>

                    <div class="maxBox">
                      <el-form-item label="运单号">
                        <el-tooltip
                          :content="item.waybillNumber ? item.waybillNumber : '运单号'"
                          placement="top"
                        >
                          <el-input
                            v-model="item.waybillNumber"
                            placeholder="请输入运单号"
                            @change="ChangePackageInfo(item.packageCode, index)"
                          />
                        </el-tooltip>
                      </el-form-item>
                    </div>

                    <div class="maxBox">
                      <el-form-item label="订单自编号">
                        <el-tooltip
                          :content="item.orderCode ? item.orderCode : '订单自编号'"
                          placement="top"
                        >
                          <el-input
                            v-model="item.orderCode"
                            :disabled="identifying != '2'"
                            :placeholder="
                              identifying != '2' ? '订单自编号(自动带出)' : '请输入订单自编号'
                            "
                          />
                        </el-tooltip>
                      </el-form-item>
                    </div>

                    <div class="maxBox brand">
                      <el-form-item label="品牌">
                        <el-tooltip
                          :content="item.brandName ? item.brandName : '品牌'"
                          placement="top"
                        >
                          <el-input
                            v-model="item.brandName"
                            :disabled="identifying != '2'"
                            :placeholder="identifying != '2' ? '品牌(自动带出)' : '请输入品牌'"
                          />
                        </el-tooltip>
                      </el-form-item>
                    </div>

                    <div class="maxBox" v-if="identifying != '1'">
                      <el-form-item> </el-form-item>
                    </div>
                  </div>
                </div>
                <div class="NumTotal">
                  <span>总件数:{{ NumberPackages }}</span>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>

          <!-- 必填(提货环节可以不填写运单号) -->
          <!-- 必填 -->

          <el-form-item
            label="车次号"
            v-if="
              groundlineType == 3 ||
              groundlineType == 5 ||
              groundlineType == 7 ||
              groundlineType == 6
            "
          >
            <el-input
              v-model="Indexform.trainNumber"
              placeholder="请输入车次号(干线卸车环节)"
              clearable
            />
          </el-form-item>

          <el-form-item
            label="配送时间"
            v-if="groundlineType == 5 || groundlineType == 7 || groundlineType == 6"
          >
            <el-date-picker
              v-model="Indexform.deliveryTime"
              type="datetime"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              placeholder="请选择配送时间"
            />
          </el-form-item>

          <!-- 必填 -->

          <el-form-item
            label="配送司机"
            prop="deliveryDriver"
            v-if="groundlineType == 5 || groundlineType == 7 || groundlineType == 6"
          >
            <el-select
              v-model="Indexform.deliveryDriver"
              filterable
              default-first-option
              :reserve-keyword="false"
              placeholder="请输入配送司机"
            >
              <el-option
                v-for="item in DeliveryDriver"
                :key="item.value"
                :label="item.driverName + '-' + item.trainNumber"
                :value="item.id"
              />
            </el-select>
          </el-form-item>

          <el-form-item label="车辆路线" v-if="groundlineType == 3">
            <el-input v-model="Indexform.vehicleRoute" placeholder="请输入车辆路线" clearable />
          </el-form-item>

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

          <el-form-item
            label="发现时间"
            v-if="
              groundlineType == 4 ||
              groundlineType == 5 ||
              groundlineType == 6 ||
              groundlineType == 7
            "
          >
            <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="请选择发现时间"
            />
          </el-form-item>

          <el-form-item label="一级品">
            <el-input v-model="Indexform.first" placeholder="请输入一级品类" />
          </el-form-item>

          <el-form-item label="二级品">
            <el-input v-model="Indexform.secondary" placeholder="请输入二级品类" />
          </el-form-item>

          <el-form-item label="入库时间" v-if="groundlineType == 4">
            <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="请选择入库"
            />
          </el-form-item>
          <!-- 必填 -->
          <el-form-item label="运单商场">
            <el-input v-model="Indexform.waybillMall" placeholder="请输入运单商场" />
          </el-form-item>

          <el-form-item label="合作模式">
            <el-input
              v-model="Indexform.typeServiceName"
              disabled
              :placeholder="
                Indexform.typeServiceName ? Indexform.typeServiceName : '暂未查询到合作模式'
              "
              clearable
            />
          </el-form-item>

          <!-- <el-form-item label="钉钉流程号">
          <el-input v-model="Indexform.processNumber" placeholder="请输入钉钉流程号" />
        </el-form-item> -->

          <!-- 必填 -->
          <!-- <el-form-item label="异常问题描述">
          <el-input v-model="Indexform.problemDescription" placeholder="请输入异常问题" clearable />
        </el-form-item> -->

          <el-form-item label="处理方">
            <el-select
              v-model="Indexform.processor"
              clearable
              filterable
              multiple
              placeholder="请选择处理方"
              @change="Processingrelease"
            >
              <el-option
                v-for="item in warehouseData"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item v-if="isShowFormItem1"> </el-form-item>
          <el-form-item v-if="isShowFormItem2"> </el-form-item>

          <el-tabs type="border-card" class="el_nint">
            <el-tab-pane>
              <template #label>
                <span class="custom-tabs-label">
                  <el-icon>
                    <List />
                  </el-icon>
                  <span>内部责任划分</span>
                </span>
              </template>
              <div class="ResponsibilityBox">
                <div class="el_btbox" v-for="(item, index) in FangAddList" :key="index">
                  <div class="leftbox">
                    <div class="maxBox">
                      <!-- 提货环节  -->
                      <el-form-item label="责任方">
                        <el-select
                          v-model="item.businessName"
                          clearable
                          placeholder="责任方"
                          v-if="groundlineType == 1"
                        >
                          <el-option
                            v-for="item in responsible"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>

                        <el-select
                          v-else
                          v-model="item.businessName"
                          filterable
                          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="maxBox">
                      <el-form-item label="责任人">
                        <el-select
                          v-if="groundlineType != 1"
                          v-model="item.personResponsibleName"
                          clearable
                          filterable
                          placeholder="请选责任人"
                        >
                          <el-option
                            v-for="item in item.personResponsibleList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          />
                        </el-select>

                        <el-tooltip :content="item.personResponsibleName" placement="top" v-else>
                          <el-input v-model="item.personResponsibleName" placeholder="责任人" />
                        </el-tooltip>
                      </el-form-item>
                    </div>
                    <div class="maxBox el_zb">
                      <el-form-item label="占比" class="title">
                        <el-tooltip :content="item.responsibilityRatio" placement="top">
                          <el-input
                            :controls="false"
                            v-model="item.responsibilityRatio"
                            placeholder="0"
                            :min="0"
                            :max="item.ProportionMax"
                            v-percentage
                          />
                        </el-tooltip>
                      </el-form-item>
                    </div>
                    <div class="maxBox">
                      <el-form-item label="三方责任人">
                        <el-tooltip :content="item.tripartite" placement="top">
                          <el-input v-model="item.tripartite" placeholder="三方责任人" />
                        </el-tooltip>
                      </el-form-item>
                    </div>

                    <div class="maxBox brand">
                      <el-form-item label="说明">
                        <el-tooltip :content="item.description" placement="top">
                          <el-input
                            v-model="item.description"
                            placeholder="请输入说明 "
                            :rows="2"
                          />
                        </el-tooltip>
                      </el-form-item>
                    </div>
                  </div>
                </div>
                <div class="Proportion">
                  <span class="title">公司占比:{{ companyProportion }}%</span>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-form>
        <el-tabs type="border-card" class="el_Processingresults">
          <el-tab-pane>
            <template #label>
              <span class="custom-tabs-label">
                <el-icon>
                  <EditPen />
                </el-icon>
                <span>处理结果</span>
              </span>
            </template>
            <div class="selector">
              <el-select
                v-model="Indexform.result"
                multiple
                filterable
                default-first-option
                :reserve-keyword="false"
                placeholder="暂无处理结果"
                disabled
              >
                <el-option
                  v-for="item in ProcessingResults"
                  :key="item.dictKey"
                  :label="item.dictValue"
                  :value="item.dictKey"
                />
              </el-select>
            </div>

            <div class="ProcessingResults" v-if="ProcessingList.length">
              <div class="title">处理结果-理赔金额</div>
              <div class="Listadmiration">
                <div class="name" v-for="(item, index) in ProcessingList" :key="index">
                  <div class="payment_right">
                    <div class="el_titleName">
                      <span>{{ item.name }}</span>
                      <el-input disabled class="money" v-model="item.input" />
                    </div>
                    <div class="el_titleName">
                      <span>支付方式</span>
                      <div class="Paymentname">
                        {{ item.payment ? item.text : '暂未选择支付方式' }}
                      </div>
                    </div>

                    <div class="el_titleName">
                      <span>支付单位</span>
                      <div class="el_PaymentUnit">
                        <el-input disabled v-model="item.paymentUnit" placeholder="支付单位" />
                      </div>
                    </div>

                    <div class="el_titleName">
                      <span>支付时间</span>
                      <el-date-picker
                        v-model="item.compensationTime"
                        type="datetime"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        placeholder="理赔支付时间"
                        disabled
                      />
                    </div>
                  </div>
                </div>
              </div>

              <div class="el_tool">
                <span>总金额:{{ TotalClaimAmount }}元</span>
              </div>
            </div>

            <!-- 处理结果说明  -->
            <el-form-item label="处理结果说明" class="el_resj" v-if="ProcessingList.length">
              <el-input
                v-model="Indexform.resultDescription"
                placeholder="请输入处理结果说明"
                clearable
                :autosize="{ minRows: 3, maxRows: 4 }"
                type="textarea"
                disabled
              />
            </el-form-item>
          </el-tab-pane>
        </el-tabs>

        <!-- 完结信息 -->
        <el-tabs
          type="border-card"
          class="demo-tabs el-endtabs"
          v-if="UserPermissions != '仓库客服'"
        >
          <el-tab-pane>
            <template #label>
              <span class="custom-tabs-label">
                <el-icon>
                  <calendar />
                </el-icon>
                <span>完结信息</span>
              </span>
            </template>

            <div class="payanindemnity" v-for="(item, index) in CompensationParty" :key="index">
              <div class="el_pklab">
                <span class="title" :style="{ color: item.state != 0 ? '#000' : '#F56C6C' }"
                  >{{ item.state == 0 ? '赔款方' : '受款方' }}{{ item.cld }}</span
                >
              </div>

              <div class="el_pkLi">
                <div class="sk_input">
                  <el-tooltip :content="item.name" placement="top">
                    <el-input
                      v-model="item.name"
                      :placeholder="item.state == 0 ? '暂无赔款方' : '暂无受款方'"
                      disabled
                    />
                  </el-tooltip>
                </div>
                <div class="sk_input">
                  <span>原因</span>
                  <el-tooltip :content="item.reason" placement="top">
                    <el-input v-model="item.reason" placeholder="暂无原因" disabled />
                  </el-tooltip>
                </div>
                <div class="sk_input">
                  <span>金额</span>
                  <el-tooltip :content="item.num ? item.num : '0'" placement="top">
                    <el-input
                      @input="amountMoney"
                      :min="0"
                      v-model="item.num"
                      placeholder="0"
                      disabled
                    />
                  </el-tooltip>
                </div>
                <!-- 赔款方是那个仓库的 -->
                <div class="sk_input" v-if="item.state == 0">
                  <span>仓库</span>
                  <el-select v-model="item.warehouseId" disabled filterable placeholder="暂无仓库">
                    <el-option
                      v-for="item in warehouseData"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </div>

                <div class="sk_input" v-if="item.state == 1"></div>
                <!-- 责任人  -->
                <div class="sk_input" v-if="item.state == 0">
                  <span>责任人</span>
                  <el-tooltip
                    :content="
                      item.compensationPersonnel ? item.compensationPersonnel : '暂无责任人'
                    "
                    placement="top"
                  >
                    <el-input
                      v-model="item.compensationPersonnel"
                      placeholder="暂无责任人"
                      clearable
                      :rows="2"
                      disabled
                    />
                  </el-tooltip>
                </div>

                <div class="sk_input" v-if="item.state == 1"></div>
              </div>
            </div>
            <div class="paySum">
              <span>
                <el-icon> <Coin /> </el-icon>赔款金额总和:<b>{{ TotalamountCompensation }}</b></span
              >
              <span>
                <el-icon> <Coin /> </el-icon>受款金额总和:<b>{{ TotalamountReceived }}</b></span
              >
            </div>
          </el-tab-pane>
        </el-tabs>

        <!-- 仲裁原因 -->
        <!-- v-if="routerState == 'end'" -->
        <div class="arbitrate" v-if="UserPermissions != '仓库客服'">
          <el-tabs type="border-card" class="demo-tabs">
            <el-tab-pane>
              <template #label>
                <span class="custom-tabs-label">
                  <el-icon>
                    <Star />
                  </el-icon>
                  <span>仲裁原因</span>
                </span>
              </template>

              <el-input
                v-model="Indexform.arbitrate"
                type="textarea"
                :autosize="{ minRows: 5, maxRows: 4 }"
                disabled
              />
            </el-tab-pane>
          </el-tabs>
        </div>

        <!-- 照片回显 -->
        <el-tabs type="border-card" class="demo-tabs el-photo">
          <el-tab-pane>
            <template #label>
              <span class="custom-tabs-label">
                <el-icon>
                  <Picture />
                </el-icon>
                <span>{{
                  SelectType == 1 ? '运损照片' : SelectType == 3 ? '窜货照片' : '照片'
                }}</span>
              </span>
            </template>
            <!-- 照片 -->
            <div class="Transport_damage_photos">
              <el-upload
                disabled
                v-model:file-list="Indexform.packList"
                list-type="picture-card"
                :on-preview="pictureList"
                :on-remove="ImgListRemove"
                :action="doubledCount"
                :on-success="ImgSuccess"
                :before-upload="beforeAvatarUpload"
                :headers="headers"
                multiple
                drag
                class="el-picture-card"
              >
                <el-icon>
                  <Plus />
                </el-icon>
              </el-upload>

              <el-dialog v-model="dialogImgList" width="30%">
                <el-image
                  :src="amplifyurl"
                  :zoom-rate="1.2"
                  :max-scale="7"
                  :min-scale="0.2"
                  :preview-src-list="amplifysrcList"
                  :initial-index="4"
                  fit="cover"
                />
              </el-dialog>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="dialog-footer">
        <el-button type="primary" v-if="PermissionButton.reply" @click="addireply">回复</el-button>
        <el-button type="primary" v-if="PermissionButton.Processing_results" @click="addingRecord"
          >处理结果
        </el-button>
        <el-button type="primary" v-if="PermissionButton.work_order_completion" @click="EndJump"
          >完结</el-button
        >
        <el-button type="primary" v-if="PermissionButton.repulse" @click="BatchReturn"
          >打回</el-button
        >
        <el-button
          type="primary"
          v-if="PermissionButton.apply_arbitration"
          @click="CustomerServiceCompleted"
          >客服仲裁完结</el-button
        >
        <el-button
          type="primary"
          v-if="PermissionButton.information_editing"
          @click="EditInformation"
          >信息编辑</el-button
        >
        <el-button
          type="primary"
          v-if="PermissionButton.Appeal_established"
          @click="AppealEstablished"
          >申诉成立</el-button
        >
        <el-button type="primary" v-if="PermissionButton.Appeal_rejection" @click="AppealRejection"
          >申诉驳回</el-button
        >
        <el-button
          type="primary"
          v-if="PermissionButton.Processing_confirmation"
          @click="ResultConfirmation"
          >确定</el-button
        >
      </div>
    </el-card>

    <el-affix :offset="msgTop">
      <div class="right">
        <el-tabs type="border-card">
          <div class="content">
            <el-tab-pane
              label="调查记录"
              v-loading="Msgloading"
              element-loading-text="正在获取记录..."
            >
              <div class="el_Processingparty">
                <div></div>
                <div class="el_Refresh" @click="Chatrefresh">
                  <el-button type="primary">刷新</el-button>
                </div>
              </div>
              <div class="ovhe" :style="{ height: msgHight + 'px' }" ref="scrollContainer">
                <el-timeline>
                  <el-timeline-item
                    placement="top"
                    v-for="(item, index) in MessageContent"
                    :key="index"
                  >
                    <el-card
                      :class="{
                        CardidentifyingC1: item.difference == '1',
                        CardidentifyingC2: item.difference == '2',
                        CardidentifyingC3: item.difference == '3',
                        'mx-1': true,
                      }"
                    >
                      <div class="header">
                        <div class="e_ico">
                          <el-icon> <User /> </el-icon>:
                          <h4>{{ item.username }}【{{ item.name }}】</h4>
                        </div>

                        <el-tag
                          :class="{
                            identifyingC1: item.difference == '1',
                            identifyingC2: item.difference == '2',
                            identifyingC3: item.difference == '3',
                            'mx-1': true,
                          }"
                          effect="dark"
                          >{{
                            item.difference == '1'
                              ? ' 调查记录'
                              : item.difference == '2'
                              ? '指定记录'
                              : item.difference == '3'
                              ? '操作记录'
                              : ''
                          }}
                        </el-tag>
                      </div>

                      <div class="e_ico">
                        <el-icon> <ChatRound /> </el-icon>:<span> {{ item.content }}</span>
                      </div>

                      <div class="img" v-if="item.img">
                        <el-image
                          :src="item.img"
                          :zoom-rate="1.2"
                          :max-scale="7"
                          :min-scale="0.2"
                          :preview-src-list="item.imgList"
                          :initial-index="4"
                          fit="cover"
                        />
                      </div>
                      <div class="mp4" @click="AddVideoPreview(index)" v-if="item.mp4">
                        <span
                          >视频: <el-icon> <VideoPlay /> </el-icon>点击预览
                        </span>
                      </div>

                      <div class="file" v-if="item.file" @click="FileDownload(index)">
                        <a :href="item.file">
                          <span
                            >文件:
                            <el-icon>
                              <FolderOpened />
                            </el-icon>
                            点击下载
                          </span>
                        </a>
                      </div>

                      <div class="identifying">
                        <div class="e_ico">
                          <el-icon> <Timer /> </el-icon>:
                          <p>{{ item.time }}</p>
                        </div>
                        <div
                          class="tag"
                          v-if="
                            (msgState == 1 || msgState == 2 || msgState == 3) && item.identifying
                          "
                        >
                          <el-tag class="mx-1" effect="dark"
                            >{{
                              msgState == 1
                                ? ' 待回复'
                                : msgState == 2
                                ? '已回复'
                                : msgState == 3
                                ? '已超时'
                                : ''
                            }}
                          </el-tag>
                        </div>
                      </div>
                    </el-card>
                  </el-timeline-item>
                </el-timeline>
              </div>
              <!-- 输入框  -->
            </el-tab-pane>
          </div>
        </el-tabs>
      </div>
    </el-affix>

    <!-- 打回弹窗 -->
    <el-dialog v-model="dialogReturn" title="工单打回" width="40%" draggable class="plAllret">
      <el-form
        v-loading="repulse"
        element-loading-text="正在打回中..."
        label-position="top"
        label-width="100px"
        :model="BatchFrom"
        class="el_form_BatchFrom"
      >
        <el-form-item label="打回原因" class="el_BatchFrom">
          <el-input v-model="BatchFrom.txt" type="textarea" :rows="4" />
        </el-form-item>

        <el-form-item label="流转营业部">
          <el-select
            v-model="BatchFrom.businessDepartment"
            multiple
            filterable
            default-first-option
            :reserve-keyword="false"
            placeholder="请选择活动区域"
          >
            <el-option
              v-for="item in warehouseData"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogReturn = false">取消</el-button>
          <el-button type="primary" @click="ConfirmReturn" :disabled="repulse"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter, useRoute } from 'vue-router';
import { useStore } from 'vuex';
const $useStore = useStore();
import { getDictionaryBiz } from '@/api/system/dict'; //字典
import { getDeptWarehouse } from '@/api/basicdata/basicdataWarehouse'; //处理方
import {
  $_getTrackRecord,
  $_getSurveyRecord,
  $_getInfo,
  $_batchReturn,
  $_Cancelappeal,
  $_updateWorkOrderStatus,
  $_updateManagerConfirmed,
} from '@/api/aftersales/aftersalesWorkOrder';
import { ref, reactive, computed, onMounted } from 'vue';
import { getToken } from '@/utils/auth';
const $router = useRouter();
const $route = useRoute();
const Indexform = ref({
  packList: [],
  decreaseImageEntityList: [], //处理好的图片数据
  discoveryNode: '1',
}); //首页新增表单
const pageState = ref(false); //页面加载状态
const ProcessingResults = ref([]); //处理结果列表选项
const IndexException = ref([]); //异常类型下拉选择
const ZFname = ref(''); //支付名字预留状态
const IndexForm = ref(null); //表格ref实力
const DiscoveringNodes = ref([]); //发现节点下拉选择
const warehouseData = ref([]); //处理方
const SelectType = ref(null); //类型
const HistoricalPackageinput = ref(''); //历史包件选择
const dialogImageUrl = ref(null); //图片
const dialogVisible = ref(null); //图片
const groundlineSet = ref(true); //干线条件都满足
const TotalClaimAmount = ref(0); //总金额
const groundlineType = ref(null); //干线状态
const Inputbox = ref(true); //调查经过输入框状态
const ShortageState = ref(false); //少货件数弹窗状态
const fleeingState = ref(false); //窜货件数弹窗
const ShortageList = ref([]); //少货件数
const fleeingList = ref([]); //窜货件数
const valueStrictly = ref();
const ProcessingreleaseState = ref(true); //是否可以填写处理结果
const routerID = ref(null); //路由参数ID
const routerState = ref(''); //路由状态
const personResponsibleList = ref([]); //责任人列表
const ZFdialog = ref(false); //支付方式弹出
const companyProportion = ref(100); //公司占比
const identifying = ref(1); //订单，零担状态
const dialogHistoricalPackage = ref(false); //历史包件弹窗
const HistoricalPackageList = ref([]); //历史包件数组
const HistorIndex = ref(0); //历史包件索引
const NumberPackages = ref(0); //包件个数
const dialogImgList = ref(false); //图片预览弹窗
const amplifyurl = ref(''); //当前点击的图片
const amplifysrcList = ref([]); //图片循环列表
const ProcessingList = ref([]); //处理结果已经选择的列表
const Paymentmethod = ref([]); //支付方式
const Mydata = ref(); //当前登录人信息
const UserPermissions = ref(); //当前登录人角色身份
// ======
const MessageContent = ref([]); //调查记录
const scrollContainer = ref(null); //客服实例
const msgHight = ref(100); //聊天框消息高度
const msgTop = ref(0); //调查记录距离页面吸顶记录
const msgState = ref(0);
const Msgloading = ref(false);
const TotalamountCompensation = ref(0); //赔款总金额
const TotalamountReceived = ref(0); //受款总金额
const BatchFrom = ref({}); //打回内容
const dialogReturn = ref(false); //打回弹窗
const appeal = ref(false); //工单申诉状态
const AppealReview = ref(false); //申诉状态只能查看
const warehouseIdState = ref(false); //当前订单仓库状态
const CompensationParty = ref([
  {
    name: '',
    state: 0,
    num: null,
    reason: '',
    cld: 1,
    warehouseId: null,
    compensationPersonnel: '',
  }, //赔款方
  // explains: ''
  {
    name: '',
    state: 1,
    num: null,
    reason: '',
    cld: 1,
    warehouseId: null,
    compensationPersonnel: '',
  }, //受款方
  // explains: ''
]); //收/赔

// =======

const PackageInfo = ref([
  //包件信息
  { packageCode: '', orderCode: '', waybillNumber: '', brandName: '', state: false },
]);
// 责任方列表
const FangAddList = ref([
  {
    businessName: '',
    personResponsibleName: '',
    responsibilityRatio: '',
    description: '',
    tripartite: '',
    ProportionMax: 100,
  },
]);
// 提货责任方
const responsible = ref([
  {
    value: 1,
    label: '工厂',
  },
  {
    value: 2,
    label: '外包搬运',
  },
  {
    value: 3,
    label: '物流',
  },
]);

onMounted(() => {
  msgHight.value = window.innerHeight * 0.8;
  console.log(msgHight.value, '处理好的页面高度');
  msgTop.value = window.innerHeight * 0.1;
  console.log(msgTop.value, '处理好的页面高度');
  // 滚动到最后
  setTimeout(() => {
    const container = scrollContainer.value;
    if (container) {
      container.scrollTop = container.scrollHeight;
    }
  }, 0);
});

// 底部按钮权限
const PermissionButton = computed(() => {
  // if(appeal.value)return false
  // else if ( $route.query.workOrderStatus != '21')return false
  // return true
  return {
    reply:
      !appeal.value &&
      $route.query.workOrderStatus != '80' &&
      $route.query.workOrderStatus != '30' &&
      $route.query.workOrderStatus != '20' &&
      $route.query.workOrderStatus != '40', //回复
    Processing_results:
      (!appeal.value &&
        (($route.query.RouteIndexs == '0' && $route.query.workOrderStatus == '10') ||
          ($route.query.RouteIndexs == '3' && $route.query.workOrderStatus == '10') ||
          ($route.query.RouteIndexs == '3' && $route.query.workOrderStatus == '20')||   ($route.query.RouteIndexs == '0' && $route.query.workOrderStatus == '20') ||  ($route.query.RouteIndexs == '1' && $route.query.workOrderStatus == '20') )) 
    , //处理结果10 20 21
    work_order_completion:
      !appeal.value &&
      (($route.query.RouteIndexs == '0' &&
        $route.query.workOrderStatus != '80' &&
        UserPermissions.value != '仓库客服' &&
        $route.query.workOrderStatus != '20') ||
        ($route.query.RouteIndexs == '3' &&
          $route.query.workOrderStatus != '80' &&
          UserPermissions.value != '仓库客服' &&
          $route.query.workOrderStatus != '20')), //完结
    repulse:
      !appeal.value &&
      (($route.query.RouteIndexs == '0' && $route.query.workOrderStatus == '10') ||
        ($route.query.RouteIndexs == '3' && $route.query.workOrderStatus == '10')) &&
      UserPermissions.value != '仓库客服', //打回
    apply_arbitration:
      !appeal.value &&
      (($route.query.RouteIndexs == '0' && $route.query.workOrderStatus == '70') ||
        ($route.query.RouteIndexs == '3' && $route.query.workOrderStatus == '70')) &&
      UserPermissions.value != '仓库客服', //客服仲裁完结
    information_editing:
      !appeal.value &&
      (($route.query.RouteIndexs == '0' && $route.query.workOrderStatus == '10') ||
        ($route.query.RouteIndexs == '3' && $route.query.workOrderStatus == '10')) &&
      warehouseIdState.value, //信息编辑 只能待处理和当前仓库人
    Appeal_established: appeal.value && AppealReview.value, //申诉成立
    Appeal_rejection: appeal.value && AppealReview.value, //申诉驳回
    Processing_confirmation:
      (UserPermissions.value != '仓库客服' &&
        $route.query.RouteIndexs == '0' &&
        $route.query.workOrderStatus == '40') ||
      (UserPermissions.value != '仓库客服' &&
        $route.query.RouteIndexs == '1' &&
        $route.query.workOrderStatus == '40') ||
      $route.query.RouteIndexs == '2',
  };
});

// appeal.value && AppealReview.value,
// 聊天记录获取
const Chathistory = res => {
  Msgloading.value = true;
  let filetype = ''; //文件类型

  if (UserPermissions.value != '仓库客服') {
    console.log(UserPermissions.value, '当前不是仓库客服');
    $_getTrackRecord({
      id: $route.query.id,
    })
      .then(res => {
        MessageContent.value = []; //先清空内容，防止内容重复叠加
        res.data.data.surveyRecordEntities.forEach(item => {
          MessageContent.value.unshift({
            time: item.createTime, //时间
            content: item.processingResults, //消息内容
            name: item.addDepartment, //营业部名称
            username: item.addPeople, //用户名
            img: filetype == 'png' ? item.pictureUrl : '',
            file: filetype == 'docx' ? item.pictureUrl : '',
            mp4: filetype == 'mp4' ? item.pictureUrl : '',
            imgList: filetype == 'png' ? item.pictureUrl : '',
            difference: item.difference,
            identifying: false, //待回复标识
          });
        });
        setTimeout(() => {
          const container = scrollContainer.value;
          if (container) {
            container.scrollTop = container.scrollHeight;
          }
        }, 0);
        console.log(res, '聊天记录');
        Msgloading.value = false; //关闭加载效果
      })
      .catch(res => {
        Msgloading.value = false; //关闭加载效果
      });
  } else {
    $_getSurveyRecord({
      id: $route.query.id,
    })
      .then(res => {
        MessageContent.value = []; //先清空内容，防止内容重复叠加
        console.log(res, '聊天返回值');
        // 仓库客服不需要操作记录
        if (res.data.data.processorVOList) {
          if (res.data.data.processorVOList.length) {
            msgState.value = res.data.data.processorVOList[0].processingStatus; //获取聊天状态
          }
        }
        res.data.data.surveyRecordEntities.forEach(item => {
          if (item.pictureUrl) {
            filetype = Fileidentifier(item.pictureUrl);
          }
          MessageContent.value.push({
            time: item.createTime, //时间
            content: item.content, //消息内容
            name: item.addDepartment, //营业部名称
            username: item.addPeople, //用户名
            img: filetype == 'png' ? item.pictureUrl : '',
            file: filetype == 'docx' ? item.pictureUrl : '',
            mp4: filetype == 'mp4' ? item.pictureUrl : '',
            imgList: [filetype == 'png' ? item.pictureUrl : ''],
            difference: item.difference,
            identifying: true, //是否显示待回复按钮
          });
        });
        setTimeout(() => {
          const container = scrollContainer.value;
          if (container) {
            container.scrollTop = container.scrollHeight;
          }
        }, 0);

        console.log(res, '聊天记录');
        Msgloading.value = false; //关闭加载效果
      })
      .catch(res => {
        Msgloading.value = false; //关闭加载效果
      });
  }
};

const DeliveryDriver = ref([]);
// 图片列表
const fileList = ref([]);
// 字典公共函数
function updateDictionary(targetArray, dictionaryType) {
  getDictionaryBiz(dictionaryType).then(res => {
    console.log(res, '字典');
    res.data.data.forEach(item => {
      targetArray.push({
        value: item.dictKey,
        label: item.dictValue,
      });
    });
  });
}
// 图片上传必须携带TOKEN
const headers = computed(() => {
  return { 'Blade-Auth': 'Bearer ' + getToken() };
});
// 图片上传接口
const doubledCount = computed(() => {
  return '/api/blade-resource/oss/endpoint/put-file';
});
// 图片上传接口

// 图片上传成功回调函数
const ImgSuccess = (response, uploadFile) => {
  if (response.success === true) {
    console.log(response);
    console.log(Indexform.value['packList'], '图片列表');
    amplifysrcList.value.push(response.data.link);
  }
};

// 上传图片规则
const beforeAvatarUpload = rawFile => {
  console.log(rawFile);
  if (rawFile.type !== 'image/png' && rawFile.type !== 'image/jpeg') {
    ElMessage.error('图片格式只能为 png/jpg!');
    return false;
  } else if (rawFile.size / 1024 / 1024 > 10) {
    ElMessage.error('图片大小不能大于10MB!');
    return false;
  }
  return true;
};
// 点击图片列表回调
const pictureList = val => {
  console.log(val, '图片列表');
  dialogImgList.value = true;
  console.log(val, '图片列表');
  amplifyurl.value = val.url;
};

// 处理方和责任方获取数据
const handle = () => {
  getDeptWarehouse().then(res => {
    res.data.data.forEach(item => {
      warehouseData.value.push({
        value: item.id,
        label: item.name,
      });
    });
  });
};

const onLoad = () => {
  pageState.value = true; //开启页面加载
  Mydata.value = JSON.parse(localStorage.getItem('my_data')); //记录本地登录
  getDictionaryBiz('after_sales_visits').then(res => {
    const matchingItem = res.data.data.find(
      item => item.dictValue == JSON.parse(localStorage.getItem('TWMS-userInfo')).content.role_name
    );
    if (matchingItem) {
      UserPermissions.value = matchingItem.dictValue; //记录当前人身份
    } else {
      UserPermissions.value = '仓库客服';
    }
    console.log(UserPermissions.value, '当前角色权限');
    Chathistory(); //聊天的历史记录
    routerState.value = $route.query.routerState;
    updateDictionary(IndexException.value, 'pc_work_order'); //异常类型
    updateDictionary(DiscoveringNodes.value, 'pc_discovery_node'); //发现环节
    handle(); //处理方和责任方信息

    $_getInfo({ id: $route.query.id }).then(res => {
      if ($route.query.Routstate) {
        appeal.value = true;
        console.log(appeal.value, 'appeal.value');
      }
      // 只能查看申诉信息
      if ($route.query.AppealReview) {
        if ($route.query.AppealReview == 'false') {
          console.log($route.query.AppealReview, '申诉状态');
          AppealReview.value = false;
        } else {
          AppealReview.value = true;
          console.log(AppealReview.value, '当前申诉状态');
        }
      }

      console.log(res, '回显返回值参数');
      Indexform.value = res.data.data;

      if (res.data.data.warehouseId == Mydata.value.id) {
        // 判断订单是否是当前登陆人发起的，用于修改订单信息（必须是待处理）
        warehouseIdState.value = true;
      }
      Indexform.value['result'] = [];
      Indexform.value['processor'] = [];
      //图片处理回显
      Indexform.value.arbitrate = res.data.data.reasonArbitration; //仲裁原因
      Indexform.value.packList = res.data.data.decreaseImageVOList.map(res => {
        amplifysrcList.value.push(res.imagePath);
        return {
          name: res.imageName,
          url: res.imagePath,
        };
      });
      // 包件回显
      PackageInfo.value = res.data.data.abnormalPackageVOList;
      console.log(res.data.data.abnormalPackageVOList, '包件信息');
      NumberPackages.value = res.data.data.abnormalPackageVOList.length; //包件个数统计
      // 责任方回显

      FangAddList.value = res.data.data.processorVOList
        .filter(item => item && item.typesOf && item.typesOf == '1')
        .map(item => {
          return { businessName: item.businessId };
        });
      console.log(FangAddList.value, '责任方回显问题');

      // 公司占比回显计算
      let sum = 0;
      res.data.data.personResponsibleVOS.forEach(item => {
        sum = Number(item.responsibilityRatio) + sum;
      });

      groundlineType.value = res.data.data.discoveryNode; //发现节点回显

      FangAddList.value = res.data.data.personResponsibleVOS.map(res => {
        return {
          businessName: res.businessId, //责任人ID
          personResponsibleName: res.personResponsibleName, //责任人名称
          responsibilityRatio: res.responsibilityRatio + '%', //占比
          description: res.description, //说明
          tripartite: res.tripartite, //三方责任人
        };
      });
      console.log(FangAddList.value, '责任方回显问题');
      res.data.data.processorVOList.forEach(item => {
        if (item) {
          if (item.typesOf == 2) {
            // 处理方回显
            Indexform.value.processor.push(item.businessId);
          }
        }
      });
      companyProportion.value = 100 - sum;

      getDictionaryBiz('result_handling').then(res => {
        console.log(res, '发现环节');
        ProcessingResults.value = res.data.data;
      });
      // 处理结果回显
      if (res.data.data.processingResultsVO.processingMoneyEntityList) {
        ProcessingList.value = res.data.data.processingResultsVO.processingMoneyEntityList.map(
          item => {
            Indexform.value.result.push(item.resultType);
            return {
              input: item.money + '元',
              min: 0,
              max: 9999999999999999999999999999,
              state: item.resultType,
              payment: item.compensationMethod,
              name: item.resultTypeName,
              text: item.compensationMethodName,
              compensationTime: item.compensationTime, //支付时间
              paymentUnit: item.paymentUnit, //支付单位
            };
          }
        );
      }
      // 总金额回显
      TotalClaimAmount.value = res.data.data.processingResultsVO.money;
      // 理赔支付时间
      Indexform.value.compensationTime = res.data.data.processingResultsVO.compensationTime;
      // 处理结果说明回显
      Indexform.value.resultDescription = res.data.data.processingResultsVO.resultDescription;
      CompensationParty.value = [];
      if (res.data.data.completionRecipientEntityList.length) {
        res.data.data.completionRecipientEntityList.forEach((item, index) => {
          TotalamountReceived.value += Number(item.money);
          CompensationParty.value.push({
            state: 1, //状态
            num: item.money, //金额
            name: item.recipient, //受款方名字
            reason: item.reasonReceivingPayment, //受款方原因
            // explains: item.explains, //受款方说明
            cld: index + 1,
            id: item.id,
          });
        });
      }
      // 赔款方
      if (res.data.data.completionRecordEntities.length) {
        res.data.data.completionRecordEntities.forEach((item, index) => {
          TotalamountCompensation.value += Number(item.money);
          CompensationParty.value.push({
            state: 0, //状态
            num: item.money, //金额
            name: item.indemnitor, //受款方名字
            reason: item.reason, //受款方原因
            // explains: item.explains, //受款方说明
            cld: index + 1,
            id: item.id,
            accounting: item.accounting ? item.accounting : '',
            warehouseId: item.warehouseId, //仓库
            compensationPersonnel: item.compensationPersonnel, //责任人
          });
        });
      }
    });
    pageState.value = false; //开启页面加载
  });
  // 中擦原因回显

  console.log(Mydata.value, '记录本地登录');
  getDictionaryBiz('result_handling').then(res => {
    console.log(res, '发现环节');
    ProcessingResults.value = res.data.data;
  });
  // 支付方式字典
  getDictionaryBiz('payment_method').then(res => {
    //处理结果字典
    console.log(res);
    Paymentmethod.value = res.data.data;
  });
};
onLoad(); //初始化程序

// 是否显示处理结果
const Processingrelease = () => {
  if (Indexform.value.processor.length == 1 && Mydata.value.id == Indexform.value.processor[0]) {
    ProcessingreleaseState.value = true; //显示处理放
  } else {
    ProcessingreleaseState.value = false; //关闭处理方
  }
};

// 对调查经过输入框进行处理
const isShowFormItem1 = computed(() => {
  return !['1', '2', '5', '6', '7'].includes(groundlineType.value);
});
// 对调查经过输入框进行处理
const isShowFormItem2 = computed(() => {
  return !['2', '5', '6', '7', '8'].includes(groundlineType.value);
});
// 聊天刷新
const Chatrefresh = () => {
  Chathistory();
};

// 底部按钮事件
// 回复
const addireply = () => {
  $router.push({
    path: '/aftersales/aftersalesWorkOrderend',
    query: {
      id: $route.query.id,
      name: $route.query.workOrderNumber + '-回复',
      businessId: $route.query.workOrderNumber,
      RouterState: 'determine',
      index: '0',
      workOrderStatus: $route.query.workOrderStatus, //工单状态
    },
  });
};

// 处理结果
const addingRecord = () => {
  $router.push({
    path: '/aftersales/aftersalesWorkOrderend',
    query: {
      id: $route.query.id,
      name: $route.query.workOrderNumber + '-添加异常记录',
      businessId: $route.query.workOrderNumber,
      RouterState: 'record',
      index: '1',
    },
  });
};

// 完结
const EndJump = () => {
  $router.push({
    path: '/aftersales/aftersalesWorkOrderend',
    query: {
      id: $route.query.id,
      name: $route.query.workOrderNumber + '-完结填写',
      RouterState: 'end',
      index: '2',
      workOrderStatus: $route.query.workOrderStatus, //当前单子状态
    },
  });
};
// 打回
const BatchReturn = () => {
  BatchFrom.value.businessDepartment = [];
  BatchFrom.value.txt = null;
  dialogReturn.value = true;
};
// 客服仲裁完结
const CustomerServiceCompleted = () => {
  $router.push({
    path: '/aftersales/aftersalesWorkOrdermodify',
    query: {
      id: $route.query.id,
      name: $route.query.workOrderNumber + '-客服仲裁完结',
      businessId: $route.query.businessId,
      warehouseId: $route.query.warehouseId,
      workOrderNumber: $route.query.workOrderNumber,
      RouterState: 'Kfend',
      CompletedEditing: 'true', //可以编辑完结信息编辑
      index: '1',
    },
  });
};

// 信息编辑
const EditInformation = () => {
  $router.push({
    path: '/aftersales/aftersalesWorkOrdermodify',
    query: {
      id: $route.query.id,
      name: $route.query.workOrderNumber + '-编辑',
      businessId: $route.query.businessId,
      warehouseId: $route.query.warehouseId,
      workOrderNumber: $route.query.workOrderNumber,
      RouterState: 'Infoedit',
      ProcessType: $route.query.ProcessType, //类型 1 待处理 2 已处理
    },
  });
};
// 申诉成立
const AppealEstablished = () => {
  $router.push({
    path: '/aftersales/aftersalesWorkOrdermodify',
    query: {
      id: $route.query.id, //这里的id是workOrderId是有申诉列表带入的
      name: $route.query.workOrderNumber + '-申诉编辑',
      businessId: $route.query.businessId,
      warehouseId: $route.query.warehouseId,
      workOrderNumber: $route.query.workOrderNumber,
      RouterState: 'Kfend',
      Appealeditor: 'appeal', //申诉编辑
      appealID: $route.query.appealID, //申诉ID
      AppealEstablished: 'true', //申诉成立
    },
  });
};

// 申诉驳回
const AppealRejection = () => {
  let data = {
    id: $route.query.appealID, //取消申诉ID
    typesOf: '2', //申诉状态
    workOrderId: $route.query.id, //异常工单ID
  };
  $_Cancelappeal(data)
    .then(res => {
      console.log(res, '申诉驳回返回值');
      if (res.data.code == 200) {
        ElMessage({
          showClose: true,
          message: '申诉驳回成功',
          type: 'success',
        });
        $useStore.commit('DEL_TAG_CURRENT'); //关闭当前页面
        $router.push({
          path: '/aftersales/aftersalesWorkOrder',
        });
      }
    })
    .catch(res => {
      console.log('错误信息', res);
    })
    .finally(() => {
      Pageloading.value = false; //关闭加载效果
    });
};

// 工单打回确认按钮
const ConfirmReturn = () => {
  repulse.value = true; //开启加载并关闭按钮
  let data = {
    processorList: [],
  };
  // 过滤满足条件的对象
  let foundObjs = warehouseData.value.filter(obj =>
    BatchFrom.value.businessDepartment.includes(obj.value)
  );
  data['businessId'] = foundObjs.map(item => item.value).join(',');
  data['businessName'] = foundObjs.map(item => item.label).join(',');
  // 营业部处理
  foundObjs.forEach(item => {
    data['processorList'].push({ id: item.value, name: item.label });
  });
  data.reasonReturn = BatchFrom.value.txt; //打回原因
  data.workOrderIds = [$route.query.id]; //异常工单ID
  console.log(data, '处理好的值');
  $_batchReturn(data)
    .then(res => {
      repulse.value = false; //关闭加载并关闭按钮
      dialogReturn.value = false; //关闭打回弹窗
      if (res.data.code == 200) {
        ElMessage({
          message: res.data.msg,
          type: 'success',
        });
        $router.push('/aftersales/aftersalesWorkOrder'); //打回成功跳转到列表
      }
    })
    .catch(error => {
      repulse.value = false; //关闭加载并关闭按钮
      dialogReturn.value = false; //关闭打回弹窗
    });
};

// 待处理确定 和处理完毕确定

// 处理完毕里面确定（仓库客服用的）

const ResultConfirmation = () => {
  if (UserPermissions.value == '仓库客服') {
    //处理完毕菜单下面确定按钮用于确定处理结果（仓库客服用的）
    let data = {
      assignList: [],
    };
    let ID = {};
    ID = $route.query.id;
    data['assignList'].push(ID);

    if ($route.query.workOrderStatus != '30') {
      ElMessage({
        message: '状态错误,已经确认过',
        type: 'warning',
      });
      return;
    }
    // 仓库客服

    console.log(data, '处理好的数据');
    pageState.value = true; //开启页面加载
    $_updateWorkOrderStatus(data)
      .then(res => {
        console.log(res, '确定提交存储');
        if (res.data.code == 200) {
          ElMessage({
            message: res.data.msg,
            type: 'success',
          });
        }
        $useStore.commit('DEL_TAG_CURRENT'); //关闭当前页面
        $router.push({
          path: '/aftersales/aftersalesWorkOrder',
        });
      })
      .catch(res => {})
      .finally(() => {
        pageState.value = false; //关闭页面加载
      });
  } else {
    let data = {
      assignList: [],
    };
    let ID = {};
    ID = $route.query.id;
    data['assignList'].push(ID);
    if ($route.query.workOrderStatus != '40') {
      ElMessage({
        message: '状态错误,已经确认过',
        type: 'warning',
      });
      return;
    }
    pageState.value = true; //开启页面加载
    // 完结结果确定
    $_updateManagerConfirmed(data)
      .then(res => {
        if (res.data.code == 200) {
          ElMessage({
            message: res.data.msg,
            type: 'success',
          });
        }
        $useStore.commit('DEL_TAG_CURRENT'); //关闭当前页面
        $router.push({
          path: '/aftersales/aftersalesWorkOrder',
        });
        console.log(res, '处理完毕确定');
      })
      .catch(res => {
        console.log(res, '错误信息');
      })
      .finally(res => {
        pageState.value = false; //关闭页面加载
      });
    // 赔款方
    console.log(data, '处理好的值');
  }
};
</script>

<style scoped lang="scss">
.IndexFrom {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  border: 1px solid #ccc;

  .el-form-item {
    height: 46px;
    display: flex;
    align-items: center;
    margin: 0;
    margin-bottom: 18px;
    flex: 1 0 30%;
    margin-right: 16px;

    :deep(.el-form-item__label) {
      width: auto !important;
      justify-content: flex-start;
    }
  }

  :deep(.el-form-item__content) {
    height: 100%;
    width: 70% !important;

    .el-input {
      height: 100% !important;
      display: flex;
      align-items: center;
    }
  }

  .el-input__wrapper {
    height: 32px !important;
  }

  :deep(.el-input) {
    width: 100% !important;
  }

  :deep(.el-input__wrapper) {
    height: 30px !important;
  }

  :deep(.el-select) {
    width: 100%;
  }

  :deep(.el-form-item__label) {
    margin-left: 20px;
  }
}

.el_clzr {
  margin-top: 40px;

  :deep(.el-select) {
    width: 100%;
  }

  :deep(.el-input) {
    height: 38px;
  }

  :deep(.el-form-item__label) {
    margin-left: 20px;
    font-size: 14px;
    width: 100px !important;
    justify-content: flex-start;
  }

  .el-form-item {
    margin: 0;
    margin-bottom: 34px;
  }

  :deep(.el-input__wrapper) {
    height: 35px !important;
  }

  :deep(.el-form-item__content) {
    height: 100%;
    width: 90% !important;
    flex: none;

    .el-input {
      height: 100% !important;
      display: flex;
      align-items: center;
    }
  }
}

.Transport_damage_photos {
  display: flex;
  margin-top: 20px;
  flex-direction: column;

  .title {
    width: 100px;
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: bold;
    color: #5b5b5b;
  }
}

.dialog-footer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
  margin-top: 10px;
}

.investigate {
  :deep(.el-form-item__content) {
    width: 90% !important;
    box-sizing: border-box;
  }
}

.ShortageStatenum {
  display: flex;
  align-items: center;
  margin-bottom: 10px;

  .title {
    width: 80px;
  }

  .remove {
    width: 47px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ff0000;
  }
}

.moneyNum {
  display: flex;
  flex: 1;

  .el_btn {
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ccc;
    margin-left: 3px;
    border-radius: 4px;
    cursor: pointer;
  }
}

.ResponsibilityBox {
  width: 100%;
  display: flex;
  flex-direction: column;

  .leftbox {
    display: flex;
    justify-content: space-between;

    .el_zb {
      :deep(.el-input__inner) {
        text-align: center;
      }

      width: 250px;
      text-align: right;

      :deep(.el-form-item__label) {
        width: auto !important;
      }

      :deep(.el-input) {
        margin-left: 10px;
        text-align: right;
      }

      :deep(.el-form-item__content) {
        flex-wrap: nowrap;
      }
    }
  }

  .maxBox {
    display: flex;
    align-items: center;
    width: 30%;
    margin-right: 16px;
    font-size: 14px;

    .brand {
      margin-right: 0;
    }

    .title {
      width: 120px;
      font-size: 14px;
      color: #606266;
    }

    .el-select {
      width: 100%;
    }
  }

  .brand {
    margin-right: 0;
  }

  .el-btn {
    margin-left: 5%;
    border: none;
  }

  .el_btbox {
    display: flex;
    margin-top: 10px;
  }
}

.ResponsibilityBoxS {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;

  .leftbox {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }

  .maxBox {
    display: flex;
    align-items: center;
    width: 30%;
    margin-right: 20px;

    :deep(.el-form-item) {
      margin: 0;
      margin-right: 10px;

      font-size: 12px;

      .el-form-item__label {
        margin: 0;
        width: auto !important;
      }
    }

    .title {
      width: 140px;
      color: #606266;
      font-size: 14px;
    }

    .el-select {
      width: 100%;
    }

    :deep(.el-form-item) {
      margin-right: 0;
    }
  }

  .brand {
    margin-right: 0;
  }

  .el-btn {
    margin-left: 5%;
    border: none;
    display: flex;
  }

  .el_btbox {
    display: flex;
    align-items: center;
  }
}

:deep(.PackageInformation) {
  margin-bottom: 10px;
  width: 100%;
  border-left: none;
  border-right: none;

  .el-tabs__header {
  }

  .el-tabs__content {
    // padding-right: 0;
  }

  .is-active {
    font-weight: bold;
  }
}

.NumTotal {
  width: 30%;
  margin-top: 10px;
  display: flex;
  align-items: center;

  span {
    width: 120px;
    font-size: 14px;
    border: 1px solid #ccc;
    display: flex;
    width: auto;
    padding: 4px 12px;
  }
}

.Proportion {
  margin-top: 16px;

  .title {
    font-size: 14px;
    border: 1px solid #ccc;
    width: auto;
    padding: 4px 12px;
  }
}

:deep(.is-active) {
  border-bottom: 1px solid #e4e7ed !important;
}

:deep(.topClass) {
  border-bottom: none;

  .el-tabs__content {
    padding: 0;
  }

  .is-active {
    font-weight: bold;
  }
}

.foot_btn {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translate(0, -50%);
  width: 100%;
  height: 40px;
  background-color: #ffffff;
  border-top: 1px solid #fff;
  box-shadow: 3px -1px 1px #ccc;
  display: flex;
  align-items: center;
  padding-left: 10px;
}

:deep(.el-card__body) {
}

:deep(.el-upload-dragger) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.box-card {
  height: 100% !important;
  overflow-y: scroll;
}

:deep(.selector) {
  .el-select {
    width: 100%;
  }
}

.ProcessingResults {
  width: 100%;
  min-height: 260px;
  border: 1px solid #ccc;
  position: relative;
  padding: 26px;
  box-sizing: border-box;
  margin-top: 20px;
  color: #606266;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 16px;

  .title {
    position: absolute;
    top: -20px;
    left: 20px;
    font-size: 26px;
    background-color: #fff;
  }

  .Listadmiration {
    display: flex;
    flex-wrap: wrap;
    margin-top: 26px;
    justify-content: space-between;

    .name {
      display: flex;
      margin-bottom: 20px;
      height: 30px;
      width: 100%;
      justify-content: space-between;

      .payment_right {
        width: 100%;
        display: flex;

        :deep(.el-input) {
          height: 100% !important;
        }

        :deep(.money) {
          width: 100px;
        }
      }

      span {
        color: #000000;
        font-size: 16px;
        margin-right: 8px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 80px;
        margin-left: 10px;
      }

      .el_titleName {
        display: flex;
      }
    }
  }

  .lptime,
  .ZFlptime {
    display: flex;

    .name {
      width: 10%;
      color: #606266;
    }

    .el-input {
      width: auto;
    }

    :deep(.el-input--prefix) {
      width: 200px;
    }
  }

  .ZFlptime {
    margin: 10px 0;
  }
}

.Paymentname {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #bfbfbf;
  margin-left: 2px;
  border-radius: 4px;
  font-size: 14px;
  padding: 10px;
  cursor: pointer;
  width: 140px;
  margin: 0 10px;
  overflow: hidden;
}

.Paymentname:hover {
  border: 1px solid #172e60;
}

.el_Processingresults {
  margin-top: 12px;

  :deep(.is-active) {
    font-weight: bold;
  }
}

.el_PaymentUnit {
  margin: 0 4px;
}

:deep(.el-input-number) {
  width: 180px !important;
}

.Investigationprocess {
  height: auto !important;
  align-items: flex-start !important;
  flex: 1 0 44% !important;

  :deep(.el-form-item__content) {
    width: 100% !important;
  }
}

.el_tool {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: bold;

  span {
    font-size: 14px;
    border: 1px solid #ccc;
    padding: 4px 20px;
    color: #000000;
    font-weight: 600;
  }
}

.el_nint {
  width: 100%;
  border-right: none;
  border-left: none;
  border-bottom: none;

  :deep(.el-tabs__content) {
    padding-right: 0;
  }

  :deep(.is-active) {
    font-weight: bold;
  }
}

:deep(.el_inputTop) {
  margin-bottom: 0 !important;
}

.content-max {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: #fff;

  :deep(.el-card) {
    width: 70%;
  }

  .el-affix {
    flex: 1 1 0%;
    margin-left: 10px;
  }

  .el_last {
    display: flex;
    height: 100%;

    :deep(.el-card__body) {
      display: flex;
      flex-direction: column;
      flex: 1;
    }

    :deep(.dialog-footer) {
      flex: 1;
      display: flex;
      align-items: flex-end;
    }
  }
}

.right {
  width: 100%;

  :deep(.el-card__body) {
    padding: 10px !important;
  }

  :deep(.el-timeline) {
    padding: 0;
  }

  .ovhe {
    padding: 6px;

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .el-tag {
        width: 70px;
      }
    }
  }

  .content {
    position: relative;

    :deep(.el-card) {
      width: 100%;
    }
  }

  :deep(.el-card__body:last-child) {
    padding: 0px !important;
  }

  :deep(.el-timeline-item) {
    padding-bottom: 30px;
  }

  :deep(.el-card) {
    padding: 10px;
    box-sizing: border-box;
  }

  .ovhe::-webkit-scrollbar {
    width: 4px;
    height: 0px;
  }

  .ovhe::-webkit-scrollbar-thumb {
    background-color: #12b7f5;
    background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 93, 143, 1) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 93, 143, 1) 50%,
      rgba(255, 93, 143, 1) 75%,
      transparent 75%,
      transparent
    );
  }

  .ovhe::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #f6f6f6;
  }

  .ovhe::-webkit-scrollbar-track {
    background-color: #fff;
    /* 设置滚动条槽为透明 */
  }

  :deep(.el-tabs__content) {
    padding: 0;
  }

  :deep(.el-timeline-item__node) {
    background-color: #8fa3ad;
  }

  :deep(.el-icon) {
    font-size: 16px;
  }
}

.el_Processingparty {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  margin-bottom: 8px;
  box-shadow: -1px 2px 2px 0px #f5f5f5;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 4px;
  height: 40px;

  span {
    width: 40px;
  }

  :deep(.el-select) {
    width: 100%;
  }

  span {
    font-size: 20px;
  }

  :deep(.el_Refresh) {
    i {
      font-size: 30px;
    }
  }
}

.ovhe {
  position: relative;
  overflow-y: scroll;
  scroll-behavior: smooth;

  .e_ico {
    display: flex;
    align-items: center;
  }

  .img {
    width: 50px;
    height: 50px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .mp4 {
    margin-top: 2px;

    span {
      display: flex;
      align-items: center;
      vertical-align: bottom;
      cursor: pointer;
    }
  }

  .tag {
    display: flex;
    justify-content: flex-end;
  }

  .file {
    span {
      display: flex;
      align-items: center;
      vertical-align: bottom;
      cursor: pointer;
    }
  }

  :deep(.el-timeline-item__timestamp) {
    display: none !important;
  }
}

.identifying {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .el-tag {
    width: 70px;
  }
}

.identifyingC1 {
  background-color: #409eff;
  border-radius: 4px;

  border: none;
}

.identifyingC2 {
  background-color: #10d070;
  border: none;
}

.identifyingC3 {
  background-color: #d3832a;
  border: none;
}

.CardidentifyingC1,
.CardidentifyingC2,
.CardidentifyingC3 {
  box-shadow: -1px -1px 4px 0px #e3e3e3;
  border-top-left-radius: 20px;
  border-bottom: 1px solid #d5d5d563 !important;
  border-right: 1px solid #d5d5d563 !important;
}

.el-endtabs {
  margin-top: 10px;
}

:deep(.custom-tabs-label) {
  font-weight: bold;
  display: flex;
  align-items: center;

  .el-icon {
    margin-right: 4px;
  }
}

.payanindemnity {
  display: flex;
  align-items: center;
  margin-top: 20px;
  justify-content: space-between;

  .title {
    width: max-content;
    height: 100%;
    display: block;
    font-size: 14px;
    font-weight: 500;
  }

  .sk_input {
    margin: 0 5px;
    margin-left: 4px;
    width: 20%;
    display: flex;
    align-items: center;

    span {
      width: 100px;
      margin-right: 4px;
      display: flex;
      justify-content: flex-end;
      font-size: 14px;
      font-weight: 400;
    }
  }

  .el-button {
    border: none;
  }

  .el_pkLi {
    display: flex;
    width: 100%;
  }
}

.paySum {
  margin-top: 36px;
  font-size: 14px;
  display: flex;

  span {
    margin-right: 30px;
    display: flex;
    align-items: center;
  }
}

:deep(.el-photo) {
  margin-top: 10px;

  .el-upload--picture-card {
    display: none;
  }

  .Transport_damage_photos {
    margin-top: 0;

    .el-picture-card {
      display: flex;
      padding: 6px;
    }
  }

  .el-tabs__content {
    padding: 0;
  }

  .el-upload-list__item {
    margin: 0;
  }
}

.arbitrate {
  margin-top: 10px;
}

.el_BatchFrom {
  width: 70%;
}

.el_form_BatchFrom {
  display: flex;
  justify-content: space-between;

  :deep(.el-select-tags-wrapper) {
    .el-tag {
      width: 100%;
    }
  }
}

:deep(#avue-view) {
  background-color: #fff;
}

:deep(.el_resj) {
  flex-direction: column;

  .el-form-item__label {
    justify-content: center;
    font-weight: 500;
    border: 1px solid #dcdfe6;
    width: fit-content;
    display: flex;
    align-items: center;
    padding: 0;
    padding: 0 4px;
    border-bottom: 0;
    color: #172e60;
    border-radius: 2px;
  }
}
</style>