zhywpt-web/src/views/onlineBusinessHall/automobileSeroice/selfServiceOrder/index.vue

<template>
  <div>
    <crud-template v-if="itemStart" class="as-weight" :ref="(el) => (crudRef = el)" :home-data="field"
      @btnSearch="btnSearch" @selectionChangeHandle="selectionChangeHandle" @refreshLeft="refreshLeft"
      :tableData="tableData" @CurrentChange="handleCurrentChange" @cancel="cancel" @handleInfo="handleInfo"
      @pageSizeChange="(val) => {
        field.paging.currentPage = 1
        field.paging.pageSize = val
        getList()
      }">
      <template #search>
        <el-input maxlength="60" v-trim clearable v-model="searchForm.id" style="width: 200px" placeholder="请输入工单号码" />
        <el-select clearable v-model="searchForm.questionType" style="width: 200px" placeholder="请选择工单类型">
          <el-option v-for="item in vehicleTypes" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select clearable v-model="searchForm.orderSourcePage" style="width: 200px" placeholder="请选择订单来源">
          <el-option v-for="item in SOURCE_TYPE" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-input maxlength="60" v-trim clearable v-model="searchForm.vehiclePlate" placeholder="请输入车牌号"
          :style="{ width: '320px', margin: '0 10px 10px 0' }">
          <template #append>
            <el-select clearable v-model="searchForm.vehiclePlateColor" placeholder="请选择车牌颜色"
              style="width: 150px; height: 32px">
              <el-option :label="item.label" :key="item.label" :value="item.value" v-for="item in VEHICLE_COLOR_TYPE" />
            </el-select>
          </template>
        </el-input>
        <el-select clearable v-model="searchForm.orderStatus" style="width: 200px" placeholder="请选择工单状态">
          <el-option v-for="item in orderType" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-select clearable v-model="searchForm.orderType" style="width: 200px" placeholder="工单是否领取">
          <el-option v-for="item in isReceive" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <!-- <div class="date-label">创建时间:</div> -->
        <el-date-picker unlink-panels v-model="searchForm.time" type="datetimerange" range-separator="到"
          start-placeholder="订单申请开始日期" end-placeholder="订单申请结束日期" format="YYYY-MM-DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss" />
      </template>
      <template #CustomButton>
        <el-button  type="primary" @click="getOrderFn(1)">
          <span style="font-family: `楷体`">批量领取订单</span>
        </el-button>
      </template>
      <template #tableOperation>
        <el-tabs @tab-click="handleClick" v-model="activeName">
          <el-tab-pane v-for="(item, index) in tageList" :key="index" :label="item.label"
            :name="item.name"></el-tab-pane>
        </el-tabs>
      </template>
      <template #operation="{ scope }">
        <el-button style="margin: 10px 5px;" type="warning" size="small"
          @click="audit(scope.$index, scope.row, false)">
          详情
        </el-button>
        <el-button style="margin: 10px 5px;" v-if=" (scope.row.orderStatus == 0 && scope.row.receiveStatus == 1 )" type="success" size="small"
          @click="audit(scope.$index, scope.row, true)">
          处理
        </el-button>
       
        <el-button :loading="scope.row.btnLoading"
          v-if="scope.row.receiveStatus ==null"
          type="primary" size="small" @click="getOrderFn(2, scope.row)">
          <span style="margin: 10px 5px;">领取订单</span>
        </el-button>
      </template>
    </crud-template>
<!--    <el-dialog v-model="check" width="30%" title="审核">-->
<!--      <el-form ref="form" :model="autdis"-->
<!--        :rules="{ reason: [{ required: true, message: '驳回类型不能为空', trigger: 'change' }] }" label-width="80px">-->
<!--        <el-form-item label="">-->
<!--          <el-radio-group v-model="autdis.auditStatus">-->
<!--            <el-radio label="true">审核通过</el-radio>-->
<!--            <el-radio label="false">审核不通过</el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
<!--        <el-form-item v-if="autdis.auditStatus != 'true'" label="审核原因" prop="reason">-->
<!--          <el-select clearable @change="autdisReasonChange" v-model="autdis.reason" placeholder="请选择审核原因类型">-->
<!--            <el-option :label="item.label" :key="item.value" :value="item.value"-->
<!--              v-for="item in NEW_CSMSN_APPLY_REASON" />-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item v-if="autdisReasonType == '8' && autdis.auditStatus != 'true'" label="其他原因" prop="reason1">-->
<!--          <el-input v-trim clearable type="textarea" v-model="autdis.reason1" :placeholder="`审核不通过原因`" maxlength="200"-->
<!--            show-word-limit></el-input>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <template #footer>-->
<!--        <el-button @click="check = false">取 消</el-button>-->
<!--        <el-button type="primary" @click="checkForm(form)">确 定</el-button>-->
<!--      </template>-->
<!--    </el-dialog>-->
  </div>
  <!-- 处理弹窗 -->
  <el-dialog v-model="exchangeInformationDialog" width="80%" :title="exchangeInformationDialogTitle"
    @close="exchangeInformationClose">
    <el-form ref="exchangeInformationRef" :rules="rules" :model="exchangeInformationForm" label-width="120px">
      <el-form-item style="font-weight: 900;" label="处理意见" v-if="exchangeInformationDialogTitle == '处理'"></el-form-item>
      <el-form-item label="处理意见" prop="appeal" v-if="exchangeInformationDialogTitle == '处理'">
        <el-input v-trim clearable type="textarea" maxlength="100" show-word-limit
          v-model="exchangeInformationForm.appeal" placeholder="请输入处理意见"></el-input>
      </el-form-item>
      <el-form-item label="处理结果" prop="auduitStatus" v-if="exchangeInformationDialogTitle == '处理'">
        <el-radio-group v-model="exchangeInformationForm.auduitStatus">
          <el-radio :label="1">补充资料</el-radio>
          <el-radio :label="0">处理</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="添加附件" v-if="exchangeInformationDialogTitle == '处理'">
        <el-upload ref="uploadRef" v-model:file-list="fileList" list-type="picture-card" :action="BaseService.getFileUploadUrl()" :limit="5"
          :on-exceed="handleExceed" :on-success="handleSuccess" :before-upload="beforeUpload" multiple
          accept="image/*,.pdf,.doc,.docx,.xls,.xlsx">
          <el-icon>
            <Plus />
          </el-icon>
          <template #file="{ file }">
            <div>
              <img v-if="file.type && file.type.includes('image')" class="el-upload-list__item-thumbnail"
                :src="file.url || file.raw?.url" alt="" />
              <div v-else class="file-icon">
                <el-icon :size="30">
                  <Document />
                </el-icon>
                <span class="file-name">{{ file.name }}</span>
              </div>
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePreview(file)">
                  <el-icon><zoom-in /></el-icon>
                </span>
                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                  <el-icon>
                    <Delete />
                  </el-icon>
                </span>
              </span>
            </div>
          </template>
          <template #tip>
            <div class="el-upload__tip">
              (不限于图片、文件,不超过5个)
            </div>
          </template>
        </el-upload>
        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
      </el-form-item>
      <el-form-item style="font-weight: 900;" label="基本信息"></el-form-item>
      <!-- <el-form-item label="是否需要邮寄" prop="sendStatus">
        <el-radio-group v-model="exchangeInformationForm.sendStatus">
          <el-radio label="1">邮寄</el-radio>
          <el-radio label="0">不邮寄</el-radio>
        </el-radio-group>
      </el-form-item> -->
      <div style="display: flex;justify-content: start;">
        <div style="flex:0.6">
          <el-form-item label="姓名" prop="consignee"><span style="color:gray;">{{ visiinfoDatableList.customerName
          }}</span>
            <!-- <el-input maxlength="60" v-trim clearable v-model="exchangeInformationForm.consignee"
            placeholder="请输入收件人姓名"></el-input> -->
          </el-form-item>
          <el-form-item label="联系方式" prop="consigneeTel"><span style="color:gray;">{{ visiinfoDatableList.customerTel
              }}</span>
            <!-- <el-input maxlength="60" v-trim clearable v-model="exchangeInformationForm.consigneeTel"
            placeholder="请输入收件人电话"></el-input> -->
          </el-form-item>
        </div>
        <div>
          <el-form-item label="车牌号码" prop="region"><span style="color:gray;">{{ visiinfoDatableList.vehiclePlate
          }}</span>
            <!-- <el-cascader v-model="exchangeInformationForm.region" placeholder="请选择收货地址" :options="pcaText" /> -->
          </el-form-item>
          <el-form-item label="车牌颜色" prop="address"><span style="color:gray;">{{ color }}</span>
          </el-form-item>
        </div>

        <!-- <el-form-item label="邮政编码" prop="postalCode">
          <el-input maxlength="60" v-trim clearable v-model="exchangeInformationForm.postalCode"
            placeholder="请输入邮政编码"></el-input>
        </el-form-item> -->
      </div>
      <el-form-item style="font-weight: 900;" label="工单信息"></el-form-item>
      <div style="display: flex;justify-content: start;flex-wrap:wrap ;">
        <div style="flex:0.4">
          <el-form-item label="工单号码" prop="consignee"><span style="color:gray;">{{ visiinfoDatableList.id }}</span>
            <!-- <el-input maxlength="60" v-trim clearable v-model="exchangeInformationForm.consignee"
            placeholder="请输入收件人姓名"></el-input> -->
          </el-form-item>
          <el-form-item label="工单类型" prop="consigneeTel"><span style="color:gray;">{{ getDictLabel(SELF_SERVICE_TYPE, visiinfoDatableList.questionType) }}</span>
            <!-- <el-input maxlength="60" v-trim clearable v-model="exchangeInformationForm.consigneeTel"
            placeholder="请输入收件人电话"></el-input> -->
          </el-form-item>
        </div>
        <div style="flex:0.4">
          <el-form-item label="是否ETC用户" prop="consignee"><span style="color:gray;"
              v-if="visiinfoDatableList.etcUser == 0">否</span>
            <span style="color:gray;" v-if="visiinfoDatableList.etcUser == 1">是</span>
            <!-- <el-input maxlength="60" v-trim clearable v-model="exchangeInformationForm.consignee"
            placeholder="请输入收件人姓名"></el-input> -->
          </el-form-item>
          <el-form-item label="订单来源" prop="orderSource"><span style="color:gray;">{{ getDictLabel(SOURCE_TYPE, visiinfoDatableList.sourceType) }}</span>
            <!-- <el-input maxlength="60" v-trim clearable v-model="exchangeInformationForm.consigneeTel"
            placeholder="请输入收件人电话"></el-input> -->
          </el-form-item>
        </div>
        <div style="flex:0.4">
          <el-form-item label="发生时间" prop="region"><span style="color:gray;">{{ visiinfoDatableList.insertTime }}</span>
            <!-- <el-cascader v-model="exchangeInformationForm.region" placeholder="请选择收货地址" :options="pcaText" /> -->
          </el-form-item>
          <el-form-item label="申请时间" prop="address"><span style="color:gray;">{{ visiinfoDatableList.insertTime
          }}</span>
            <!-- <el-input maxlength="60" v-trim clearable v-model="exchangeInformationForm.address"
            placeholder="请输入详细地址"></el-input> -->
          </el-form-item>
        </div>
      </div>
      <div class="customer-appeals-section">
        <div class="section-title">客户诉求:</div>
        <div v-for="(item,index) in visiinfoDatableList.userAppeals" :key="index" class="appeal-item">
          <div class="appeal-date">
            <el-icon><Clock /></el-icon>
            申请日期：{{ item.insertTime }}
          </div>
          <div class="appeal-content">
            <el-icon><ChatDotRound /></el-icon>
            诉求：{{ item.userAppeals }}
          </div>
        </div>
      </div>
      
      <div class="file-section">
        <div class="section-title">文件:</div>
        <div v-for="(item,index) in visiinfoDatableList.supportingMaterialsUrls" :key="index" class="file-item">
          <div class="file-info">
            <el-icon><Document /></el-icon>
            <span class="file-label">附件{{index+1}}:</span>
            <span class="file-name">{{ item.supportingMaterialsUrls }}</span>
            <el-button type="primary" size="small" @click="download(item.supportingMaterialsUrls)" class="download-btn">
              下载
            </el-button>
          </div>
        </div>
      </div>
    </el-form>
    <template #footer>
      <el-button @click="exchangeInformationDialog = false" v-if="exchangeInformationDialogTitle == '处理'">取
        消</el-button>
      <el-button type="primary" @click="exchangeInformationsubmitForm(exchangeInformationRef)"
        v-if="exchangeInformationDialogTitle == '处理'">确 定</el-button>
    </template>
  </el-dialog>
  <!-- 详情弹窗 -->
  <el-dialog class="detail-dialog" :title="detailDialogTitle" v-model="visible">
    <div v-if="detailDialogTitle == '订单详情'">
      <el-affix style="position: absolute; top: 0; right: 80px" v-if="6 == visiinfoDatable.orderStep && autdisButton"
        :offset="offset + 50">
        <el-button type="danger" size="small" @click="handleAudit">
          审核
        </el-button>
      </el-affix>
      <orderInfo :infoData="visiinfoDatable"></orderInfo>
    </div>
  </el-dialog>
</template>

<!-- 订单审核 -->
<script lang="ts" setup>
// @ts-ignore crudFrom模板
import CrudTemplate from '@/crud/index.vue'
import { ref, computed, onMounted, reactive, nextTick, ComputedRef } from 'vue'
import $storeinitData from '@/store/initData' //引入tab vuex
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, ZoomIn, Delete, Document, Clock, ChatDotRound, Download } from '@element-plus/icons-vue'
import BaseService from '@/utils/baseService'
import { useRoute } from 'vue-router'
import { IsPermission } from '@/router/routerUtil'
import moment from 'moment'
import { getCache } from '@/utils/cache'
import { getAudit, getOrderInfo } from '@/api/onlineBusinessHall/orderManagement'
import orderInfo from './orderInfo.vue'
import { log } from 'console'
import { getDictLabel } from '@/utils/utils'

//或取路由传入过来的对象数据
const route = useRoute()
const exchangeInformationDialog = ref(false) // 换货弹框
const exchangeInformationDialogTitle = ref('')
const visiinfoDatableList = ref({})
const crudRef = ref()
const itemStart = ref(true)
const exchangeInformationRef = ref()
const searchForm = ref({
  artificialStatus: '',
  id: '',
  questionType: '',
  vehiclePlate: '',
  orderSourcePage: '',
  orderType: '',
  orderStatus: '',
  // time: '',
  vehiclePlateColor: '',
})
const exchangeInformationForm = ref<any>({
  appeal: '',
  attachFile: '',
  auduitStatus: '',
})
const rules = {
  appeal: [
    {
      required: true,
      message: '请输入处理意见',
      trigger: 'blur',
    },
  ],
  auduitStatus: [
    {
      required: true,
      message: '请选择处理结果',
      trigger: 'blur',
    },
  ],
}
const overdueList = [
  {
    label: '逾期',
    value: '1',
  },
  {
    label: '未逾期',
    value: '0',
  },
]
const artificialStatusList = [
  {
    label: '系统审核',
    value: 2
  },
  {
    label: '人工审核',
    value: 1
  },
]
const isReceive = [
  {
    label: '是',
    value: 0
  },
  {
    label: '否',
    value: 1
  },
]
const orderType = [
  {
    label: '待业务员处理',
    value: 0
  },
  {
    label: '待用户反馈',
    value: 1
  },
  {
    label: '结束',
    value: 2
  },
]
//订单阶段
const ORDER_STAGE_TYPE = computed(() => {
  return $storeinitData.state.dictData['ORDER_STAGE_TYPE'] || []
})

//订单状态
const ORDER_TYPE = computed(() => {
  return $storeinitData.state.dictData['ORDER_TYPE'] || []
})
//车牌颜色
const VEHICLE_COLOR_TYPE = computed(() => {
  return $storeinitData.state.dictData['VEHICLE_COLOR_TYPE'] || []
})

// 车辆类型
const vehicleTypes = computed(() => {
  return $storeinitData.state.dictData['VAN_TYPE'] || []
})

//产品类型
const PRODUCT_TYPE = computed(() => {
  return $storeinitData.state.dictData['PRODUCT_TYPE_NEW'] || []
})

//办理模式
const PATTERN_TYPE = computed(() => {
  return $storeinitData.state.dictData['PATTERN_TYPE'] || []
})

//订单状态
const ORDER_STATUS = computed(() => {
  return $storeinitData.state.dictData['ORDER_STATUS'] || []
})
const SOURCE_TYPE = computed(() => {
  return $storeinitData.state.dictData['SOURCE_TYPE'] || []
})

// 自助服务类型
const SELF_SERVICE_TYPE = computed(() => {
  return $storeinitData.state.dictData['SELF_SERVICE_TYPE'] || []
})
const CERTIFICATE_TYPE = computed(() => {
  return $storeinitData.state.dictData["CERTIFICATE_TYPE"] ?? [];
}); //用户证件类型

const NEW_CSMSN_APPLY_REASON = computed(() => {
  return $storeinitData.state.dictData['NEW_CSMSN_APPLY_REASON'] || []
})


const value1 = ref() // 筛选时间
const tableData: any = ref([])
const initItem = {
  id: '',
}
const addForm: any = ref(initItem)
let formLabelWidth = '180px'
//表单数据配置
const field = ref({
  tabSize: 'small', //Table 的尺寸 large / default /small (默认default)
  searchShow: true, //是否显示搜索模块(默认false) - 临时设置为true用于调试
  border: true, //是否添加边框(默认false)
  dialogCustom: false, //自定义Dialog (默认false)
  dialogFooter: true, //隐藏弹窗页脚显示 (默认false)
  dialogWidth: '60%', //dialog宽度 (默认40%)
  crudShow: true, //是否显示CURD操作栏 (默认true)
  crudChildShow: true, //是否显示CURD子操作栏 (默认true)
  paginStart: true, //是否显示分页查询 (默认false)
  titleDialog: '', //table 标题
  tableOperation: true,
  isPageSizes: true,
  pageLayout: 'total, sizes, prev, pager, next',
  paging: {
    pageSize: 10,
    currentPage: 1,
    total: 0,
  },
  crud: {
    add: false,
    edit: false,
    delete: false,
    derive: false,
    search: false,
    refresh: false,
  },
  searchOperation: {
    isDownload: false,
    isAdd: false,
    isTransferMachine: false,
  },
  tableSize: -1,
  operateShow: true, //是否为表格添加操作栏(默认true)
  operateTitle: '操作', //操作栏标题(默认为"")
  operateFixed: true, //操作栏是否固定(默认false)
  operateWidth: '180', //操作栏宽度
  operate: {
    edit: false, //是否编辑(默认true)
    delete: false, //是否删除(默认true)
    announcement: false, // 公告
    info: false, // 详情
    remark: false, // 详情
  },
  extend: [
    {
      type: 'index',
      label: '序号',
    },
  ],
  field: [
    {
      label: '',
      prop: '',
      hide: !IsPermission(route, 'GET_ORDER_LIST'),
      type: 'selection',
    },
    {
      prop: 'id',
      label: '工单号码',
    },
    {
      prop: 'questionType',
      label: '工单类型',
      listData: PRODUCT_TYPE
    },
    {
      prop: 'sourceType',
      label: '订单来源',
      listData: SOURCE_TYPE
    },
    {
      prop: 'customerTel',
      label: '用户电话',
    },
    {
      prop: 'customerName',
      label: '用户姓名',
    },
    {
      prop: 'appeal',
      label: '用户诉求',
    },
    {
      prop: 'vehiclePlate',
      label: '车牌号',
    },
    {
      prop: 'vehiclePlateColor',
      label: '车牌颜色',
      listData: VEHICLE_COLOR_TYPE
    },
    {
      prop: 'orderStatus',
      label: '工单状态',
      listData: orderType
    },
    // {
    //   prop: 'promotionModes',
    //   label: '办理方式',
    //   listData: PATTERN_TYPE
    // },
    // {
    //   prop: 'isValueCard',
    //   label: '卡类型',
    //   funRuleStarts: true,
    //   funRule: (money: any) => {
    //     //1-储值卡 2-记账卡
    //     return money == '1' ? '储值卡' : '记账卡'
    //   },
    // },
    // {
    //   prop: 'type',
    //   label: '车辆类型',
    //   listData: vehicleTypes
    // },
    // {
    //   prop: 'userType',
    //   label: '用户类型', //PERSONAL_USER - 个人用户 UNIT_USER - 单位用户
    //   funRuleStarts: true,
    //   funRule: (money: any) => {
    //     return money === 'PERSONAL_USER' ? '个人用户' : '单位用户'
    //   },
    // },
    // {
    //   prop: 'customerTel',
    //   label: '手机号',
    // },
    // {
    //   prop: 'customerIdtype',
    //   label: '证件类型',
    //   listData: CERTIFICATE_TYPE,
    // },
    // {
    //   prop: 'cusotmerIdnum',
    //   label: '证件号',
    // },

    // {
    //   prop: 'cardId',
    //   label: '卡号',
    // },
    // {
    //   prop: 'obuId',
    //   label: '签号',
    // },
    // {
    //   prop: 'amount',
    //   label: '订单金额',
    //   funRuleStarts: true,
    //   funRule: (money: any) => {
    //     return !money || money === 0 ? '---' : money / 100 + ' 元'
    //   },
    // },
    // {
    //   prop: 'isMigrateData',
    //   label: '系统来源',
    //   funRuleStarts: true,
    //   funRule: (isMigrateData: any) => {
    //     return isMigrateData == '0' ? '新系统订单' : '老系统订单'
    //   },
    // },
    // {
    //   prop: 'orderStatus', //1 - 已取消 0 - 正常
    //   label: '订单状态',
    //   listData: ORDER_STATUS
    //   // funRuleStarts: true,
    //   // funRule: (money: any) => {
    //   //   return money === '0' ? '正常' : '已取消'
    //   // },
    // },
    // {
    //   width: '180px',
    //   prop: 'orderStep', //
    //   label: '订单阶段',
    //   funRuleStarts: true,
    //   funRule: (money: any) => {
    //     return getLabel(ORDER_STAGE_TYPE, money)
    //   },
    // },
    // {
    //   width: '180px',
    //   prop: 'orderType', //
    //   label: '订单类型',
    //   funRuleStarts: true,
    //   funRule: (money: any) => {
    //     return getLabel(ORDER_TYPE, money)
    //   },
    // },
    // // {
    // //   width: '180px',
    // //   prop: 'artificialStatus', //
    // //   label: '审核类型',
    // //   funRuleStarts: true,
    // //   funRule: (value: any) => {
    // //     return value == '1' ? '人工审核' : '系统审核'
    // //   },
    // // },
    // {
    //   width: '180px',
    //   prop: 'auditPerson', //
    //   label: '审核人',
    // },
    {
      width: '150px',
      prop: 'insertTime',
      label: '申请日期',
      funRuleStarts: true,
      funRule: (money: any) => {
        return money ? money.replace('T', ' ') : '---'
      },
    },
  ],
})
const data = { bucket: '' }
const fileList = ref([])
const fileListData = ref([])
const uploadImg = ref()
const dialogVisible = ref(false);
const dialogImageUrl = ref('');
const disabled = ref(false);
const handleExceed = () => {
  ElMessage.warning('最多只能上传5个文件');

};
const handleSuccess = (response: any) => {
  console.log(fileList.value, 'fileListfileList')
  console.log(response.data, 'response.dataresponse.data')
  fileListData.value.push( response.data.ossFilePath)
  console.log(fileListData.value, 'fileListData.valuefileListData.value')
};
const beforeUpload = (file) => {
  const isImage = file.type.includes('image');
  const isLt5M = file.size / 1024 / 1024 < 5;

  if (!isImage && !isLt5M) {
    ElMessage.error('文件大小不能超过5MB');
    return false;
  }

  // 可以在这里添加更多的文件类型验证
  return true;
};

const handleRemove = (file) => {
  const index = fileList.value.indexOf(file);
  if (index !== -1) {
    fileList.value.splice(index, 1);
    fileListData.value.splice(index, 1);
    console.log(fileListData.value, 'fileListData.valuefileListData.value')
  }
};

const handlePreview = (file) => {
  const isImage = file.type && file.type.includes('image');
  if (isImage) {
    dialogImageUrl.value = file.url || file.raw?.url;
    dialogVisible.value = true;
  } else {
    window.open(file.url || file.raw?.url);
  }
};
function getLabel(item, selectedValue) {
  let data = item.value
  let selectedLabel = ''
  for (var i = 0; i < data.length; i++) {
    if (data[i].code == selectedValue) {
      selectedLabel = data[i].name
      break
    }
  }
  return selectedLabel
}

function handleInfo(value, row) {
}
// 提交
function exchangeInformationsubmitForm() {
  exchangeInformationRef.value.validate((valid: boolean) => {
    // if (!valid) {
    //     return false;
    // }
    console.log(exchangeInformationForm.value, 'exchangeInformationForm');
    if (exchangeInformationForm.value.auduitStatus == 1) {
      ElMessageBox.confirm('需要补充资料吗?', '补充提示', {
        confirmButtonText: '确认补充',
        cancelButtonText: '取消',
        type: 'warning',
        draggable: true,
      })
        .then(() => {
          let api = '/managew/selfService/salesmanUpload';
          let params = {
            ...exchangeInformationForm.value,
            serviceOrderId:serviceOrderId.value
          }
          params.attachFile = fileListData.value.join(',')
          BaseService.postN(api, params).then((res: any) => {
            if (res && res.statusCode === 0) {
              let bizContent = res.data
              console.log(bizContent, 'bizContentbizContentbizContent')
              ElMessage.success(res.message)
              exchangeInformationDialog.value = false
              getList()
            } else {
              ElMessage.error(res.message)
            }
          })
        })
    } else {
      let api = '/managew/selfService/salesmanUpload';
      let params = {
        ...exchangeInformationForm.value,
        serviceOrderId:serviceOrderId.value
      }
      BaseService.postN(api, params).then((res: any) => {
        if (res && res.statusCode === 0) {
          let bizContent = res.data
          console.log(bizContent, 'bizContentbizContentbizContent')
          ElMessage.success(res.message)
          getList()
          exchangeInformationDialog.value = false
        } else {
          ElMessage.error(res.message)
        }
      })
    }
  });
}
// 审核
const check = ref()
//用户标识
let cacheAccessToken = getCache(
  'cacheAccessToken',
  { isSessionStorage: false },
  {}
)
console.log(cacheAccessToken, 'cacheAccessToken')
const download = (file) => {
    BaseService.getDownload(
      file
    )
  }
// 搜索按钮
function btnSearch() {
  field.value.paging.currentPage = 1
  getList()
}
const activeName = ref('0')
let tageList = [
  {
    label: '全部',
    name: '0',
  },
  {
    label: '已领取',
    name: '1',
  },
  {
    label: '待领取',
    name: '2',
  },
  {
    label: '待处理',
    name: '3',
  },

  // {
  //   label: '审核不通过',
  //   name: '1',
  // },
]
//标签分页
const pass = ref('3')
function handleClick(tab, event) {
  activeName.value = tab.props.name
  // if (pass.value == '3') {
  //   field.value.field[0].hide = false
  // } else {
  //   field.value.field[0].hide = true
  // }
  getList()
}
// 搜索重置
function refreshLeft() {
  field.value.paging.currentPage = 1
  searchForm.value = {
    artificialStatus: '',
    id: '',
    questionType: '',
    vehiclePlate: '',
    orderSourcePage: '',
    orderType: '',
    orderStatus: '',
    // time: '',
    vehiclePlateColor: '',
  }
  value1.value = null
  getList()
}
onMounted(() => {
  // 调试权限信息
  console.log('当前路由信息:', route)
  console.log('权限检查结果:', IsPermission(route, 'QUERY_BASE'))
  console.log('sessionStorage中的权限:', sessionStorage.getItem(route.path))
  console.log('路由query参数:', route.query)
  
  getList()
})
function getParams() {
  let params: any = {
    methods: 'page',
    pageNo: field.value.paging.currentPage,
    pageSize: field.value.paging.pageSize,
    receiveStatus: activeName.value
  }
  // if (pass.value == '4') {
  //   params.operatorId = cacheAccessToken.openId
  // }
  //赋值查询参数
  let searchFormList = { ...searchForm.value }
  for (let key in searchFormList) {
    if (searchFormList[key]) {
      params[key] = searchFormList[key]
    }
  }
  if (params.time) {
    params.startTime = dateChange(params.time[0])
    params.endTime = dateChange(params.time[1])
  }
  return params
}
function dateChange(time) {
  if (time) {
    time = moment(time).format('YYYY-MM-DD HH:mm:ss')
  }
  return time
}
function getList() {
  crudRef.value.tableLoding = true
  BaseService.postN('/managew/selfService/page', getParams()).then((res: any) => {
    if (res && res.code === 0) {
      //数据转换
      let bizContent = res.data
      let data = bizContent.result || []
      console.log(data, 'tableData')
      //数据渲染
      tableData.value = data
      crudRef.value.tableLoding = false
      //分页总数
      field.value.paging.total = bizContent.totalCount
    } else {
      crudRef.value.tableLoding = false
      ElMessage.error(res.message)
    }
  })
}
function handleCurrentChange(val: number) {
  field.value.paging.currentPage = val
  getList()
}
// 领取订单***********************************
const selectList = ref([])
// 表格选中
function selectionChangeHandle(val: any) {
  selectList.value = val.map(item => item.id)
}
function getOrderAll() {

}
function getOrderFn(type, row?) {
  // exchangeInformationDialog.value = true
  if (type == 1 && selectList.value.length == 0) {
    ElMessage.warning('请至少选择一条订单领取')
    return
  }
  let idList: any = []
  if (type == 1) {
    idList = selectList.value
  } else {
    idList = [row.id]
  }
  ElMessageBox.confirm('确认领取订单吗?', '领取提示', {
    confirmButtonText: '确认领取',
    cancelButtonText: '取消',
    type: 'warning',
    draggable: true,
  })
    .then(() => {
      let params = {
        idList: idList,
        // operatorId: cacheAccessToken.openId
      }
      console.log(params, 'paramsparams')
      BaseService.postN('/managew/selfService/orderReceive', params).then(
        (res: any) => {
          if (res && res.code === 0) {
            ElMessage.success('领取成功')
            refreshLeft()
            getList()
          } else {
            ElMessage.error(res.message)
          }
        }
      )
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消领取',
      })
    })
}
// 审核*****************************************
const autdisReasonType = ref()
function autdisReasonChange(value) {
  autdisReasonType.value = value
}
const autdis = reactive<any>({ auditStatus: 'true', reason: '', reason1: '' }) //审核对象
let timer2: any = null
const form = ref()
//审核提交
function checkForm(formEl) {
  if (timer2) return
  timer2 = setTimeout(() => {
    formEl.validate((valid: any, fields: any) => {
      if (valid) {
        if (autdisReasonType.value == '8' && autdis.reason1) {
          autdis.reason = autdis.reason1
        }
        if (autdis.auditStatus == 'true') {
          autdisReasonType.value = ''
          autdis.reason = ''
          autdis.reason1 = ''
        }
        BaseService.postN('/managew/order/orderManualVerify', autdis).then((res: any) => {
          if (res && res.code === 0) {
            ElMessage.success(res.message)
            check.value = false
            visible.value = false
            getList()
          } else {
            ElMessage.error(res.message)
          }
        })
      } else {
        return false
      }
    })
    timer2 = null
  }, 1000)
}
function handleAudit() {
  //审核
  autdisReasonType.value = ''
  autdis.auditStatus = 'true'
  autdis.reason = ''
  autdis.reason1 = ''
  check.value = true
}

//审核弹窗
let beanData: any = {}
const detailDialogTitle = ref('订单详情')
const autdisButton = ref(false)
const offset = ref(150)
const serviceOrderId = ref('')
let visible = ref(false)
let visiinfoDatable: any = reactive({})
let color = ref('')
function audit(idx: number, data: any, type) {
  exchangeInformationDialog.value = true
  if (type === false) {
    exchangeInformationDialogTitle.value = '订单详情'
  } else {
    exchangeInformationDialogTitle.value = '处理'
    serviceOrderId.value = data.id
  }
  // autdisButton.value = type
  BaseService.postN('/managew/selfService/view', { id: data.id }).then((res: any) => {
    console.log(111111111111111111);
    if (res && res.code === 0) {
      console.log(res.data, 'res.data');
      console.log(111111111111111111);
      visiinfoDatableList.value = res.data
      const findUserByKey = (arr, key, value) => {
        for (const item of arr) {
          if (item[key] == value) {
            return item;
          }
        }
        return null; // 没找到返回 null
      };
      const result = findUserByKey(VEHICLE_COLOR_TYPE.value, 'value', res.data.vehiclePlateColor);
      color.value = result.name
    } else {
      ElMessage.error(res.message)
    }
  })
}
//取消
function cancel() {
  addForm.value = {
    ...initItem,
  }
}
</script>
<style scoped lang="scss">
.file-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.file-name {
  margin-top: 8px;
  font-size: 12px;
  word-break: break-all;
  text-align: center;
}

// 客户诉求样式
.customer-appeals-section {
  padding-left: 55px;
  padding-bottom: 20px;
  margin-top: 15px;
  
  .section-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #409eff;
    display: inline-block;
  }
  
  .appeal-item {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    border-radius: 8px;
    margin-bottom: 12px;
    padding: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    
    &:hover {
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
      transform: translateY(-1px);
    }
    
    .appeal-date {
      color: #6c757d;
      font-size: 14px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      
      .el-icon {
        margin-right: 6px;
        color: #409eff;
      }
    }
    
    .appeal-content {
      color: #495057;
      font-size: 15px;
      line-height: 1.6;
      display: flex;
      align-items: flex-start;
      
      .el-icon {
        margin-right: 8px;
        color: #67c23a;
        margin-top: 2px;
        flex-shrink: 0;
      }
    }
  }
}

// 文件样式
.file-section {
  padding-left: 55px;
  margin-top: 15px;
  
  .section-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #67c23a;
    display: inline-block;
  }
  
  .file-item {
    background: #fff;
    border: 1px solid #e4e7ed;
    border-radius: 6px;
    margin-bottom: 10px;
    padding: 12px 15px;
    transition: all 0.3s ease;
    
    &:hover {
      border-color: #409eff;
      box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
    }
    
    .file-info {
      display: flex;
      align-items: center;
      gap: 10px;
      
      .el-icon {
        color: #409eff;
        font-size: 16px;
      }
      
      .file-label {
        color: #606266;
        font-weight: 500;
        min-width: 60px;
      }
      
      .file-name {
        flex: 1;
        color: #303133;
        font-size: 14px;
        word-break: break-all;
        margin: 0;
      }
      
      .download-btn {
        margin-left: auto;
        padding: 5px 12px;
        font-size: 12px;
        
        .el-icon {
          margin-right: 4px;
        }
      }
    }
  }
}
</style>