<template>
  <div class="content-box" v-loading="loading">
    <div class="left">
      <!-- <el-icon :size="23" class="camera"><VideoCameraFilled /></el-icon> -->
      <span class="cameratxt">工单管理</span>
    </div>
    <div class="middle">
      <div class="filter">
        <div class="condition">
          <span>关键字 : </span>
          <el-input clearable @clear="searchBtn" v-model="searchInput.keyWord" class="w-50 m-2" placeholder="输入区域、姓名、电话"
            style="width: 200px" />
        </div>
        <div class="condition2" v-if="schoolId == 0">
          <span>校区 : </span>
          <el-select v-model="searchInput.schoolId" class="m-2" placeholder="请选择校区" @change="selSchool">
            <el-option label="全部校区" :value="0" />
            <el-option label="黄家湖校区" :value="1" />
            <el-option label="墨轩湖校区" :value="2" />
          </el-select>
        </div>
        <div class="condition2" v-if="schoolId == 1">
          <span>校区 : </span>
          <el-select v-model="searchInput.schoolId" class="m-2" placeholder="请选择校区" @change="selSchool">
            <el-option label="黄家湖校区" :value="1" />
          </el-select>
        </div>
        <div class="condition2" v-if="schoolId == 2">
          <span>校区 : </span>
          <el-select v-model="searchInput.schoolId" class="m-2" placeholder="请选择校区" @change="selSchool">
            <el-option label="墨轩湖校区" :value="2" />
          </el-select>
        </div>
        <div class="condition2">
          <span>维修师傅 : </span>
          <el-input clearable @clear="searchBtn" v-model="searchInput.maintenanceName" class="w-50 m-2"
            placeholder="输入维修师傅名字" style="width: 200px" />
        </div>
        <div class="condition2">
          <span>创建时间 : </span>
          <el-date-picker v-model="searchInput.createTime" type="daterange" range-separator="-" start-placeholder="起始时间"
            end-placeholder="结束时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" :prefix-icon="Calendar"
            placeholder="请选择日期" />
        </div>

        <el-button style="margin-left: 30px" color="rgba(111, 182, 184, 1)" type="primary" class="search"
          @click="searchBtn"><el-icon>
            <Search />
          </el-icon> <span>查询</span></el-button>
      </div>
      <!-- 按钮列表 -->
      <div class="gongneng">
        <!-- <el-button
          type="primary"
          color="rgba(111, 182, 184, 1)"
          @click="addlist"
          ><img
            src="@/assets/add.png"
            style="width: 14px; height: 14px; margin-right: 4px"
            alt=""
          /><span>新建工单</span></el-button
        > -->
        <el-button color="rgba(111, 182, 184, 1)" class="import" type="primary" @click="importExcel"><img
            src="@/assets/importWhite.png" style="width: 14px; height: 14px; margin-right: 4px" alt="" />
          <span>导出表单</span></el-button>
      </div>
    </div>
    <div class="btn">
      <ul>
        <li v-for="i in day" :key="i.name" @click="dayBtn(i.state)" :class="dayIndex == i.state ? 'li_active' : ''">
          {{ i.name + " (" + i.key + ")" }}
        </li>
      </ul>
    </div>
    <div class="footer">
      <el-table :row-class-name="tableRowClassName" :data="tableData.list" @selection-change="handleSelectionChange"
        style="width: 100%" :header-cell-style="{
          background: 'rgba(240, 243, 247, 1)',
          height: '50px',
          border: 0,
        }">
        <el-table-column align="center" prop="recordNo" width="180" label="工单编号">
          <template #default="scope">
            <div class="orderNum">
              <span>{{ scope.row.recordNo }}</span>
              <!-- <div class="xi" v-if="scope.row.title == '系'">
                {{ scope.row.title }}
              </div>
              <div class="xie" v-if="scope.row.title == '协'">
                {{ scope.row.title }}
              </div> -->
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="areaName" show-overflow-tooltip width="240" label="报修区域" />
        <el-table-column align="center" prop="userName" label="姓名" />
        <el-table-column align="center" prop="userPhone" label="电话" />
        <el-table-column align="center" prop="articleName" width="180" show-overflow-tooltip label="报修物品" />
        <el-table-column align="center" prop="description" show-overflow-tooltip label="故障描述" />
        <el-table-column align="center" prop="state" label="状态">
          <!-- <template #default="scope">
            <div
              class="operation"
              style="color: rgb(0, 0, 0)"
              v-if="scope.row.state == '已完成'"
            >
              已完成
            </div>
            <div
              class="operation"
              style="color: rgba(255, 87, 51, 1)"
              v-if="scope.row.state == '待接单'"
            >
              待接单
            </div>
            <div
              class="operation"
              style="color: rgba(30, 125, 251, 1)"
              v-if="scope.row.state == '待审核'"
            >
              待审核
            </div>
            <div
              class="operation"
              style="color: rgba(111, 182, 184, 1)"
              v-if="scope.row.state == '待处理'"
            >
              待处理
            </div>
            <div
              class="operation"
              style="color: rgb(12, 26, 221)"
              v-if="scope.row.state == '维修中'"
            >
              维修中
            </div>
            <div
              class="operation"
              style="color: rgb(209, 78, 235)"
              v-if="scope.row.state == '已关单'"
            >
              已关单
            </div>
            <div
              class="operation"
              style="color: rgb(255, 0, 43)"
              v-if="scope.row.state == '维修超时'"
            >
              维修超时
            </div>
            <div
              class="operation"
              style="color: rgb(255, 0, 43)"
              v-if="scope.row.state == '接单超时'"
            >
              接单超时
            </div>
            <div
              class="operation"
              style="color: rgb(204, 204, 204)"
              v-if="scope.row.state == '已取消'"
            >
              已取消
            </div>
          </template> -->
        </el-table-column>
        <el-table-column align="center" prop="reportTime" width="180" label="报修时间" />
        <el-table-column align="center" prop="maintenancerName" label="技术员" />
        <el-table-column align="center" width="220" label="操作">
          <template #default="scope">
            <div class="operation">
              <div class="btns" v-if="scope.row.dispatch == 1" @click="sendOrders(scope.row)">
                派单
              </div>

              <div class="btns" v-if="scope.row.collaborate == 1" @click="cooperation(scope.row)">
                协作审核
              </div>
              <div class="btns" v-if="scope.row.transfer == 1" @click="transOrder(scope.row)">
                转单审核
              </div>
              <div class="btns" v-if="scope.row.close == 1" @click="customsOrder(scope.row)">
                关单
              </div>
              <div class="btns" v-if="scope.row.changePrice == 1" @click="changePrice(scope.row)">
                改价
              </div>
              <div class="btns" v-if="scope.row.reply == 1" @click="reply(scope.row)">
                回复
              </div>
              <div class="btns" v-if="scope.row.delayed == 1" @click="delayed(scope.row)">
                延时
              </div>
              <div class="btns" v-if="scope.row.details == 1" @click="orderInfo(scope.row)">
                详情
              </div>
              <div class="btns" @click="print(scope.row)">
                打印
              </div>
            </div>
            <!-- <div class="operation" v-if="scope.row.state == 1">
              <div class="look" @click="orderInfo(scope.row)">详情</div>
              <div class="look" @click="del(scope.row)">删除</div>
              <div class="look" @click="transOrder(scope.row)">转单审核</div>
            </div>
            <div class="operation" v-if="scope.row.state == 2">
              <div class="look" @click="customsOrder(scope.row)">关单</div>
              <div class="look" @click="sendOrders(scope.row)">派单</div>
              <div class="look" @click="edit(scope.row)">编辑</div>
              <div class="look" @click="orderInfo(scope.row)">详情</div>
              <div class="look" @click="del(scope.row)">删除</div>
            </div>
            <div class="operation" v-if="scope.row.state == 3">
              <div class="look" @click="sendOrders(scope.row)">派单</div>
              <div class="look" @click="cooperation(scope.row)">协作审核</div>
              <div class="look" @click="orderInfo(scope.row)">详情</div>
              <div class="look" @click="del(scope.row)">删除</div>
            </div>
            <div class="operation" v-if="scope.row.state == 4">
              <div class="look" @click="changePrice(scope.row)">改价</div>
              <div class="look" @click="reply(scope.row)">回复</div>
              <div class="look" @click="delayed(scope.row)">延时</div>
              <div class="look" @click="orderInfo(scope.row)">详情</div>
              <div class="look" @click="del(scope.row)">删除</div>
            </div>
            <div class="operation" v-if="scope.row.state == 5">
              <div class="look" @click="edit(scope.row)">重新派单</div>
              <div class="look" @click="delayed(scope.row)">延时</div>
              <div class="look" @click="orderInfo(scope.row)">详情</div>
              <div class="look" @click="del(scope.row)">删除</div>
            </div>
            <div class="operation" v-if="scope.row.state == 6">
              <div class="look" @click="customsOrder(scope.row)">关单</div>
              <div class="look" @click="sendOrders(scope.row)">派单</div>
              <div class="look" @click="orderInfo(scope.row)">详情</div>
              <div class="look" @click="del(scope.row)">删除</div>
            </div>
            <div class="operation" v-if="scope.row.state == 7">
              <div class="look" @click="sendOrders(scope.row)">派单</div>
              <div class="look" @click="cooperation(scope.row)">协作审核</div>
              <div class="look" @click="orderInfo(scope.row)">详情</div>
              <div class="look" @click="del(scope.row)">删除</div>
            </div> -->
          </template>
        </el-table-column>
      </el-table>

      <!-- 新建工单弹窗 -->
      <!-- <el-dialog
        class="addStaff"
        v-model="addDialogVisible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :title="dialongTitle"
        align-center
        width="960"
        :before-close="cancelAdd"
      >
        <el-form
          ref="ruleFormAddStaff"
          :model="AddStaffList"
          :rules="addStaffRules"
          label-width="100px"
          class="demo-ruleForm"
          size="default"
          label-position="left"
          status-icon
        >
          <el-form-item label="报修人姓名 :" prop="name">
            <el-input
              v-model="AddStaffList.name"
              placeholder="请输入姓名"
              clearable
            />
          </el-form-item>
          <el-form-item label="手机号码 :">
            <el-input
              v-model="AddStaffList.phone"
              placeholder="请输入手机号码"
              clearable
            />
          </el-form-item>
          <el-form-item label="报修区域 :" prop="post">
            <el-select
              v-model="AddStaffList.post"
              class="m-2"
              placeholder="请选择报修区域"
            >
              <el-option label="车队长" value="车队长" />
              <el-option label="司机" value="司机" />
            </el-select>
          </el-form-item>
          <el-form-item label="详细地址 :" prop="name">
            <el-input
              v-model="AddStaffList.name"
              placeholder="请输入详细地址"
              clearable
            />
          </el-form-item>
          <el-form-item label="报修类型 :" prop="post">
            <el-select
              v-model="AddStaffList.post"
              class="m-2"
              placeholder="请选择报修类型"
            >
              <el-option label="车队长" value="车队长" />
              <el-option label="司机" value="司机" />
            </el-select>
          </el-form-item>
          <el-form-item label="故障描述 :" prop="cardnumber">
            <el-input
              v-model="AddStaffList.phone"
              :rows="3"
              type="textarea"
              placeholder="请文字描述详细故障"
            />
          </el-form-item>

          <el-form-item
            label="故障照片 :"
            prop="cardnumber"
            style="
              padding-bottom: 40px;
              border-bottom: 1px solid rgba(230, 230, 230, 1);
            "
          >
            <el-upload
              class="avatar-uploader"
              action=""
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              list-type="picture-card"
              :on-change="handleChange"
              :http-request="handleUpload"
            >
              <img
                class="avatar-uploader-icon"
                src="@/assets/addImg.png"
                alt=""
              />
            </el-upload>
            <el-dialog
              title="查看照片"
              class="imgVisible"
              width="960"
              v-model="imgVisible"
            >
              <img :src="imgUrl" alt="" />
            </el-dialog>
          </el-form-item>
          <el-form-item class="options">
            <el-button
              color="rgba(111, 182, 184, 1)"
              class="queding"
              type="primary"
              @click="submitAdd(ruleFormRef)"
            >
              确定
            </el-button>
            <el-button @click="cancelAdd(ruleFormRef)">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog> -->
      <!-- 派单弹窗 -->
      <el-dialog class="sendOrder" v-model="sendOrderVisible" :close-on-click-modal="false" :close-on-press-escape="false"
        title="派单" align-center width="960" :before-close="cancelSendOrders">
        <div class="send_order">
          <div class="condition">
            <span>关键字 : </span>
            <el-input clearable v-model="sendOrderSearch" @clear="sendOrderBtn" class="w-50 m-2" placeholder="输入用户名或者电话"
              style="width: 200px" />
            <el-button style="margin-left: 30px; color: #fff" color="rgba(111, 182, 184, 1)" type="primary" class="search"
              @click="sendOrderBtn"><el-icon>
                <Search />
              </el-icon> <span>查询</span></el-button>
            <div class="table">
              <el-table :row-class-name="tableRowClassName" :data="sendOrderData.list"
                @selection-change="handleSelectionChange" style="width: 100%" :header-cell-style="{
                  background: 'rgba(240, 243, 247, 1)',
                  height: '50px',
                  border: 0,
                }">
                <el-table-column align="center" prop="userName" label="用户名" />
                <el-table-column align="center" prop="userPhone" label="电话" />
                <el-table-column align="center" prop="state" label="状态" />
                <el-table-column align="center" prop="create_time" label="维修班" />

                <el-table-column align="center" label="操作">
                  <template #default="scope">
                    <div class="operation">
                      <el-button color="rgba(111, 182, 184, 1)" class="queding" type="primary"
                        @click="sendOrderTrue(scope.row)" style="color: #fff">
                        派单
                      </el-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="options" style="margin: 20px 0 0 0">
            <el-pagination background :current-page="sendOrderCurrentPage" :page-size="sendOrderPageSize"
              layout="total, prev, pager, next, jumper, slot" :total="sendOrderTotal"
              @update:current-page="sendOrderTableChange" />
          </div>
        </div>
      </el-dialog>
      <!-- 详情弹窗 -->
      <el-dialog class="orderInfo" v-model="orderInfoVisible" :close-on-click-modal="false" :close-on-press-escape="false"
        title="工单详情" align-center width="760" :before-close="cancelOrderInfo">
        <div class="order_info">
          <!-- 工单详情 工单信息 -->
          <div class="title">
            <img src="@/assets/orderInfo.png" alt="" />
            <span>工单信息</span>
          </div>
          <div class="workNum">
            <div class="titles">工单编号:</div><span>{{ orderInfoData.recordNo }}</span>
          </div>
          <div class="workNum">
            <div class="titles">报修姓名:</div><span>{{ orderInfoData.userName }}</span>
          </div>
          <div class="workNum">
            <div class="titles">报修电话:</div><span>{{ orderInfoData.userPhone }}</span>
          </div>
          <div class="workNum">
            <div class="titles">故障类型:</div><span>{{ orderInfoData.articleName }}</span>
          </div>
          <div class="workNum">
            <div class="titles">故障描述:</div><span>{{ orderInfoData.description }}</span>
          </div>
          <div class="workNum">
            <div class="titles">报修区域:</div><span>{{ orderInfoData.areaName }}{{ orderInfoData.address }}</span>
          </div>
          <div class="workNum">
            <div class="titles">报修录音:</div>
            <div class="audio" @click="bofang">
              <img src="@/assets/audio.png" alt="" />
              <div class="audioNum">{{ orderInfoData.voiceLength }}"</div>
              <!-- <button class="butt" @click="bofang">确认</button> -->
              <audio ref="audio" class="aud" :src="orderInfoData.voice"></audio>
            </div>
          </div>
          <div class="workNum">
            <div class="titles">报修时间:</div><span>{{ orderInfoData.reportTime }}</span>
          </div>
          <!-- 工单详情 报修进度 -->
          <div class="title">
            <img src="@/assets/repairsInfo.png" alt="" />
            <span>报修进度</span>
          </div>
          <!-- <div class="workNum">
            <span class="titles">维修总时长:</span
            ><span>{{ orderInfoData.totalTime }}</span>
          </div>
          <div class="workNum">
            <span class="titles">维修耗时:</span
            ><span>{{ orderInfoData.time }}</span>
          </div> -->
          <div class="steps">
            <el-steps direction="vertical" :active="100">
              <el-step v-for="(i, index) in orderInfoData.tracks">
                <template v-slot:icon>
                  <img style="width: 20px; height: 20px" src="@/assets/step_common.png" alt="" />
                </template>
                <template v-slot:title>
                  <span>{{ i.state }}</span>
                </template>
                <template v-slot:description>
                  <div class="content">
                    <span>[{{ i.userZzstr }}]{{ i.userName }}{{ i.userPhone }}
                      {{ i.createTime }}</span>
                  </div>
                  <div>
                    <div>{{ i.content }}</div>
                    <!-- 评价图片 -->
                    <div v-if="i.images" class="evaluateImg">
                      <div v-for="(item, index) in i.images">
                        <img @click="lookImg(item)" :key="index" :src="item" alt="" />
                      </div>
                    </div>
                    <!-- 评价录音 -->
                    <div v-if="i.voice" class="audio" @click="audioPlay(i)">
                      <img src="@/assets/audio.png" alt="" />
                      <div class="audioNum">{{ i.voiceLength }}"</div>
                      <!-- <button class="butt" @click="bofang">确认</button> -->
                      <audio :id="`audio${i.id}`" class="aud" :src="i.voice"></audio>
                    </div>
                  </div>
                </template>
              </el-step>
            </el-steps>
          </div>
        </div>
      </el-dialog>
      <!-- 延时弹窗 -->
      <el-dialog class="delayed" v-model="delayedVisible" :close-on-click-modal="false" :close-on-press-escape="false"
        title="延时" align-center width="660" :before-close="cancelDelayed">
        <div class="delayed">
          <div class="kaohe">
            <span>接单考核时间</span>
            <el-input v-model="delayedData.time1" :clearable="false" placeholder="考核时间"
              style="width: 150px; margin: 0 10px">
              <template #suffix>
                <img src="@/assets/timer.png" alt="" style="width: 15px; height: 15px" />
              </template>
            </el-input>
            <span>分钟</span>
          </div>
          <div class="kaohe">
            <span>维修考核时间</span>
            <el-input v-model="delayedData.time2" :clearable="false" placeholder="考核时间"
              style="width: 150px; margin: 0 10px">
              <template #suffix>
                <img src="@/assets/timer.png" alt="" style="width: 15px; height: 15px" />
              </template>
            </el-input>
            <span>分钟</span>
          </div>
          <div class="options">
            <el-button color="rgba(111, 182, 184, 1)" class="queding" type="primary" @click="delayedYes()">
              确定
            </el-button>
            <el-button @click="cancelDelayed">取消</el-button>
          </div>
        </div>
      </el-dialog>
      <!-- 回复弹窗 -->
      <el-dialog class="reply" v-model="replyVisible" :close-on-click-modal="false" :close-on-press-escape="false"
        title="回复" align-center width="660" :before-close="cancelReply">
        <div class="reply">
          <div class="content">
            <el-input v-model="replycontent.reply" :rows="6" type="textarea" show-word-limit :autofocus="true"
              placeholder="请输入你要回复的文字" />
          </div>
          <div class="options">
            <el-button color="rgba(111, 182, 184, 1)" class="queding" type="primary" @click="replycontentYes()">
              确定
            </el-button>
            <el-button @click="cancelReply">取消</el-button>
          </div>
        </div>
      </el-dialog>
      <!-- 协作审核 弹窗 -->
      <el-dialog class="cooperation" v-model="cooperationVisible" :close-on-click-modal="false"
        :close-on-press-escape="false" title="协作审核" align-center width="560" :before-close="cancelCooperation">
        <el-form ref="ruleFormCooperation" :model="cooperationData" status-icon :rules="cooperationRules"
          label-width="90px" class="demo-ruleForm">
          <el-form-item label="申请人 :" prop="userName">
            <span>{{ cooperationData.userName }}</span>
          </el-form-item>
          <el-form-item label="协作对象 :" prop="cooperationValue">
            <el-select-v2 v-if="options" v-model="cooperationData.cooperationValue" :options="options"
              placeholder="请选择协作对象" style="width: 320px" multiple @change="cooperationSel" />
          </el-form-item>
          <el-form-item label="转单语音 :" prop="voice">
            <!-- <span>{{ cooperationData.voice }}</span> -->
            <div class="audio" @click="cooperationAudioPlay">
              <img src="@/assets/audio.png" alt="" />
              <div class="audioNum">{{ cooperationData.voiceLength }}"</div>
              <!-- <button class="butt" @click="bofang">确认</button> -->
              <audio ref="cooperationAudio" class="aud" :src="cooperationData.voice"></audio>
            </div>
          </el-form-item>
          <el-form-item label="备注 :" prop="age">
            <div class="content">
              <el-input v-model="cooperationData.remark" :rows="3" type="textarea" show-word-limit :autofocus="true"
                placeholder="此处为备注内容" />
            </div>
          </el-form-item>

          <el-form-item>
            <div class="options">
              <el-button color="rgba(111, 182, 184, 1)" class="queding" type="primary"
                @click="cooperationYes(ruleFormCooperation, 1)">
                同意
              </el-button>
              <el-button @click="cooperationYes(ruleFormCooperation, 0)">拒绝</el-button>
            </div>
          </el-form-item>
        </el-form>
        <!-- <div class="">
          <div class="block">
            <span class="name">申请人 :</span><span>张师傅</span>
          </div>
          <div class="block">
            <span class="name">协作对象 :</span>
            <div>
              <el-select-v2
                v-model="nameValue"
                :options="options"
                placeholder="请选择协作对象"
                style="width: 320px"
                multiple
              />
            </div>
          </div>
          <div class="block">
            <span class="name">转单语音 :</span><span>语音</span>
          </div>
          <div class="content">
            <span>备注</span>
            <el-input
              v-model="cooperationContent"
              :rows="3"
              type="textarea"
              show-word-limit
              :autofocus="true"
              placeholder="此处为备注内容"
            />
          </div>
          <div class="options">
            <el-button
              color="rgba(111, 182, 184, 1)"
              class="queding"
              type="primary"
              @click="sendOrderTrue()"
            >
              同意
            </el-button>
            <el-button @click="cancelCooperation">拒绝</el-button>
          </div>
        </div> -->
      </el-dialog>
      <!-- 转单审核 弹窗 -->
      <el-dialog class="transOrder" v-model="transOrderVisible" :close-on-click-modal="false"
        :close-on-press-escape="false" title="转单审核" align-center width="560" :before-close="cancelTransOrder">
        <el-form ref="ruleFormTransOrder" :model="transOrderData" status-icon :rules="transOrderRules" label-width="90px"
          class="demo-ruleForm">
          <el-form-item label="申请人 :" prop="userName">
            <span>{{ transOrderData.userName }}</span>
          </el-form-item>
          <el-form-item label="转单语音 :" prop="voice">
            <div class="audio" @click="transOrderAudioPlay">
              <img src="@/assets/audio.png" alt="" />
              <div class="audioNum">{{ transOrderData.voiceLength }}"</div>
              <!-- <button class="butt" @click="bofang">确认</button> -->
              <audio ref="transOrderAudio" class="aud" :src="transOrderData.voice"></audio>
            </div>
            <!-- <div>{{ transOrderData.voice }}</div> -->
          </el-form-item>
          <el-form-item label="备注 :" prop="remark">
            <div class="content">
              <el-input v-model="transOrderData.remark" :rows="3" type="textarea" show-word-limit :autofocus="true"
                placeholder="此处为备注内容" />
            </div>
          </el-form-item>
          <el-form-item label="派单 :" prop="userId">
            <el-select v-model="transOrderData.userId" placeholder="请选择派单人员">
              <el-option v-for="item in transOrderObj.list" :key="item.id" :label="item.userName" :value="item.id" />
            </el-select>
          </el-form-item>

          <el-form-item>
            <div class="options">
              <el-button color="rgba(111, 182, 184, 1)" class="queding" type="primary"
                @click="transOrderYes(ruleFormTransOrder, 1)">
                同意
              </el-button>
              <el-button @click="transOrderYes(ruleFormTransOrder, 0)">拒绝</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>
      <!-- 关单 弹窗 -->
      <el-dialog class="customsOrder" v-model="customsOrderVisible" :close-on-click-modal="false"
        :close-on-press-escape="false" title="关单" align-center width="560" :before-close="cancelCustomsOrder">
        <div class="">
          <div class="content">
            <span class="name">关单原因 :</span>
            <!-- <el-select v-model="customsOrderData.reason" placeholder="选择关单原因">
              <el-option v-for="item in customsOrderList" :key="item.id" :label="item.name" :value="item.name" />
            </el-select> -->
            <el-select v-model="customsOrderData.reason" filterable allow-create default-first-option
              :reserve-keyword="false" placeholder="选择关单原因">
              <el-option v-for="item in customsOrderList" :key="item.id" :label="item.name" :value="item.name" />
            </el-select>
          </div>
          <div class="options">
            <el-button color="rgba(111, 182, 184, 1)" class="queding" type="primary" @click="customsOrderYes">
              同意
            </el-button>
            <el-button @click="cancelCustomsOrder">取消</el-button>
          </div>
        </div>
      </el-dialog>
      <!-- 改价 弹窗 -->
      <el-dialog class="changePrice" v-model="changePriceVisible" :close-on-click-modal="false"
        :close-on-press-escape="false" title="改价" align-center width="600" :before-close="cancelChangePrice">
        <div>
          <!-- <el-tag
            v-for="i in changePriceNum.list"
            :key="i.id"
            class="mx-1"
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
          >
            {{ i.consumeName }}
          </el-tag> -->
          <!-- <ul>
            <li
              v-for="(i, index) in changePriceNum.list"
              :key="i.id"
              :class="changePriceIndex == index ? 'li_active' : ''"
              @click="changePriceNumSel(i, index)"
            >
              {{ i.consumeName }}
              <img src="@/assets/classXX.png" alt="" />
            </li>
          </ul> -->
          <div class="goodsCard" v-for="(i, index) in changePriceNum.list" :key="i.id">
            <!-- <el-form
              ref="ruleFormChangePrice"
              :model="changePriceNum"
              status-icon
              :rules="changePriceRules"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="物品种类 :" prop="articleId">
                <el-select
                  v-model="i.articleId"
                  placeholder="请选择物品种类"
                  @change="changePriceSel"
                >
                  <el-option
                    v-for="item in changePriceList.list"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="耗材名称 :" prop="consumeId">
                <el-select v-model="i.consumeId" placeholder="请选择耗材名称">
                  <el-option
                    v-for="item in changePriceList2.list"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="耗材数量 :" prop="number">
                <el-input v-model="i.number" />
              </el-form-item>
              <el-form-item label="单价 :" prop="price">
                <el-input v-model="i.price" />
              </el-form-item>
              <el-form-item label="金额 :" prop="totalPrice">
                <el-input v-model="i.totalPrice" />
              </el-form-item>
            </el-form> -->

            <div class="goodsTitle">
              <h2>{{ i.consumeName }}</h2>
              <el-button type="danger" @click="delChangePrice(i)">
                删除
              </el-button>
            </div>
            <div class="label" label="物品种类 :" prop="articleId">
              <div class="type">物品种类 :</div>
              <el-select v-model="i.articleId" placeholder="请选择物品种类" @change="changePriceSel($event, i)">
                <el-option v-for="item in changePriceList.list" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </div>
            <div class="label" label="耗材名称 :" prop="consumeId">
              <div class="type">耗材名称 :</div>
              <el-select v-model="i.consumeId" @change="consumeChange($event, i)" placeholder="请选择耗材名称">
                <el-option v-for="item in i.changePriceList2" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </div>
            <div class="label" label="耗材数量 :" prop="number">
              <div class="type">耗材数量 :</div>
              <el-input v-model="i.number" />
            </div>
            <div class="label" label="单价 :" prop="price">
              <div class="type">单价 :</div>
              <el-input disabled :value="i.price" />
              <!-- <span>{{ i.price }}</span> -->
            </div>
            <div class="label" label="金额 :" prop="totalPrice">
              <div class="type">金额 :</div>
              <el-input disabled :value="i.totalPrice" />
              <!-- <span>{{ i.totalPrice }}</span> -->
            </div>
          </div>
          <div class="addGoods">
            <el-button class="queding" type="primary" @click="addChangePrice">
              添加物品
            </el-button>
          </div>
          <div class="priceSum">
            <div class="totalPrice">总金额 : {{ changePriceSum }} 元</div>
            <div class="options">
              <el-button color="rgba(111, 182, 184, 1)" class="queding" type="primary"
                @click="changePriceYes(ruleFormChangePrice)">
                确定
              </el-button>
              <el-button @click="cancelChangePrice(ruleFormChangePrice)">取消</el-button>
            </div>
          </div>
        </div>
      </el-dialog>

      <!-- 打印报表 -->
      <el-dialog class="printDialog" v-model="printVisible" :close-on-click-modal="false" :close-on-press-escape="false"
        title="打印工单" align-center width="760" :before-close="cancelPrint">
        <div class="content" id="printWrapper">
          <div class="title">
            <span>校园报修系统</span>
            <span>打印时间:2023-10-10 10:22:10 操作人:张三</span>
          </div>
          <h3>故障报修</h3>
          <div class="title">
            <span>南昌交通学校</span>
            <span>工单号: 4956654622</span>
          </div>
          <div class="printTable">
            <table border="1" Cellspacing="0">
              <tr>
                <td>报修人</td>
                <td>张三</td>
                <td>年级</td>
                <td>学生/人工智能/智能2021-4</td>
              </tr>
              <tr>
                <td>手机</td>
                <td>张三</td>
                <td>区域</td>
                <td>学生/人工智能/智能2021-4</td>
              </tr>
              <tr>
                <td>报修物品</td>
                <td>张三</td>
                <td>报修时间</td>
                <td>学生/人工智能/智能2021-4</td>
              </tr>
              <tr>
                <td>故障描述</td>
                <td Colspan="3">张三</td>
              </tr>
              <tr>
                <td>维修师傅</td>
                <td Colspan="3">张三</td>
              </tr>
              <tr>
                <td>手机号码</td>
                <td>张三</td>
                <td>状态</td>
                <td>学生/人工智能/智能2021-4</td>
              </tr>
              <tr>
                <td>支付金额</td>
                <td>20</td>
                <td>退款金额</td>
                <td>12</td>
              </tr>
              <tr>
                <td>备注</td>
                <td Colspan="3">某些某些</td>
              </tr>
            </table>
            <div class="name">
              <span>后期签字: </span>
              <span>XXX</span>
              <span>师傅签字: </span>
              <span>XXX</span>
            </div>
            <div class="name date">
              <span>日期: </span>
              <span>2021-10-12</span>
              <span>日期: </span>
              <span>2021-10-12</span>
            </div>
          </div>
          <div class="options">
            <el-button color="rgba(111, 182, 184, 1)" class="queding" type="primary" v-print="prints">
              打印
            </el-button>
            <el-button @click="cancelPrint">取消</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
    <!-- 分页组件 -->
    <el-pagination background :current-page="currentPage" :page-size="pageSize"
      layout="total, prev, pager, next, jumper, slot" :total="total" @update:current-page="handleCurrentChange" />
    <div class="bgImg" v-if="bgImg">
      <img @click="bgImg = false" :src="bgImgurl" alt="" />
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  nextTick,
  watch,
  onBeforeMount,
  onUnmounted,
} from "vue";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { Timer } from "@element-plus/icons-vue";
import { Calendar } from "@element-plus/icons-vue";
import vidiconsApi from "@/api/vidicons.js";
import { dayjs } from "element-plus";
import gaobai from "@/static/gaobai.mp3";
// import type { UploadProps } from "element-plus";
import lodash from "lodash";
import axios from "axios";
import { useStore } from "vuex";
const store = useStore();
const router = useRouter();

const loading = ref(false);
const schoolId = ref(""); // 判断是否为超级管理员账号
const day = ref([
  "全部",
  "待处理",
  "待接单",
  "待审核",
  "维修中",
  "已完成",
  "已取消",
  "已关单",
  "已超时",
]); // 天数切换按钮
let dayIndex = ref(0); // 天数切换按钮索引
// 表格数据
const tableData = reactive({
  list: [],
});

// 新建工单时的数据  (-----------------------------------------------)
const ruleFormAddStaff = ref();
const addDialogVisible = ref(false); // 控制添加员工弹窗
const dialongTitle = ref("新增工单"); // 新建工单弹窗标题
const fileList = ref([]); // 添加多张图片的文件
const imgVisible = ref(false); // 点击查看图片是否查看
const imgUrl = ref(""); // 点击查看的那张照片地址
const AddStaffList = reactive({
  name: "",
  phone: "",
  post: "0",
  cardnumber: "",
  id: "",
}); // 新建工单表单数据
const addStaffRules = reactive({
  name: [
    { required: true, message: "姓名不能为空", trigger: "blur" },
    {
      pattern: /[\u4e00-\u9fa5]$/,
      message: "请输入正确姓名",
      trigger: "blur",
    },
  ],
  // /^[\u4E00-\u9FA5]$/
  cardnumber: [
    { required: true, message: "卡号不能为空", trigger: "blur" },
    // {
    //   // pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
    //   // pattern: /^[0-9]*$/,
    //   message: "请输入正确卡号(数字类型)",
    //   trigger: "blur",
    // },
  ],
  phone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    {
      // pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
      pattern: /^((\(\+86\))|(\(86\)))?[1][3456789][0-9]{9}$/,
      message: "请输入合法手机号/电话号",
      trigger: "blur",
    },
  ],
  post: [
    {
      required: true,
      message: "职位不能为空",
      trigger: "blur",
    },
  ],

  // desc: [{ required: true, message: "Please input activity form", trigger: "blur" }],
}); // 新建工单表单验证

// 派单  (-----------------------------------------------)
const sendOrderCurrentPage = ref(1);
const sendOrderPageSize = ref(10);
const sendOrderTotal = ref();
const sendOrderSearch = ref();
const sendOrderVisible = ref(false); // 控制工单派单弹窗
const sendOrderData = reactive({
  list: [],
  id: "",
  // sendOrder: {
  //   acceptanceTime: "",
  //   shiftId: "",
  //   sarticleId: "",
  //   id: "",
  // },
}); // 派单表单数据
const sendOrderRules = reactive({
  name: [
    { required: true, message: "姓名不能为空", trigger: "blur" },
    {
      pattern: /[\u4e00-\u9fa5]$/,
      message: "请输入正确姓名",
      trigger: "blur",
    },
  ],
  // /^[\u4E00-\u9FA5]$/
  cardnumber: [
    { required: true, message: "卡号不能为空", trigger: "blur" },
    // {
    //   // pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
    //   // pattern: /^[0-9]*$/,
    //   message: "请输入正确卡号(数字类型)",
    //   trigger: "blur",
    // },
  ],
  phone: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    {
      // pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
      pattern: /^((\(\+86\))|(\(86\)))?[1][3456789][0-9]{9}$/,
      message: "请输入合法手机号/电话号",
      trigger: "blur",
    },
  ],
  post: [
    {
      required: true,
      message: "职位不能为空",
      trigger: "blur",
    },
  ],

  // desc: [{ required: true, message: "Please input activity form", trigger: "blur" }],
}); // 派单表单验证

// 详情   (-----------------------------------------------)
const orderInfoVisible = ref(false); // 控制工单详情
const audio = ref(); // 工单详情音频
const orderInfoData = ref({
  recordNo: "", // 工单编号
  userName: "", // 报修姓名
  userPhone: "", // 报修电话
  articleName: "", // 故障类型
  description: "", // 故障描述
  articleId: "", // 报修类型
  address: "", // 报修区域
  areaName: "",// 报修校区地址
  voice: "", // 报修录音
  voiceLength: "", // 报修录音时长
  reportTime: "", // 报修时间
  totalTime: "", // 维修总时长
  time: "", // 维修耗时
  tracks: [],
});
const mapUrl = ref(); // 音频地址
const bgImg = ref(false)// 点击查看图片
const bgImgurl = ref() // 点击查看图片地址

// 延时   (-----------------------------------------------)
const delayedVisible = ref(false); // 延时弹窗控制
const delayedData = ref({
  id: "",
  time1: "", // 接单考核时间
  time2: "", // 维修考核时间
});

// 回复  (-----------------------------------------------)
const replyVisible = ref(false); // 回复弹窗控制
const replycontent = ref({
  reply: "",
  id: "",
}); // 回复绑定数据

// 协作审核  (-----------------------------------------------)
// 协作审核中审核对象数组
const cooperationVisible = ref(false); // 协作审核弹窗控制
const cooperationData = ref({
  collaboratorDatas: [],
  cooperationValue: "",
  id: "",
  remark: "",
  userName: "",
  voice: "",
}); // 协作审核数据
const cooperationValue = ref([]); // 挑选中的对象数组
const options = ref(); // 多选数据判断
const ruleFormCooperation = ref(); // 协作审核ref对象
const cooperationAudio = ref(); // 语音对象
// 转单审核验证
const cooperationRules = reactive({
  // userName: [{ required: true, message: "申请人不能为空", trigger: "blur" }],
  cooperationValue: [
    { required: true, message: "协作对象不能为空", trigger: "blur" },
  ],
  voice: [{ required: true, message: "转单语音不能为空", trigger: "blur" }],
});

// 转单审核   (-----------------------------------------------)
const transOrderVisible = ref(false); // 控制转单审核弹窗
const transOrderData = ref({
  id: "",
  userName: "",
  voice: "",
  remark: "",
  userId: "", // 被派单师傅id(下拉框)
  voiceLength: "", // 录音长度
}); // 挑选中的对象
const ruleFormTransOrder = ref();
const transOrderObj = reactive({
  list: [],
}); // 转单审核中审核对象数组
const transOrderAudio = ref(); // 语音对象
// 转单审核验证
const transOrderRules = reactive({
  userName: [{ required: true, message: "申请人不能为空", trigger: "blur" }],
  voice: [{ required: true, message: "转单语音不能为空", trigger: "blur" }],
  userId: [{ required: true, message: "请选择派单人员", trigger: "blur" }],
});

// 关单 （关单--------------------------------------------）
const customsOrderVisible = ref(false); // 关单弹窗
const customsOrderList = ref(); // 关单原因列表
const customsOrderData = ref({
  reason: "",
  recordId: "",
}); // 选择的关单原因

// 改价  （改价--------------------------------------------）
const changePriceVisible = ref(false); // 改价弹窗
const ruleFormChangePrice = ref(); // 改价ref
const changePriceIndex = ref(0);
const changePriceSum = ref(0); // 总金额
const changePriceNum = reactive({ list: [] }); // 改价中的物品数量
const changePriceList = reactive({ list: [] }); // 物品种类
const changePriceList2 = reactive({ list: [] }); // 耗材种类
const changePriceData = ref({
  id: "",
  schoolId: "",
  recordId: "",
});
// 打印
const printVisible = ref(false)
// 打印功能
const prints = ref({
  id: 'printWrapper',//这里的id就是上面我们的打印区域id，实现指哪打哪
  popTitle: '配置页眉标题', // 打印配置页上方的标题
  extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>',
  extraHead: '', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  preview: false, // 是否启动预览模式，默认是false
  previewTitle: '预览的标题', // 打印预览的标题
  previewPrintBtnLabel: '预览结束，开始打印', // 打印预览的标题下方的按钮文本，点击可进入打印
  zIndex: 20020, // 预览窗口的z-index，默认是20002，最好比默认值更高
  previewBeforeOpenCallback() { console.log('正在加载预览窗口！'); }, // 预览窗口打开之前的callback
  previewOpenCallback() { console.log('已经加载完预览窗口，预览打开了！') }, // 预览窗口打开时的callback
  beforeOpenCallback() { console.log('开始打印之前！') }, // 开始打印之前的callback
  openCallback() { console.log('执行打印了！') }, // 调用打印时的callback
  closeCallback() { console.log('关闭了打印工具！') }, // 关闭打印的callback(无法区分确认or取消)
  clickMounted() { console.log('点击v-print绑定的按钮了！') },
})

watch(changePriceNum, (newVal, oldVal) => {
  // console.log(newVal);
  changePriceSum.value = 0;
  changePriceNum.list.forEach((i) => {
    i.totalPrice = i.number * i.price;
    changePriceSum.value += i.totalPrice;
  });
});
const validatePrice = (rule, value, callback) => {
  if (/^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/.test(value)) {
    callback();
  } else {
    callback(new Error("最多包含两位小数的正数"));
  }
};
const changePriceRules = reactive({
  articleId: [{ required: true, message: "物品种类不能为空", trigger: "blur" }],
  number: [
    { required: true, message: "耗材数量不能为空", trigger: "blur" },
    { pattern: /^\+?[1-9]\d*$/, message: "请输入大于0的正整数" },
  ],
  consumeId: [{ required: true, message: "耗材名称不能为空", trigger: "blur" }],
  price: [
    { required: true, message: "单价不能为空", trigger: "blur" },
    { validator: validatePrice, trigger: "blur" },
  ],
  totalPrice: [{ required: true, message: "金额不能为空", trigger: "blur" }],
}); // 改价表单验证

const api = ref(""); // 拼接接口地址
// 筛选框条件
const searchInput = reactive({
  keyWord: "",
  createTime: "",
  maintenanceName: "",
  schoolId: "",
}); // 搜索按钮数据

const currentPage = ref(1); // 当前页
const pageSize = ref(10);
const total = ref(15); // 当前总数
const selectData = reactive({ list: [] }); // 多选框选择的数据

watch(
  () => searchInput.createTime,
  (newVal, oldVal) => {
    console.log("监听时间:", newVal);
    if (newVal == null) {
      searchBtn();
    }
  }
);
// 天数切换按钮选项
const dayBtn = (index) => {
  dayIndex.value = index;
  getList();
};


// 工单数据
const getList = async () => {
  loading.value = true;

  let data = {
    currentPage: currentPage.value,
    pageCount: pageSize.value,
    keyWord: searchInput.keyWord,
    state: dayIndex.value,
    schoolId: searchInput.schoolId,
    maintenanceName: searchInput.maintenanceName
  };
  if (searchInput.createTime) {
    data.startTime = searchInput.createTime[0];
    data.endTime = searchInput.createTime[1];
  }
  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/queryManagePage",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "工单数据");
  if (res.status == 200) {
    tableData.list = res.data.data.list;
    total.value = res.data.data.totalCount;
    loading.value = false;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
    if (res.data.code == 570) {
      sessionStorage.removeItem("token")
      router.push({
        path: `/login`,
      });
    }
  }
  // console.log(res);
};
// 切换校区
const selSchool = async (val) => {
  let data = {
    schoolId: val,
    keyWord: searchInput.keyWord,
    maintenanceName: searchInput.maintenanceName
  };
  if (searchInput.createTime) {
    data.startTime = searchInput.createTime[0];
    data.endTime = searchInput.createTime[1];
  }
  let ress = await axios({
    method: "get",
    url: api.value + "/repairRecord/queryManageCount",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  day.value = [];
  console.log(ress, "工单管理头部状态数量");
  if (ress.status == 200) {
    let obj = ress.data.data;
    Object.keys(obj).forEach(function (key) {
      // console.log(key, obj[key]);
      if (key == "allCount") {
        day.value.push({
          key: obj[key],
          name: "全部",
          state: 0,
        });
      }
      if (key == "dispatchCount") {
        day.value.push({
          key: obj[key],
          name: "待接单",
          state: 1,
        });
      }
      if (key == "maintenanceCount") {
        day.value.push({
          key: obj[key],
          name: "维修中",
          state: 2,
        });
      }
      if (key == "logisticsCount") {
        day.value.push({
          key: obj[key],
          name: "待处理",
          state: 3,
        });
      }
      if (key == "examineCount") {
        day.value.push({
          key: obj[key],
          name: "待审核",
          state: 4,
        });
      }
      if (key == "finishedCount") {
        day.value.push({
          key: obj[key],
          name: "已完成",
          state: 5,
        });
      }
      if (key == "canceledCount") {
        day.value.push({
          key: obj[key],
          name: "已取消",
          state: 6,
        });
      }
      if (key == "closedCount") {
        day.value.push({
          key: obj[key],
          name: "已关单",
          state: 7,
        });
      }
      if (key == "timeoutCount") {
        day.value.push({
          key: obj[key],
          name: "已超时",
          state: 8,
        });
      }
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
  getList();
};
// 添加工单中上传照片组件功能  (新建工单------------------------)
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile.uid, uploadFiles);
  fileList.value = fileList.value.filter((item) => {
    return item.uid != uploadFile.uid;
  });
};
// 点击图片的查看按钮
const handlePreview = (file) => {
  imgUrl.value = file.url;
  imgVisible.value = true;
  console.log(file);
};
// 添加照片时往fileList列表中添加图片信息
const handleChange = (file, fileLists) => {
  fileList.value.push(file);
  console.log(file, "filefilefilefilefile");
};
// 可以获取图片参数
const handleUpload = (file) => {
  console.log(file, "filefilefilefilefile");
};
// 新建工单按钮
const addlist = () => {
  dialongTitle.value = "新建工单";
  addDialogVisible.value = true;
};
//编辑工单按钮
const edit = (row) => {
  dialongTitle.value = "编辑工单";
  addDialogVisible.value = true;
  console.log(row);
};
// 取消添加工单
const cancelAdd = () => {
  addDialogVisible.value = false;
  ruleFormAddStaff.value.resetFields();
};
// 确认添加工单
const submitAdd = async (formEl) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if (dialongTitle.value == "新增驾驶员") {
        let data = {
          user_name: ruleForm.name,
          user_phone: ruleForm.phone,
          user_zz: ruleForm.post,
          card_number: ruleForm.cardnumber,
        };
        // let res = await admin.adminAdd(data);
        let res = await axios({
          method: "post",
          url: api.value + "/carBook/userinsert.action",
          headers: {
            "Content-Type": "application/json;charset=utf-8",
            token: sessionStorage.getItem("token"),
          },
          data: data,
        });
        // console.log(res, "添加账号");
        if (res.data.code == 200) {
          getList();
          ElMessage({
            type: "success",
            showClose: true,
            message: res.data.message,
            center: true,
          });
          addDialogVisible.value = false;
          ruleFormRef.value.resetFields();
        } else {
          ElMessage({
            type: "error",
            showClose: true,
            message: res.data.message,
            center: true,
          });
        }
      } else {
        let data = {
          user_name: ruleForm.name,
          user_phone: ruleForm.phone,
          user_zz: ruleForm.post,
          id: ruleForm.id,
        };
        // let res = await admin.adminAdd(data);
        let res = await axios({
          method: "post",
          url: api.value + "/carBook/userupdate.action",
          headers: {
            "Content-Type": "application/json;charset=utf-8",
            token: sessionStorage.getItem("token"),
          },
          data: data,
        });
        // console.log(res, "修改账号");
        if (res.data.code == 200) {
          getList();

          ElMessage({
            type: "success",
            showClose: true,
            message: res.data.message,
            center: true,
          });
          addDialogVisible.value = false;
          ruleFormRef.value.resetFields();
        } else {
          ElMessage({
            type: "error",
            showClose: true,
            message: res.data.message,
            center: true,
          });
        }
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};

// 派单按钮   (派单------------------------------------------)
// 获取派单表格数据
const sendOrderTable = async () => {
  let data = {
    recordId: sendOrderData.id,
    currentPage: sendOrderCurrentPage.value,
    pageCount: sendOrderPageSize.value,
    keyWord: sendOrderSearch.value,
  };

  let res = await axios({
    method: "get",
    url: api.value + "/repairUser/queryPageRepairUsers",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "派单数据");
  if (res.data.code == 200) {
    sendOrderData.list = res.data.data.list;
    sendOrderTotal.value = res.data.data.totalCount;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 搜索按钮
const sendOrderBtn = () => {
  sendOrderTable();
};
// 点击派单按钮
const sendOrders = async (row) => {
  sendOrderVisible.value = true;
  sendOrderData.id = row.id;
  sendOrderTable();
};
// 确定派单
const sendOrderTrue = (row) => {
  ElMessageBox.confirm(`确定是否派单?`, "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let data = {
        id: row.id,
        acceptanceTime: row.acceptanceTime,
        shiftId: row.shiftId,
        articleId: row.articleId,
        recordId: sendOrderData.id,
      };
      let res = await axios({
        method: "post",
        url: api.value + "/repairRecord/receiveSendOrders",
        headers: {
          token: sessionStorage.getItem("token"),
          user_head: sessionStorage.getItem("userhead"),
        },
        data: data,
      });
      if (res.data.code == 200) {
        sendOrderVisible.value = false;
        getList();
        ElMessage({
          type: "success",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      }
      console.log(res);
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消删除",
      });
    });
};
// 取消派单按钮
const cancelSendOrders = () => {
  sendOrderVisible.value = false;
};
// 派单按钮分页
const sendOrderTableChange = (val) => {
  console.log(val);
  sendOrderCurrentPage.value = value;
  sendOrderTable();
};

// 工单详情按钮  (工单详情-----------------------------------)
const orderInfo = async (row) => {
  orderInfoVisible.value = true;
  let data = { recordId: row.id };
  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/details",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "详情数据");
  if (res.data.code == 200) {
    orderInfoData.value.recordNo = res.data.data.recordNo;
    orderInfoData.value.userName = res.data.data.userName;
    orderInfoData.value.userPhone = res.data.data.userPhone;
    orderInfoData.value.description = res.data.data.description;
    orderInfoData.value.address = res.data.data.address;
    orderInfoData.value.areaName = res.data.data.areaName;
    orderInfoData.value.articleName = res.data.data.articleName;
    orderInfoData.value.voice = res.data.data.voice;
    orderInfoData.value.voiceLength = res.data.data.voiceLength;
    orderInfoData.value.reportTime = res.data.data.reportTime;
    orderInfoData.value.totalTime = res.data.data.totalTime;
    orderInfoData.value.time = res.data.data.time;
    orderInfoData.value.tracks = res.data.data.tracks;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 取消工单详情按钮
const cancelOrderInfo = () => {
  audio.value.load();
  if (orderInfoData.value.tracks) {
    orderInfoData.value.tracks.forEach((item) => {
      console.log(item.id);
      let audioId = document.getElementById(`audio${item.id}`);
      if (item.voice) {
        console.log(item.id);
        audioId.load();
      }
    });
  }
  orderInfoVisible.value = false;
};
// 工单详情 点击音频
const bofang = () => {
  orderInfoData.value.tracks.forEach((item) => {
    // console.log(item.id);
    let audioId = document.getElementById(`audio${item.id}`);
    if (item.voice) {
      console.log("详情录音重置");
      audioId.load();
    }
  });
  // console.log(audio.value.duration, "音频总时长");

  if (audio.value.paused == true) {
    audio.value.play();
    console.log("详情录音播放");
  } else {
    audio.value.pause();
  }
};
// 步骤条中的播放
const audioPlay = (i) => {
  audio.value.load();
  console.log("详情录音重置");

  orderInfoData.value.tracks.forEach((item) => {
    let audioId = document.getElementById(`audio${item.id}`);
    if (item.voice) {
      console.log("步骤条录音重置");
      audioId.load();
    }
  });
  let audioId = document.getElementById(`audio${i.id}`);

  if (audioId.paused == true) {
    audioId.play();
    console.log("步骤条录音播放");
  } else {
    audioId.pause();
  }
};
// 点击工单步骤中的图片查看
const lookImg = (item) => {
  bgImg.value = true
  bgImgurl.value = item
}

// 延时弹窗 (延时-----------------------------------)
const delayed = (row) => {
  delayedVisible.value = true;
  console.log(row);
  delayedData.value.id = row.id;
};
// 延时关闭功能
const cancelDelayed = () => {
  delayedVisible.value = false;
  delayedData.value.time1 = "";
  delayedData.value.time2 = "";
};
// 确定延时
const delayedYes = async () => {
  let data = {
    recordId: delayedData.value.id,
    receiving: delayedData.value.time1,
    maintain: delayedData.value.time2,
  };
  let res = await axios({
    method: "post",
    url: api.value + "/repairRecord/delayed",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    data: data,
  });
  console.log(res, "延时");
  if (res.data.code == 200) {
    delayedVisible.value = false;
    delayedData.value.time1 = "";
    delayedData.value.time2 = "";
    getList();
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
    addDialogVisible.value = false;
    ruleFormRef.value.resetFields();
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 回复弹窗  （回复-------------------------------）
const reply = (row) => {
  replyVisible.value = true;
  replycontent.value.id = row.id;
};
// 关闭回复弹窗
const cancelReply = () => {
  replyVisible.value = false;
  replycontent.value.reply = "";
};
// 确定回复
const replycontentYes = async () => {
  let data = {
    recordId: replycontent.value.id,
    content: replycontent.value.reply,
  };
  let res = await axios({
    method: "post",
    url: api.value + "/repairRecord/revert",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    data: data,
  });
  console.log(res, "延时");
  if (res.data.code == 200) {
    replyVisible.value = false;
    replycontent.value.reply = "";
    getList();
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 协作审核 (协作审核--------------------------------------)
// 协作审核中协作对象多选
const cooperation = async (row) => {
  console.log(row, "协作审核数据row");
  cooperationVisible.value = true;
  cooperationData.value.cooperationValue = [];
  let data = { recordId: row.id };
  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/cooperationDetail",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "协作审核数据");

  let datas = {
    // currentPage: 1,
    // pageCount: 10,
    schoolId: row.schoolId,
    userId: row.id,
    recordId: row.id
  };
  let ress = await axios({
    method: "get",
    url: api.value + "/repairUser/queryPageCollaborator",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: datas,
  });
  console.log(ress, "协作对象下拉框数据");

  if (res.data.code == 200) {
    cooperationData.value.collaboratorDatas = res.data.data.collaboratorDatas;
    cooperationData.value.id = res.data.data.id;
    // cooperationData.value.cooperationValue = res.data.data.cooperationValue;
    cooperationData.value.cooperationValue = [];
    res.data.data.collaboratorDatas.forEach((item) => {
      cooperationData.value.cooperationValue.push(item.id.toString());
    });
    cooperationData.value.remark = res.data.data.remark;
    cooperationData.value.userName = res.data.data.userName;
    cooperationData.value.voice = res.data.data.voice;
    cooperationData.value.voiceLength = res.data.data.voiceLength;

    let cooperationName = ress.data.data.list;
    options.value = Array.from({ length: cooperationName.length }).map(
      (_, idx) => {
        return {
          value: `${cooperationName[idx].id}`,
          label: `${cooperationName[idx].name}`,
        };
      }
    );

  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 选择协作对象发生变化
const cooperationSel = (val) => {
  console.log(val);
  cooperationData.value.cooperationValue = val;
};
// 关闭协作审核弹窗
const cancelCooperation = () => {
  cooperationAudio.value.load();

  cooperationVisible.value = false;
};
// 播放音频
const cooperationAudioPlay = () => {
  if (cooperationAudio.value.paused == true) {
    cooperationAudio.value.play();
  } else {
    cooperationAudio.value.pause();
    // clearInterval(timer);
    // timer = null;
  }
};
// 确定协作审核
const cooperationYes = async (formEl, flag) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      console.log(flag);

      let data = {
        id: cooperationData.value.id,
        collaborator: cooperationData.value.cooperationValue,
        approverStatu: flag,
        remark: cooperationData.value.remark,
      };
      let res = await axios({
        method: "post",
        url: api.value + "/repairRecord/cooperationOrders",
        headers: {
          token: sessionStorage.getItem("token"),
          user_head: sessionStorage.getItem("userhead"),
        },
        data: data,
      });
      console.log(res, "确定协作审核");
      if (res.data.code == 200) {
        cooperationAudio.value.load();
        cooperationVisible.value = false;
        searchBtn();
        ElMessage({
          type: "success",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      } else {
        cooperationAudio.value.load();
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};

// 转单审核弹窗  (转单审核-----------------------------------)
const transOrder = async (row) => {
  console.log(row);

  transOrderVisible.value = true;
  let data = { recordId: row.id };
  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/transferDetail",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "转单审核数据");
  if (res.data.code == 200) {
    transOrderData.value.id = res.data.data.id;
    transOrderData.value.userName = res.data.data.userName;
    transOrderData.value.voice = res.data.data.voice;
    transOrderData.value.remark = res.data.data.remark;
    transOrderData.value.voiceLength = res.data.data.voiceLength;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
  // 下拉框人员数据
  let datas = { recordId: row.id };
  let ress = await axios({
    method: "get",
    url: api.value + "/repairRecord/dropDown",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: datas,
  });
  console.log(ress, "下拉框数据");
  if (ress.data.code == 200) {
    transOrderObj.list = ress.data.data;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};

// 关闭转单审核
const cancelTransOrder = () => {
  transOrderVisible.value = false;
  ruleFormTransOrder.value.resetFields();
  transOrderAudio.value.load();
};
// 播放音频
const transOrderAudioPlay = () => {
  if (transOrderAudio.value.paused == true) {
    transOrderAudio.value.play();
  } else {
    transOrderAudio.value.pause();
    // clearInterval(timer);
    // timer = null;
  }
};
// 确定转单审核
const transOrderYes = async (formEl, flag) => {
  if (flag == 1) {
    if (!formEl) return;
    await formEl.validate(async (valid, fields) => {
      if (valid) {
        let data = {
          id: transOrderData.value.id,
          userId: transOrderData.value.userId,
          approverStatu: flag,
          remark: transOrderData.value.remark,
        };
        let res = await axios({
          method: "post",
          url: api.value + "/repairRecord/transfer",
          headers: {
            token: sessionStorage.getItem("token"),
            user_head: sessionStorage.getItem("userhead"),
          },
          data: data,
        });
        console.log(res, "确定转单审核");
        if (res.data.code == 200) {
          transOrderAudio.value.load();
          transOrderVisible.value = false;
          searchBtn();
          ElMessage({
            type: "success",
            showClose: true,
            message: res.data.message,
            center: true,
          });
        } else {
          transOrderAudio.value.load();
          ElMessage({
            type: "error",
            showClose: true,
            message: res.data.message,
            center: true,
          });
        }
      } else {
        console.log("error submit!", fields);
      }
    });
  } else {
    let data = {
      id: transOrderData.value.id,
      userId: transOrderData.value.userId,
      approverStatu: flag,
      remark: transOrderData.value.remark,
    };
    let res = await axios({
      method: "post",
      url: api.value + "/repairRecord/transfer",
      headers: {
        token: sessionStorage.getItem("token"),
        user_head: sessionStorage.getItem("userhead"),
      },
      data: data,
    });
    console.log(res, "确定转单审核");
    if (res.data.code == 200) {
      transOrderAudio.value.load();
      transOrderVisible.value = false;
      searchBtn();
      ElMessage({
        type: "success",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    } else {
      transOrderAudio.value.load();
      ElMessage({
        type: "error",
        showClose: true,
        message: res.data.message,
        center: true,
      });
    }
  }
};

// 关单弹窗  （关单-----------------------------------------）
const customsOrder = (row) => {
  customsOrderVisible.value = true;
  console.log(row, "关单row");
  customsOrderData.value.recordId = row.id;
  customsOrderData.value.reason = "";
};
const cancelCustomsOrder = () => {
  customsOrderVisible.value = false;
};
// 确定关单
const customsOrderYes = async () => {
  let data = {
    recordId: customsOrderData.value.recordId,
  };
  if (customsOrderData.value.reason) {
    data.reason = customsOrderData.value.reason;
  }
  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/closePCOrder",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });

  if (res.data.code == 200) {
    searchBtn();
    customsOrderVisible.value = false;
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: "关单原因不能为空",
      center: true,
    });
  }
};

// 改价弹窗  （改价-----------------------------------------）
const changePrice = async (row) => {
  changePriceVisible.value = true;

  changePriceData.value.schoolId = row.schoolId; // 复制校区id
  changePriceData.value.recordId = row.id; // 复制校区id

  let data = { recordId: row.id };
  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/alterPriceShow",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "改价显示  数据");

  if (res.data.code == 200) {
    res.data.data.forEach((item) => {
      Object.assign(item, item.repairConsumables);
    });
    changePriceSum.value = 0;
    changePriceNum.list = res.data.data;
    changePriceNum.list.forEach((i) => {
      changePriceSum.value += i.totalPrice;
      changePriceSel(i.articleId, i, 1);
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
  // 获取物品种类
  articleList(row);
};
// 获取物品种类数据
const articleList = async (row) => {
  let datas = { schoolId: row.schoolId };
  let ress = await axios({
    method: "get",
    url: api.value + "/repairRecord/alterPriceGoodsType",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: datas,
  });
  console.log(ress, "改价物品种类");
  if (ress.data.code == 200) {
    changePriceList.list = ress.data.data;
  } else {
    changePriceList.list = "";
    ElMessage({
      type: "error",
      showClose: true,
      message: ress.data.message,
      center: true,
    });
  }
};
// 切换物品
// const changePriceNumSel = (i, index) => {
//   console.log(i, index);
//   changePriceIndex.value = index;
//   changePriceNum.list.forEach((item) => {
//     if (item.id == i.id) {
//       changePriceSel(item.articleId);
//       changePriceData.value.articleId = Number(item.articleId);
//       changePriceData.value.articleName = item.articleName;
//       changePriceData.value.consumeId = Number(item.consumeId);
//       changePriceData.value.consumeName = item.consumeName;
//       changePriceData.value.id = item.id;
//       changePriceData.value.number = item.number;
//       changePriceData.value.price = item.price;
//       changePriceData.value.totalPrice = item.totalPrice;
//     }
//   });
// };
// 改变物品种类获取耗材名称数据
const changePriceSel = async (event, i, flag) => {
  // console.log(event, i);

  if (!flag) {
    i.consumeName = "";
    i.consumeId = "";
  }
  let data = {
    schoolId: changePriceData.value.schoolId,
    articleId: event,
  };
  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/alterPriceGoodsName",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    params: data,
  });
  console.log(res, "耗材名称数据");
  if (res.data.code == 200) {
    i.changePriceList2 = res.data.data;
    // res.data.data.forEach((item) => {
    //   if (item.consumeId == i.consumeId) {
    //     i.consumeName = item.consumeName;
    //   }
    // });
    // changePriceList2.list = res.data.data;
  } else {
    // changePriceList2.list = "";
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
};
// 改变耗材名称
const consumeChange = (event, i) => {
  // console.log(event, i, "改变耗材");
  i.changePriceList2.forEach((item) => {
    // console.log(item);
    if (item.id == event) {
      i.consumeName = item.name;
      i.price = item.price;
    }
  });
};
// 添加改价物品
const addChangePrice = () => {
  changePriceNum.list.push({});
};
// 删除改价
const delChangePrice = (row) => {
  console.log(row);
  changePriceNum.list = changePriceNum.list.filter((item) => {
    return item.consumeId != row.consumeId;
  });
};
// 确定改价
const changePriceYes = lodash.debounce(async () => {
  let arr = [];
  let ids = [];
  changePriceNum.list.forEach((i) => {
    ids.push(i.id);
    arr.push(i);
    // console.log(i.recordId);
    i.recordId = changePriceData.value.recordId;
  });
  console.log(arr);
  let data = {
    recordId: changePriceData.value.recordId, //工单ID
    ids: ids, //携带耗材记录信息的所有id
    totalPrice: changePriceSum.value, //所有耗材记录总金额
    repairConsumablesList: arr,
    // [
    // {
    //   id: changePriceData.value.id,
    //   recordId: changePriceData.value.recordId,
    //   articleId: changePriceData.value.articleId,
    //   consumeId: changePriceData.value.consumeId,
    //   consumeName: changePriceData.value.consumeName,
    //   price: changePriceData.value.price,
    //   number: changePriceData.value.number,
    //   totalPrice: changePriceData.value.totalPrice,
    // },
    // ]
  };
  console.log(data, "改价参数");

  let res = await axios({
    method: "post",
    url: api.value + "/repairRecord/alterPrice",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    data: data,
  });
  console.log(res, "修改 改价数据");
  if (res.data.code == 200) {
    getList();
    ElMessage({
      type: "success",
      showClose: true,
      message: res.data.message,
      center: true,
    });
    changePriceVisible.value = false;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
  }
}, 1500);
// 取消改价
const cancelChangePrice = () => {
  changePriceVisible.value = false;
};
// 打印（-----------------------------------------------------------------）
const print = () => {
  printVisible.value = true
}
const cancelPrint = () => {
  printVisible.value = false
}
// tab标签页操作
const addTab = (targetName) => {
  console.log(targetName);

  const newTabName = `${++tabIndex}`;
  editableTabs.value.push({
    articleName: "",
    consumeName: "",
    number: "",
    price: "",
    totalPrice: "",
    articleId: "",
    schoolId: "",
    id: "",
  });
  editableTabsValue.value = newTabName;
};
const removeTab = (targetName) => {
  console.log(targetName);

  // const tabs = editableTabs.value;
  // let activeName = editableTabsValue.value;
  // if (activeName === targetName) {
  //   tabs.forEach((tab, index) => {
  //     if (tab.name === targetName) {
  //       const nextTab = tabs[index + 1] || tabs[index - 1];
  //       if (nextTab) {
  //         activeName = nextTab.name;
  //       }
  //     }
  //   });
  // }

  // editableTabsValue.value = activeName;
  // editableTabs.value = tabs.filter((tab) => tab.name !== targetName);
};

// 搜索功能
const searchBtn = lodash.debounce(async () => {
  // getList();
  selSchool(searchInput.schoolId);
}, 300);
// 重置搜索
const searchRefresh = lodash.debounce(async () => {
  searchInput.name = "";
  searchInput.phone = "";
  searchInput.createTime = "";
  currentPage.value = 1;
  getList();
}, 300);

//删除按钮
const del = (row) => {
  ElMessageBox.confirm(`是否删除 ${row.user_name} 驾驶员?`, "提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let data = new FormData();
      data.set("id", row.id);
      // let res = await adminApi.adminLogin(data);
      let res = await axios({
        method: "post",
        url: api.value + "/carBook/userdel.action",
        headers: {
          token: sessionStorage.getItem("token"),
        },
        data: data,
      });
      if (res.data.code == 200) {
        if (tableData.list.length == 1 && currentPage.value != 1) {
          currentPage.value = currentPage.value - 1;
        }
        getList();
        ElMessage({
          type: "success",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      } else {
        ElMessage({
          type: "error",
          showClose: true,
          message: res.data.message,
          center: true,
        });
      }
      console.log(res);
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消删除",
      });
    });
};
//导出功能
const importExcel = lodash.debounce(async () => {
  let data = {
    keyWord: searchInput.keyWord,
    state: dayIndex.value,
    schoolId: searchInput.schoolId,
  };
  if (searchInput.createTime) {
    data.startTime = searchInput.createTime[0];
    data.endTime = searchInput.createTime[1];
  }
  let res = await axios({
    method: "get",
    url: api.value + "/repairRecord/reportExport",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
    responseType: "blob",
    params: data,
  });
  console.log(res, "导出工单数据");
  if (res.status == 200) {
    let name = `工单数据`;
    var content = res.data;
    var datas = new Blob([content]);
    var downloadUrl = window.URL.createObjectURL(datas);
    var anchor = document.createElement("a");
    anchor.href = downloadUrl;
    anchor.download = name + ".xlsx";
    anchor.click();
    window.URL.revokeObjectURL(datas);
    ElMessage({
      type: "success",
      showClose: true,
      message: "导出成功",
      center: true,
    });
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: "导出失败",
      center: true,
    });
  }
}, 1000);

// 多选框功能
const handleSelectionChange = (val) => {
  console.log(val);
  selectData.list = val;
};

// 表格斑马纹颜色修改
const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex % 2 === 0) {
    return "even";
  } else if (rowIndex % 2 !== 0) {
    return "odd";
  }
  return "";
};
// 分页
const handleCurrentChange = (value) => {
  // console.log(value);
  currentPage.value = value;
  getList();
};

onBeforeMount(async () => {
  api.value = store.state.user.api;

  if (sessionStorage.getItem("schoolId") == "null") {
    searchInput.schoolId = 0;
    schoolId.value = 0;
  } else {
    searchInput.schoolId = Number(sessionStorage.getItem("schoolId"));
    schoolId.value = Number(sessionStorage.getItem("schoolId"));
  }
  selSchool(searchInput.schoolId);

  // 关单原因列表
  let res = await axios({
    method: "get",
    url: api.value + "/repairClose/queryRepairCloses",
    headers: {
      token: sessionStorage.getItem("token"),
      user_head: sessionStorage.getItem("userhead"),
    },
  });
  console.log(res, "关单原因列表");
  if (res.data.code == 200) {
    customsOrderList.value = res.data.data;
  } else {
    ElMessage({
      type: "error",
      showClose: true,
      message: res.data.message,
      center: true,
    });
    if (res.data.code == 570) {
      sessionStorage.removeItem("token")
      router.push({
        path: `/login`,
      });
    }
  }
});
</script>

<style scoped lang="scss">
.content-box {
  width: 97.5%;
  height: 89%;
  margin: 20px auto;
  background-color: #fff;
  color: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 3px 10px rgba(213, 228, 252, 1);

  .left {
    // width: calc(100wh - 40px);
    display: flex;
    align-items: center;
    height: 60px;
    margin: 0 30px;
    border-bottom: 1px solid #ccc;
    color: #000;
    font-size: 18px;
    font-weight: 600;

    .cameratxt {
      margin-right: 15px;
      // color: #4392f7;
      height: 60px;
      line-height: 60px
    }
  }

  .middle {
    width: 96%;
    margin: 10px auto;
    padding-top: 10px;
    display: flex;
    flex-wrap: wrap;
    color: #000;
    align-items: center;
    justify-content: space-between;

    // border-bottom: 1px solid rgb(231, 231, 231);
    .filter {
      display: flex;

      align-items: center;

      .search {
        color: #fff;
      }

      .condition2 {
        margin-left: 30px;
      }
    }

    .gongneng {
      span {
        color: #fff;
      }
    }
  }

  .btn {
    margin: 10px 0;

    ul {
      list-style: none;
      display: flex;
      padding: 0 20px;
      margin: 0 0 0 15px;

      li {
        color: #000;
        // width: 80px;
        padding: 0 8px;
        height: 30px;
        border-radius: 8px;
        border: 1px solid #ccc;
        line-height: 30px;
        text-align: center;
        cursor: pointer;
        font-size: 14px;
        margin-right: 20px;
      }

      .li_active {
        // background-color: rgba(111, 182, 184, 1);
        border: 1px solid rgba(111, 182, 184, 1);
        color: rgba(111, 182, 184, 1);
      }
    }
  }

  .footer {
    width: 96%;
    height: 550px;
    margin: 10px auto 30px;

    .el-table--fit {
      height: 100%;

      :deep(.el-table__header-wrapper) {
        background-color: #000;
        font-size: 16px;

        .el-table__header {
          tr {
            color: #000;
          }
        }
      }

      :deep(.el-table__row) {
        height: 50px;
        font-size: 16px;
        color: rgba(77, 77, 77, 1);

        .operation {
          display: flex;
          font-size: 16px;
          justify-content: space-around;

          .btns {
            cursor: pointer;
            font-size: 14px;
            color: rgba(111, 182, 184, 1);
          }

          .btns:hover {
            color: red;
            font-size: 16px;
          }
        }
      }

      :deep(.el-table__row td) {
        padding: 0;
        border: 0;

        // 表格工单编号样式
        .orderNum {
          display: flex;
          align-items: center;
          justify-content: center;

          .xi {
            width: 18px;
            height: 18px;
            font-size: 12px;
            color: #fff;
            line-height: 18px;
            text-align: center;
            background-color: rgba(111, 182, 184, 1);
            margin-left: 8px;
          }

          .xie {
            width: 18px;
            height: 18px;
            font-size: 12px;
            color: #fff;
            line-height: 18px;
            text-align: center;
            background-color: red;
            margin-left: 8px;
          }
        }
      }

      .el-button--primary {
        margin-left: 5px;
      }

      :deep(.el-table__body .even) {
        background-color: #fff;
      }

      :deep(.el-table__body .odd) {
        background-color: rgba(240, 243, 247, 1);
      }

      // 表格操作样式
    }

    // 新建工单弹窗样式
    :deep(.addStaff) {
      //   height: 420px;
      border-radius: 11px;

      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(237, 241, 245, 1);
        font-weight: 600;
        margin: 0;

        .el-dialog__headerbtn {
          outline: none;
        }
      }

      .el-dialog__body {
        padding: 30px 20px 10px 20px;

        // 添加工单中上传照片样式
        .el-form-item__content {
          .avatar-uploader .avatar {
            width: 128px;
            height: 128px;
            display: block;
          }

          .avatar-uploader .el-upload {
            width: 128px;
            height: 128px;
            background-color: #ccc;
            border: 1px dashed var(--el-border-color);
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: var(--el-transition-duration-fast);
          }

          .avatar-uploader .el-upload:hover {
            border-color: var(--el-color-primary);
          }

          .avatar-uploader-icon {
            width: 88px;
            height: 88px;
            text-align: center;
          }

          // 添加多张图片样式
          .el-upload-list {
            .el-upload-list__item {
              width: 128px;
              height: 128px;
            }
          }
        }

        .el-input {
          width: 230px;
        }

        .el-textarea__inner {
          width: 230px;
        }

        .options {
          .el-form-item__content {
            .queding {
              margin-left: 20px;
              color: #fff;
            }

            display: flex;
            flex-direction: row-reverse;
          }
        }
      }
    }

    // 查看图片弹窗
    :deep(.imgVisible) {
      .el-dialog__body {
        padding: 0;
        height: 640px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      img {
        height: 100%;
        padding: 0;
        margin: 0;
      }
    }

    // 派单样式
    :deep(.sendOrder) {
      //   height: 420px;
      border-radius: 11px;

      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(237, 241, 245, 1);
        font-weight: 600;
        margin: 0;

        .el-dialog__headerbtn {
          outline: none;
        }
      }

      .el-dialog__body {
        padding: 30px 20px 10px 20px;

        .send_order {
          .table {
            margin: 20px 0;
          }
        }

        .options {
          display: flex;
          flex-direction: row-reverse;
          margin: 10px 0 25px 0;

          .queding {
            margin-left: 20px;
            color: #fff;
          }
        }
      }
    }

    // 详情样式
    :deep(.orderInfo) {
      height: 800px;
      overflow: hidden;
      border-radius: 11px;

      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(237, 241, 245, 1);
        font-weight: 600;
        margin: 0;

        .el-dialog__headerbtn {
          outline: none;
        }
      }

      .el-dialog__body {
        height: 720px;
        overflow: auto;
        padding: 0px 20px 10px 20px;

        .order_info {
          .title {
            display: flex;
            align-items: center;
            margin: 25px 0 10px 0;

            img {
              width: 20px;
              height: 20px;
              margin-right: 10px;
            }

            span {
              color: #000;
              font-size: 18px;
              font-weight: 600;
            }
          }

          // 工单详情 排列模式样式
          .workNum {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            font-size: 16px;

            .audio {
              width: 98px;
              height: 30px;
              border-radius: 42.41px;
              background: rgba(255, 255, 255, 1);
              box-shadow: 0px 0px 1.68px rgba(0, 0, 0, 0.25);
              display: flex;
              align-items: center;
              cursor: pointer;

              img {
                width: 18px;
                height: 18px;
                margin-left: 5px;
              }

              .audioNum {
                font-size: 16px;
              }
            }

            .titles {
              color: rgba(128, 128, 128, 1);
              margin-right: 8px;
              width: 80px;
              font-weight: 400;
            }

            span {
              color: #000;
              font-weight: 600;
              width: 640px;
            }
          }

          // 工单详情 步骤条样式
          .steps {
            .el-step {

              // margin: 15px 0;
              .el-step__main {
                display: flex;
                margin-bottom: 15px;

                span {
                  font-size: 16px;
                }

                .el-step__title {
                  display: inline;
                  padding: 0 15px 0 0;

                  span {
                    background-color: rgba(111, 182, 184, 1);
                    color: #fff;
                    padding: 1px 3px;
                    border-radius: 3px;
                  }
                }
              }

              .el-step__description {
                .content {
                  margin-top: 7px;
                }

                .evaluateImg {
                  width: 500px;
                  margin: 10px 0;
                  display: flex;
                  flex-wrap: wrap;

                  img {
                    width: 80px;
                    // height: 40px;
                    margin: 5px 10px 0 0;
                  }
                }

                .audio {
                  width: 98px;
                  height: 30px;
                  border-radius: 42.41px;
                  background: rgba(255, 255, 255, 1);
                  box-shadow: 0px 0px 1.68px rgba(0, 0, 0, 0.25);
                  display: flex;
                  align-items: center;
                  cursor: pointer;

                  img {
                    width: 18px;
                    height: 18px;
                    margin-left: 5px;
                  }

                  .audioNum {
                    font-size: 16px;
                    color: #000;
                  }
                }
              }
            }
          }
        }
      }
    }

    // 延时弹窗样式
    :deep(.delayed) {
      //   height: 420px;
      border-radius: 11px;

      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(237, 241, 245, 1);
        font-weight: 600;
        margin: 0;

        .el-dialog__headerbtn {
          outline: none;
        }
      }

      .el-dialog__body {
        padding: 0px 30px 10px 20px;

        .kaohe {
          margin: 25px 0;
        }

        .options {
          display: flex;
          flex-direction: row-reverse;
          margin: 100px 0 25px 0;

          .queding {
            margin-left: 20px;
            color: #fff;
          }
        }
      }
    }

    // 回复弹窗样式
    :deep(.reply) {
      //   height: 420px;
      border-radius: 11px;

      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(237, 241, 245, 1);
        font-weight: 600;
        margin: 0;

        .el-dialog__headerbtn {
          outline: none;
        }
      }

      .el-dialog__body {
        padding: 0px 30px 10px 20px;

        .content {
          margin: 25px 0;
        }

        .options {
          display: flex;
          flex-direction: row-reverse;
          margin: 20px 0 25px 0;

          .queding {
            margin-left: 20px;
            color: #fff;
          }
        }
      }
    }

    // 协作审核弹窗样式
    :deep(.cooperation) {
      //   height: 420px;
      border-radius: 11px;

      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(237, 241, 245, 1);
        font-weight: 600;
        margin: 0;

        .el-dialog__headerbtn {
          outline: none;
        }
      }

      .el-dialog__body {
        padding: 10px 30px 10px 30px;

        .block {
          display: flex;
          align-items: center;
          margin: 15px 0;
          color: #000;

          .name {
            margin-right: 8px;
          }
        }

        .audio {
          width: 98px;
          height: 30px;
          cursor: pointer;
          border-radius: 42.41px;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 0px 1.68px rgba(0, 0, 0, 0.25);
          display: flex;
          align-items: center;

          img {
            width: 18px;
            height: 18px;
            margin-left: 5px;
          }

          .audioNum {
            font-size: 16px;
          }
        }

        .content {
          display: flex;
          flex-direction: column;
          color: #000;

          span {
            display: inline-block;
            margin: 0 0 10px 0;
          }

          .el-textarea {
            width: 400px;
          }
        }

        .options {
          display: flex;
          flex-direction: row-reverse;
          margin: 20px 20px 0 0;
          width: 100%;

          .queding {
            margin-left: 20px;
            color: #fff;
          }
        }
      }
    }

    // 转单审核弹窗样式
    :deep(.transOrder) {
      //   height: 420px;
      border-radius: 11px;

      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(237, 241, 245, 1);
        font-weight: 600;
        margin: 0;

        .el-dialog__headerbtn {
          outline: none;
        }
      }

      .el-dialog__body {
        padding: 25px 20px 10px 20px;

        .el-form-item__label {
          color: #000;
        }

        .el-textarea {
          width: 400px;
        }

        .el-input {
          width: 400px;
        }

        .audio {
          width: 98px;
          height: 30px;
          cursor: pointer;
          border-radius: 42.41px;
          background: rgba(255, 255, 255, 1);
          box-shadow: 0px 0px 1.68px rgba(0, 0, 0, 0.25);
          display: flex;
          align-items: center;

          img {
            width: 18px;
            height: 18px;
            margin-left: 5px;
          }

          .audioNum {
            font-size: 16px;
          }
        }

        .options {
          display: flex;
          flex-direction: row-reverse;
          margin: 20px 20px 0 0;
          width: 100%;

          .queding {
            margin-left: 20px;
            color: #fff;
          }
        }
      }
    }

    // 关单弹窗样式
    :deep(.customsOrder) {
      //   height: 420px;
      border-radius: 11px;

      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(237, 241, 245, 1);
        font-weight: 600;
        margin: 0;

        .el-dialog__headerbtn {
          outline: none;
        }
      }

      .el-dialog__body {
        padding: 0px 30px 10px 30px;

        .content {
          color: #000;
          margin: 25px 0 150px 0;

          .name {
            display: inline-block;
            margin-bottom: 20px;
          }

          .el-input {
            width: 400px;
            margin-left: 10px;
          }
        }

        .options {
          display: flex;
          flex-direction: row-reverse;
          margin: 30px 0 10px 0;

          .queding {
            margin-left: 20px;
            color: #fff;
          }
        }
      }
    }

    // 改价弹窗样式
    :deep(.changePrice) {
      //   height: 420px;
      border-radius: 11px;

      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(237, 241, 245, 1);
        font-weight: 600;
        margin: 0;

        .el-dialog__headerbtn {
          outline: none;
        }
      }

      .el-dialog__body {
        padding: 0;
        max-height: 700px;
        overflow: auto;

        ul {
          list-style: none;
          display: flex;
          flex-wrap: wrap;
          margin: 0 0 14px 0;
          padding: 0;

          li {
            margin: 0 4px;
            padding: 2px 4px;
            border-radius: 3px;
            // border: 1px solid #ccc;
            background-color: #ccc;
            color: #fff;
            cursor: pointer;
            box-sizing: border-box;
            display: flex;
            align-items: center;

            img {
              width: 18px;
              height: 18px;
              margin-left: 5px;
            }
          }

          .li_active {
            background-color: rgba(111, 182, 184, 1);
            // border: 1px solid rgba(111, 182, 184, 1);
          }
        }

        .goodsCard {
          border: 1px solid #ccc;
          margin: 20px 20px;
          padding: 0 10px;

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

            h2 {
              margin: 10px;
            }

            span {
              color: #fff;
            }
          }

          .label {
            display: flex;
            margin: 10px;

            .type {
              width: 75px;
            }
          }

          .label:last-child {
            display: flex;
            margin-bottom: 20px;

            .type {
              width: 75px;
            }
          }
        }

        .addGoods {
          width: 94%;
          margin: 0 auto;
        }

        .el-form-item__label {
          color: #000;
        }

        .el-textarea {
          width: 400px;
        }

        .el-input {
          width: 400px;
        }

        .priceSum {
          width: 94%;
          display: flex;
          justify-content: center;
          margin: 20px auto;

          .totalPrice {
            width: 200px;
            font-size: 18px;
            color: #000;
          }
        }

        .options {
          display: flex;
          flex-direction: row-reverse;
          width: 100%;

          .queding {
            margin-left: 20px;
            color: #fff;
          }
        }
      }
    }

    // 打印
    :deep(.printDialog) {
      //   height: 420px;
      border-radius: 11px;

      .el-dialog__header {
        border-radius: 11px 11px 0 0;
        background: rgba(237, 241, 245, 1);
        font-weight: 600;
        margin: 0;

        .el-dialog__headerbtn {
          outline: none;
        }
      }

      .el-dialog__body {
        padding: 0px 30px 10px 30px;

        .content {
          color: #000;
          margin: 5px 0 30px 0;
          font-size: 18px;

          .title {
            margin: 15px 0;
            display: flex;
            justify-content: space-between;
          }

          .name {
            margin: 100px 0 0 0;

            span {
              display: inline-block;
            }

            span:nth-child(1) {
              width: 300px;
              text-align: right;
            }

            span:nth-child(2) {
              width: 150px;
              padding-left: 5px;
            }

            span:nth-child(3) {
              width: 100px;
              text-align: right;
            }

            span:nth-child(4) {
              padding-left: 5px;
            }
          }

          .date {
            margin: 10px 0 60px 0;


          }

          h3 {
            margin: 20px 0 30px 0;
            font-size: 26px;
            text-align: center;
          }

          .printTable {
            table {
              width: 700px;
              border-collapse: collapse; //消除单元格间距

              tr {
                td {
                  padding: 10px 20px;
                }
              }

            }
          }
        }

        .options {
          display: flex;
          flex-direction: row-reverse;
          margin: 30px 0 10px 0;

          .queding {
            margin-left: 20px;
            color: #fff;
          }
        }
      }
    }
  }

  .el-pagination {
    // width: 1600px;
    width: 96%;
    margin: 0 auto 18px;
    justify-content: flex-end;

    :deep(.el-pagination__total) {
      color: #000;
    }

    :deep(.el-pagination__goto) {
      color: #000;
    }

    :deep(.el-pagination__classifier) {
      color: #000;
    }

    :deep(.el-input__wrapper) {
      border: 1px solid rgba(0, 0, 0, 1);
      border-radius: 5px;
      box-shadow: none;
    }

    :deep(.el-pager li) {
      margin: 0 5px;
      border: 1px solid rgba(0, 0, 0, 1);
      border-radius: 5px;
      background-color: transparent;
    }

    :deep(.el-pager li.is-active) {
      background-color: rgba(111, 182, 184, 1);
    }

    :deep(.btn-prev) {
      margin-right: 5px;
      border: 1px solid rgba(0, 0, 0, 1);
      border-radius: 5px;
      background-color: transparent;
    }

    :deep(.btn-next) {
      margin-left: 5px;
      border: 1px solid rgba(0, 0, 0, 1);
      border-radius: 5px;
      background-color: transparent;
    }
  }

  .bgImg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99999999;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;

    img {
      height: 100%;
    }
  }
}

.el-input {
  width: 192px;
}
</style>
