<template>
  <basic-container style="max-height: 790px;overflow: hidden; " class="no-print">
    <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" ref="crud" v-model="form"
      :search.sync="searchForm" :permission="permissionList" :before-open="beforeOpen" :before-close="beforeClose"
      @search-change="searchChange" @search-reset="searchReset" @current-change="currentChange"
      @size-change="sizeChange" @refresh-change="refreshChange" @on-load="onLoad" @selection-change="selectionChange">
      <template slot-scope="{row}" slot="timeRangeSearch">
        <el-date-picker v-model="searchForm.timeRange" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
          range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </template>
      <!-- <template slot-scope="{row}" slot="repairStatusSearch">

      </template> -->
      <template slot-scope="{ row }" slot="status">

        <el-tag :type="getStatus('maintain', role_id, row.status).type">{{ getStatus('maintain', role_id,
          row.status).name
          }}</el-tag>
      </template>
      <template slot-scope="{ type, disabled }" slot="statusForm">
        <div v-if="type == 'view'">
          <el-tag size="small" :type="form.status == 1
            ? 'success'
            : form.status == 2
              ? ''
              : form.status == 3
                ? 'info'
                : ''
            ">
            {{
              form.status == 1
                ? "待接单"
                : form.status == 2
                  ? "维修完成"
                  : form.status == 3
                    ? "已完成"
                    : ""
            }}
          </el-tag>
        </div>
      </template>
      <template slot-scope="{ type, disabled }" slot="errorVideoForm">
        <div v-if="type == 'view' && form.errorVideo != ''">
          <video :src="form.errorVideo" muted autoplay style="width: 200px; height: 200px"></video>
        </div>
      </template>
      <template slot-scope="{ type, disabled }" slot="errorImgForm">
        <div v-if="type == 'view'">
          <!-- {{from.errorImg}} -->
          <img v-for="item in form.errorImg" :key="item" :src="item" alt=""
            style="width: 180px; height: 180px; margin: 0 5px" />
        </div>
      </template>
      <template slot-scope="scope" slot="menuLeft">
        <el-button type="primary" size="small" @click="addOperation">需求提报</el-button>
        <el-button type="primary" size="small" @click="allExportReport">批量导出报告</el-button>
        <!-- <el-button size="small" @click="clickInvoice">开具发票</el-button>
        <el-button size="small" @click="clickPrint">打印</el-button> -->
      </template>
      <template slot-scope="{ row }" slot="menu">
        <el-button @click="handleView(row)">查看</el-button>
        <el-button v-show="row.status == 200 || row.status == 100" @click="handleEdit(row)">编辑</el-button>
        <el-button v-show="row.status == 200 || row.status == 100" @click="handleSubmit(row)">提交</el-button>
        <el-button v-show="row.status == 301" @click="confirmOrder(row)">确认</el-button>
        <el-button v-show="row.status == 403 || row.status == 202 || row.status == 406"
          @click="handleEvaluate(row)">评价</el-button>
        <!-- 客户确认维修效果 -->
        <el-button v-show="row.status == 405" @click="urgentRepair(row)">确认</el-button>
        <el-button @click="viewLog(row)">日志</el-button>
        <el-button @click="handleExport(row)"
          v-show="row.status == 202 || row.status == 203 || row.status == 204">报告</el-button>
      </template>
    </avue-crud>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" :append-to-body="true" width="50%">
      <div style="height: 500px; overflow: auto">
        <requestSub @close="closeRequest" :title="dialogTitle" :form="requestForm"></requestSub>
      </div>
    </el-dialog>
    <el-dialog :title="detailTitle" :visible.sync="detailVisible" :append-to-body="true" width="50%">
      <div style="height:500px;overflow:auto;">
        <el-form ref="form" :model="detailForm" label-width="150px" label-position="left">
          <div>
            <div style="
                color: #101010;
                font-size: 20px;
                font-weight: 550;
                margin-bottom: 20px;
              ">
              故障信息
            </div>
            <el-form-item label="填报人" prop="informantName" v-show="viewType == 'view'">
              <el-input placeholder="请输入填报人" disabled v-model="detailForm.informantName" style="width: 98%;"></el-input>
            </el-form-item>
            <el-form-item label="填报人电话" prop="informantPhone" v-show="viewType == 'view'">
              <el-input placeholder="请输入填报人电话" disabled v-model="detailForm.informantPhone"
                style="width: 98%;"></el-input>
            </el-form-item>
            <el-form-item label="故障现象描述" prop="faultDescribe">
              <el-input placeholder="请输入故障现象描述" disabled type="textarea" v-model="detailForm.faultDescribe"
                style="width: 98%;"></el-input>
            </el-form-item>
            <el-form-item label="故障位置" prop="faultLocation" v-show="viewType == 'view'">
              <el-input placeholder="请输入故障位置" disabled v-model="detailForm.faultLocation"
                style="width: 98%;"></el-input>
            </el-form-item>
            <el-form-item label="设备名称" prop="deviceName" v-show="viewType == 'view'">
              <!-- <el-select
                placeholder="请选择设备名称"
                disabled
                v-model="detailForm.deviceId"
                style="width: 100%"
              >
                <el-option
                  v-for="item in deviceList"
                  :key="item.id"
                  :value="item.id"
                  :label="item.name"
                ></el-option>
              </el-select> -->
              <el-input placeholder="请输入设备名称" v-model="detailForm.deviceName" disabled style="width: 98%;"></el-input>
            </el-form-item>
            <el-form-item label="故障专业类型" prop="faultType" v-show="viewType == 'view'">
              <el-input placeholder="请输入故障专业类型" v-model="detailForm.faultType" disabled style="width: 98%;"></el-input>
            </el-form-item>

            <el-form-item label="故障视频" v-show="viewType == 'view' && detailForm.errorVideo != ''">
              <video v-show="detailForm.errorVideo != ''" :src="detailForm.errorVideo"
                style="width: 148px; height: 148px" controls></video>
            </el-form-item>
            <el-form-item label="故障图片"
              v-show="viewType == 'view' && detailForm.errorImg && detailForm.errorImg.length != 0">
              <img v-for="item in detailForm.errorImg" :key="item" :src="item.url" alt=""
                style="width: 148px; height: 148px;margin-right:10px;">
            </el-form-item>
            <el-form-item label="提报时间">
              <el-date-picker v-model="detailForm.fillingTime" type="datetime" style="width:98%;" disabled
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
          </div>
          <div v-show="rowStatus == 202 && detailForm.closeReason != ''">
            <div style="
                color: #101010;
                font-size: 20px;
                font-weight: 550;
                margin-bottom: 20px;
              ">
              处理情况
            </div>
            <el-form-item label="关闭原因">
              <el-input type="textarea" v-model="detailForm.closeReason" disabled style="width:98%;"></el-input>
            </el-form-item>
          </div>
          <div v-show="rowStatus != 101 && rowStatus != 100 && rowStatus != 202 && detailForm.closeReason == ''">
            <div style="
                color: #101010;
                font-size: 20px;
                font-weight: 550;
                margin-bottom: 20px;
              ">
              处理情况
            </div>
            <el-form-item label="接单时间">
              <el-date-picker v-model="detailForm.dispatchTime" type="datetime" disabled style="width:98%;"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="客服意见">
              <el-input type="textarea" v-model="detailForm.customerOpinion" disabled style="width: 98%;"></el-input>
            </el-form-item>
          </div>
          <div
            v-show="rowStatus != 100 && rowStatus != 202 && rowStatus != 101 && rowStatus != 401 && rowStatus != 402 && detailForm.closeReason == ''">
            <div style="
                color: #101010;
                font-size: 20px;
                font-weight: 550;
                margin-bottom: 20px;
              ">
              维修详情
            </div>
            <el-form-item label="填报人" prop="repairPersonName">
              <el-input placeholder="请输入填报人" disabled v-model="detailForm.repairPersonName"
                style="width: 98%;"></el-input>
            </el-form-item>
            <el-form-item label="设备名称" prop="deviceId">
              <!-- <el-select placeholder="请选择设备名称" disabled v-model="detailForm.deviceId" style="width: 100%">
                <el-option v-for="item in deviceList" :key="item.id" :value="item.id" :label="item.name"></el-option>
              </el-select> -->
              <el-input placeholder="请输入设备名称" v-model="detailForm.deviceName" disabled style="width: 98%;"></el-input>
            </el-form-item>
            <el-form-item label="故障原因" prop="faultCause">
              <el-input placeholder="请输入故障原因" disabled type="textarea" v-model="detailForm.faultCause"
                style="width: 98%;"></el-input>
            </el-form-item>
            <el-form-item label="处理方法" prop="processMethod">
              <el-input placeholder="请输入处理方法" disabled type="textarea" v-model="detailForm.processMethod"
                style="width: 98%;"></el-input>
            </el-form-item>
            <!-- <el-form-item label="是否需要申领物料" prop="isNeedMaterial">
              <el-select v-model="detailForm.isNeedMaterial" placeholder="请选择是否申领物料" disabled style="width:98%;">
                <el-option label="是" :value="1"></el-option>
                <el-option label="否" :value="0"></el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="维修材料" v-show="detailForm.isNeedMaterial == 1">
              <el-table :data="detailForm.materials" border style="width: 98%">
                <el-table-column prop="materialName" align="center" label="物料名称">
                </el-table-column>
                <el-table-column prop="materialPrice" align="center" label="金额">
                </el-table-column>
                <template slot="append">
                  <tr>
                    <td style="padding: 10px;padding-right: 0;font-size: 14px;color: #909399;font-weight: 600;">总计:</td>
                    <td>{{ totalPrice }} 元</td>
                    <td style="padding: 10px 0px 10px 100px; font-size: 14px;color: #909399;font-weight: 600;">折扣:</td>
                    <td>
                      <el-input v-model="discount" controls-position="right" @input="handleInput"
                        @change="changeDiscount" disabled>
                        <template slot="append">折</template>
                      </el-input>
                    </td>
                    <td style="padding: 10px 0px 10px 100px;font-size: 14px;color: #909399;font-weight: 600;">折后金额:</td>
                    <td>{{ discountPrice }}<span v-show="discountPrice != ''">元</span></td>
                  </tr>
                </template>
              </el-table>
            </el-form-item>
          </div>
          <div v-show="detailForm.approvePoint == '主管审批维修方案' && detailForm.approveResult == -1">
            <div style="
                color: #101010;
                font-size: 20px;
                font-weight: 550;
                margin-bottom: 20px;
              ">
              主管审批
            </div>
            <el-form-item label="审批结果" prop="approveResult">
              <el-select style="width: 98%;" placeholder="请选择审批结果" v-model="detailForm.approveResult" disabled>
                <el-option label="通过" :value="1"></el-option>
                <el-option label="驳回" :value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="审批意见" prop="approveRemark">
              <el-input type="textarea" v-model="detailForm.approveRemark" style="width: 98%;" disabled></el-input>
            </el-form-item>
            <el-form-item v-show="rowStatus == 5" label="审批人" prop="approvePersonName">
              <el-input v-model="detailForm.approvePersonName" style="width: 98%;" disabled></el-input>
            </el-form-item>
            <el-form-item v-show="rowStatus == 5" label="审批时间" prop="approveTime">
              <el-input v-model="detailForm.approveTime" style="width: 98%;" disabled></el-input>
            </el-form-item>
          </div>
          <div v-show="(rowStatus == 301 || rowStatus == 5) && viewType != 'view'">
            <div style="
                color: #101010;
                font-size: 20px;
                font-weight: 550;
                margin-bottom: 20px;
              ">
              客户审批
            </div>
            <el-form-item label="审批结果" prop="approveResult">
              <el-select style="width: 98%;" placeholder="请选择审批结果" v-model="detailForm.approveResult"
                :disabled="rowStatus == 5">
                <el-option label="通过" :value="1"></el-option>
                <el-option label="驳回" :value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="审批意见" prop="approveRemark">
              <el-input type="textarea" v-model="detailForm.approveRemark" style="width: 98%;"
                :disabled="rowStatus == 5"></el-input>
            </el-form-item>
            <el-form-item v-show="rowStatus == 5" label="审批人" prop="approvePersonName">
              <el-input v-model="detailForm.approvePersonName" style="width: 98%;" disabled></el-input>
            </el-form-item>
            <el-form-item v-show="rowStatus == 5" label="审批时间" prop="approveTime">
              <el-input v-model="detailForm.approveTime" style="width: 98%;" disabled></el-input>
            </el-form-item>
          </div>
          <div v-show="rowStatus == 403 || rowStatus == 406">
            <div style="
                color: #101010;
                font-size: 20px;
                font-weight: 550;
                margin-bottom: 20px;
              ">
              维修效果确认
            </div>
            <el-form-item label="是否维修完成">
              <el-select placeholder="请确认是否维修完成" style="width: 98%;" v-model="detailForm.approveResult1"
                @change="changeResult" :disabled="viewType == 'view'">
                <el-option label="是" :value="1"></el-option>
                <el-option label="否" :value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="维修未完成原因" v-show="rowStatus == 403 && detailForm.approveResult1 == 0">
              <el-input type="textarea" v-model="detailForm.approveRemark" placeholder="请输入维修未完成原因" style="width: 98%;"
                :disabled="viewType == 'view'"></el-input>
            </el-form-item>
          </div>
          <div v-show="((rowStatus == 403 || rowStatus == 406) && detailForm.approveResult1 == 0)"></div>
          <!-- || (rowStatus == 20 || isEvalute) || rowStatus == 7 || rowStatus == 8 || rowStatus == 9" -->
          <div
            v-show="((rowStatus == 403 || rowStatus == 406 || isEvalute) && detailForm.approveResult1 == 1) || rowStatus == 104 || rowStatus == 203 || rowStatus == 202">
            <div style="
                color: #101010;
                font-size: 20px;
                font-weight: 550;
                margin-bottom: 20px;
              ">
              评价
            </div>
            <div>
              <p>1.您对本次维修的质量方面满意吗？</p>
              <div style="display:flex;">
                <div style="width: 150px;
                    border-radius: 5px;
                    height: 30px;
                    text-align: center;
                    line-height: 30px;
                    margin-right: 20px;
                    cursor:pointer;"
                  :style="{ background: detailForm.isOkQuality == '1' ? '#3a62d733' : 'rgb(239, 239, 239)', color: detailForm.isOkQuality == '1' ? '#3a62d7' : '#4f4f4f' }"
                  @click="clickQualityYes">满意</div>
                <div style="width: 150px;
                    border-radius: 5px;
                    height: 30px;
                    background: rgb(239, 239, 239);
                    text-align: center;
                    line-height: 30px;
                    margin-right: 20px;cursor:pointer;"
                  :style="{ background: detailForm.isOkQuality == '0' ? '#3a62d733' : 'rgb(239, 239, 239)', color: detailForm.isOkQuality == '0' ? '#3a62d7' : '#4f4f4f' }"
                  @click="clickQualityNo">不满意</div>
              </div>
            </div>
            <div>
              <p>2.您对本次维修的安全方面满意吗？</p>
              <div style="display:flex;">
                <div style="width: 150px;
                    border-radius: 5px;
                    height: 30px;
                    background: rgb(239, 239, 239);
                    text-align: center;
                    line-height: 30px;
                    margin-right: 20px;cursor:pointer;"
                  :style="{ background: detailForm.isOkSecure == '1' ? '#3a62d733' : 'rgb(239, 239, 239)', color: detailForm.isOkSecure == '1' ? '#3a62d7' : '#4f4f4f' }"
                  @click="clickSafeYes">满意</div>
                <div style="width: 150px;
                    border-radius: 5px;
                    height: 30px;
                    background: rgb(239, 239, 239);
                    text-align: center;
                    line-height: 30px;
                    margin-right: 20px;cursor:pointer;"
                  :style="{ background: detailForm.isOkSecure == '0' ? '#3a62d733' : 'rgb(239, 239, 239)', color: detailForm.isOkSecure == '0' ? '#3a62d7' : '#4f4f4f' }"
                  @click="clickSafeNo">不满意</div>
              </div>
            </div>
            <div>
              <p>3.您对本次维修的时效方面满意吗？</p>
              <div style="display:flex;margin-bottom:30px;">
                <div style="width: 150px;
                    border-radius: 5px;
                    height: 30px;
                    background: rgb(239, 239, 239);
                    text-align: center;
                    line-height: 30px;
                    margin-right: 20px;cursor:pointer;"
                  :style="{ background: detailForm.isOkValidity == '1' ? '#3a62d733' : 'rgb(239, 239, 239)', color: detailForm.isOkValidity == '1' ? '#3a62d7' : '#4f4f4f' }"
                  @click="clickTimeYes">满意</div>
                <div style="width: 150px;
                    border-radius: 5px;
                    height: 30px;
                    background: rgb(239, 239, 239);
                    text-align: center;
                    line-height: 30px;
                    margin-right: 20px;cursor:pointer;"
                  :style="{ background: detailForm.isOkValidity == '0' ? '#3a62d733' : 'rgb(239, 239, 239)', color: detailForm.isOkValidity == '0' ? '#3a62d7' : '#4f4f4f' }"
                  @click="clickTimeNo">不满意</div>
              </div>
            </div>
          </div>
          <div
            v-show="((rowStatus == 6 || isEvalute) && detailForm.approveResult1 == 1) || rowStatus == 104 || rowStatus == 203 || rowStatus == 202">
            <div style="
                color: #101010;
                font-size: 20px;
                font-weight: 550;
                margin-bottom: 20px;
              ">
              签名
            </div>
            <div style="margin-bottom: 10px;cursor: pointer;" @click="clickAssign"
              v-show="nameImg == '' && rowStatus != 104 && rowStatus != 203 && rowStatus != 9">
              <img src="@/assets/images/assign.png" alt="">
            </div>
            <div v-show="nameImg != ''" @click="clickAssign">
              <img :src="nameImg" alt="">
            </div>
            <div v-show="detailForm.signatureUrl != '' && (rowStatus == 104 || rowStatus == 203 || rowStatus == 9)">
              <img :src="detailForm.signatureUrl" alt="">
            </div>
            <!-- <div v-show="isEvalute">
              <avue-sign ref="sign"></avue-sign>
              <el-button @click="clearName">清空</el-button>
              <el-button @click="confirmName">确定</el-button>
            </div>
            <div v-show="!isEvalute">
              <img :src="detailForm.signatureUrl" alt="">
            </div> -->
            <el-form-item label="签名人" prop="signaturePerson">
              <el-input :disabled="!isEvalute" placeholder="请输入签名人" v-model="detailForm.signaturePerson"></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button v-show="isEvalute" type="primary" @click="handleConfirm">{{ detailForm.approveResult1 == 0 ? '提交' :
          '评价并签字' }}</el-button>
        <el-button v-show="viewType == 'confirm'" type="primary" @click="confirmWork">提交</el-button>
      </span>
    </el-dialog>
    <!-- <el-dialog title="发票内容打印" :visible.sync="printVisible" :append-to-body="true" width="70%">
      <div id="printBox">
        <div class="pageCodeDiv" >
          需要打印的内容部分
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="clickPrient">打 印</el-button>
      </span>
    </el-dialog> -->
    <el-dialog title="签名" :visible.sync="assignVisible" :append-to-body="true" width="50%">
      <div v-show="isEvalute">
        <avue-sign ref="sign"></avue-sign>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeName">关闭</el-button>
        <el-button @click="clearName">清空</el-button>
        <el-button @click="confirmName" type="primary">确定</el-button>
      </span>
    </el-dialog>
    <!-- 流程日志 -->
    <logDialog :orderId="logOrderId" :infoDialog="infoDialog" @closeLog="closeLog"></logDialog>
<!--
    <div id="pdfDom" v-show="pdfDomShow" style="padding:20px">
      <requirement :detailForm="requireForm"></requirement>
    </div> -->
  </basic-container>
</template>

<script>
import vueEasyPrint from "vue-easy-print"
import printJS from 'print-js'
import { mapGetters } from "vuex";
import moment from "moment";
import { dateFormat } from "../../util/date";
import requestSub from '../components/requestSub.vue'
import requirement from '../components/requirement.vue'
import { servicePage, getList, getDetail, evaluateSign, addFile, saveData, customerConfirm, customerReject, customerRepairConfirm, customerRepairReject, serviceInvoice, getAllUser, urgentRepairConfirm, urgentRepairReject } from '@/api/operation/hand'
import { getDeviceList } from '@/api/device/device'
import { getChildList } from '@/api/system/dictbiz'
import statusData from "@/assets/json/status.json"; // 引入状态数据
import logDialog from '../../components/order/logDialog.vue'
import { color } from "echarts";
import { exportBlob, exportBlob1, zipDownload } from "@/api/common";
import { downloadXls } from "@/util/util";
let action = "https://api.avuejs.com/imgupload";

export default {
  components: {
    requestSub,
    requirement,
    vueEasyPrint,
    logDialog
  },
  // directives: { print },
  data() {
    return {
      searchForm: {
        timeRange: []
      },
      requireForm: {},
      showPrint: false,
      dialogTitle: "需求填报",
      dialogVisible: false,
      detailTitle: "需求详情",
      detailVisible: false,
      uploadUrl: "",
      form: {},
      query: {},
      loading: true,
      parentId: 0,
      direction: "rtl",
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      deviceList: [],
      errorList: [],
      isRegister: false,
      option: {
        height: "auto",
        calcHeight: 30,
        tip: false,
        selection: true,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        dialogType: "dialog",
        dialogClickModal: false,
        addBtn: false,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        searchShowBtn: false,
        refreshBtn: false,
        columnBtn: false,
        menuWidth: 380,
        column: [
          {
            label: "提报时间",
            prop: "timeRange",
            type: "date",
            format: "yyyy-MM-dd",
            valueFormat: "yyyy-MM-dd",
            search: true,
            hide: true,
            viewDisplay: false,
            searchValue: dateFormat(new Date(), "yyyy-MM-dd"),
            searchClearable: false,
          },
          {
            label: "需求单号",
            labelWidth: 120,
            prop: "requirementCode",
            overHidden: true,
            search: true
          },
          {
            label: "设备名称",
            labelWidth: 120,
            prop: "deviceName",
            overHidden: true,
          },
          {
            label: "故障位置",
            labelWidth: 120,
            prop: "faultLocation",
            // type: "select",
            overHidden: true,
            // hide: true,
            // search: true,
            // viewDisplay: false,
            // dicUrl: '/lab/blade-system/dict-biz/get-hc-project',
            // props: {
            //   label: "dictValue",
            //   value: "dictValue",
            // },
          },
          {
            label: "故障专业类型",
            labelWidth: 120,
            prop: "faultType",
            overHidden: true,
            type: "input",
            searchLabelWidth: 100,
            // hide: true,
            // search: true,
            viewDisplay: false,
            // dicUrl: '/lab/blade-system/dict-biz/get-hc-project',
            props: {
              label: "dictValue",
              value: "dictValue",
            },
          },
          {
            label: "故障现象描述",
            labelWidth: 120,
            prop: "faultDescribe",
            overHidden: true,
            slot: true,
          },
          {
            label: "故障视频",
            labelWidth: 120,
            prop: "errorVideo",
            hide: true,
            // propsHttp: {
            //   res: 'data',
            //   url:'url',
            //   name:'name',
            //   home: 'https://www.w3school.com.cn'
            // },
            // action: 'https://api.avuejs.com/imgupload',
            // listType: 'picture-img',
            // formslot:true,
          },
          {
            label: "故障图片",
            labelWidth: 120,
            prop: "errorImg",
            type: "upload",
            hide: true,
            formslot: true,
          },
          {
            label: "提报时间",
            labelWidth: 120,
            prop: "fillingTime",
            slot: true,
          },
          {
            label: "状态",
            labelWidth: 120,
            prop: "status",
            slot: true,
            formslot: true,
          },
          // {
          //   label: "状态",
          //   labelWidth: 120,
          //   prop: "repairStatus",
          //   hide:true,
          //   slot: true,
          //   search:true,
          //   formslot: true,
          // },
          {
            label: "完成时间",
            labelWidth: 120,
            prop: "finishTime",
            slot: true,
          },
        ],
      },
      totalPrice: '',
      discount: '',
      discountPrice: '',
      data: [],
      videoList: "", //上传成功的视频
      form2Option: {
        emptyBtn: false,
        submitBtn: false,
        column: [
          {
            label: "故障位置",
            labelWidth: 120,
            prop: "faultLocation",
            type: "input",
            span: 24,
          },
          {
            label: "设备名称",
            labelWidth: 120,
            span: 24,
            prop: "deviceName",
            type: "select",
            dicData: [
              {
                label: "名称1",
                value: 0,
              },
              {
                label: "名称2",
                value: 1,
              },
            ],
          },
          {
            label: "故障专业类型",
            labelWidth: 120,
            span: 24,
            prop: "faultType",
            type: "select",
            dicData: [
              {
                label: "类型1",
                value: 0,
              },
              {
                label: "类型2",
                value: 1,
              },
            ],
          },
          {
            label: "故障现象描述",
            labelWidth: 120,
            span: 24,
            prop: "faultDescribe",
            type: "textarea",
            minRows: 3,
            maxRows: 5,
          },
          {
            label: "故障视频",
            labelWidth: 120,
            prop: "errorVideo",
            type: "upload",
            propsHttp: {
              res: "data",
              url: "url",
              name: "name",
              home: "https://www.w3school.com.cn",
            },
            fileType: "video", //img/video/audio
            listType: "picture-img",
            span: 24,
            action: action,
          },
          {
            label: "照片墙",
            labelWidth: 120,
            span: 24,
            prop: "imgUrl",
            listType: "picture-card",
            type: "upload",
            fileType: "img", //img/video/audio
            action: action,
          },
        ],
      },
      detailForm: {},
      rowStatus: '',
      isEvalute: false,
      isOkQuality: 0,
      isOkSecure: 0,
      isOkValidity: 0,
      nameImg: '',
      requestForm: {},
      viewType: '',
      selectionList: [],
      printVisible: false,
      assignVisible: false,
      tableData: [],
      isFinish: '',
      role_id: '',
      isClear: false,
      htmlTitle: '运维服务单',
      logOrderId: '',//获取id
      infoDialog: false,
      pdfDomShow: false
    };
  },

  computed: {
    ...mapGetters(["userInfo", "permission", "systemTime"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.notice_add, false),
        viewBtn: this.vaildData(this.permission.notice_view, false),
        delBtn: this.vaildData(this.permission.notice_delete, false),
        editBtn: this.vaildData(this.permission.notice_edit, false),
      };
    },
    getStatus() {
      return (type, id, status) => {
        for (let i in statusData[type]) {
          let val
          statusData[type][id].map(item => {
            if (item.status == status) {
              val = item
            }
          })
          return val ? val : ''
        }
      }
    },
  },
  created() {

    this.searchForm.requirementCode = this.$route.query.requirementCode
    this.role_id = this.userInfo.role_id
    // 获取设备列表
    // getDeviceList({ current: 1, size: 100 }).then(res => {
    //   this.deviceList = res.data.data.records
    // })
    // 获取故障类型
    getChildList(1, 100, '1846802246527463425').then(res => {
      this.typeList = res.data.data
    })
    // this.searchForm.timeRange = [moment().subtract(7, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')]
  },
  mounted() { },
  methods: {
    // 批量导出报告
    allExportReport() {
      if (this.selectionList.length == 0) {
        this.$message.warning('请至少选择一条数据')
      } else {
        let tmp = this.selectionList.filter(item => { return (item.status == 202 || item.status == 203 || item.status == 204) })
        if (tmp.length != this.selectionList.length) {
          this.$message.warning('请选择状态为已完成的数据')
        } else {
          console.log('批量导出报告', this.selectionList)
          let query = {
            workOrderList: this.selectionList
          }
          zipDownload('/api/lab-ops/work-order/batch-report-service', this.selectionList)
            .then((response) => {
              const blob = new Blob([response.data])
              const fileName = '运维服务单.zip'
              if ('download' in document.createElement('a')) { // 非IE下载
                const elink = document.createElement('a')
                elink.download = fileName
                elink.style.display = 'none'
                elink.href = URL.createObjectURL(blob)
                document.body.appendChild(elink)
                elink.click()
                URL.revokeObjectURL(elink.href)// 释放URL 对象
                document.body.removeChild(elink)
              } else { // IE10+下载
                navigator.msSaveBlob(blob, fileName)
              }
            })
            .catch((err) => {
              console.log(err);
            });

        }
      }
    },
    // 打开流程弹框
    viewLog(row) {
      this.infoDialog = true
      this.logOrderId = row.requirementCode
    },
    // 查看流程  关闭
    closeLog() {
      this.infoDialog = false
    },
    // 点击签名
    clickAssign() {
      this.assignVisible = true
    },
    // 多选选择
    selectionChange(val) {
      this.selectionList = val
    },
    // 客户选择是否维修完成
    changeResult(val) {
      this.isFinish = val
      if (val == 0) {
        this.detailForm.approveRemark = ''
      }
      console.log(this.isFinish)
    },
    // 开具发票
    clickInvoice() {
      if (this.selectionList.length == 0) {
        this.$message.warning('请至少选择一条数据')
      } else {
        let tmp = this.selectionList.find(item => item.status != 8)
        if (tmp) {
          this.$message.warning('请选择状态为待开发票的数据')
        } else {
          this.$confirm('请确认是否为已选择数据开具发票?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let queryData = []
            this.selectionList.forEach(item => {
              queryData.push({
                id: item.id
              })
            })
            serviceInvoice(queryData).then(res => {
              this.$message.success('发票开具成功')
              this.onLoad()
            })
          }).catch(() => {

          })
        }
      }
    },
    // 需求提报
    addOperation() {
      this.dialogTitle = "需求填报";
      this.requestForm = {}
      this.dialogVisible = true;
    },
    // 点击关闭按钮
    handleClose() {
      // this.$refs.sign.clear()
      this.nameImg = ''
      this.detailForm = {}
      this.detailVisible = false
    },
    // 需求填报子组件关闭父组件弹窗触发
    closeRequest() {
      this.dialogVisible = false
      this.onLoad()
    },
    // 点击编辑按钮
    handleEdit(row) {
      getDetail({ id: row.id }).then(res => {
        this.dialogTitle = "编辑";
        this.requestForm = res.data.data;
        this.dialogVisible = true
      })
    },

    // 点击行内提交按钮
    handleSubmit(row) {
      console.log('row----------------->', row)
      getDetail({ id: row.id }).then(res => {
        let form = res.data.data
        console.log('form----------->', form)
        let data = []
        data.push({
          faultLocation: form.faultPosition,
          deviceName: form.deviceName,
          faultType: form.faultType,
          videoAttaches: form.videoAttaches,
          picAttaches: form.picAttaches,
          faultDescribe: form.faultDescribe,
          submitType: 1,
          id: form.id
        })
        console.log('data---------->', data)
        saveData(data).then(res => {
          console.log('res------------------->', res)
          if (res.data.code == 200) {
            this.$message.success('新增成功')
            this.onLoad()
          }
        })
      })


    },

    clickQualityYes() {
      if (this.viewType == 'evaluate') {
        this.detailForm.isOkQuality = 1
      }
    },
    clickQualityNo() {
      if (this.viewType == 'evaluate') {
        this.detailFormisOkQuality = 0
      }
    },
    clickSafeYes() {
      if (this.viewType == 'evaluate') {
        this.detailForm.isOkSecure = 1
      }
    },
    clickSafeNo() {
      if (this.viewType == 'evaluate') {
        this.detailForm.isOkSecure = 0
      }
    },
    clickTimeYes() {
      if (this.viewType == 'evaluate') {
        this.detailForm.isOkValidity = 1
      }
    },
    clickTimeNo() {
      if (this.viewType == 'evaluate') {
        this.detailForm.isOkValidity = 0
      }
    },
    confirmName() {
      console.log('name===========>', this.nameImg)
      if (this.isClear) {
        this.nameImg = ''
      } else {
        this.nameImg = this.$refs.sign.submit(80, 50);
      }
      this.assignVisible = false
    },
    closeName() {
      if (this.nameImg == '') {
        this.$refs.sign.clear()
      }
      this.assignVisible = false
    },
    clearName() {
      this.$refs.sign.clear()
      this.nameImg = ''
      this.isClear = true
    },
    base64toFile(dataurl, filename = 'file') {
      let arr = dataurl.split(',')
      let mime = arr[0].match(/:(.*?);/)[1]
      let suffix = mime.split('/')[1]
      let bstr = atob(arr[1])
      let n = bstr.length
      let u8arr = new Uint8Array(n)

      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }

      let file = new File([u8arr], `${filename}.${suffix}`, {
        type: mime
      })
      console.log(file)
      return file
    },
    // 客户确认方案
    confirmOrder(row) {
      getDetail({ id: row.id }).then(res => {
        this.rowStatus = res.data.data.status
        this.viewType = 'confirm'
        this.detailVisible = true
        this.detailForm = res.data.data
        this.detailForm.errorVideo = this.detailForm.videoAttaches.length > 0 ? this.detailForm.videoAttaches[0].link : ''
        this.detailForm.approveResult = ''
        this.detailForm.approveRemark = ''
        this.detailForm.errorImg = this.detailForm.picAttaches.map(item => {
          return {
            url: item.link,
            name: item.name
          }
        })
        this.totalPrice = res.data.data.totalPrice
        this.discount = res.data.data.discount
        this.discountPrice = res.data.data.discountPrice
      })
    },
    // 点击行内的评价并签字按钮
    handleEvaluate(row) {
      getDetail({ id: row.id }).then(res => {
        this.rowStatus = res.data.data.status
        this.viewType = 'evaluate'
        this.detailVisible = true
        this.detailForm = res.data.data
        this.detailForm.errorVideo = this.detailForm.videoAttaches.length > 0 ? this.detailForm.videoAttaches[0].link : ''
        this.detailForm.errorImg = this.detailForm.picAttaches.map(item => {
          return {
            url: item.link,
            name: item.name
          }
        })
        this.detailForm.signaturePerson = ''
        this.isEvalute = true
        this.detailForm.isOkValidity = ''
        this.detailForm.isOkQuality = ''
        this.detailForm.isOkSecure = ''
        this.totalPrice = res.data.data.totalPrice
        this.discount = res.data.data.discount
        this.discountPrice = res.data.data.discountPrice
      })
    },
    handleExport(row) {
      // /report-service
      let query = JSON.parse(JSON.stringify(row))
      exportBlob1(`/api/lab-ops/work-order/report-service`, query).then(res => {
        downloadXls(res.data, "运维服务单.xlsx");
      })
      // this.pdfDomShow = true
      // getDetail({ id: row.id }).then(res => {
      //   this.requireForm = JSON.parse(JSON.stringify(res.data.data))
      //   setTimeout(() => {
      //     this.getPdf()
      //   }, 100)
      // })
    },
    // 评价并签字提交
    handleConfirm() {
      console.log('this.detailForm.approveResult1', this.detailForm.approveResult1)
      if (this.detailForm.approveResult1 == 0) {
        let query = {
          id: this.detailForm.id,
          approveResult: this.detailForm.approveResult1,
          approvePerson: this.userInfo.user_id,
          approveTime: moment().format('YYYY-MM-DD HH:mm:ss'),
          approveRemark: this.detailForm.approveRemark
        }
        customerRepairReject(query).then(res => {
          if (res.data.code == 200) {
            this.$message.success('提交成功')
            this.detailVisible = false
            this.onLoad()
          }
        })
      } else {
        if (this.nameImg != '') {
          const formData = new FormData();
          formData.append('file', this.base64toFile(this.nameImg));
          addFile(formData).then(res => {
            console.log('res----------->', res)
            let query = {
              id: this.detailForm.id,
              isOkValidity: this.detailForm.isOkValidity,
              isOkQuality: this.detailForm.isOkQuality,
              isOkSecure: this.detailForm.isOkSecure,
              signatureUrl: res.data.data.link,
              signaturePerson: this.detailForm.signaturePerson,
              // signatureTime: this.detailForm.signatureTime,
              signatureTime: moment().format('YYYY-MM-DD HH:mm:ss'),
            }
            customerRepairConfirm(query).then(res => {
              console.log('res ========>', res)
              if (res.data.code == 200) {
                this.$message.success('评价成功')
                this.detailVisible = false
                this.onLoad()
              }
            })
          })


        } else {
          this.$message.warning("请进行手写签名并点击确定按钮")
        }
      }


    },
    // 客户方案确认
    confirmWork() {
      let query = {
        id: this.detailForm.id,
        approvePerson: this.userInfo.user_id,
        approveResult: this.detailForm.approveResult,
        approveTime: moment().format('YYYY-MM-DD HH:mm:ss'),
        approveRemark: this.detailForm.approveRemark
      }
      if (query.approveResult == 0) {
        customerReject(query).then(res => {
          if (res.data.code == 200) {
            this.$message.success('审批成功')
            this.detailVisible = false
            this.onLoad()
          }
        })
      } else {
        customerConfirm(query).then(res => {
          if (res.data.code == 200) {
            this.$message.success('审批成功')
            this.detailVisible = false
            this.onLoad()
          }
        })
      }
    },
    // 查看
    handleView(row) {
      getDetail({ id: row.id }).then(res => {
        console.log('res-------------->', res.data.data.videoAttaches)
        this.rowStatus = res.data.data.status
        this.detailVisible = true
        this.viewType = 'view'
        this.isEvalute = false
        this.detailForm = res.data.data
        this.detailForm.errorVideo = res.data.data.videoAttaches.length > 0 ? res.data.data.videoAttaches[0].link : ''
        this.detailForm.errorImg = []
        this.totalPrice = res.data.data.totalPrice
        this.discount = res.data.data.discount
        this.discountPrice = res.data.data.discountPrice
        res.data.data.picAttaches.map(item => {
          this.detailForm.errorImg.push({
            name: item.originalName,
            url: item.link
          })
        })
        this.nameImg = ''
        if (this.rowStatus == 3) {
          this.isOkValidity = 1
          this.isOkQuality = 1
          this.isOkSecure = 1
        }
      })
    },
    beforeOpen(done, type) {
      done();
    },

    beforeClose(done) {
      done();
    },
    searchReset(params, done) {
      this.searchForm = {
        // timeRange: [moment().subtract(7, 'days').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
        faultLocation: '',
        faultType: ''
      }
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    closeDraw() {
      this.isRegister = false;
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      let query = {
        current: this.page.currentPage,				          //页数
        size: this.page.pageSize,				            //条数
        startTime: this.searchForm.timeRange && this.searchForm.timeRange.length != 0 ? this.searchForm.timeRange[0].toString() + ' 00:00:00' : '',		            //开始时间
        endTime: this.searchForm.timeRange && this.searchForm.timeRange.length != 0 ? this.searchForm.timeRange[1].toString() + ' 23:59:59' : '',		             //结束时间
        faultLocation: this.searchForm.faultLocation ? this.searchForm.faultLocation : '',			    //设备位置
        faultType: this.searchForm.faultType ? this.searchForm.faultType : '',				      //故障类型
        dataType: 1,
        requirementCode: this.searchForm.requirementCode
      }
      console.log('query--------->', query)
      if (this.role_id == '1839536982874193922') {
        servicePage(query).then(res => {
          console.log('res------------->', res.data.data)
          this.data = res.data.data.records
          this.page.total = res.data.data.total
          this.loading = false
        })
      } else {
        getList(query).then(res => {
          console.log('res------------->', res.data.data)
          this.data = res.data.data.records
          this.page.total = res.data.data.total
          this.loading = false
        })
      }

    },
    urgentRepair(row) {
      let query = {
        id: row.id,
        repairType: row.repairType
      }
      this.$confirm('请确认当前工单是否维修完成?', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(() => {
        console.log('是')

        urgentRepairConfirm(query).then(res => {
          if (res.data.code == 200) {
            this.$message.success('操作成功')
            this.onLoad()
          }
        })

      }).catch(() => {


        urgentRepairReject(query).then(res => {
          if (res.data.code == 200) {
            this.$message.success('操作成功')
            this.onLoad()
          }
        })
      })
    },
  },
};
</script>

<style lang="scss" scoped></style>
<style lang="scss">
.el-drawer__wrapper {
  .register_box {
    width: 800px !important;
    // padding: 0 40px;

    .title_box {
      // padding: 0 40px;
      // margin-top: 40px;

      .title_txt {
        display: flex;
        height: 30px;
        align-items: center;
        justify-content: space-between;

        .txt {
          color: rgba(0, 0, 0, 0.85);
          font-weight: 500;
          line-height: 24px;
        }

        .img_box {
          img {
            width: 30px;
            height: 30px;
          }
        }
      }

      .sub_txt {
        font-size: 12px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #999999;
        line-height: 16px;
      }
    }

    .tip_box {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 60px 0 20px 0;

      .img {
        width: 30px;
        height: 30px;
      }

      .tip_txt {
        font-size: 24px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #00b578;
        margin-left: 10px;
      }

      .fail_txt {
        color: #f93a4a;
      }

      .warn_txt {
        color: #ff6010;
      }
    }

    .tips_txt {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #f93a4a;
    }

    .tips_warn {
      color: #ff6010;
    }

    .fail_tip {
      color: #ff6010;
    }

    .account_mess {
      .mess_tit {
        font-size: 16px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        margin: 40px 0 20px 0;
      }

      .mess_box {
        width: 100%;
        min-height: 123px;
        background: #f5f6fa;
        border-radius: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left_box {
          width: 25%;
          margin-left: 30px;

          .acc_text {
            font-size: 14px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #999999;
            margin-bottom: 14px;
          }

          .acc_txt {
            font-size: 16px;
            font-family: Microsoft YaHei-Bold, Microsoft YaHei;
            font-weight: bold;
            color: #00b578;
          }
        }

        .fail_box {
          .acc_txt {
            color: #333333;
          }
        }

        .warn_box {
          .acc_txt {
            color: #333333;
          }
        }

        .right_box {
          display: flex;
          width: 75%;
          align-items: center;
          justify-content: space-between;

          .acc_box {
            .acc_text {
              font-size: 14px;
              font-family: Microsoft YaHei-Regular, Microsoft YaHei;
              font-weight: 400;
              color: #999999;
              margin-bottom: 14px;
            }

            .acc_txt {
              font-size: 16px;
              font-family: Microsoft YaHei-Bold, Microsoft YaHei;
              font-weight: bold;
              color: #00b578;
            }
          }
        }

        .fail_right {
          .acc_box {
            .acc_txt {
              color: #333333;
            }
          }
        }

        .warn_right {
          .acc_box {
            .acc_txt {
              color: #333333;
            }
          }
        }
      }

      .reg_box {
        justify-content: start;

        .left_box {
          .acc_txt {
            color: #333333;
          }
        }

        .right_box {
          .acc_box {
            .acc_txt {
              color: #333333;
            }

            .acc_warn {
              color: #ff6010;
            }
          }
        }
      }
    }

    .btn {
      width: 151px;
      height: 50px;
      background: #1677ff;
      border-radius: 2px 2px 2px 2px;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
      cursor: pointer;
      margin-top: 50px;
    }
  }

  .prin_table table tr td {
    padding: 4px 0;
  }
}
</style>
