<template>
  <!-- 检查部位 -->
  <div class="whiteBlock" style="height: 100%">
    <div class="checkPoint">
      <div class="header-title">
        <div>
          总数：<span>{{ total }}</span>
        </div>
        <div>
          施工中：<span>{{ workTicketCountInfo.ing }}</span>
        </div>
        <div>
          未开始：<span>{{ workTicketCountInfo.notStarted }}</span>
        </div>
        <div>
          暂停中：<span>{{ workTicketCountInfo.pause }}</span>
        </div>
        <div>
          已完工：<span>{{ workTicketCountInfo.done }}</span>
        </div>
      </div>
      <el-form
        size="medium"
        :model="queryParams"
        ref="queryForm"
        :inline="true"
      >
        <el-form-item label="工作票类型" prop="typeId">
          <el-cascader
            v-model="queryParams.typeId"
            :options="workTicketTypeTreeList"
            filterable
            clearable
            collapse-tags
            :show-all-levels="false"
            :props="{
              multiple: false,
              checkStrictly: true,
              emitPath: false,
              value: 'id',
              label: 'typeName',
            }"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="施工计划时间" prop="constructionTime">
          <el-date-picker
            v-model="queryParams.constructionTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="工作票编号" prop="workTicketNumber">
          <el-input
            v-model="queryParams.workTicketNumber"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择">
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="施工人员" prop="operator">
          <el-input
            v-model="queryParams.operator"
            placeholder="请输入"
          ></el-input>
        </el-form-item>
        <el-form-item label="施工场站" prop="constructionAreas">
          <el-cascader
            v-model="queryParams.constructionAreas"
            :options="qualityRegionList"
            filterable
            clearable
            collapse-tags
            :show-all-levels="false"
            :props="{
              multiple: false,
              checkStrictly: true,
              emitPath: false,
              value: 'id',
              label: 'regionName',
            }"
          ></el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="handleQuery">查询</el-button>
          <el-button type="warning" plain @click="handleRefresh"
            >刷新</el-button
          >
          <!-- v-permission="{
                  key: 'business_add',
                  menuPath: '/project/safeManage/safeZoneSetting',
                }" -->
          <el-button type="primary" size="medium" @click="addWorkTicket(1)"
            >新增</el-button
          >
          <el-button
            :disabled="
              $refs.multipleTable && $refs.multipleTable.selection.length == 0
            "
            :type="
              $refs.multipleTable && $refs.multipleTable.selection.length == 0
                ? 'info'
                : 'danger'
            "
            class="delete_btn"
            plain
            @click="deleteAttendanceBatch"
            >删除</el-button
          >
        </el-form-item>
      </el-form>
      <!-- <div class="check_box">
        <div>
              已选{{ $refs.multipleTable ? $refs.multipleTable.selection.length : 0 }}项
            </div>
            <el-button @click="toggleSelection(false)" type="text" style="color: #f76c6c"
              >取消</el-button
            >
            <el-button @click="toggleSelection(true)" type="text">全选</el-button>
        <el-button style="color: #b3b3b3" @click="toggleExpandAll(true)" type="text">全部展开</el-button>
        <el-button style="color: #b3b3b3" @click="toggleExpandAll(false)" type="text"
          >全部关闭</el-button
        >
      </div> -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        row-key="id"
        class="tables"
        height="calc(100% - 64px - 116px - 16px)"
        max-height="calc(100% - 64px - 116px - 16px)"
      >
        <el-table-column
          type="selection"
          align="center"
          width="55"
        ></el-table-column>
        <el-table-column
          prop="workTicketNumber"
          align="center"
          label="工作票编号"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="status"
          align="center"
          label="状态"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span
              class="status-box"
              :class="{
                wks_active: scope.row.status == 1,
                sgz_active: scope.row.status == 2,
                ztz_active: scope.row.status == 3,
                ywg_acitve: scope.row.status == 4,
              }"
            >
              {{ statusUp(scope.row.status) }}</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="devName"
          align="center"
          label="当前绑定监控记录"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ itemListDevNameUp(scope.row) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="typeName"
          align="center"
          label="类别"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="workContent"
          align="center"
          label="作业内容"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="safetyMeasure"
          align="center"
          label="安全措施"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="constructionAreaNames"
          align="center"
          label="施工区域"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="operator"
          align="center"
          label="施工人员"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="constructionTimeBegin"
          align="center"
          label="施工计划时间"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.constructionTimeBegin }} -
            {{ scope.row.constructionTimeEnd }}
          </template>
        </el-table-column>
        <el-table-column
          prop="typeName"
          align="center"
          label="工作票附件"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <template v-if="scope.row.workTicketAttachment.length > 0">
              <el-image
                style="width: 62px; height: 29px"
                :src="
                  $store.state.FILEURL + scope.row.workTicketAttachment[0].url
                "
                :preview-src-list="srcListUp(scope.row.workTicketAttachment)"
              >
              </el-image>
            </template>
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="typeName"
          align="center"
          label="安全风险分析"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <template v-if="scope.row.safetyRiskAnalysis.length > 0">
              <el-image
                style="width: 62px; height: 29px"
                :src="$store.state.FILEURL + scope.row.safetyRiskAnalysis[0].url"
                :preview-src-list="srcListUp(scope.row.safetyRiskAnalysis)"
              >
              </el-image>
            </template>
          </template>
        </el-table-column> -->
        <el-table-column
          :width="380"
          :label="$t('message.quality.operation')"
          align="center"
        >
          <template slot-scope="scope">
            <div class="flex2 edit">
              <el-button
                @click="onStateShow(4, scope.row.id)"
                style="border: 0 !important; color: #f56c6c"
                type="text"
                icon="el-icon-switch-button"
                v-if="scope.row.status == 2 || scope.row.status == 3"
                >结束作业</el-button
              >
              <el-button
                @click="onStateShow(1, scope.row.id)"
                type="text"
                icon="el-icon-refresh-right"
                v-if="scope.row.status == 1"
                >开始作业</el-button
              >
              <el-button
                type="text"
                @click="onStateShow(2, scope.row.id)"
                icon="el-icon-video-pause"
                v-if="scope.row.status == 2"
                >暂停作业</el-button
              >
              <el-button
                type="text"
                @click="onStateShow(3, scope.row.id)"
                icon="el-icon-video-play"
                v-if="scope.row.status == 3"
                >继续作业</el-button
              >
              <el-button
                @click="onExamineClick(scope.row)"
                type="text"
                icon="el-icon-view"
                >查看</el-button
              >
              <el-button
                style="border: 0 !important"
                type="text"
                icon="el-icon-edit"
                @click="addWorkTicket(3, scope.row)"
                >编辑</el-button
              >
              <el-button
                style="border: 0 !important; color: #f56c6c"
                type="text"
                icon="el-icon-delete"
                @click="deleteBtn(scope.row)"
                >删除</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="Number(total)"
        :page.sync="queryParams.pageNo"
        :limit.sync="queryParams.pageSize"
        @pagination="getWorkTicketList"
        :pageSizes="[...$store.state.PAGESIZRS]"
        layout="total,sizes, prev, pager, next, jumper"
      />
    </div>

    <el-dialog
      :modal-append-to-body="false"
      @close="initWorkTicketClose"
      :title="workTicketTitle"
      :visible.sync="workTicketDialog"
      :width="workTicketType == 1 ? '668px' : '960px'"
    >
      <div class="dialog_content">
        <el-steps
          align-center
          v-if="workTicketType == 2 || workTicketType == 3"
          :active="stepActive"
          :class="{
            steps_1: stepActive == 1,
            'steps_1 steps_2': stepActive == 2,
            steps_3: workTicketBindCamera == 0,
          }"
        >
          <el-step title="基础信息"></el-step>
          <el-step title="绑定工作票监控"></el-step>
          <el-step title="完成"></el-step>
        </el-steps>
        <el-form
          v-if="stepActive == 0"
          ref="workTicketFormRef"
          :model="workTicketForm"
          :rules="workTicketRules"
          label-width="130px"
          size="medium"
          :class="{
            workticket_main2: workTicketType == 2 || workTicketType == 3,
            workticket_main1: workTicketType == 1,
          }"
        >
          <el-form-item
            v-if="workTicketType == 1"
            label="工作票类型"
            prop="typeId"
          >
            <el-cascader
              v-model="workTicketForm.typeId"
              :options="workTicketTypeTreeList"
              filterable
              clearable
              collapse-tags
              :show-all-levels="false"
              :props="{
                multiple: false,
                checkStrictly: true,
                emitPath: false,
                value: 'id',
                label: 'typeName',
              }"
            ></el-cascader>
          </el-form-item>
          <template v-if="workTicketType == 2 || workTicketType == 3">
            <el-form-item label="工作票类型" prop="typeId">
              <el-cascader
                disabled
                class="mycascader"
                :value="workTicketForm.typeId"
                :options="workTicketTypeTreeList"
                :show-all-levels="false"
                :props="{
                  multiple: false,
                  checkStrictly: true,
                  emitPath: false,
                  value: 'id',
                  label: 'typeName',
                }"
                placeholder=""
              ></el-cascader>
            </el-form-item>
            <el-form-item label="工作票编号" prop="workTicketNumber">
              <el-input
                v-model="workTicketForm.workTicketNumber"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="施工场站" prop="constructionAreas">
              <el-cascader
                v-model="workTicketForm.constructionAreas"
                :options="qualityRegionList"
                filterable
                clearable
                collapse-tags
                :show-all-levels="false"
                :props="{
                  multiple: true,
                  checkStrictly: true,
                  emitPath: false,
                  value: 'id',
                  label: 'regionName',
                }"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="施工地点" prop="constructionAddr">
              <el-input
                v-model="workTicketForm.constructionAddr"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="申请单位" prop="applicants">
              <el-select
                v-model="workTicketForm.applicants"
                multiple
                filterable
                collapse-tags
                placeholder="请选择企业"
              >
                <el-option
                  :label="item.enterpriseName"
                  :value="item.id"
                  v-for="(item, index) in enterpriseInfoList"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="申请时间" prop="applicationTime">
              {{ workTicketForm.applicationTime }}
            </el-form-item>
            <el-form-item label="施工时间" prop="constructionTime">
              <el-date-picker
                v-model="workTicketForm.constructionTime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="作业人员" prop="operator">
              <el-input
                type="textarea"
                placeholder="请输入"
                v-model="workTicketForm.operator"
                maxlength="200"
                :autosize="{ minRows: 2, maxRows: 4 }"
                show-word-limit
              >
              </el-input>
            </el-form-item>
            <el-form-item label="作业内容" prop="workContent">
              <el-input
                type="textarea"
                placeholder="请输入"
                v-model="workTicketForm.workContent"
                maxlength="1000"
                :autosize="{ minRows: 2, maxRows: 4 }"
                show-word-limit
              >
              </el-input>
            </el-form-item>
            <el-form-item label="安全措施" prop="safetyMeasure">
              <el-input
                type="textarea"
                placeholder="请输入"
                v-model="workTicketForm.safetyMeasure"
                maxlength="1000"
                :autosize="{ minRows: 2, maxRows: 4 }"
                show-word-limit
              >
              </el-input>
            </el-form-item>
            <el-form-item label="工作票附件" prop="workTicketAttachment">
              <el-upload
                :action="$store.state.UPLOADURL"
                list-type="picture-card"
                name="files"
                :limit="5"
                accept=".png, .jpg, .jpeg"
                :file-list="workTicketForm.workTicketAttachment"
                :on-exceed="handleExceed"
                :on-success="(res, file) => handleSuccess(res, file, 1)"
                :on-remove="(file, fileList) => handleRemove(file, fileList, 1)"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="其他附件" prop="otherAttachment">
              <el-upload
                class="upload-demo"
                name="files"
                :action="$store.state.UPLOADURL"
                :on-preview="handlePreview"
                :on-success="(res, file) => handleSuccess(res, file, 2)"
                :on-remove="(file, fileList) => handleRemove(file, fileList, 2)"
                multiple
                :limit="10"
                :on-exceed="handleExceed"
                :file-list="workTicketForm.otherAttachment"
              >
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不超过100M且最多上传10个文件
                </div>
              </el-upload>
            </el-form-item>
          </template>
        </el-form>
        <div class="bindworkticket" v-else-if="stepActive == 1">
          <div>
            <div>绑定作业票监控</div>
            <el-button @click="bindWorkTicketClick" size="medium" type="primary"
              >去绑定</el-button
            >
          </div>
          <el-table
            :data="policeCameraItemListUp"
            style="width: 100%"
            row-key="id"
            class="tables"
            height="440"
          >
            <!-- <el-table-column
              :selectable="selected"
              type="selection"
              align="center"
              width="55"
            ></el-table-column> -->
            <el-table-column
              prop="devName"
              align="center"
              label="设备名称"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="devSn"
              align="center"
              label="设备编号"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="monitoringNumber"
              align="center"
              label="监控点编号"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="typeName"
              align="center"
              label="设备图片"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <template v-if="scope.row.pic">
                  <el-image
                    style="width: 62px; height: 29px"
                    :src="$store.state.FILEURL + scope.row.pic"
                    :preview-src-list="[$store.state.FILEURL + scope.row.pic]"
                  >
                  </el-image>
                </template>
              </template>
            </el-table-column>
            <el-table-column
              prop="userNames"
              align="center"
              label="使用人"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="status"
              align="center"
              label="设备状态"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span
                  class="boundalready_box"
                  :class="{
                    boundalready: scope.row.bindChecked,
                  }"
                >
                  {{ scope.row.bindChecked ? "已绑定" : "空闲" }}</span
                >
              </template>
            </el-table-column>
            <el-table-column
              :label="$t('message.quality.operation')"
              align="center"
            >
              <template slot-scope="scope">
                <el-button
                  style="border: 0 !important; color: #f56c6c"
                  type="text"
                  icon="el-icon-delete"
                  @click="onDelete(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="content_main2" v-else-if="stepActive == 2">
          <div :class="{ edit_img: workTicketType == 3 }"></div>
          <div>
            工作票已{{
              workTicketType == 3 ? "编辑" : "添加"
            }}完成，是否立即开始作业?
          </div>
          <div>
            <i class="el-icon-warning-outline"></i>
            <div>点击立即开始后，将会下发工单任务至执法记录仪设备中，施工员需要到设备的工单任务中点击开始执行工单任务进行录音、录像、拍照。</div>
          </div>
        </div>
      </div>
      <div class="dialog-footer" v-if="stepActive != 2">
        <el-button
          v-if="stepActive == 1"
          class="cancleBtn"
          @click="onLastStep"
          icon="el-icon-circle-close"
          size="medium"
          >上一步
        </el-button>
        <el-button
          v-else
          class="cancleBtn"
          @click="initWorkTicketClose"
          icon="el-icon-circle-close"
          size="medium"
          >{{ $t("message.alarmValueSet.cancel") }}
        </el-button>
        <el-button
          type="primary"
          icon="el-icon-circle-check"
          @click="onNextStep"
          size="medium"
          >{{ workTicketType == 1 ? "确定" : stepActive == 1 || workTicketBindCamera == 0 ? "确定" : "下一步" }}</el-button }} 
        </el-button>
      </div>
      <div class="dialog-footer" v-else>
        <el-button
          @click="initWorkTicketClose"
          class="cancleBtn"
          icon="el-icon-circle-close"
          size="medium"
          >不，暂时保存
        </el-button>
        <el-button
          @click="onChangeState(1)"
          type="primary"
          icon="el-icon-circle-check"
          size="medium"
          >是，立即开始
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      :modal-append-to-body="false"
      title="设备列表"
      :visible.sync="policeCameraItemDialog"
      width="960px"
      class="policecamera_box"
    >
      <div class="dialog_content">
        <el-form
          size="medium"
          :model="policeCameraItemInfo"
          ref="policeCameraItemInfo"
          :inline="true"
        >
          <el-form-item label="设备名称" prop="devName">
            <el-input
              v-model="policeCameraItemInfo.devName"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="设备编号" prop="devSn">
            <el-input
              v-model="policeCameraItemInfo.devSn"
              placeholder="请输入"
            ></el-input>
          </el-form-item>
          <el-form-item label="设备状态" prop="bindTicket">
            <el-select
              v-model="policeCameraItemInfo.bindTicket"
              clearable
              placeholder="请选择"
            >
              <el-option label="空闲" :value="1"></el-option>
              <el-option label="已绑定" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="policeCameraItemQuery"
              >查询</el-button
            >

            <el-button type="warning" plain @click="policeCameraItemRefresh"
              >刷新</el-button
            >
          </el-form-item>
        </el-form>
        <el-table
          ref="policeCameraItemTable"
          :data="policeCameraItemList"
          style="width: 100%"
          row-key="id"
          class="tables"
          height="440"
        >
          <el-table-column
            :selectable="selected"
            type="selection"
            align="center"
            width="55"
          ></el-table-column>
          <el-table-column
            prop="devName"
            align="center"
            label="设备名称"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="devSn"
            align="center"
            label="设备编号"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="monitoringNumber"
            align="center"
            label="监控点编号"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="typeName"
            align="center"
            label="设备图片"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <template v-if="scope.row.pic">
                <el-image
                  style="width: 62px; height: 29px"
                  :src="$store.state.FILEURL + scope.row.pic"
                  :preview-src-list="[$store.state.FILEURL + scope.row.pic]"
                >
                </el-image>
              </template>
            </template>
          </el-table-column>
          <el-table-column
            prop="userNames"
            align="center"
            label="使用人"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            prop="status"
            align="center"
            label="设备状态"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span
                class="boundalready_box"
                :class="{
                  boundalready: scope.row.bindChecked,
                }"
              >
                {{ scope.row.bindChecked ? "已绑定" : "空闲" }}</span
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- <pagination
          v-show="policeCameraItemInfo.total > 0"
          :total="Number(policeCameraItemInfo.total)"
          :page.sync="policeCameraItemInfo.pageNo"
          :limit.sync="policeCameraItemInfo.pageSize"
          @pagination="getPoliceCameraItemPage"
          :pageSizes="[...$store.state.PAGESIZRS]"
          layout="total,sizes, prev, pager, next, jumper"
        /> -->
      </div>
      <div class="dialog-footer">
        <el-button
          class="cancleBtn"
          @click="policeCameraItemDialog = false"
          icon="el-icon-circle-close"
          size="medium"
          >{{ $t("message.alarmValueSet.cancel") }}
        </el-button>
        <el-button
          type="primary"
          icon="el-icon-circle-check"
          @click="policeCameraItemSubmit"
          size="medium"
          >确定
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      :modal-append-to-body="false"
      title="工作票详情"
      :visible.sync="workTicketDetailDialog"
      width="1416px"
      class="workticketdelete_main"
    >
      <div class="dialog_content">
        <div class="workticket_box workticket_box1">
          <div class="workticket_header">
            <div>
              <div>基本信息</div>
              <div
                class="status-box"
                :class="{
                  wks_active: workTicketDetail.status == 1,
                  sgz_active: workTicketDetail.status == 2,
                  ztz_active: workTicketDetail.status == 3,
                  ywg_acitve: workTicketDetail.status == 4,
                }"
              >
                {{ statusUp(workTicketDetail.status) }}
              </div>
            </div>
            <div>
              <div
                @click="onStateShow(1, workTicketDetail.id)"
                class="bg-3e"
                v-if="workTicketDetail.status == 1"
              >
                开始作业
              </div>
              <div
                @click="onStateShow(2, workTicketDetail.id)"
                class="bg-3e"
                v-if="workTicketDetail.status == 2"
              >
                暂停作业
              </div>
              <div
                @click="onStateShow(3, workTicketDetail.id)"
                class="bg-3e"
                v-if="workTicketDetail.status == 3"
              >
                继续作业
              </div>
              <div
                @click="onStateShow(4, workTicketDetail.id)"
                class="bg-ed"
                v-if="
                  workTicketDetail.status == 2 || workTicketDetail.status == 3
                "
              >
                结束作业
              </div>
            </div>
          </div>
          <div>
            <div class="workticket_content">
              <div>
                <div>
                  <div><span>*</span>工作票类型</div>
                  <div>{{ workTicketDetail.typeName }}</div>
                </div>
                <div>
                  <div>施工区域</div>
                  <div>{{ workTicketDetail.constructionAreaNames }}</div>
                </div>
                <div>
                  <div>申请单位</div>
                  <div>{{ workTicketDetail.applicantNames }}</div>
                </div>
                <div>
                  <div>作业人员</div>
                  <div>{{ workTicketDetail.operator }}</div>
                </div>
                <div>
                  <div>安全措施</div>
                  <div>{{ workTicketDetail.safetyMeasure }}</div>
                </div>
              </div>
              <div>
                <div>
                  <div><span>*</span>工作票编号</div>
                  <div>{{ workTicketDetail.workTicketNumber }}</div>
                </div>
                <div>
                  <div>当前绑定监控</div>
                  <div>{{ workTicketDetail.itemList instanceof Array ? workTicketDetail.itemList.map(item => item.devName).join('、') : ''}}</div>
                </div>
                <div>
                  <div>施工地点</div>
                  <div>{{ workTicketDetail.constructionAddr }}</div>
                </div>
                <div>
                  <div>申请时间</div>
                  <div>{{ workTicketDetail.applicationTime }}</div>
                </div>
                <div>
                  <div>施工时间</div>
                  <div>
                    {{ workTicketDetail.constructionTimeBegin }} -
                    {{ workTicketDetail.constructionTimeEnd }}
                  </div>
                </div>
                <div>
                  <div>作业内容</div>
                  <div>
                    {{ workTicketDetail.workContent }}
                  </div>
                </div>
              </div>
            </div>
            <div
              class="workticket_content1"
              v-if="workTicketDetail.status == 2"
            >
              <el-select size="medium" v-model="itemId" placeholder="请选择">
                <el-option
                  v-for="item in workTicketDetail.itemList"
                  :key="item.itemId"
                  :label="item.devName"
                  :value="item.itemId"
                >
                </el-option>
              </el-select>
              <div class="hls-video" v-if="videoItemInfo.videoInfo">
                <HlsPlayer
                  :src="
                    videoItemInfo.videoInfo.url
                      ? videoItemInfo.videoInfo.url
                      : ''
                  "
                  :autoplay="true"
                  :controls="true"
                />
              </div>
              <!-- videoItemInfo.videoInfo.url -->
              <!-- https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8 -->
            </div>
          </div>
        </div>
        <div class="workticket_box workticket_box2">
          <div class="workticket_header">
            <div>
              <div>附件内容</div>
            </div>
          </div>
          <div>
            <div class="workticket_content">
              <div>
                <div>
                  <div>工作票附件</div>
                  <div class="content-img">
                    <el-image
                      v-for="item in workTicketDetail.workTicketAttachment"
                      :key="item.url"
                      :src="$store.state.FILEURL + item.url"
                      :preview-src-list="[$store.state.FILEURL + item.url]"
                    >
                    </el-image>
                  </div>
                </div>
              </div>
              <div>
                <div>
                  <div>其它附件</div>
                  <div class="content-file_list">
                    <div
                      v-for="item in workTicketDetail.otherAttachment"
                      :key="item.url"
                    >
                      <div>
                        <i class="el-icon-files"></i>
                        <div>{{ item.name }}</div>
                      </div>
                      <div
                        @click="
                          downloadFileBtn(
                            $store.state.FILEURL + item.url,
                            item.name
                          )
                        "
                      >
                        <i class="el-icon-download"></i>
                        <div>下载</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="workticket_box workticket_box3">
          <div class="workticket_header">
            <div>
              <div>历史记录</div>
            </div>
          </div>
          <el-table
            class="workticket-table"
            :max-height="300"
            :data="workTicketHistoryList"
            row-key="id"
            :tree-props="{ children: 'fileList' }"
            border
          >
            <el-table-column
              width="300"
              show-overflow-tooltip
              prop="date"
              align="center"
              label="序号"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.fileType">
                  {{ scope.row.fileName }}
                </span>
                <span v-else> 第{{ scope.row.no }}次作业 </span>
              </template>
            </el-table-column>
            <el-table-column
              width="450"
              prop="name"
              align="center"
              label="总时间段"
            >
              <template slot-scope="scope">
                <span v-if="scope.row.fileType">
                  {{ scope.row.startTime ? scope.row.startTime : "暂无" }} -
                  {{ scope.row.endTime ? scope.row.endTime : "暂无" }}
                </span>
                <span>
                  {{ scope.row.begin ? scope.row.begin : "暂无" }} -
                  {{ scope.row.end ? scope.row.end : "暂无" }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              width="150"
              prop="address"
              align="center"
              label="总时长"
            >
              <template slot-scope="scope">
                <span class="time-diff" v-if="scope.row.fileType">{{
                  itemDiffUp(scope.row.startTime, scope.row.endTime)
                }}</span>
                <span class="time-diff" v-else>{{
                  itemDiffUp(scope.row.begin, scope.row.end)
                }}</span>
              </template>
            </el-table-column>
            <el-table-column
              width="300"
              prop="address"
              align="center"
              label="操作"
            >
              <template slot-scope="scope">
                <div
                  v-if="scope.row.fileType"
                  class="viewreplay"
                  @click="onViewrePlayClick(scope.row)"
                >
                  <div></div>
                  <div>查看回放</div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- <div class="dialog-footer">
        <el-button
          class="cancleBtn"
          @click="workTicketDetailDialog = false"
          icon="el-icon-circle-close"
          size="medium"
          >{{ $t("message.alarmValueSet.cancel") }}
        </el-button>
        <el-button
          type="primary"
          icon="el-icon-circle-check"
          size="medium"
          >确定
        </el-button>
      </div> -->
    </el-dialog>
    <el-dialog
      :modal-append-to-body="false"
      :title="viewreplayTitle"
      :visible.sync="viewreplayDialog"
      width="360px"
      class="hls-video-dialog"
    >
      <div class="dialog_content">
        <div class="audio-content" v-if="viewreplayInfo.fileType == 2">
          <div>
            <div>
              <div></div>
              <div>{{ viewreplayInfo.devName }}音频</div>
              <div>
                {{ (viewreplayInfo.fileLen / (1024 * 1024)).toFixed(2) }}MB
              </div>
            </div>
            <div>
              <div>{{ viewreplayInfo.fileTime }}</div>
              <div>时长：{{ viewreplayInfo.duration }}</div>
            </div>
          </div>
          <audio
            :ref="`audio${viewreplayInfo.id}`"
            :src="$store.state.FILEURL + viewreplayInfo.fileUrl"
            controls
            loop
          ></audio>
          <div
            class="bodyworn_pause"
            :class="{ bodyworn_play: viewreplayInfo.is_play }"
            @click.stop="onAudioClick(viewreplayInfo)"
          ></div>
        </div>
        <div class="video-content" v-else>
          <div class="card-img">
            <video controls v-if="viewreplayInfo.fileType == 3">
              <source
                :src="$store.state.FILEURL + viewreplayInfo.fileUrl"
                type="video/mp4"
              />
              <source
                :src="$store.state.FILEURL + viewreplayInfo.fileUrl"
                type="video/webm"
              />
              您的浏览器不支持 HTML5 video 标签。
            </video>
            <img
              v-else-if="viewreplayInfo.fileType == 1"
              :src="$store.state.FILEURL + viewreplayInfo.fileUrl"
              :preview="$store.state.FILEURL + viewreplayInfo.fileUrl"
              alt=""
            />
            <!-- <el-image
                          v-else-if="viewreplayInfo.fileType == 1"
                          :src="$store.state.FILEURL + viewreplayInfo.fileUrl"
                          :preview-src-list="[$store.state.FILEURL + viewreplayInfo.fileUrl]"
                        >
                        </el-image> -->
          </div>
          <template v-if="viewreplayInfo.fileType == 3">
            <div class="card-flex">
              <div class="card-num webkit-clamp_1">
                {{ viewreplayInfo.fileName }}
              </div>
              <div class="card-num">
                {{ (viewreplayInfo.fileLen / (1024 * 1024)).toFixed(2) }}MB
              </div>
            </div>
            <div class="card-flex">
              <div>{{ viewreplayInfo.startTime }}</div>
              <p>至</p>
              <div>{{ viewreplayInfo.endTime }}</div>
            </div>
          </template>
          <template v-else-if="viewreplayInfo.fileType == 1">
            <div class="card-flex">
              <div>{{ viewreplayInfo.uploadTime }}</div>
            </div>
          </template>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getProjectChilderSystemUserListApi,
  getEnterpriseInfoListApi,
} from "@/assets/js/api/configManage.js";
import {
  getWorkTicketTypeTreePageApi,
  getWorkTicketPageApi,
  addWorkTicketApi,
  editWorkTicketApi,
  deleteWorkTicketApi,
  deleteBatchWorkTicketApi,
  getWorkTicketCountWorkTicketApi,
  setWorkTicketOperateWorkTicketApi,
  getWorkTicketHistoryListApi,
  getWorkTicketQueryByIdApi,
  getVideoItemInfoPoliceCameraItemApi,
  getQueryBindRegionsApi,
} from "@/assets/js/api/workTicketManage";
import { getProjectConfigListApi } from "@/assets/js/api/project.js";
import { getQualityRegionListApi } from "@/assets/js/api/quality.js";
import {
  getPoliceCameraItemPageApi,
  getPoliceCameraItemListApi,
} from "@/assets/js/api/bodyWornCamera";
import dayjs from "dayjs";
import duration from "dayjs/plugin/duration";
import { isJSON } from "@/util/nowDate";
import HlsPlayer from "./components/HlsPlayer.vue";
export default {
  components: {
    HlsPlayer,
  },
  data() {
    return {
      COMPANY: COMPANY,
      projectSn: "",
      tableData: [],
      workTicketTitle: "新增",
      workTicketType: 1,
      workTicketDialog: false,
      stepActive: 0,
      workTicketForm: {
        typeId: "",
        workTicketNumber: "",
        constructionAreas: [],
        constructionAddr: "",
        applicants: [],
        applicationTime: "",
        constructionTime: [],
        operator: "",
        workContent: "",
        safetyMeasure: "",
        workTicketAttachment: [],
        otherAttachment: [],
        safetyRiskAnalysis: [],
      },
      workTicketRules: {
        typeId: [
          {
            required: true,
            message: "请选择工作票类型",
            trigger: "change",
          },
        ],
        workTicketNumber: [
          {
            required: true,
            message: "请输入工作票编号",
            trigger: "blur",
          },
        ],
        workContent: [
          {
            required: true,
            message: "请输入作业内容",
            trigger: "blur",
          },
        ],
        workTicketAttachment: [
          {
            required: true,
            message: "请上传工作票附件",
            trigger: "change",
          },
        ],
      },
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 10,
        typeId: "",
        constructionTime: [],
        workTicketNumber: "",
        status: "",
        operator: "",
        constructionAreas: "",
      },
      total: 0,
      enterpriseInfoList: [],
      qualityRegionList: [],
      workTicketTypeTreeList: [],
      workTicketCountInfo: {
        done: 0,
        ing: 0,
        notStarted: 0,
        pause: 0,
      },
      workTicketBindCamera: 0,
      statusList: [
        {
          value: 1,
          label: "未开始",
        },
        {
          value: 2,
          label: "施工中",
        },
        {
          value: 3,
          label: "暂停中",
        },
        {
          value: 4,
          label: "已完工",
        },
      ],
      policeCameraItemDialog: false,
      policeCameraItemList: [],
      policeCameraItemInfo: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
        devName: "",
        devSn: "",
        bindTicket: "",
      },
      workTicketId: "",
      selectList: [],
      selectFullList: [],
      //   工作票详情
      workTicketDetailDialog: false,
      workTicketDetail: {},
      workTicketHistoryList: [],
      viewreplayDialog: false,
      viewreplayInfo: {},
      viewreplayTitle: "",
      itemId: "",
      videoItemInfo: {},
    };
  },
  created() {
    // 扩展Day.js以使用duration插件
    dayjs.extend(duration);
    this.projectSn = this.$store.state.projectSn;
    this.getWorkTicketList();
    this.getWorkTicketTypeTreePage();
    this.getQualityRegionList();
    this.getEnterpriseInfoList();
    this.getProjectSetting();
    this.getWorkTicketCountWorkTicket();
    this.getPoliceCameraItemList();
    this.getQueryBindRegions();
  },
  methods: {
    // 查看回放
    onViewrePlayClick(row) {
      this.viewreplayTitle = `第${row.no}次作业回放`;
      this.viewreplayInfo = {
        ...row,
        is_play: false,
      };
      this.viewreplayDialog = true;
    },
    // 播放音频
    onAudioClick() {
      if (this.viewreplayInfo.is_play) {
        this.$refs[`audio${this.viewreplayInfo.id}`].pause();
        this.viewreplayInfo.is_play = false;
      } else {
        this.$refs[`audio${this.viewreplayInfo.id}`].play();
        this.viewreplayInfo.is_play = true;
      }
    },
    onExamineClick(row) {
      this.workTicketId = row.id;
      this.getWorkTicketQueryById();
      this.getWorkTicketHistoryList();
      this.workTicketDetailDialog = true;
    },
    // 列表查询工作票历史记录信息
    getWorkTicketHistoryList() {
      getWorkTicketHistoryListApi({
        workTicketId: this.workTicketId,
        // workTicketId: "1942510629577048066",
        projectSn: this.projectSn,
      }).then((res) => {
        if (res.code == 200) {
          const resultList = res.result.sort((a, b) => a.no - b.no);

          this.workTicketHistoryList = resultList.map((item) => {
            return {
              ...item,
            };
          });
        }
      });
    },
    // 通过id查询作业票详情
    getWorkTicketQueryById() {
      getWorkTicketQueryByIdApi({
        id: this.workTicketId,
        // id: "1942510629577048066",
        projectSn: this.projectSn,
      }).then((res) => {
        if (res.code == 200) {
          this.workTicketDetail = {
            ...res.result,
            workTicketAttachment:
              isJSON(res.result.workTicketAttachment) &&
              JSON.parse(res.result.workTicketAttachment) instanceof Array
                ? JSON.parse(res.result.workTicketAttachment)
                : [],
            safetyRiskAnalysis:
              isJSON(res.result.safetyRiskAnalysis) &&
              JSON.parse(res.result.safetyRiskAnalysis) instanceof Array
                ? JSON.parse(res.result.safetyRiskAnalysis)
                : [],
            otherAttachment:
              isJSON(res.result.otherAttachment) &&
              JSON.parse(res.result.otherAttachment) instanceof Array
                ? JSON.parse(res.result.otherAttachment)
                : [],
          };
          if (
            res.result.itemList instanceof Array &&
            res.result.itemList.length > 0
          ) {
            this.itemId = res.result.itemList[0].itemId;
            this.getVideoItemInfoPoliceCameraItem();
          } else {
            this.itemId = "";
            this.videoItemInfo = {};
          }
        }
      });
    },
    getVideoItemInfoPoliceCameraItem() {
      getVideoItemInfoPoliceCameraItemApi({
        itemId: this.itemId,
        projectSn: this.projectSn,
      }).then((res) => {
        if (res.code == 200) {
          this.videoItemInfo = res.result;
        }
      });
    },
    // 删除
    onDelete(row) {
      const findIndex = this.selectList.findIndex((item) => item == row.itemId);
      if (findIndex > -1) {
        this.selectList.splice(findIndex, 1);
      }
    },
    // 添加设备列表
    policeCameraItemSubmit() {
      if (this.$refs.policeCameraItemTable.selection.length == 0)
        return this.$message.warning("请选择需要绑定的设备");
      const resultList = this.$refs.policeCameraItemTable.selection.map(
        (item) => item.itemId
      );
      this.selectList = [...this.selectList, ...resultList];
      console.log(1111, this.selectList);
      this.policeCameraItemDialog = false;
      this.$confirm(
        "设备已绑定作业票，请选择继续添加设备或者绑定完成进行下一步操作",
        "提示",
        {
          confirmButtonText: "绑定完成",
          cancelButtonText: "继续添加",
          customClass: "customConfirm",
          //   type: 'warning'
        }
      )
        .then(() => {})
        .catch(() => {
          this.bindWorkTicketClick();
        });
    },
    // 绑定设备列表
    bindWorkTicketClick() {
      this.policeCameraItemRefresh();
      this.policeCameraItemDialog = true;
    },
    policeCameraItemQuery() {
      this.policeCameraItemInfo.pageNo = 1;
      this.getPoliceCameraItemPage();
    },
    policeCameraItemRefresh() {
      this.policeCameraItemInfo.devName = "";
      this.policeCameraItemInfo.devSn = "";
      this.policeCameraItemInfo.bindTicket = "";
      this.policeCameraItemQuery();
    },
    selected(row, index) {
      return !row.bindChecked;
    },
    // 分页查询设备列表
    getPoliceCameraItemPage() {
      getPoliceCameraItemPageApi({
        devName: this.policeCameraItemInfo.devName,
        devSn: this.policeCameraItemInfo.devSn,
        // bindTicket: this.policeCameraItemInfo.bindTicket,
        // pageNo: this.policeCameraItemInfo.pageNo,
        // pageSize: this.policeCameraItemInfo.pageSize,
        pageNo: 1,
        pageSize: -1,
        projectSn: this.projectSn,
      }).then((res) => {
        if (res.code == 200) {
          const resultList = res.result.records.map((item) => {
            return {
              ...item,
              bindChecked:
                this.selectList.includes(item.itemId) || item.bindTicket == 1
                  ? true
                  : false,
            };
          });
          if (this.policeCameraItemInfo.bindTicket == 1) {
            this.policeCameraItemList = resultList.filter(
              (item) => !item.bindChecked
            );
          } else if (this.policeCameraItemInfo.bindTicket == 2) {
            this.policeCameraItemList = resultList.filter(
              (item) => item.bindChecked
            );
          } else {
            this.policeCameraItemList = resultList;
          }
          this.policeCameraItemInfo.total = res.result.total;
        }
      });
    },
    handlePreview() {
      console.log("预览图片");
    },
    handleRemove(file, fileList, type) {
      const obj = {
        1: "workTicketAttachment",
        2: "otherAttachment",
      };
      this.workTicketForm[obj[type]] = fileList;
    },
    handleExceed(file, fileList) {
      this.$message.warning("上传图片超出限制个数！");
    },
    handleSuccess(res, file, type) {
      if (res.status == "SUCCESS") {
        const obj = {
          1: "workTicketAttachment",
          2: "otherAttachment",
        };
        this.workTicketForm[obj[type]].push({
          name: file.name,
          url: this.$store.state.FILEURL + file.response.data[0].imageUrl,
          newUrl: file.response.data[0].imageUrl,
        });
        if (type == 1) {
          this.$refs.workTicketForm.clearValidate("workTicketAttachment");
        }
      }
    },
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getWorkTicketList();
    },
    handleRefresh() {
      this.queryParams.pageNo = 1;
      this.queryParams.typeId = "";
      this.queryParams.constructionTime = [];
      this.queryParams.workTicketNumber = "";
      this.queryParams.status = "";
      this.queryParams.operator = "";
      this.queryParams.constructionAreas = "";
      this.getWorkTicketList();
    },
    deleteAttendanceBatch() {
      if (this.$refs.multipleTable.selection.length === 0)
        return this.$message.warning("请勾选需要删除的数据！");
      this.$confirm("删除后操作不可恢复，请谨慎操作！", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const ids = this.$refs.multipleTable.selection
            .map((item) => item.id)
            .join(",");
          console.log(this.$refs.multipleTable.selection);
          deleteBatchWorkTicketApi({ ids }).then((res) => {
            this.getWorkTicketList();
          });
        })
        .catch(() => {});
    },
    toggleExpandAll(isExpandAll) {
      this.toggleSelectionAll(this.tableData, isExpandAll);
    },
    toggleSelection(flag) {
      if (flag) {
        // this.$refs.multipleTable.toggleAllSelection(true)
        this.toggleSelectionAll(this.tableData);
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    toggleSelectionAll(dataList, isExpandAll = null) {
      dataList.forEach((item) => {
        if (isExpandAll == null) {
          this.$refs.multipleTable.toggleRowSelection(item, true);
        } else {
          this.$refs.multipleTable.toggleRowExpansion(item, isExpandAll);
        }
        if (item.children instanceof Array && item.children.length > 0) {
          this.toggleSelectionAll(item.children, isExpandAll);
        }
      });
    },
    // 获取列表信息
    getWorkTicketList() {
      let data = {
        projectSn: this.projectSn,
        typeId: this.queryParams.typeId,
        constructionTimeBegin_end:
          this.queryParams.constructionTime.length > 0
            ? this.queryParams.constructionTime[0]
            : "",
        constructionTimeEnd_start:
          this.queryParams.constructionTime.length > 0
            ? this.queryParams.constructionTime[1]
            : "",
        workTicketNumber: this.queryParams.workTicketNumber,
        status: this.queryParams.status,
        operator: this.queryParams.operator,
        constructionAreas: this.queryParams.constructionAreas,
        pageNo: this.queryParams.pageNo,
        pageSize: this.queryParams.pageSize,
      };
      getWorkTicketPageApi(data).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.tableData = res.result.records.map((item) => {
            return {
              ...item,
              workTicketAttachment:
                isJSON(item.workTicketAttachment) &&
                JSON.parse(item.workTicketAttachment) instanceof Array
                  ? JSON.parse(item.workTicketAttachment)
                  : [],
              safetyRiskAnalysis:
                isJSON(item.safetyRiskAnalysis) &&
                JSON.parse(item.safetyRiskAnalysis) instanceof Array
                  ? JSON.parse(item.safetyRiskAnalysis)
                  : [],
              otherAttachment:
                isJSON(item.otherAttachment) &&
                JSON.parse(item.otherAttachment) instanceof Array
                  ? JSON.parse(item.otherAttachment)
                  : [],
            };
          });
          this.total = res.result.total;
        }
      });
    },
    onStateShow(type, id) {
      const obj = {
        1: "是否确认开始作业?",
        2: "暂未全部施工完成，将进入暂停施工状态，待下次点击继续作业...",
        3: "是否确认继续作业?",
        4: "作业已全部施工完成，点击结束作业",
      };
      this.$confirm(obj[type], "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        customClass: `customConfirm customConfirm-box customConfirm${type}`,
        type: "warning",
      }).then(() => {
        this.workTicketId = id;
        this.onChangeState(type);
      });
    },
    onChangeState(operateStatus) {
      let data = {
        id: this.workTicketId,
        projectSn: this.projectSn,
        operateStatus,
      };
      setWorkTicketOperateWorkTicketApi(data).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message);
          this.initWorkTicketClose();
          this.getWorkTicketList();
          this.onExamineClick({
            id: this.workTicketId,
          });
        }
      });
    },
    getQueryBindRegions() {
      let data = {
        // projectSn: this.projectSn,
      };
      getQueryBindRegionsApi(data).then((res) => {
        if (res.code == 200) {
          this.queryBindRegionList = res.result;
        }
      });
    },
    initWorkTicketForm() {
      this.stepActive = 0;
      this.workTicketId = "";
      this.selectList = [];
      this.workTicketForm = {
        typeId: "",
        workTicketNumber: `GZP${Date.now()}`,
        constructionAreas:
          this.queryBindRegionList.length > 0
            ? this.queryBindRegionList.map((item) => item.id)
            : [],
        constructionAddr: "",
        applicants: this.$store.state.userInfo.enterpriseId
          ? [this.$store.state.userInfo.enterpriseId]
          : [],
        applicationTime: dayjs().format("YYYY-MM-DD HH:mm:ss"),
        constructionTime: [],
        operator: "",
        workContent: "",
        safetyMeasure: "",
        safetyRiskAnalysis: [],
        workTicketAttachment: [],
        otherAttachment: [],
      };
    },
    //新增作业票
    addWorkTicket(type, row) {
      this.workTicketType = type;
      this.workTicketTitle = "新增";
      if (type == 1) {
        this.initWorkTicketForm();
      } else if (type == 3) {
        this.workTicketTitle = "编辑";
        this.stepActive = 0;
        this.workTicketId = row.id;
        this.workTicketForm = {
          ...row,
          applicants: row.applicants ? row.applicants.split(",") : [],
          constructionAreas: row.constructionAreas
            ? row.constructionAreas.split(",")
            : [],
          operators: row.operators ? row.operators.split(",") : [],
          otherAttachment: row.otherAttachment.map((item) => {
            return {
              name: item.name,
              url: this.$store.state.FILEURL + item.url,
              newUrl: item.url,
            };
          }),
          workTicketAttachment: row.workTicketAttachment.map((item) => {
            return {
              name: item.name,
              url: this.$store.state.FILEURL + item.url,
              newUrl: item.url,
            };
          }),
          safetyRiskAnalysis: row.safetyRiskAnalysis.map((item) => {
            return {
              name: item.name,
              url: this.$store.state.FILEURL + item.url,
              newUrl: item.url,
            };
          }),
          constructionTime: [],
        };
        this.selectList = row.itemList
          ? row.itemList.map((item) => item.itemId)
          : [];
        if (row.constructionTimeBegin && row.constructionTimeEnd) {
          this.constructionTime = [
            row.constructionTimeBegin,
            row.constructionTimeEnd,
          ];
        }
      }
      this.workTicketDialog = true;

      this.$nextTick(() => {
        this.$refs["workTicketFormRef"].clearValidate();
      });
    },
    // 上一步
    onLastStep() {
      this.stepActive = 0;
    },
    // 下一步
    async onNextStep() {
      console.log(this.stepActive, this.workTicketType);
      if (this.workTicketType == 1) {
        const valid = await this.$refs["workTicketFormRef"].validate();
        if (!valid) return this.$message.warning("请填写必填项！");
        this.addWorkTicket(2);
        return;
      }
      if (this.stepActive == 0) {
        console.log("我进来了");
        const valid = await this.$refs["workTicketFormRef"].validate();
        if (!valid) return this.$message.warning("请填写必填项！");
        if (this.workTicketBindCamera == 0) {
          this.submit();
          return;
        }
        this.stepActive = 1;
        // this.getPoliceCameraItemListFn();
      } else if (this.stepActive == 1) {
        // if (this.selectList.length == 0) {
        //   this.$message.warning("至少要绑定一台设备");
        //   return;
        // }
        this.submit();
      }
    },
    //弹窗---保存按钮
    submit() {
      const workTicketAttachment = this.workTicketForm.workTicketAttachment.map(
        (item) => {
          return {
            name: item.name,
            url: item.newUrl,
          };
        }
      );
      const otherAttachment = this.workTicketForm.otherAttachment.map(
        (item) => {
          return {
            name: item.name,
            url: item.newUrl,
          };
        }
      );
      const safetyRiskAnalysis = this.workTicketForm.safetyRiskAnalysis.map(
        (item) => {
          return {
            name: item.name,
            url: item.newUrl,
          };
        }
      );
      const data = {
        ...this.workTicketForm,
        constructionTimeBegin:
          this.workTicketForm.constructionTime.length > 1
            ? this.workTicketForm.constructionTime[0]
            : "",
        constructionTimeEnd:
          this.workTicketForm.constructionTime.length > 1
            ? this.workTicketForm.constructionTime[1]
            : "",
        constructionAreas: this.workTicketForm.constructionAreas.join(","),
        workTicketAttachment: JSON.stringify(workTicketAttachment),
        otherAttachment: JSON.stringify(otherAttachment),
        safetyRiskAnalysis: JSON.stringify(safetyRiskAnalysis),
        projectSn: this.projectSn,
        policeCameraIds: this.selectList.join(","),
        applicants: this.workTicketForm.applicants.join(","),
      };
      if (this.workTicketType == 2) {
        addWorkTicketApi(data).then((res) => {
          // console.log(res);
          if (res.code == 200) {
            this.$message.success(this.$t("message.quality.newSuccess"));
            // this.workTicketDialog = false;
            this.workTicketId = res.result.id;
            this.stepActive = 2;
            this.getWorkTicketList();
          }
        });
      } else if (this.workTicketType == 3) {
        editWorkTicketApi(data).then((res) => {
          if (res.code == 200) {
            // this.workTicketDialog = false;
            this.stepActive = 2;
            this.$message.success(res.message);
            this.getWorkTicketList();
          }
        });
      }
    },
    //删除 按钮
    deleteBtn(value) {
      this.$confirm(
        this.$t("message.quality.deleteHint"),
        this.$t("message.quality.hint"),
        {
          confirmButtonText: this.$t("message.quality.confirm"),
          cancelButtonText: this.$t("message.quality.cancel"),
          type: "warning",
        }
      )
        .then(() => {
          let data = {
            id: value.id,
          };

          deleteWorkTicketApi(data).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: this.$t("message.quality.successfullyDelete") + "!",
              });
              this.getWorkTicketList();
            }
          });
        })
        .catch(() => {});
    },

    initWorkTicketClose() {
      this.initWorkTicketForm();
      this.workTicketDialog = false;
    },

    // 获取工作票统计
    getWorkTicketCountWorkTicket() {
      getWorkTicketCountWorkTicketApi({
        projectSn: this.projectSn,
      }).then((res) => {
        if (res.code == 200) {
          this.workTicketCountInfo = res.result;
        }
      });
    },
    // 获取工作票类型
    getWorkTicketTypeTreePage() {
      let data = {
        projectSn: this.projectSn,
        pageNo: 1,
        pageSize: -1,
      };
      getWorkTicketTypeTreePageApi(data).then((res) => {
        if (res.code == 200) {
          this.workTicketTypeTreeList = res.result.records;
        }
      });
    },
    // 获取施工场站
    getQualityRegionList() {
      let data = {
        projectSn: this.projectSn,
      };
      getQualityRegionListApi(data).then((res) => {
        if (res.code == 200) {
          this.qualityRegionList = res.result;
        }
      });
    },
    // 获取申请单位
    getEnterpriseInfoList() {
      let data = {
        projectSn: this.projectSn,
      };
      getEnterpriseInfoListApi(data).then((res) => {
        if (res.code == 200) {
          this.enterpriseInfoList = res.result;
        }
      });
    },
    //获取项目配置信息
    getProjectSetting() {
      getProjectConfigListApi({
        projectSn: this.projectSn,
      }).then((res) => {
        if (!res.result || res.result.length == 0) {
          this.workTicketBindCamera = 0;
        } else {
          let workTicketBindCamera = res.result[0].workTicketBindCamera;
          this.workTicketBindCamera = workTicketBindCamera;
        }
      });
    },
    getPoliceCameraItemList() {
      getPoliceCameraItemListApi({
        projectSn: this.projectSn,
      }).then((res) => {
        if (res.code == 200) {
          this.selectFullList = res.result;
        }
      });
    },
    downloadFileBtn(url, name) {
      fetch(url, {
        method: "get",
        headers: {
          Authorization: this.$store.state.userInfo.token,
          "Content-Type": "application/json", // 设置请求头的内容类型为JSON
        },
        // body: JSON.stringify(data) // 将data对象转换为JSON字符串并作为请求体发送
      })
        .then((response) => {
          // 处理响应
          if (!response.ok) {
            throw new Error("下载失败");
          }
          return response.blob();
        })
        .then((blob) => {
          // 创建一个下载链接
          const url = window.URL.createObjectURL(blob);
          // 创建一个<a>元素
          const link = document.createElement("a");
          link.href = url;
          link.download = name; // 指定下载文件的文件名
          // 模拟点击下载链接
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);
          // 释放URL对象
          window.URL.revokeObjectURL(url);
          // 处理导出的文件
          // 这里可以使用blob对象来获取导出的文件内容或者将其保存到本地
        })
        .catch((error) => {
          // 处理错误
          console.error(error);
        });
    },
  },
  computed: {
    itemListDevNameUp() {
      return (row) => {
        return row.itemList
          ? row.itemList.map((item) => item.devName).join("、")
          : "--";
      };
    },
    srcListUp() {
      return (dataList) => {
        const resultList = dataList.map(
          (item) => this.$store.state.FILEURL + item.url
        );
        console.log(resultList);
        return resultList;
      };
    },
    statusUp() {
      return (id) => {
        const find = this.statusList.find((item) => item.value == id);
        return find ? find.label : "--";
      };
    },
    policeCameraItemListUp() {
      return this.selectFullList
        .filter((item) => {
          return this.selectList.includes(item.itemId);
        })
        .map((item) => {
          return {
            ...item,
            bindChecked: true,
          };
        });
    },
    itemDiffUp() {
      return (begin, end) => {
        // 定义两个日期
        const date = dayjs();
        const date1 = dayjs(begin);
        const date2 = end ? dayjs(end) : date;
        // 计算两个日期之间的差异（默认单位是毫秒）
        const diffInMilliseconds = date2.diff(date1);
        const durationObj = dayjs.duration(diffInMilliseconds);
        const hour = durationObj.hours();
        const minute = durationObj.minutes();
        const second = durationObj.seconds();

        return `${hour}h${minute}min${second}s`;
      };
    },
  },
};
</script>
<style lang="less">
.el-tooltip__popper {
  max-width: 30%;
}
.customConfirm4 .el-message-box__message::after {
  content: "点击结束作业后，需要到执法记录仪上手动结束工单，结束后录像将会自动上传到平台，可在历史回放中查看";
  color: #ffa026;
  font-size: 12px;
  display: inline-block;
  width: 400px;
}
.customConfirm3 .el-message-box__message::after {
  content: "点击暂停作业后，需要到执法记录仪上手动结束工单，结束后录像将会自动上传到平台，可在历史回放中查看";
  color: #ffa026;
  font-size: 12px;
  display: inline-block;
  width: 400px;
}
.customConfirm2 .el-message-box__message::after {
  content: "点击暂停作业后，需要到执法记录仪上手动结束工单，结束后录像将会自动上传到平台，可在历史回放中查看";
  color: #ffa026;
  font-size: 12px;
  display: inline-block;
  width: 400px;
}
.customConfirm1 .el-message-box__message::after {
  content: "点击立即开始后，将会下发工单任务至执法记录仪设备中，施工员需要到设备的工单任务中点击开始执行工单任务进行录音、录像、拍照。";
  color: #ffa026;
  font-size: 12px;
  display: inline-block;
  width: 400px;
}
.customConfirm-box {
  .el-message-box__container {
    position: relative;
  }

  .el-icon-warning {
    left: 96px;
    bottom: 6px;
    font-size: 18px !important;
    top: initial;
    transform: translateY(0);
  }
  .el-message-box__btns {
    > .el-button {
      position: relative;
    }
    > .el-button::before {
      font-family: "element-icons" !important;
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
    }
    > .el-button:nth-child(1)::before {
      content: "\e78d";
    }
    > .el-button:nth-child(2)::before {
      content: "\e720";
    }
  }
}
.customConfirm {
  width: 668px;
  .el-message-box__title {
    font-weight: normal;
    font-size: 16px;
    color: #272d45;
    margin-left: 15px;
    position: relative;
  }
  .el-message-box__title::before {
    content: "";
    width: 3px;
    height: 100%;
    background-color: #5c81ee;
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
  }
  .el-message-box__btns,
  .el-message-box__message {
    text-align: center;
  }
}
</style>
<style lang="less" scoped>
.hls-video-dialog {
  /deep/ .el-dialog__header {
    display: none;
  }
  /deep/ .el-dialog__body {
    padding: 0 !important;
  }
  .dialog_content {
    padding: 0 !important;
    height: initial;
    overflow: hidden;
  }
  .audio-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 22px 13px 13px;
    position: relative;
    overflow: hidden;
    audio {
      opacity: 0;
      position: absolute;
      left: 0;
      //   right: -67%;
    }

    > div:last-child {
      width: 26px;
      height: 26px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .bodyworn_pause {
      background-image: url(~@/assets/images/laborManage/bodyworn_pause.png);
    }
    .bodyworn_play {
      background-image: url(~@/assets/images/laborManage/bodyworn_play.png);
    }
    > div:first-child {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      > div:last-child {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #808080;
        margin-top: 20px;
        > div:not(:first-child) {
          margin-left: 19px;
        }
      }
      > div:first-child {
        display: flex;
        align-items: center;
        font-size: 14px;
        color: #272d45;
        > div:not(:first-child) {
          margin-left: 10px;
        }
        > div:first-child {
          width: 19px;
          height: 18px;
          background-image: url(~@/assets/images/laborManage/bodyworn_audio.png);
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
        > div:last-child {
          padding: 2px 10px;
          border: 1px solid #f7af13;
          font-size: 14px;
          color: #f7af13;
        }
      }
    }
  }
  .video-content {
    height: 260px;
    .card-img {
      width: 100%;
      height: 180px;
      img,
      video,
      .el-image {
        width: 100%;
        height: 100%;
      }
    }
    .card-flex {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 15px 0;
      color: #333333;
      font-size: 15px;
      .webkit-clamp_1 {
        width: 50%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .card-num {
        font-size: 14px;
        color: #808080;
      }
    }
  }
}
.workticketdelete_main {
  .workticket_box3 {
    .time-diff {
      padding: 4px 10px;
      background: rgba(75, 141, 236, 0.1);
      border-radius: 38px;
      font-size: 12px;
      color: #4b8dec;
    }
    .viewreplay {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #272d45;
      > div:first-child {
        width: 16px;
        height: 16px;
        background-image: url(~@/assets/images/laborManage/viewreplay.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      > div:last-child {
        margin-left: 8px;
      }
    }
    /deep/ .workticket-table {
      width: 1202px;
      margin-top: 20px;
      border-color: #f2f2f2;
      th {
        background-color: #e6e6e6;
        border-color: #f2f2f2;
      }
      td {
        border-color: #f2f2f2;
      }
    }
    /deep/ .workticket-table::before {
      border-color: #f2f2f2;
    }
  }
  .workticket_box2 {
    .content-file_list {
      display: flex;
      flex-direction: column;
      > div:nth-child(odd) {
        background-color: #fbfbfb;
      }
      > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 30px;
        padding: 0 16px 0 20px;
        > div:first-child {
          font-size: 14px;
          color: #272d45;
          > div:last-child {
            width: 170px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
        > div:last-child {
          font-size: 14px;
          color: #5181f6;
          cursor: pointer;
        }
        > div {
          display: flex;
          align-items: center;
          > div:not(:first-child) {
            margin-left: 6px;
          }
        }
      }
    }
    .content-img {
      display: flex;
      flex-wrap: wrap;
      > .el-image:nth-child(even) {
        margin-left: 20px;
      }
      > .el-image {
        width: 128px;
        height: 128px;
        border-radius: 4px;
      }
    }
  }
  .workticket_box1 {
    > div:last-child {
      display: flex;
      justify-content: space-between;
    }
    .workticket_content1 {
      display: flex;
      flex-direction: column;
      margin-top: 20px;
      padding-right: 30px;
      .el-select {
        width: 320px;
      }
      .hls-video {
        width: 358px;
        height: 180px;
        margin-top: 10px;
      }
    }
  }
  .workticket_box {
    .workticket_content {
      display: flex;
      margin-top: 10px;
      > div:not(:first-child) {
        margin-left: 50px;
      }
      > div {
        display: flex;
        flex-direction: column;
        > div {
          display: flex;
          padding: 10px 0;
          > div:last-child {
            width: 300px;
            font-size: 14px;
            color: #272d45;
            margin-left: 16px;
          }
          > div:first-child {
            width: 84px;
            font-size: 14px;
            color: #a2a4af;
            text-align: right;
            > span {
              color: #ff0000;
            }
          }
        }
      }
    }
    .workticket_header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      > div:last-child {
        display: flex;
        align-items: center;
        > div {
          font-weight: 500;
          font-size: 14px;
          color: #ffffff;
          width: 74px;
          height: 30px;
          background-color: #3e89fd;
          border-radius: 3px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }
        > div:not(:first-child) {
          margin-left: 20px;
        }
        .bg-ed {
          background-color: #ed2b29;
        }
      }
      > div:first-child {
        display: flex;
        align-items: center;
        > div:first-child {
          font-weight: 800;
          font-size: 16px;
          color: #4d4d4d;
          background-color: transparent;
        }
        > div:not(:first-child) {
          margin-left: 10px;
        }
      }
    }
  }
}

/deep/ .el-textarea {
  textarea {
    padding-bottom: 15px;
  }
  .el-input__count {
    background-color: transparent;
    height: 12px;
    line-height: 12px;
  }
}

/deep/ .policecamera_box {
  .el-form-item {
    margin-bottom: 20px;
  }
  .pagination-container {
    padding: 16px;
  }
  .dialog-footer {
    margin-top: 16px;
  }
}
.content_main2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 20px;

  > div:first-child {
    width: 251px;
    height: 168px;
    background-image: url(~@/assets/images/laborManage/index-icon11.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }

  .edit_img {
    background-image: url(~@/assets/images/laborManage/index-icon12.png) !important;
  }

  > div:nth-child(2) {
    font-weight: 500;
    font-size: 14px;
    color: #171717;
    margin-top: 16px;
  }

  > div:nth-child(3) {
    font-size: 12px;
    color: #ffa026;
    margin-top: 16px;
    display: flex;
    align-items: center;

    .el-icon-warning-outline {
      font-size: 18px;
      margin-right: 10px;
    }
  }
}
.bindworkticket {
  margin-top: 20px;
  > div:first-child {
    display: flex;
    align-items: center;
    > div:first-child {
      margin-right: 15px;
    }
  }
}
/deep/ .el-steps {
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 2px solid #f3f5fc;
  > .el-step {
    .el-step__icon {
      width: 36px;
      height: 36px;
      position: relative;
      border: none;
      .el-step__icon-inner {
        display: none;
      }
    }
    .el-step__line {
      top: 50%;
      transform: translateY(-50%);
    }
    .el-step__icon::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 20px;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .el-step__title {
      font-weight: 500;
      font-size: 15px;
      color: #1a1a1a;
    }
  }
  > .el-step:nth-child(1) {
    flex-basis: 10% !important;
    .el-step__line,
    .el-step__line-inner {
      width: 414px;
      background-color: #038ee4;
      border-color: #038ee4;
    }
    .el-step__icon {
      background-color: #008de4;
    }
    .el-step__icon::before {
      background-image: url(~@/assets/images/laborManage/index-icon4.png);
    }
  }
  .el-step:not(:first-child) {
    .el-step__line {
      width: 414px;
      background-color: #f4333c;
    }
    .el-step__icon {
      background-color: #f4333c;
    }
  }
  > .el-step:nth-child(2) {
    flex-basis: 15% !important;
    .el-step__icon::before {
      background-image: url(~@/assets/images/laborManage/index-icon5.png);
    }
  }
  > .el-step:nth-child(3) {
    flex-basis: 10% !important;
    .el-step__icon::before {
      background-image: url(~@/assets/images/laborManage/index-icon6.png);
    }
  }
}
/deep/ .steps_1 > .el-step:nth-child(2) {
  .el-step__line {
    background-color: #038ee4;
  }
  .el-step__icon {
    background-color: #008de4;
  }
}
/deep/ .steps_2 > .el-step:nth-child(3) {
  .el-step__line {
    background-color: #038ee4;
  }
  .el-step__icon {
    background-color: #008de4;
  }
}
/deep/ .steps_3 > .el-step:nth-child(2) {
  .el-step__icon {
    opacity: 0;
  }
  .el-step__main {
    display: none;
  }
}
.dialog_content {
  padding: 0px;
  max-height: 670px;
  overflow-y: auto;
}
/deep/ .el-dialog__body {
  padding: 20px;
}
/deep/ .el-dialog {
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0 !important;
}
.workticket_main2 {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  .el-form-item {
    width: 50%;
  }
  .el-cascader,
  .el-input,
  .el-date-editor,
  .el-select {
    width: 320px;
  }
  /deep/ .el-upload--picture-card {
    width: 128px;
    height: 128px;
  }
  /deep/ .el-upload-list--picture-card {
    .el-upload-list__item {
      width: 128px;
      height: 128px;
    }
  }

  /deep/ .mycascader {
    .el-input__inner {
      color: #272d45;
      background-color: transparent;
      cursor: auto;
      border: none;
      padding: 0;
    }
    .el-input__suffix {
      display: none;
    }
  }
}
.boundalready_box {
  padding: 4px 10px;
  background-color: rgba(71, 195, 147, 0.1);
  font-size: 12px;
  color: #47c393;
}
.boundalready {
  background-color: rgba(113, 75, 0, 0.1) !important;
  color: #714b00 !important;
}
.workticket_main1 {
  .el-cascader {
    width: 320px;
  }
}
.header-title {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  > div {
    font-size: 14px;
    color: #272d45;
    span {
      color: #5181f6;
    }
  }
  > div:not(:first-child) {
    margin-left: 50px;
  }
}
.status-box {
  font-weight: 500;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 2px;
  border: 1px solid #f1f1f1;
}
.wks_active {
  background-color: #898989;
  color: #1a1a1a;
}

.sgz_active {
  background-color: #bed0fa;
  color: #5181f6;
}

.ztz_active {
  background-color: #c38100;
  color: #ffffff;
}

.ywg_acitve {
  background-color: #88cf65;
  color: #1a1a1a;
}
.checkPoint {
  /deep/ .el-form-item {
    margin-bottom: 20px;
  }
  .el-input,
  .el-cascader {
    width: 192px;
  }
  .el-date-editor {
    width: 247px;
  }
}

.tables {
  min-height: initial;
}
.ml-8 {
  margin-left: 8px;
}
.check_box {
  display: flex;
  font-size: 14px;
  > .el-button:hover {
    color: #5181f6 !important;
  }
  > .el-button {
    padding: 0;
    position: relative;
    // margin-left: 10px;
  }
  // > .el-button:first-child {
  //   color: #eb4047;
  // }
  > .el-button:first-child::before {
    content: " ";
    position: absolute;
    top: 50%;
    right: -10px;
    transform: translateY(-50%);
    width: 1px;
    height: 90%;
    background-color: #d9d9d9;
  }
}
.flex {
  display: flex;
}
.flex2 {
  display: flex;
  align-items: center;
}
.checkPoint {
  padding: 16px 20px;
  box-sizing: border-box;
  position: relative;
  height: 100%;
  .pagination-container {
    padding: 0;
    width: 100%;
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
  }
  .edit {
    width: 100%;
    justify-content: center;
    cursor: pointer;
    img {
      margin-right: 5px;
    }
    /deep/ .el-button {
      > span {
        color: #262d49;
      }
    }
  }
}
</style>
