<template>
  <div class="pageContent" v-loading="form.Pageloading" element-loading-text="正在加载中...">
    <!-- 菜单 -->
    <div class="placeholder">
      <el-tabs
        class="tablemun"
        v-model="form.basis.TabactiveName"
        type="border-card"
        @tab-click="TabactiveClick"
      >
        <el-tab-pane
          label="订单信息"
          :name="1"
          :disabled="form.basis.TabactiveName == 2"
        ></el-tab-pane>
        <el-tab-pane
          label="零担信息"
          :name="2"
          :disabled="form.basis.TabactiveName == 1"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <!-- 主体内容 -->
    <div class="content">
      <el-form
        ref="ruleFormRef"
        :rules="ruleForm"
        :model="form"
        label-width="30%"
        style="width: 100%"
        label-position="top"
      >
        <!-- 头部类型选择 -->
        <div class="tablemunTop">
          <!-- 异常类型 -->
          <el-form-item label="异常类型" prop="basis.workOrderType">
            <el-select
              v-model="form.basis.workOrderType"
              placeholder="请选择异常类型"
              style="width: 100%"
              clearable
              disabled
            >
              <el-option
                v-for="item in Exceptionoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <!-- 发现节点 -->
          <el-form-item label="发现节点" prop="basis.discoveryNode">
            <el-select
              v-model="form.basis.discoveryNode"
              placeholder="请选择发现节点"
              style="width: 100%"
              @change="DiscoveringNodesChange"
              clearable
              disabled
            >
              <el-option
                v-for="item in Discoveringoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                clearable
              />
            </el-select>
          </el-form-item>

          <el-form-item label="异常工单号">
            <el-input
              v-model="form.basis.workOrderNumber"
              disabled
              placeholder="异常工单号(自动生成)"
            />
          </el-form-item>
        </div>

        <!-- 包件信息  -->
        <el-tabs
          v-model="form.activPackage"
          class="demo-tabs Packagebox"
          @tab-click="handleClick"
          v-loading="form.Packageloading"
        >
          <el-tab-pane label="包件信息" name="0">
            <template v-for="(item, index) in form.PackageList" :key="index">
              <div class="el_Package">
                <div class="Package">
                  <span class="Number"> {{ index + 1 }}</span>
                  <el-form-item
                    v-if="form.basis.TabactiveName == 1"
                    :prop="`PackageList[${index}.packageCode]`"
                    :rules="ruleForm.packageCode"
                    label="包条码"
                  >
                    <el-input
                      @change="ChangePackageInfo(item)"
                      v-model="item.packageCode"
                      placeholder="请输入包条码"
                      clearable
                      disabled
                    />
                  </el-form-item>

                  <el-form-item
                    label="运单号"
                    :prop="`PackageList[${index}.waybillNumber]`"
                    :rules="ruleForm.waybillNumber"
                  >
                    <el-input
                      v-model="item.waybillNumber"
                      placeholder="请输入运单号"
                      clearable
                      disabled
                    />
                  </el-form-item>

                  <el-form-item
                    label="订单自编号"
                    :prop="`PackageList[${index}.orderCode]`"
                    :rules="ruleForm.orderCode"
                  >
                    <el-input
                      v-model="item.orderCode"
                      placeholder="请输入订单自编号"
                      clearable
                      disabled
                    />
                  </el-form-item>

                  <el-form-item
                    label="一级品"
                    :prop="`PackageList[${index}.first]`"
                    :rules="ruleForm.first"
                  >
                    <el-input v-model="item.first" placeholder="请输入一级品" clearable disabled />
                  </el-form-item>

                  <el-form-item
                    label="二级品"
                    :prop="`PackageList[${index}.secondary]`"
                    :rules="ruleForm.secondary"
                  >
                    <el-input
                      v-model="item.secondary"
                      placeholder="请输入二级品"
                      clearable
                      disabled
                    />
                  </el-form-item>

                  <el-form-item
                    label="品牌"
                    :prop="`PackageList[${index}.brandName]`"
                    :rules="ruleForm.brandName"
                  >
                    <el-input
                      v-model="item.brandName"
                      placeholder="品牌(有则自动带出)"
                      disabled
                      clearable
                    />
                  </el-form-item>
                  <!-- v-if="['3', '5', '6'].includes(form.basis.discoveryNode)" -->
                  <div v-if="false" style="width: 20%; display: flex">
                    <el-button
                      v-if="!index && workOrderStatus == NumberState.Numbe_ten"
                      type="primary"
                      class="el_addPackage"
                      @click="Addpackages"
                      style="margin-top: 2px"
                    >
                      <el-icon><Plus /></el-icon>新增包件</el-button
                    >
                    <el-button
                      v-if="index && workOrderStatus == NumberState.Numbe_ten"
                      type="primary"
                      class="el_addPackage"
                      style="margin-top: 2px"
                      @click="Removepackage(index)"
                    >
                      <el-icon><DeleteFilled /></el-icon>移除包件</el-button
                    >
                    <div class="el_activPackage_btton" v-if="item.history">
                      <el-button @click="ViewhistoricalPackages(item)">查看历史包件</el-button>
                    </div>
                  </div>
                </div>
                <!-- 按钮  -->
              </div>
            </template>
            <!-- <div class="el_top">
                <div class="el_Package_num">
                  <span>共计包件:{{ form.PackageList.length }}</span>
                </div>
              </div> -->
          </el-tab-pane>
        </el-tabs>

        <!-- 基础信息  -->
        <el-tabs
          v-model="form.activPackage"
          class="demo-tabs Packagebox"
          @tab-click="handleClick"
          v-loading="form.Packageloading"
        >
          <el-tab-pane label="基础信息" name="0">
            <div class="Basicinformation" style="padding-left: 26px; box-sizing: border-box">
              <el-form-item
                label="车次号"
                prop="basis.trainNumber"
                v-if="displaySettings.trainNumber"
              >
                <el-select
                  v-model="form.basis.trainNumber"
                  filterable
                  allow-create
                  default-first-option
                  :reserve-keyword="false"
                  placeholder="请选择车次号"
                  style="width: 100%"
                  clearable
                  @change="DeliveryTrainnumber"
                  disabled
                >
                  <template v-if="form.basis.discoveryNode == 3">
                    <el-option
                      v-for="(item, index) in form.Trainoptions"
                      :key="index"
                      :label="item.trainNumber"
                      :value="item.trainNumber"
                    />
                  </template>

                  <!-- driverName: itemChid.driverName, // 主司机
                      taskTime: itemChid.taskTime, // 配送时间
                      trainNumber: itemChid.trainNumber, //车次号 -->
                  <template v-else>
                    <el-option
                      v-for="(item, index) in form.deliver"
                      :key="index"
                      :label="item.trainNumber"
                      :value="item.trainNumber"
                    />
                  </template>
                </el-select>
              </el-form-item>

              <el-form-item
                label="配送时间"
                prop="basis.deliveryTime"
                v-if="displaySettings.deliveryTime"
              >
                <el-date-picker
                  v-model="form.basis.deliveryTime"
                  style="width: 100%"
                  type="datetime"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="请选择配送时间"
                  disabled
                />
              </el-form-item>

              <el-form-item
                label="配送司机"
                prop="basis.deliveryDriver"
                v-if="displaySettings.deliveryDriver"
              >
                <el-input
                  v-model="form.basis.deliveryDriver"
                  placeholder="请输配送司机"
                  clearable
                  disabled
                />
              </el-form-item>

              <el-form-item
                label="车辆线路"
                prop="basis.vehicleRoute"
                v-if="displaySettings.vehicleRoute"
              >
                <el-input
                  v-model="form.basis.vehicleRoute"
                  placeholder="请输入车辆线路"
                  clearable
                  disabled
                />
              </el-form-item>

              <el-form-item
                label="发货时间"
                prop="basis.deliverGoodsTime"
                v-if="displaySettings.deliverGoodsTime"
              >
                <el-date-picker
                  v-model="form.basis.deliverGoodsTime"
                  style="width: 100%"
                  type="datetime"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="请选择发货时间"
                  disabled
                />
              </el-form-item>

              <el-form-item
                label="入库时间"
                prop="basis.warehousingTime"
                v-if="displaySettings.warehousingTime"
              >
                <el-date-picker
                  v-model="form.basis.warehousingTime"
                  style="width: 100%"
                  type="datetime"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="请选择入库时间"
                  disabled
                />
              </el-form-item>

              <el-form-item
                label="发现时间"
                prop="basis.discoveryTime"
                v-if="displaySettings.discoveryTime"
              >
                <el-date-picker
                  v-model="form.basis.discoveryTime"
                  style="width: 100%"
                  type="datetime"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD HH:mm:ss"
                  placeholder="请选择发现时间"
                  disabled
                />
              </el-form-item>
              <!-- 初始必填 -->
              <el-form-item
                label="运单商场"
                prop="basis.waybillMall"
                v-if="displaySettings.waybillMall"
              >
                <el-input
                  v-model="form.basis.waybillMall"
                  placeholder="请输入运单商场"
                  clearable
                  disabled
                />
              </el-form-item>
              <!-- 初始必填 -->
              <el-form-item
                label="合作模式"
                prop="basis.typeServiceName"
                v-if="displaySettings.typeServiceName"
              >
                <el-input
                  v-model="form.basis.typeServiceName"
                  placeholder="合作模式(有则自动带出)"
                  disabled
                  clearable
                />
              </el-form-item>
              <!-- 初始必填 -->
              <div class="el_Basic">
                <el-form-item
                  label="处理方"
                  prop="basis.processor"
                  class="el_Processing"
                  v-if="displaySettings.processor"
                >
                  <el-select
                    v-model="form.basis.processor"
                    placeholder="请选择处理方"
                    style="width: 100%"
                    multiple
                    filterable
                    clearable
                    disabled
                  >
                    <el-option
                      v-for="item in Processingoptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
                <!-- 初始必填 -->
                <el-form-item
                  label="调查经过"
                  prop="basis.investigationPocess"
                  class="el_Investigation"
                  clearable
                  v-if="displaySettings.investigationProcess"
                >
                  <el-input
                    v-model="form.basis.investigationProcess"
                    placeholder="请输调查经过"
                    type="textarea"
                    :autosize="{ minRows: 1, maxRows: 10 }"
                    clearable
                    disabled
                  />
                </el-form-item>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
        <!-- 内部责任划分  -->
        <el-tabs
          v-model="form.responsibilities"
          class="demo-tabs responsibilities"
          @tab-click="handleClick"
          v-loading="form.Packageloading"
          v-if="form.basis.discoveryNode != 3"
        >
          <el-tab-pane label="内部责任划分" name="0">
            <div class="el_responsibilities">
              <template v-for="(item, index) in form.responsibilitiesList" :key="index">
                <div class="el_responsibilities_box">
                  <span class="Number"> {{ index + 1 }}</span>
                  <el-form-item
                    label="责任方"
                    class="el_Processing"
                    :prop="`responsibilitiesList[${index}.businessId]`"
                    :rules="ruleForm.businessId"
                  >
                    <el-select
                      v-if="form.groundlineType == '1'"
                      v-model="item.businessId"
                      placeholder="请选择提货责任方"
                      style="width: 100%"
                      clearable
                      filterable
                      :disabled="item.inputDisplay"
                    >
                      <el-option
                        v-for="items in item.Processingoptions"
                        :key="items.value"
                        :label="items.label"
                        :value="items.value"
                      />
                    </el-select>
                    <el-select
                      v-else
                      v-model="item.businessId"
                      placeholder="请选择责任方"
                      style="width: 100%"
                      clearable
                      filterable
                      @change="ResponsiblePartychange(item)"
                      :disabled="item.inputDisplay"
                    >
                      <el-option
                        v-for="items in item.Responsibleoptions"
                        :key="items.value"
                        :label="items.label"
                        :value="items.value"
                      />
                    </el-select>
                  </el-form-item>

                  <el-form-item
                    label="责任人"
                    class="el_Processing"
                    :prop="`responsibilitiesList[${index}.personResponsibleId]`"
                    :rules="ruleForm.personResponsibleId"
                  >
                    <el-input
                      v-if="form.groundlineType == '1'"
                      v-model="item.personResponsibleId"
                      placeholder="请输入责任人"
                      clearable
                      :disabled="item.inputDisplay"
                    />
                    <el-select
                      v-else
                      v-model="item.personResponsibleId"
                      style="width: 100%"
                      filterable
                      clearable
                      allow-create
                      default-first-option
                      :disabled="item.inputDisplay"
                    >
                      <el-option
                        v-for="items in item.ResponsibleoNameptions"
                        :key="items.value"
                        :label="items.name"
                        :value="items.id"
                      />
                    </el-select>
                  </el-form-item>

                  <el-form-item
                    label="金额（元）"
                    :prop="`responsibilitiesList[${index}.responsibilityRatio]`"
                    :rules="ruleForm.responsibilityRatio"
                  >
                    <el-input-number
                      v-model="item.responsibilityRatio"
                      :min="0"
                      :max="item.ProportionMax"
                      :controls="false"
                      :precision="2"
                      :value-on-clear="0"
                    />
                  </el-form-item>
                  <el-form-item
                    label="三方责任人"
                    :prop="`responsibilitiesList[${index}.tripartite]`"
                    :rules="ruleForm.tripartite"
                  >
                    <el-input
                      v-model="item.tripartite"
                      placeholder="请输入三方责任人"
                      clearable
                      :disabled="item.inputDisplay"
                    />
                  </el-form-item>
                  <el-form-item
                    label="说明"
                    class="el_Investigation"
                    clearable
                    :prop="`responsibilitiesList[${index}.description]`"
                    :rules="ruleForm.description"
                  >
                    <el-input
                      v-model="item.description"
                      placeholder="请输入说明"
                      type="textarea"
                      :autosize="{ minRows: 1, maxRows: 4 }"
                      clearable
                      :disabled="item.inputDisplay"
                    />
                  </el-form-item>

                  <el-button
                    v-if="!index && $route.query.typesOf != 0"
                    type="primary"
                    class="el_addPackage"
                    @click="AddResponsible"
                    style="margin-top: 2px"
                  >
                    <el-icon><Plus /></el-icon>新增责任</el-button
                  >
                  <el-button
                    style="margin-top: 2px"
                    v-if="!item.inputDisplay"
                    type="primary"
                    @click="Responsemoval(index)"
                  >
                    <el-icon><DeleteFilled /></el-icon>移除责任</el-button
                  >
                </div>
                <div></div>
              </template>
            </div>
            <!-- <div class="el_top">
              <div class="el_Package_num">
                <span>公司占比:{{ form.Proportion }}(%)</span>
              </div>
            </div> -->
          </el-tab-pane>
        </el-tabs>

        <!-- 处理结果-理赔金额  -->
        <el-tabs
          v-model="form.ProcessingTab"
          class="demo-tabs Processingresults"
          v-loading="form.Packageloading"
          v-if="form.basis.result?.length"
        >
          <el-tab-pane
            label="处理结果-理赔金额"
            name="0"
            v-if="ProcessingState || form.basis.result?.length"
          >
            <el-form-item label="" prop="basis.result">
              <el-select
                v-model="form.basis.result"
                placeholder="请选择处理结果类型"
                style="width: 100%"
                clearable
                multiple
                @change="Claimssettlement"
                disabled
              >
                <el-option
                  v-for="item in Processingresultsoptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <!-- 处理结果循环列表 -->
            <div class="el_Processingresults">
              <template v-for="(item, index) in form.Claimamount" :key="index + item.title">
                <div class="el_Processingresults_box">
                  <span class="el_title">{{ item.title }}</span>
                  <div class="el_Processingresults_box_list">
                    <el-form-item
                      label="金额(元)"
                      :prop="`Claimamount[${index}.money]`"
                      :rules="ruleForm.money"
                    >
                      <el-input-number
                        v-model="item.money"
                        :min="0"
                        :max="9999999"
                        :controls="false"
                        :value-on-clear="0"
                        @change="Totalamount"
                        :disabled="workOrderStatus != NumberState.twenty_one"
                      />
                    </el-form-item>

                    <el-form-item
                      label="支付单位"
                      :prop="`Claimamount[${index}.paymentUnit]`"
                      :rules="ruleForm.paymentUnit"
                    >
                      <el-input
                        v-model="item.paymentUnit"
                        placeholder="请输入支付单位"
                        :disabled="workOrderStatus != NumberState.twenty_one"
                        clearable
                      />
                    </el-form-item>
                    <el-form-item
                      label="理赔支付时间"
                      :prop="`Claimamount[${index}.compensationTime]`"
                      :rules="ruleForm.compensationTime"
                    >
                      <el-date-picker
                        v-model="item.compensationTime"
                        type="datetime"
                        format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        placeholder="理赔支付时间"
                        size="default"
                        :disabled="workOrderStatus != NumberState.twenty_one"
                      />
                    </el-form-item>
                    <el-form-item
                      label="支付方式"
                      :prop="`Claimamount[${index}.compensationMethod]`"
                      :rules="ruleForm.compensationMethod"
                    >
                      <el-select
                        v-model="item.compensationMethod"
                        placeholder="请选择支付方式"
                        style="width: 100%"
                        :disabled="workOrderStatus != NumberState.twenty_one"
                        clearable
                      >
                        <el-option
                          v-for="items in item.Paymentmethod"
                          :key="items.value"
                          :label="items.label"
                          :value="items.value"
                        />
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
              </template>

              <!-- resultDescription -->
            </div>
            <el-form-item label="处理结果说明">
              <el-input
                v-model="form.basis.resultDescription"
                placeholder="请输入处理结果说明"
                type="textarea"
                :autosize="{ minRows: 1, maxRows: 4 }"
                :disabled="workOrderStatus != NumberState.twenty_one"
                clearable
              />
            </el-form-item>
            <div class="el_top">
              <div class="el_Package_num">
                <span>总计金额:{{ form.Totalamount }}(元)</span>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>

        <el-tabs
          v-model="form.ProcessingTab"
          class="demo-tabs Completioninformation"
          v-loading="form.Packageloading"
          v-if="$route.query.typesOf == '0'"
        >
          <el-tab-pane label="完结信息" name="0">
            <div class="el-ckbtn">
              <div class="Compensationamount">
                <el-button type="primary" @click="AddCompensation">添加赔款方</el-button>
                <span>{{ CompensationNum }}</span>
              </div>
              <div class="Compensationamount">
                <el-button type="primary" @click="AddPayee">添加受款方</el-button>
                <span>{{ PayeeNum }}</span>
              </div>
            </div>
            <template v-for="(item, index) in form.completion" :key="index">
              <div class="el_left">
                <div class="el_compItem">
                  <span class="title" :style="{ color: !item.state ? '#000' : '#F56C6C' }"
                    >{{ item.state ? '受款方' : '赔款方' }}
                  </span>

                  <el-form-item label="仓库">
                    <el-select
                      v-model="item.warehouseId"
                      placeholder="请选择仓库"
                      style="width: 100%"
                      clearable
                      filterable
                    >
                      <el-option
                        v-for="item in item.warehouse"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>

                  <el-form-item label="责任人" v-if="!item.state">
                    <el-input
                      v-model="item.compensationPersonnel"
                      placeholder="请填写责任人"
                      clearable
                    />
                  </el-form-item>

                  <el-form-item label="原因" class="reason">
                    <el-input v-model="item.reason" placeholder="请填写原因" clearable />
                  </el-form-item>

                  <el-form-item label="金额(元)">
                    <el-input-number
                      v-model="item.money"
                      :min="0"
                      :max="9999999"
                      :controls="false"
                      :value-on-clear="0"
                      @change="SummaryAmount"
                    />
                  </el-form-item>
                </div>

                <div class="el_left_btn">
                  <el-button type="primary" @click="Compremove(item, index)" v-if="item.button"
                    >移除</el-button
                  >
                </div>
              </div>
            </template>
            <div class="el_money">
              <span
                >赔款总金额:<b>{{ form.Totalamountcompensation }}</b></span
              >
              <span
                >受款总金额:<b>{{ form.Totalamountreceived }}</b></span
              >
            </div>
          </el-tab-pane>
        </el-tabs>
        <el-tabs
          v-model="form.arbitration"
          class="demo-tabs arbitration"
          v-loading="form.Packageloading"
          v-if="$route.query.typesOf == '0'"
        >
          <el-tab-pane label="仲裁原因" name="0">
            <el-input
              v-model="form.basis.arbitrate"
              :autosize="{ minRows: 4, maxRows: 6 }"
              type="textarea"
              placeholder="请输入仲裁原因"
            />
          </el-tab-pane>
        </el-tabs>

        <!-- 照片上传 -->
        <el-tabs
          v-model="form.responsibilities"
          class="demo-tabs responsibilities"
          @tab-click="handleClick"
          v-loading="form.Packageloading"
          v-if="['1', '3'].includes(form.basis.workOrderType)"
        >
          <el-form-item label="">
            <el-tab-pane label="照片" name="0" class="el_foort_img">
              <el-upload
                v-model:file-list="form.fileList"
                :action="action"
                :headers="headers"
                :on-success="ImgSuccess"
                :before-upload="beforeAvatarUpload"
                drag
                multiple
                list-type="picture-card"
                disabled
              >
                <el-icon><Plus /></el-icon>
              </el-upload>
            </el-tab-pane>
          </el-form-item>
        </el-tabs>
        <!-- 操作按钮 -->
        <div class="flex-c-c">
          <el-button type="primary" icon="Refresh" @click="resetFormData">重置</el-button>
          <!-- 基础信息提交 -->
          <el-button
            type="primary"
            icon="Position"
            @click="onSubmit"
            v-if="PermissionButton.Modification_submission"
            >修改提交</el-button
          >
          <!-- 理赔金未出编辑  -->
          <el-button
            type="primary"
            v-if="PermissionButton.result_modification"
            @click="UnpaidClaimsEdited"
          >
            处理结果提交
          </el-button>
          <el-button
            type="primary"
            icon="Position"
            @click="AppealEditor"
            v-if="PermissionButton.Appeal_established"
            >申诉成立提交</el-button
          >
          <!-- <el-button v-if="allFieldsFilled" type="primary" icon="Position" @click="onSubmit"
            >处理完毕</el-button
          > -->
        </div>
      </el-form>
    </div>
  </div>
  <!-- 历史包件弹窗  -->
  <el-dialog v-model="form.historydialog" title="查看历史包件" width="500">
    <div class="el_details">
      <el-form-item label="历史包件">
        <el-select v-model="form.discoveryNode" placeholder="历史包件选择" style="width: 100%">
          <el-option
            v-for="item in form.Historicalpackage"
            :key="item.workOrderId"
            :label="item.workOrderNumber"
            :value="item.workOrderId"
          />
        </el-select>
      </el-form-item>
      <el-button @click="Viewdetails(form.discoveryNode)">查看详情</el-button>
    </div>

    <!-- <template #footer>
        <div class="dialog-footer">
          <el-button @click="form.historydialog = false"> 取消</el-button>
          <el-button type="primary" @click="historyPush">查看</el-button>
        </div>
      </template> -->
  </el-dialog>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { getDictionaryBiz } from '@/api/system/dict'; //字典
import { useStore } from 'vuex';
const $useStore = useStore();
import {
  $_getList,
  $_submit,
  $_getDetail,
  $_remove,
  $_getBusinessDepartmentUser,
  $_getAbnormalPackage,
  $_shippingInformation,
  $_getInfo,
  $_modifyData,
  $_updateCompletionEnd,
} from '@/api/aftersales/aftersalesWorkOrder';
import { compressImageBlob } from '@/components/IMGcompressor/imgcompressor.js';
import { useRouter, useRoute } from 'vue-router';
import { getDetailWarehouse, getDeptWarehouse } from '@/api/basicdata/basicdataWarehouse'; //处理方
import { deepClone } from '@/utils/util';
import { getToken } from '@/utils/auth';
import error from '@/error';
const $router = useRouter();
const $route = useRoute();
const formCopy = ref({}); //用于重置表单
const form = ref({
  basis: {
    TabactiveName: 1, //工单类型菜单
  }, //基础信息
  Totalamount: 0, //总金额
  activPackage: '0', //包件信息菜单
  responsibilities: '0', //内部责任菜单
  ProcessingTab: '0', //处理结果菜单
  Pageloading: false, //页面加载
  Packageloading: false, //包件加载
  historydialog: false, //历史包件弹窗
  groundlineType: 0, //发现节点
  Proportion: 100, //公司占比
  totalMax: 100, //公司占比最大值
  Totalamountcompensation: 0, // 赔款总金额
  Totalamountreceived: 0, // 受款总金额
  Processed: false, //是可以填写处理结果
  //   包件列表
  PackageList: [
    {
      packageCode: '', //包条码
      waybillNumber: '', //运单号
      orderCode: '', //订单自编号
      first: '', //一级品
      secondary: '', //二级品
      brandName: '', //品牌
      history: true, //是否有历史包间
    },
  ], //历史包件列表
  Historicalpackage: [],
  //   内部责任划分
  responsibilitiesList: [
    {
      businessId: '', //责任方
      personResponsibleId: '', //责任人
      responsibilityRatio: 0, //占比
      description: '', //三方责任人
      tripartite: '', //说明
      ProportionMax: 99999999999999999, //最大值校验
      Processingoptions: [
        //提货责任方列表
      ],
      Responsibleoptions: [
        // 责任方
      ],
      ResponsibleoNameptions: [
        // 责任人列表
      ],
    },
  ],
  Trainoptions: [], //干线车次号
  deliver: [], //配送车次号
  //   理赔金额
  Claimamount: [],
  //完结循环列表
  completion: [],
  fileList: [], //照片
  UserPermissions: '', //当前角色信息
});
const myData = ref({}); //用户信息记录
const ruleForm = reactive({
  basis: {
    workOrderType: [{ required: true, message: '请选择异常类型', trigger: ['bulr', 'change'] }],
    discoveryNode: [{ required: true, message: '请选择发现节点', trigger: ['bulr', 'change'] }],
    trainNumber: [{ required: true, message: '请选择车次号', trigger: ['bulr', 'change'] }],
    deliveryTime: [{ required: true, message: '请输入配送时间', trigger: ['bulr', 'change'] }],
    deliveryDriver: [{ required: true, message: '请输入配送司机', trigger: ['bulr', 'change'] }],
    vehicleRoute: [{ required: true, message: '请输入车辆线路', trigger: ['bulr', 'change'] }],
    deliverGoodsTime: [{ required: true, message: '请输入发货时间', trigger: ['bulr', 'change'] }],
    warehousingTime: [{ required: true, message: '请选择入库时间', trigger: ['bulr', 'change'] }],
    discoveryTime: [{ required: true, message: '请选择发现时间', trigger: ['bulr', 'change'] }],
    waybillMall: [{ required: true, message: '请输入运单商场', trigger: ['bulr'] }],
    typeServiceName: [{ required: false, message: '请输入合作模式', trigger: ['bulr', 'change'] }],
    investigationProcess: [
      { required: true, message: '请输入调查经过', trigger: ['bulr', 'change'] },
    ],
    result: [{ required: false, message: '请输选择处理结果', trigger: ['bulr'] }],
    processor: [{ required: true, message: '请输入处理方', trigger: ['bulr'] }],
  },

  packageCode: [{ required: true, message: '请输入包条码', trigger: ['bulr', 'change'] }],
  waybillNumber: [{ required: true, message: '请输入运单号', trigger: ['bulr', 'change'] }],
  orderCode: [{ required: true, message: '请输入订单自编号', trigger: ['bulr', 'change'] }],
  first: [{ required: false, message: '请输入一级品', trigger: ['bulr', 'change'] }],
  secondary: [{ required: false, message: '请输入二级品', trigger: ['bulr', 'change'] }],
  brandName: [{ required: false, message: '请输入品牌', trigger: ['bulr', 'change'] }],

  businessId: [{ required: true, message: '请选择责任方', trigger: ['bulr', 'change'] }],
  personResponsibleId: [{ required: true, message: '请输入责任人', trigger: ['bulr', 'change'] }],
  responsibilityRatio: [{ required: false, message: '请输入占比', trigger: ['bulr', 'change'] }],
  tripartite: [{ required: false, message: '请输入三方责任人', trigger: ['bulr', 'change'] }],
  description: [{ required: true, message: '请输入说明', trigger: ['bulr', 'change'] }],
  money: [{ required: false, message: '请输入金额', trigger: ['bulr', 'change'] }],
  paymentUnit: [{ required: false, message: '请输入支付单位', trigger: ['bulr', 'change'] }],
  compensationTime: [{ required: false, message: '请输选择支付时间', trigger: ['bulr', 'change'] }],
  compensationMethod: [
    { required: false, message: '请输选择支付方式', trigger: ['bulr', 'change'] },
  ],
});
const ResponsibleParty = ref([]); //提货责任方
const ruleFormRef = ref(); //表单示例
// 异常类型
const Exceptionoptions = ref([]);
// 发现节点
const Discoveringoptions = ref([]);
// 处理方/责任方
const Processingoptions = ref([]);
// 支付方式
const Paymentmethodoptions = ref([]);
// 处理结果
const Processingresultsoptions = ref([]);
// 工单状态
const workOrderStatus = computed(() => {
  return $route.query.workOrderStatus;
});

// 修改提交权限
const Modificationsubmission = () => {
  if (['10', '90'].includes($route.query.workOrderStatus)) {
    return true;
  }
  return false;
};
// 申诉成立权限
const Appealestablished = () => {
  if (form.value.UserPermissions == '总部客服经理') {
    if ($route.query.typesOf == '0') {
      return true;
    }
  }
  return false;
};
// 处理结果修改权限
const resultmodification = () => {
  if ($route.query.workOrderStatus == '21') {
    return true;
  }
  return false;
};
// 工单状态
const NumberState = computed(() => {
  return {
    Numbe_ten: '10', //待处理
    twenty_one: '21', //处理结果已提交
  };
});
// 权限判断
const PermissionButton = computed(() => ({
  Modification_submission: Modificationsubmission(), //修改提交
  Appeal_established: Appealestablished(), //申诉成立
  result_modification: resultmodification(), //处理结果修改
}));

// 字典公共函数
async function updateDictionary(targetArray, dictionaryType) {
  await getDictionaryBiz(dictionaryType).then(res => {
    res.data.data.forEach(item => {
      targetArray.push({
        value: item.dictKey,
        label: item.dictValue,
      });
    });
  });
}
// 获取处理方和责任方
const Handling = async () => {
  await getDeptWarehouse().then(res => {
    let data = [];
    if (res.data.code == 200) {
      if (res.data && res.data.data.length) {
        res.data.data.forEach(item => {
          data.push({
            value: item.id,
            label: item.name,
          });
        });
      }
      Processingoptions.value = deepClone(data);
    }
  });
};
// 内部责任划分初始化
const responsibilities = async () => {
  // 内部责任划分处理
  form.value.responsibilitiesList = await [
    {
      businessId: '', //责任方
      personResponsibleId: '', //责任人
      responsibilityRatio: 0, //占比
      description: '', //三方责任人
      tripartite: '', //说明
      ProportionMax: 99999999999999999, //最大值校验
      Processingoptions: [
        //提货责任方列表
        ...ResponsibleParty.value,
      ],
      Responsibleoptions: [
        // 责任方
        ...Processingoptions.value,
      ],
      ResponsibleoNameptions: [
        // 责任人列表
      ],
      id: 1,
    },
  ];
};
// 包件列表重置
const PackageListReset = async () => {
  //包件列表
  form.value.PackageList = await [
    {
      packageCode: '', //包条码
      waybillNumber: '', //运单号
      orderCode: '', //订单自编号
      first: '', //一级品
      secondary: '', //二级品
      brandName: '', //品牌
      history: false, //是否有历史包间
      id: 1,
    },
  ];
};
// 页面初始化数据处理
const PageState = () => {
  if (localStorage.getItem('my_data')) {
    myData.value = JSON.parse(localStorage.getItem('my_data')); //获取本地仓库信息
  }
  // 获取登录角色权限
  getDictionaryBiz('after_sales_visits').then(async res => {
    // const matchingItem = res.data.data.find(
    //   item => item.dictValue == JSON.parse(localStorage.getItem('TWMS-userInfo')).content.role_name
    // );
    // form.value.UserPermissions = matchingItem.dictValue;

    // 获取用户角色信息，并拆分为数组
    const roleNames = await JSON.parse(
      localStorage.getItem('TWMS-userInfo')
    ).content.role_name.split(',');
    // 根据角色名称查找匹配项目
    const matchingItem = res.data.data.find(item => roleNames.includes(item.dictValue));
    if (matchingItem) {
      form.value.UserPermissions = matchingItem.dictValue;
    } else {
      form.value.UserPermissions = '仓库客服';
    }
  });
  // 内部责任划分初始化
  responsibilities();
};

//   获取页面数据回显
const getPageData = async () => {
  let data = {
    id: $route.query.id,
  };
  await $_getInfo(data)
    .then(res => {
      console.log(res, '回显的数据');
      // 获取数据失败
      if (res.data.code != 200 || !res.data || !res.data.data) {
        console.log('获取数据失败');
        return;
      }
      // 获取数据成功
      let pageData = res.data.data;
      console.log(pageData, '获取的数据');
      //异常类型
      let basic = form.value.basis;
      // 包件回显
      if (pageData.abnormalPackageVOList && pageData.abnormalPackageVOList.length) {
        form.value.PackageList = [];
        pageData.abnormalPackageVOList.forEach(item => {
          console.log(item);
          form.value.PackageList.push({
            packageCode: item.packageCode, //包条码
            waybillNumber: item.waybillNumber, //运单号
            orderCode: item.orderCode, //订单自编号
            first: item.first, //一级品
            secondary: item.secondary, //二级品
            brandName: item.brandName, //品牌
            history: false, //是否有历史包间
            id: 1,
          });
        });
      }
      form.value.PackageList[0].packageCode
        ? (form.value.basis.TabactiveName = 1)
        : (form.value.basis.TabactiveName = 2);
      //   基础信息
      // trainNumber: ['3', '5', '6', '7'].includes(form.value.groundlineType), //车次号
      // deliveryTime: ['5', '6', '7'].includes(form.value.groundlineType), //配送时间
      // deliveryDriver: ['5', '6', '7'].includes(form.value.groundlineType), //配送司机
      // vehicleRoute: ['3'].includes(form.value.groundlineType), //车辆线路
      // deliverGoodsTime: ['2'].includes(form.value.groundlineType), //发货时间
      // warehousingTime: ['4'].includes(form.value.groundlineType), //入库时间
      // discoveryTime: ['4', '5', '6', '7'].includes(form.value.groundlineType), //发现时间
      // waybillMall: true, //运单商场
      // typeServiceName: true, //合作模式
      // processor: true, //处理方
      // investigationPocess: true, //调查经过
      basic.trainNumber = pageData.trainNumber; //车次号
      basic.deliveryTime = pageData.deliveryTime; //配送时间
      basic.deliveryDriver = pageData.deliveryDriver; //配送司机
      basic.vehicleRoute = pageData.vehicleRoute; //车辆线路
      basic.deliverGoodsTime = pageData.deliverGoodsTime; //发货时间
      basic.warehousingTime = pageData.warehousingTime; //入库时间
      basic.discoveryTime = pageData.discoveryTime; //发现时间
      basic.waybillMall = pageData.waybillMall; //运单商场
      basic.typeServiceName = pageData.typeServiceName; //合作模式
      basic.investigationProcess = pageData.investigationProcess; //调查经过
      basic.workOrderType = pageData.workOrderType; //异常类型
      basic.discoveryNode = pageData.discoveryNode; //发现节点
      basic.workOrderNumber = pageData.workOrderNumber; //异常工单号
      basic.arbitrate = pageData.reasonArbitration; //仲裁原因
      form.value.workOrderNumber = pageData.workOrderNumber; //异常工单号
      form.value.id = pageData.id; //异常ID
      form.value.groundlineType = pageData.discoveryNode; //发现节点显示

      // 处理结果
      if (pageData.processingResultsVO) {
        if (pageData.processingResultsVO.processingMoneyEntityList?.length) {
          basic.result = []; //重置处理结果
          basic.resultDescription = pageData.processingResultsVO.resultDescription; //处理结果说明
          form.value.Claimamount = pageData.processingResultsVO.processingMoneyEntityList.map(
            item => {
              form.value.basis.result.push(item.resultType);
              return {
                money: item.money, //金额
                paymentUnit: item.paymentUnit, //支付单位
                compensationTime: item.compensationTime, //理赔支付时间
                compensationMethod: item.compensationMethod, //支付方式
                title: item.compensationMethodName, //标题
                Paymentmethod: [...JSON.parse(JSON.stringify(Paymentmethodoptions.value))],
              };
            }
          );
        }
      }
      //处理方
      if (pageData.processorVOList && pageData.processorVOList.length) {
        basic.processor = pageData.processorVOList
          .filter(res => res && res.typesOf == '2')
          .map(item => item.businessId);
      }
      //  内部责任划分
      if (pageData.personResponsibleVOS && pageData.personResponsibleVOS.length) {
        form.value.responsibilitiesList = []; //清空初始值
        pageData.personResponsibleVOS.forEach(item => {
          let data = {
            businessId: String(item.businessId), //责任方
            personResponsibleId: item.personResponsibleId
              ? item.personResponsibleId
              : item.personResponsibleName, //责任人
            responsibilityRatio: Number(item.responsibilityRatio), //占比
            description: item.description, //说明
            tripartite: item.tripartite, //责任人
            ProportionMax: 999999999999999999, //最大值校验
            inputDisplay: true,
            valueId: item.id,
            Processingoptions: [
              //提货责任方列表
              ...ResponsibleParty.value,
            ],
            Responsibleoptions: [
              // 责任方
              ...Processingoptions.value,
            ],
            ResponsibleoNameptions: [
              {
                name: item.personResponsibleName,
                id: item.personResponsibleId,
              },
              // 责任人列表
            ],
            id: form.value.responsibilitiesList.length + 1,
          };
          form.value.responsibilitiesList.push(data);
          // calculateMaxValues();
        });
      }
      // 是否置空完结初始值
      if (
        pageData.completionRecipientEntityList?.length ||
        pageData.completionRecordEntities?.length
      ) {
        form.value.completion = [];

        const processCompletionEntities = (entities, state) => {
          entities.forEach((item, index) => {
            form.value.completion.push({
              state, // 状态
              warehouseId: item.warehouseId, // 仓库
              warehouse: [...Processingoptions.value], // 仓库列表
              reason: state ? item.reasonReceivingPayment : item.reason, // 原因
              money: item.money, // 金额
              compensationPersonnel: item.compensationPersonnel, // 责任人
              button: !!index, // 按钮不可移除
            });
          });
        };

        // 完结受款方处理
        if (pageData.completionRecipientEntityList?.length) {
          processCompletionEntities(pageData.completionRecipientEntityList, 1);
        }

        // 完结赔款方处理
        if (pageData.completionRecordEntities?.length) {
          processCompletionEntities(pageData.completionRecordEntities, 0);
        }

        const addDefaultEntity = state => {
          form.value.completion.push({
            state,
            warehouseId: '', // 仓库
            warehouse: [...Processingoptions.value], // 仓库列表
            reason: '', // 原因
            money: 0, // 金额
            button: false, // 按钮不可移除
          });
        };

        // 判断是否填写了受款方
        if (!form.value.completion.some(res => res.state === 1)) {
          addDefaultEntity(1);
        }

        // 判断是否填写了赔款方
        if (!form.value.completion.some(res => res.state === 0)) {
          addDefaultEntity(0);
        }
        // 金额汇总
        SummaryAmount();
      }
      // 照片处理
      console.log(pageData.decreaseImageVOList, '图片参数');
      if (pageData.decreaseImageVOList?.length) {
        form.value.fileList = [];
        form.value.fileList = pageData.decreaseImageVOList.map(res => {
          return {
            name: res.imageName, //图片名称
            url: res.imagePath, //图片地址
          };
        });
        console.log(form.value.fileList, '处理好的参数');
      }
    })
    .catch(error => {
      console.log(error, 'error');
    })
    .finally(() => {
      form.value.Pageloading = false; //关闭页面加载
    });
};
// 完结信息初始化
const CompletionFun = () => {
  form.value.completion = [
    {
      state: 0, //赔款方
      warehouseId: '', //仓库
      warehouse: [...Processingoptions.value], //仓库列表
      reason: '', //原因
      money: 0, //金额
      compensationPersonnel: '', //责任人
      button: false, //按钮不可移除
    },
    {
      state: 1, //受款方
      warehouseId: '', //仓库
      warehouse: [...Processingoptions.value], //仓库列表
      reason: '', //原因
      money: 0, //金额
      button: false, //按钮不可移除
    },
  ];
};

// 完结信息金额汇总
const SummaryAmount = () => {
  form.value.Totalamountcompensation = 0;
  form.value.Totalamountreceived = 0;
  form.value.completion.forEach(item => {
    if (item.state == 0) {
      form.value.Totalamountcompensation += Number(item.money); // 赔款总金额
    } else {
      form.value.Totalamountreceived += Number(item.money); // 受款总金额
    }
  });
};

// 页面必要初始化请求
const onLoad = async () => {
  form.value.Pageloading = true; //开启页面加载
  await updateDictionary(Exceptionoptions.value, 'pc_work_order'); //异常类型
  await updateDictionary(Discoveringoptions.value, 'pc_discovery_node'); //发现环节
  await updateDictionary(ResponsibleParty.value, 'Responsible_party'); //责任方
  await updateDictionary(Paymentmethodoptions.value, 'payment_method'); //支付方式
  await updateDictionary(Processingresultsoptions.value, 'result_handling'); //理赔选择
  await Handling(); //获取处理方和责任方
  await PageState(); //页面基础数据处理
  await CompletionFun(); //完结信息初始化
  await getPageData(); //页面回显初始化数据
  formCopy.value = deepClone(form.value); //用于拷贝一份重置数据
};
onLoad();
const ProcessingState = computed(() => {
  if (form.value.basis.processor && form.value.basis.processor.length) {
    let data = form.value.basis.processor.find(res => res == myData.value.id);
    if (data) {
      return true;
    }
  }
});
// 菜单切换
const handleClick = (tab, event) => {
  console.log(tab, event);
};
// 发现节点事件
const DiscoveringNodesChange = async value => {
  console.log(value, '发现节点');
  form.value.groundlineType = value;
  form.value.basis = {
    workOrderType: form.value.basis.workOrderType, //异常类型
    discoveryNode: form.value.basis.discoveryNode, //发现节点
    typeServiceName: form.value.basis.typeServiceName, //合作模式
    TabactiveName: 1, //订单类型
  };
  console.log(form.value.basis, 'form.value.basis');
  // 公司占比重置
  form.value.Proportion = 0;
  // 内部责任化初始值
  await responsibilities();
  // 包件重置
  await PackageListReset();
  ruleFormRef.value.clearValidate();
};
// 菜单切换显示输入框
const displaySettings = computed(() => {
  return {
    trainNumber: ['3', '5', '6', '7'].includes(form.value.groundlineType), //车次号
    deliveryTime: ['5', '6', '7'].includes(form.value.groundlineType), //配送时间
    deliveryDriver: ['5', '6', '7'].includes(form.value.groundlineType), //配送司机
    vehicleRoute: ['3'].includes(form.value.groundlineType), //车辆线路
    deliverGoodsTime: ['2'].includes(form.value.groundlineType), //发货时间
    warehousingTime: ['4'].includes(form.value.groundlineType), //入库时间
    discoveryTime: ['4', '5', '6', '7'].includes(form.value.groundlineType), //发现时间
    waybillMall: true, //运单商场
    typeServiceName: true, //合作模式
    processor: true, //处理方
    investigationProcess: true, //调查经过
  };
});
// 新增包件
const Addpackages = () => {
  let data = {
    packageCode: '', //包条码
    waybillNumber: '', //运单号
    orderCode: '', //订单自编号
    first: '', //一级品
    secondary: '', //二级品
    brandName: '', //品牌
    history: false, //是否有历史包件
    HistoricalPackageList: [], //历史包件存储
    id: form.value.PackageList.length + 1,
  };
  form.value.PackageList.push(data);
};

// 移除包件
const Removepackage = index => {
  console.log(index, 'index');
  ElMessageBox.confirm('是否移除当前包件信息?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    await form.value.PackageList.splice(index, 1); //移除当前点击的按钮
    form.value.PackageList.forEach((item, index) => {
      item.id = index + 1;
    });
    console.log(form.value.PackageList, 'form.value.PackageList');
    ElMessage({
      message: '移除成功.',
      type: 'success',
      plain: true,
    });
  });
};

// 历史包件查看
const ViewhistoricalPackages = item => {
  form.value.Historicalpackage = item.HistoricalPackageList;
  form.value.historydialog = true; //打开弹窗
};
// 新增责任方
const AddResponsible = () => {
  let data = {
    businessId: '', //责任方
    personResponsibleId: '', //责任人
    responsibilityRatio: 0, //占比
    description: '', //三方责任人
    tripartite: '', //说明
    ProportionMax: 999999999999999999999999999999, //最大值校验
    inputDisplay: false, //是否可以输入
    Processingoptions: [
      //提货责任方列表
      ...ResponsibleParty.value,
    ],
    Responsibleoptions: [
      // 责任方
      ...Processingoptions.value,
    ],
    ResponsibleoNameptions: [
      // 责任人列表
    ],
    id: form.value.responsibilitiesList.length + 1,
  };
  form.value.responsibilitiesList.push(data);
  // calculateMaxValues();
};
// 责任方移除
const Responsemoval = index => {
  console.log(index, 'index===>');
  ElMessageBox.confirm('是否移除当前责任信息?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    await form.value.responsibilitiesList.splice(index, 1); //移除当前点击的按钮
    form.value.responsibilitiesList.forEach((item, index) => {
      item.id = index + 1;
    });
    // calculateMaxValues(); //调用占比计算
    ElMessage({
      message: '移除成功.',
      type: 'success',
      plain: true,
    });
  });
};

const calculateMaxValues = () => {
  return;
  // 计算每个输入框剩余最大值
  let data = form.value.responsibilitiesList;
  let totalUsed = data.reduce((acc, item) => acc + item.responsibilityRatio, 0);
  data.forEach(item => {
    item.ProportionMax = Math.min(100, form.value.totalMax - totalUsed + item.responsibilityRatio);
  });

  //   计算公司占比
  let totasum = data.reduce((acc, item) => acc + item.responsibilityRatio, 0);
  form.value.Proportion = form.value.totalMax - totasum;
};

// 公司占比计算
const CompanyProportionInput = value => {
  calculateMaxValues();
};

// 理赔总金额计算
const Totalamount = () => {
  console.log(form.value.Claimamount);

  form.value.Totalamount = form.value.Claimamount.map(res => res.money).reduce(
    (accumulator, currentValue) => accumulator + currentValue,
    0
  );
};

const Claimssettlement = value => {
  console.log(value, '理赔金额');
  console.log(Processingresultsoptions.value, '参数列表');
  let data = [];
  value.forEach(item => {
    let _data = Processingresultsoptions.value.find(res => res.value == item);
    if (_data) {
      data.push(_data);
    }
  });
  console.log(data, '筛选出来的值');
  form.value.Claimamount = [];
  if (data && data.length) {
    data.forEach(item => {
      form.value.Claimamount.push({
        title: item.label, //标题
        money: 0, //金额
        paymentUnit: '', //支付单位
        compensationTime: '', //理赔支付时间
        compensationMethod: '', //支付方式
        Paymentmethod: [...JSON.parse(JSON.stringify(Paymentmethodoptions.value))],
      });
    });
  }
};
// 图片上传必须携带TOKEN
const headers = computed(() => {
  return { 'Blade-Auth': 'Bearer ' + getToken() };
});
// 图片上传接口
const action = computed(() => {
  return '/api/blade-resource/oss/endpoint/put-file';
});
// 上传图片规则
const beforeAvatarUpload = async 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 > 4) {
    ElMessage.error('图片大小不能大于4MB!');
    return false;
  }
  const res = await compressImageBlob(rawFile);
  return res;
};
// 图片上传成功回调函数
const ImgSuccess = (response, uploadFile) => {
  if (response.success === true) {
    console.log(response);
    console.log(form.value);
  }
};
const historyPush = () => {};
// 重置
const resetFormData = () => {
  console.log(formCopy.value, 'formCopy.value');
  // 尝试使用 HTML 字符串
  const message = `重置表单会造成<span style="color: red;">数据丢失!</span>是否继续?`;
  ElMessageBox.confirm(message, '警告', {
    dangerouslyUseHTMLString: true,
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(async () => {
    form.value.Pageloading = true; //开启页面加载
    ruleFormRef.value.resetFields();
    let _time = setTimeout(() => {
      form.value = deepClone(formCopy.value); //重置数据
      clearTimeout(_time);
    }, 300);
  });
};

// 包条码查询信息
const ChangePackageInfo = async item => {
  console.log(item, 'item');
  if (!item.packageCode) {
    item.waybillNumber = ''; //运单号
    item.orderCode = ''; //订单自编码
    item.first = ''; //一级品
    item.secondary = ''; //二级品
    item.brandName = ''; //品牌
    let data = form.value.PackageList.find(res => res.packageCode); //判断是否已经查询了运单商场
    if (!data) {
      form.value.basis.waybillMall = ''; //运单商场
      form.value.basis.typeServiceName = ''; //合作模式
    }
    return;
  } else if (item.packageCode) {
    item.waybillNumber = ''; //运单号
    item.orderCode = ''; //订单自编码
    item.first = ''; //一级品
    item.secondary = ''; //二级品
    item.brandName = ''; //品牌
    if (form.value.PackageList == 1) {
      form.value.basis.waybillMall = ''; //运单商场
      form.value.basis.typeServiceName = ''; //合作模式
    }
  }
  // 判断输入的包条码是否一样
  if (form.value.PackageList.length > 1) {
    let packageCodeState = await form.value.PackageList.find(res => {
      // 排除当前项，只匹配其他项的包条码
      return res.packageCode === item.packageCode && res !== item;
    });

    // 查找是否已经存在相同包条码
    if (packageCodeState) {
      item.packageCode = '';
      ElMessage({
        message: '已经存在相同包条码，请勿重复添加！',
        type: 'warning',
      });
      return;
    }
  }

  let data = {
    packageCode: item.packageCode, //输入框参数
  };
  form.value.Pageloading = true; //开启页面加载
  $_getAbnormalPackage(data)
    .then(async res => {
      console.log(res, '查询包条');
      let packageData = {};
      if (res.data.code == 200 && res.data && res.data.data.length) {
        form.value.Pageloading = false; //关闭页面加载
        packageData = res.data.data[0]; //取第一个值,内容相同
        // 判断输入的是否为同一批货
        let state = await form.value.PackageList.find(res => res.orderCode || res.brandName);
        if (state) {
          if (
            state.orderCode != packageData.orderCode ||
            state.waybillNumber != packageData.waybillNumber
          ) {
            ElMessage({
              message: '请选择相同订单自编和运单号的包条码',
              type: 'warning',
            });
            return;
          }
        }
        ElMessage({
          message: '查询成功',
          type: 'success',
        });
        item.waybillNumber = packageData.waybillNumber || ''; //运单号
        item.orderCode = packageData.orderCode || ''; //订单自编码
        item.first = packageData.firsts || ''; //一级品
        item.secondary = packageData.second || ''; //二级品
        item.brandName = packageData.brandName || ''; //品牌
        form.value.basis.waybillMall = packageData.mallName || ''; //运单商场
        form.value.basis.typeServiceName = packageData.typeServiceName || ''; //合作模式
        // 是否显示历史包件按钮,存在多个包件则展示
        const results = res.data.data.filter(item => {
          return item.workOrderId && item.workOrderNumber;
        });
        // 存储历史订单
        if (results.length) {
          item.history = true;
          item.HistoricalPackageList = results;
        } else {
          item.history = false;
        }
        console.log(form.value.basis.discoveryNode, 'form.value.discoveryNode');
        // 判断发现节点(干线车次号、车辆线路处理)
        if (['3'].includes(form.value.basis.discoveryNode)) {
          let addedTrainNumbers = []; // 临时变量存储已经添加过的车次号
          res.data.data.forEach(item => {
            if (item.trunklines && item.trunklines.length) {
              item.trunklines.forEach(itemChid => {
                if (!addedTrainNumbers.includes(itemChid.trainNumber)) {
                  form.value.Trainoptions.push({
                    trainNumber: itemChid.trainNumber, // 车次号
                    vehicleRoute: itemChid.vehicleRoute, // 车辆线路
                  });
                  addedTrainNumbers.push(itemChid.trainNumber);
                }
              });
            }
          });
          console.log(form.value.Trainoptions, 'form.value.Trainoptions');
        }
        // 配送环节车次号处理
        if (['5'].includes(form.value.basis.discoveryNode)) {
          let addedTrainNumbers = []; // 临时变量存储已经添加过的车次号
          res.data.data.forEach(item => {
            if (item.deliver && item.deliver.length) {
              item.deliver.forEach(itemChid => {
                if (!addedTrainNumbers.includes(itemChid.trainNumber)) {
                  form.value.deliver.push({
                    driverName: itemChid.driverName, // 主司机
                    taskTime: itemChid.taskTime, // 配送时间
                    trainNumber: itemChid.trainNumber, //车次号
                  });
                  addedTrainNumbers.push(itemChid.trainNumber);
                }
              });
            }
          });
          console.log(form.value.Trainoptions, 'form.value.Trainoptions');
        }
      } else {
        form.value.Pageloading = false; //关闭页面加载
        ElMessage({
          message: '暂无查询内容,请检查参数是否正确!',
          type: 'warning',
        });
      }
    })
    .catch(error => {
      console.log(error, 'error');
      form.value.Pageloading = false; //关闭页面加载
    });
};
// 查看历史包件详情
const Viewdetails = value => {
  if (!value) {
    ElMessage({
      message: '请选择要查看的数据',
      type: 'warning',
    });
    return;
  }
  // 筛选出来输入框值
  let data = form.value.Historicalpackage.find(res => res.workOrderId == value);
  $router.push({
    path: '/aftersales/aftersalesWorkOrderInfo',
    query: {
      id: data.workOrderId,
      name: data.workOrderId + '-信息查看',
      routerState: 'view',
    },
  });
};
// 责任人查询>获取当前责任方的责任人
const ResponsiblePartychange = item => {
  item.personResponsibleId = '';
  if (!item.businessId) {
    return;
  }
  let data = {
    warehouseId: item.businessId,
  };
  // 清空责任人

  $_getBusinessDepartmentUser(data).then(res => {
    console.log(res, '获取责任人列表');
    if (res.data.code == 200 && res.data.data && res.data.data.length) {
      ElMessage({
        message: '查询成功',
        type: 'success',
      });
      item.ResponsibleoNameptions = res.data.data;
    } else {
      ElMessage({
        message: '暂未查询到责任人',
        type: 'warning',
      });
      item.ResponsibleoNameptions = [];
    }
  });
};

// 车次号带出车辆线路
const DeliveryTrainnumber = value => {
  console.log(value, '接收的参数值');
  if (value) {
    if (form.value.basis.discoveryNode == '3') {
      if (form.value.Trainoptions && form.value.Trainoptions.length) {
        let data = form.value.Trainoptions.find(res => res.trainNumber == value);
        if (data) {
          form.value.basis.vehicleRoute = data.vehicleRoute; //车辆线路
        }
      }
    } else if (['5', '6', '7'].includes(form.value.basis.discoveryNode)) {
      if (form.value.deliver && form.value.deliver.length) {
        let data = form.value.deliver.find(res => res.trainNumber == value);
        if (data) {
          form.value.basis.deliveryDriver = data.driverName; //司机
          form.value.basis.deliveryTime = data.taskTime; //配送时间
        }
      }
    }
  }
};

// 是否显示处理完毕按钮
const allFieldsFilled = computed(() => {
  const claimAmount = form.value.Claimamount;
  if (!claimAmount.length) {
    form.value.Processed = false;
    return false;
  }
  const allFilled = claimAmount.every(
    item => item.compensationMethod && item.compensationTime && item.paymentUnit
  );

  form.value.Processed = allFilled;
  return allFilled;
});

// 配款方数量
const CompensationNum = computed(() => {
  let sum = form.value.completion.filter(res => {
    return !res.state;
  });
  return sum.length;
});

// 受款方数量
const PayeeNum = computed(() => {
  let sum = form.value.completion.filter(res => {
    return res.state;
  });
  return sum.length;
});
// 添加赔款方
const AddCompensation = () => {
  let data = {
    state: 0, //赔款方
    warehouseId: '', //仓库
    warehouse: [...Processingoptions.value], //仓库列表
    reason: '', //原因
    money: 0, //金额
    compensationPersonnel: '', //责任人
    button: true, //按钮可移除
  };
  form.value.completion.splice(
    form.value.completion.map(item => item.state).lastIndexOf(0) + 1,
    0,
    data
  );
};
// 添加受款方
const AddPayee = () => {
  let data = {
    state: 1, //受款方
    warehouseId: '', //仓库
    warehouse: [...Processingoptions.value], //仓库列表
    reason: '', //原因
    money: 0, //金额
    compensationPersonnel: '', //责任人
    button: true, //按钮可移除
  };
  form.value.completion.splice(
    form.value.completion.map(item => item.state).lastIndexOf(1) + 1,
    0,
    data
  );
};

// 完结信息移除
const Compremove = (item, index) => {
  console.log(item, 'item');
  console.log(index, 'index');
  const cleanedItem = item.state ? '受款方' : '赔款方';
  // 尝试使用 HTML 字符串
  const message = `是否移除当前<span style="color: red; font-weight: bold">${cleanedItem}</span>?`;
  ElMessageBox.confirm(message, '提示', {
    dangerouslyUseHTMLString: true, // 如果组件支持，启用此选项以解析 HTML
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      form.value.completion.splice(index, 1);
      if (item.state) {
        form.value.Totalamountreceived -= item.money; //受款总金额
      } else {
        form.value.Totalamountcompensation -= item.money; //赔款总金额
      }
    })
    .catch(() => {});
};

// 提交
const onSubmit = () => {
  console.log(form.value);
  ruleFormRef.value.validate(valid => {
    if (!valid) {
      ElMessage({
        message: '息未填写完整，请根据提示填写完整!',
        type: 'warning',
      });
      return;
    }
    // // 货损照片上传判断
    // if (form.value.groundlineType == '1') {
    //   if (form.value.fileList.length < 2) {
    //     ElMessage({
    //       message: '请上传最低2张图片附件',
    //       type: 'warning',
    //     });
    //     return;
    //   }
    // }
    // // 串货图片附件
    // if (form.value.groundlineType == '3') {
    //   if (!form.value.fileList.length) {
    //     ElMessage({
    //       message: '请上传图片附件',
    //       type: 'warning',
    //     });
    //     return;
    //   }
    // }

    const message = `注意信息填写正确!点击确定将<span style="color: red;">提交修改工单</span>是否继续?`;
    ElMessageBox.confirm(message, '提示', {
      dangerouslyUseHTMLString: true, // 如果组件支持，启用此选项以解析 HTML
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(async () => {
      form.value.Pageloading = true; //开启页面加载

      // let DataSubmit = {
      //   packageEntityList: [], //新增的包件信息
      //   unPpackageEntityList: [], //取消的包件ID
      //   processorEntityList: [], //新增处理方
      //   decreaseImageEntityList: [], //损货图片
      //   unProcessorEntityList: [], //取消的处理方
      //   unDecreaseImageEntityList: [], //取消的损货图片
      //   completionRecipientEntities: [], //异常工单完结受款方(完成暂不可修改)
      //   completionRecordEntities: [], //异常工单完结赔款方(完成暂不可修改)
      //   aftersalesProcessingResultsDTO: {}, //处理结果（完成暂不可修改）
      //   personResponsibleDTO: [], //添加预计责任人
      //   unPersonResponsibleDTO: [], //取消预计责任人
      //   surveyRecordDTO: {}, //调查经过
      //   unCompletionRecipientEntities: [], //取消异常工单完结处理结果受款方
      //   unCompletionRecordEntities: [], //取消异常工单完结的赔款方
      // };
      //要修改的工单ID

      let submitData = {
        ...form.value.basis,
        identifying: form.value.basis.TabactiveName, //1订单2零担3库存品
      };
      submitData.id = $route.query.id;
      // 包件处理
      if (form.value.PackageList.length) {
        submitData.packageEntityList = [];
        form.value.PackageList.forEach(item => {
          submitData['packageEntityList'].push({
            packageCode: item.packageCode, //包条码
            waybillNumber: item.waybillNumber, //运单号
            orderCode: item.orderCode, //订单自编号
            first: item.first, //一级品
            secondary: item.secondary, //二级品
            brandName: item.brandName, //品牌
          });
        });
        // 订单自编号
        submitData.orderCode = form.value.PackageList[0].orderCode;
      }
      // 责任方处理
      if (form.groundlineType == '1') {
        submitData.processorEntityList = [];
        form.value.responsibilitiesList.forEach(item => {
          submitData['processorEntityList'].push({
            businessName: item.Responsibleoptions.find(res => res.value == item.businessId).label, //仓库名称
            businessId: item.businessId, //仓库ID
            conditions: 1, //固定参数
            typesOf: 1, //1责任方 ，2处理方
          });
        });
      }
      // 处理方处理
      if (form.value.basis.processor.length) {
        submitData.processorEntityList = [];
        form.value.basis.processor.forEach(item => {
          submitData['processorEntityList'].push({
            businessName: Processingoptions.value.find(res => res.value == item).label, //仓库名称
            businessId: item, //仓库ID
            conditions: 1, //固定参数
            typesOf: 2, //1责任方 ，2处理方
          });
        });
      }
      // 内部责任划分
      if (form.value.basis.discoveryNode != 3) {
        // 干线卸车环节不需要内部责任划分
        if (form.value.responsibilitiesList.length) {
          submitData.personResponsibleDTO = [];
          form.value.responsibilitiesList.forEach(item => {
            console.log(item);
            let data = {
              responsibilityRatio: item.responsibilityRatio, //责任占比
              tripartite: item.tripartite, //三方责任人
              description: item.description, //说明
            };
            // 责任人查询
            let Responsibleperson = item.ResponsibleoNameptions.find(
              res => res.id == item.personResponsibleId
            );
            console.log(Responsibleperson, 'Responsibleperson');

            if (form.value.groundlineType == '1') {
              data.personResponsibleName = item.personResponsibleId; //责任人名称
              data.businessName = item.Processingoptions.find(
                res => res.value == item.businessId
              ).label; //责任方
              data.businessId = item.businessId; //责任方id
            } else {
              data.personResponsibleId = Responsibleperson ? Responsibleperson.id : null; //责任人id
              data.personResponsibleName =
                item.ResponsibleoNameptions.find(res => res.id == item.personResponsibleId)?.name ||
                item.personResponsibleId; //责任人名称
              data.businessName = item.Responsibleoptions.find(
                res => res.value == item.businessId
              ).label; //责任方
              data.businessId = item.businessId; //责任方id
            }
            // 如果是自定义责任人就删除ID
            if (!data.personResponsibleId) {
              delete data.personResponsibleId;
            }
            submitData['personResponsibleDTO'].push(data);
          });
        }
      }

      // 图片处理
      if (
        form.value.fileList.length &&
        (form.value.basis.workOrderType == '1' || form.value.basis.workOrderType == '3')
      ) {
        submitData.decreaseImageEntityList = [];
        form.value.fileList.forEach(item => {
          console.log(item, '图片12');

          if (item.response || item.url) {
            submitData['decreaseImageEntityList'].push({
              imageName: item.response?.data.originalName || item.name, //图片名称
              imagePath: item.response?.data.link || item.url, //图片地址
              imageType: form.value.basis.workOrderType == 1 ? 10 : 20, //图片类型
            });
          }
        });
      }

      // 处理结果
      if (form.value.basis.result?.length) {
        submitData.aftersalesProcessingResultsDTO = {
          money: 0, //金额总和
          resultType: [], //处理结果名称
          processingMoneyEntityList: [],
        };
        let PlayName = []; //赔付方式名称
        form.value.Claimamount.forEach(item => {
          PlayName.push(
            item.Paymentmethod.find(res => res.value == item.compensationMethod)?.label || ''
          );
          submitData.aftersalesProcessingResultsDTO['processingMoneyEntityList'].push({
            compensationMethodName:
              item.Paymentmethod.find(res => res.value == item.compensationMethod)?.label || '', //支付方式名称
            compensationMethod: item.compensationMethod, //支付方式value
            compensationTime: item.compensationTime, //支付时间
            money: item.money, //支付金额
            paymentUnit: item.paymentUnit, //支付单位
            resultName: item.title, //处理结果方式  下补单
            resultType:
              Processingresultsoptions.value.find(res => res.label == item.title)?.value || '', //处理结果方式 value
            typesOf: 1, //固定参数
          });
        });
        submitData.aftersalesProcessingResultsDTO.resultType = form.value.Claimamount.map(
          res => res.title
        ).join(','); //处理结果名称

        let filteredArray = form.value.Claimamount.map(res => res.money); //金额总和

        submitData.aftersalesProcessingResultsDTO.money = filteredArray.reduce(
          (accumulator, currentValue) => accumulator + currentValue,
          0
        );
        // 支付方式名称
        submitData.aftersalesProcessingResultsDTO.compensationMethod = PlayName.join(',');
        submitData.aftersalesProcessingResultsDTO.resultDescription =
          form.value.basis.resultDescription; //处理结果说明
        delete form.value.basis.resultDescription; //删除无用信息
      }

      console.log(submitData, '处理好的参数');
      form.value.Pageloading = true; //关闭页面加载

      //是否直接提交到处理结果
      if (form.value.Processed) {
        submitData.workOrderStatus = 30;
        submitData.resultIdentification = 1;
      } else {
        submitData.resultIdentification = 2;
      }
      $_modifyData(submitData)
        .then(res => {
          if (res.data.code == 200) {
            ElMessage({
              message: res.data.msg,
              type: 'success',
            });
            $useStore.commit('DEL_TAG_CURRENT'); //关闭当前页面
            $router.push('/aftersales/aftersalesWorkOrder');
            // ElMessageBox.confirm('当前工单操作成功,是否继续操作?', '提示', {
            //   confirmButtonText: '确定',
            //   cancelButtonText: '返回',
            //   type: 'warning',
            // })
            //   .then(async () => {
            //     form.value = await deepClone(formCopy.value); //用于拷贝一份重置数据
            //     await PageState();
            //     await ruleFormRef.value.resetFields();
            //     form.value.Pageloading = false; //关闭页面加载
            //   })
            //   .catch(() => {
            //     $useStore.commit('DEL_TAG_CURRENT'); //关闭当前页面
            //     $router.push({
            //       path: '/aftersales/aftersalesWorkOrder',
            //     });
            //   });
          }
        })
        .catch(error => {
          console.log(error, 'error');
        })
        .finally(() => {
          form.value.Pageloading = false; //关闭页面加载
        });
    });
  });
};

// 处理结果修改提交
const UnpaidClaimsEdited = () => {};

//申诉成立（完结提交）
const AppealEditor = () => {
  console.log(Processingoptions.value);
  console.log(form.value.responsibilitiesList);
  console.log(form.value.completion);
  let completion = form.value;
  let _warehouseId = form.value.completion.find(res => res.state == 1 && !res.warehouseId);
  if (_warehouseId) {
    ElMessage({
      message: `有赔款方仓库未选择`,
      type: 'warning',
    });
    return;
  }
  ElMessageBox.confirm('是否提交完结信息?', '完结', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      let info = JSON.parse(JSON.stringify(form.value)); //拷贝要提交的数据
      console.log(info, 'info');
      let data = {
        id: $route.query.id,
        completionRecipientEntities: [], //受款方
        completionRecordEntities: [], //赔款方
        reasonArbitration: form.value.basis.arbitrate, //仲裁原因
        typesOf: '1', //申诉完结编辑新增标识
        appealId: $route.query.appealID, //申诉ID
      };
      //对完结结信息循环处理
      if (form.value.completion?.length) {
        form.value.completion.forEach(item => {
          if (item.state == 0) {
            // 赔款方
            data['completionRecordEntities'].push({
              reason: item.reason, //原因
              money: item.money, //金额
              compensationPersonnel: item.compensationPersonnel, //责任人（手动填写）
              warehouseId: item.warehouseId, //赔款方是那个仓库（传入ID）
              workOrderId: info.id, //异常工单
            });
          } else if (item.state == 1) {
            // 受款方
            data['completionRecipientEntities'].push({
              reasonReceivingPayment: item.reason, //受款原因
              money: item.money, //金额
              responsibleParty: form.value.responsibilitiesList
                .map(aItem =>
                  Processingoptions.value
                    .filter(bItem => bItem.value === aItem.businessId)
                    .map(match => match.label)
                    .join(',')
                )
                .join(','),
              warehouseId: item.warehouseId, //赔款方是那个仓库（传入ID）
              workOrderNumber: info.workOrderNumber, //工单号
              workOrderId: info.id, //异常工单
            });
          }
        });
      }
      console.log(data, '处理好的值');
      // 赔款方
      form.value.Pageloading = true; //开启页面加载
      $_updateCompletionEnd(data)
        .then(res => {
          console.log(res, '完结成功返回值');
          if (res.data.code == 200) {
            ElMessage({
              showClose: true,
              message: res.data.msg,
              type: 'success',
            });
            form.value.Pageloading = false; //开启页面加载
            $useStore.commit('EDIT_REFRESHITEM', { title: 'aftersalesWorkOrder', status: true });
            $useStore.commit('Customer_Menu', 6); //要刷新的菜单
            $useStore.commit('DEL_TAG_CURRENT'); //关闭当前页面
            $router.push({ path: '/aftersales/aftersalesWorkOrder' });
          }
        })
        .catch(error => {
          form.value.Pageloading = false; //关闭页面加载
          console.log(error, '提交失败');
        });
    })
    .catch(() => {});
};

const TabactiveClick = (a, b) => {
  console.log(a, b);
};
</script>

<style scoped lang="scss">
.pageContent {
  padding: 10px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
:deep(.tablemun) {
  height: 0;
  padding: 0;
  .el-tabs__nav-scroll {
    // border-left: 1px solid #dcdfe6;
    // border-right: 1px solid #dcdfe6;
  }
}
.placeholder {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  border-left: 1px solid #dcdfe6;
  border-right: 1px solid #dcdfe6;
}

// 主体内容
.content {
  padding: 10px;
  width: 100%;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  border-radius: 2px;
  .tablemunTop {
    display: flex;
    justify-content: space-between;

    .el-form-item {
      width: 26%;
      display: flex;
      align-items: center;
      :deep(.el-form-item__label) {
        margin-bottom: 0 !important;
      }
    }
  }
}
// 包件列表
.Packagebox {
  .el_Package {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #afbdc3;
    margin-bottom: 10px;
    .el_activPackage_btton {
      flex: 1;
      display: flex;
      justify-content: space-between;
      margin: 0px 2px;
    }
  }
  :deep(.is-active) {
    font-weight: bold;
  }
  :deep(.Package) {
    width: 83%;
    display: flex;
    align-items: center;
    .el-form-item {
      width: 14%;
      margin-right: 6px;
      .el-form-item__label {
        margin-bottom: 0;
      }
    }
    .Number {
      width: 20px;
      height: 20px;
      // background-color: #409eff;
      color: #409eff;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      margin-right: 10px;
    }
  }
  .el_addPackage {
    border: none;
    color: #ffffff;
  }
  .el_top {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    height: 40px;
    .el_Package_num {
      font-size: 14px;
      height: 80%;
      border-bottom: 1px solid #409eff;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2px;
      box-sizing: border-box;
      span {
        color: #666;
        font-weight: 500;
      }
    }
  }
}
.el_details {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  .el-form-item {
    width: 78%;
  }
}
.Basicinformation {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  :deep(.el-form-item) {
    width: 10.5%;
    margin-right: 6px;
    .el-form-item__content {
      .el-input {
        height: 100% !important;
        .el-input__wrapper {
          height: 100%;
        }
      }
    }
    .el-form-item__label {
      margin-bottom: 0;
    }
  }
  .el_Basic {
    flex: 1;
    display: flex;
    min-width: 32%;
    .el_Processing {
      min-width: 50%;
    }
    :deep(.el_Investigation) {
      flex: 1;
    }
    // :deep(.is-error) {
    //   .el-input--suffix {
    //     .el-textarea__inner:focus {
    //       box-shadow: 0 0 0 1px #ff0000 inset !important;
    //     }
    //   }
    // }
  }
}
.responsibilities {
  :deep(.el-upload-dragger) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .el_responsibilities {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    .el-form-item {
      width: 14%;
      margin-right: 6px;
      .el-input-number {
        width: 100%;
      }
    }
    :deep(.el_responsibilities_box) {
      width: 80%;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #afbdc3;
      margin-bottom: 10px;
      .el-form-item {
        .el-form-item__label {
          margin-bottom: 0;
        }
      }
      .el_Investigation {
        flex: 1;
      }
      .Number {
        width: 20px;
        height: 20px;
        // background-color: #409eff;
        color: #409eff;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        margin-right: 10px;
      }
    }
  }
  .el_top {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    height: 40px;
    .el_addPackage {
      border: none;
    }
    .el_Package_num {
      font-size: 14px;
      height: 80%;
      border-bottom: 1px solid #409eff;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2px;
      box-sizing: border-box;
      span {
        color: #666;
        font-weight: 500;
      }
    }
  }
  :deep(.is-active) {
    font-weight: bold;
  }
}
// 处理结果
:deep(.Processingresults) {
  .is-active {
    font-weight: bold;
  }
  .el_top {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    height: 40px;
    .el_addPackage {
      border: none;
    }
    .el_Package_num {
      font-size: 14px;
      height: 80%;
      border-bottom: 1px solid #409eff;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 2px;
      box-sizing: border-box;
      span {
        color: #666;
        font-weight: 500;
      }
    }
  }
  .el_Processingresults {
    display: flex;
    flex-wrap: wrap;
    .el_Processingresults_box {
      display: flex;
      flex-direction: column;
      width: 48%;
      .el_title {
        display: flex;
        width: fit-content;
        padding: 0 10px;
        margin-bottom: 4px;
        // border-left: 3px solid #172e60;
        position: relative;
      }
      .el_title::after {
        position: absolute;
        content: '';
        width: 6px;
        height: 6px;
        border-radius: 50%;
        left: 0;
        top: 50%;
        transform: translate(0, -50%);
        background-color: #172e60;
      }
      .el_Processingresults_box_list {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-right: 11px;
        .el-form-item {
          width: 24%;
          .el-input-number {
            width: 100% !important;
          }
          .el-form-item__label {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}
.pageContent {
  height: 100vh;
}
.flex-c-c {
  position: fixed;
  bottom: 20px;
  left: 50%;
  z-index: 999999;
}
:deep(.el-loading-mask) {
  position: fixed;
  left: 12%;
  top: 10%;
}
.el-ckbtn {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  margin-top: 20px;
  .Compensationamount {
    position: relative;
    margin-right: 20px;
    span {
      position: absolute;
      top: -8px;
      right: -8px;
      width: 24px;
      height: 24px;
      background-color: #f00;
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
    }
  }
}
:deep(.Completioninformation) {
  .el-tabs__header {
    margin-bottom: 0;
  }
  .is-active {
    font-weight: bold;
  }
  .el_compItem {
    width: 80%;
    display: flex;
    align-items: baseline;

    .el-form-item {
      display: flex;
      align-items: baseline;
      margin-right: 12px;
      width: 16%;
      .el-input-number {
        width: 100%;
      }
    }
    .reason {
      width: 36%;
    }
    .title {
      width: 8%;
      font-weight: bold;
      .el-form-item__label {
        font-size: 14px;
      }
    }
  }
  .el_left {
    display: flex;
    .el_left_btn {
      flex: 1;
    }
  }
  .el_money {
    width: max-content;
    margin-bottom: 6px;
    span {
      margin-right: 34px;
      font-size: 13px;
      border: 1px solid #ccc;
      padding: 4px;
      border-radius: 2px;
      font-weight: bold;
    }
    b {
      color: #f00;
    }
  }
}
:deep(.arbitration) {
  .is-active {
    font-weight: bold;
  }
}
:deep(.placeholder) {
  .el-tabs {
    height: 100%;
    .el-tabs__content {
      display: none;
    }
  }
}
:deep(.el_foort_img) {
  .el-upload {
    display: none;
  }
}
</style>
