<template>
  <el-container>
    <el-header v-if="isSearch">
      <el-form style="margin: 10px 0" :inline="true">
        <el-form-item label="申请部门：">
          <el-input
            v-model="search.applicantDeptName"
            placeholder="请输入申请部门"
            maxlength="30"
            clearable
          />
        </el-form-item>
        <el-form-item label="申请人：">
          <el-input
            v-model="search.applicantUserName"
            maxlength="30"
            placeholder="请输入申请人"
            clearable
          />
        </el-form-item>
        <el-form-item label="作业编号：">
          <el-input
            v-model="search.workTicketNoLike"
            maxlength="50"
            placeholder="请输入作业编号"
            clearable
          />
        </el-form-item>
        <el-form-item label="作业类型：">
          <el-select v-model="search.workTicketType" size="medium" clearable>
            <el-option
              v-for="item in workType"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="作业状态：">
          <el-select v-model="search.workTicketStatus" size="medium" clearable>
            <el-option
              v-for="(item, key) in workTicketStatus"
              :key="key"
              :label="item"
              :value="key"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="作业单位类型：">
          <el-select
            v-model="search.workTicketCompanyType"
            size="medium"
            clearable
          >
            <el-option
              v-for="item in flatType"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="作业单位：">
          <el-input
            v-model="search.workTicketCompanyName"
            maxlength="30"
            placeholder="请输入作业单位"
            clearable
          />
        </el-form-item>
        <el-form-item label="作业时间：">
          <el-date-picker
            clearable
            v-model="dateValue"
            :editable="false"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            style="margin-left: 10px"
            type="primary"
            icon="el-icon-search"
            @click="getList"
          >
            搜索
          </el-button>
          <el-button class="commonBtn" icon="el-icon-refresh" @click="reset">
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-header>
    <el-main>
      <div class="headerTop">
        <div>
          <el-button
            icon="el-icon-delete"
            type="primary"
            :disabled="multipleSelection.length < 1"
            @click="dleSignTemolate"
            >删除</el-button
          >
          <!-- <el-button
            type="primary"
            class="el-icon-download"
            @click="handleExport"
          >
            导出文档</el-button
          > -->
        </div>
        <right-toolbar
          :showSearch.sync="isSearch"
          @queryTable="reset"
        ></right-toolbar>
      </div>
      <el-table
        height="calc(100% - 200px)"
        :data="list"
        :row-style="{ height: '0px' }"
        :header-cell-style="{ 'text-align': 'center', padding: '0px' }"
        :cell-style="{ 'text-align': 'center', padding: '2px' }"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center" width="50px" />
        <el-table-column label="序号" align="center" width="80px">
          <template slot-scope="scope">
            <span> {{ (pageNum - 1) * pageSize + (scope.$index + 1) }}</span>
          </template>
        </el-table-column>

        <el-table-column label="申请部门" align="center" width="120px">
          <template slot-scope="scope">
            <span>{{ scope.row.applicantDeptName || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="申请人"
          align="center"
          width="100px"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.applicantUserName || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="作业区域"
          align="center"
          width="120px"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.workTicketAreaName || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="作业编号"
          align="center"
          width="230px"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.workTicketNo || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="作业类型" align="center" width="100px" >
          <template slot-scope="scope">
            <span>{{
              workTypeName(workType, scope.row.workTicketType) || '-'
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="作业单位类型" align="center" width="110px">
          <template slot-scope="scope">
            <span>{{
              workTypeName(flatType, scope.row.workTicketCompanyType) || '-'
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="作业单位" align="center" show-overflow-tooltip width="110px">
          <template slot-scope="scope">
            <span>{{ scope.row.workTicketCompanyName || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="作业内容"
          align="center"
          width="150px"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.workTicketContent || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="作业状态" align="center" width="150px">
          <template slot-scope="scope">
            <span>{{
              workTicketStatus[scope.row.workTicketStatus] || '-'
            }}</span>
          </template>
        </el-table-column>
        <el-table-column label="作业申请时间" align="center" width="150px" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.applicantTime || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="作业开始时间"
          align="center"
          width="150px"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.workPlanStartTime || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="作业结束时间"
          align="center"
          width="150px"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span>{{ scope.row.workPlanEndTime || '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleItem(scope.row)">
              查看
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="operatingRecord(scope.row)"
            >
              流程信息
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="dleSignTemolate(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :page.sync="pageNum"
        :limit.sync="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="total"
        @pagination="getList"
      />
    </el-main>
    <el-dialog :visible.sync="addAlert" width="55%" title="查看作业信息" v-if="addAlert">
      <el-form
        ref="formData"
        :model="formData"
        label-position="right"
        style="padding: 0 20px; height: 85vh; overflow: auto"
        label-width="200px"
        disabled
      >
        <div class="row-title">作业信息</div>
        <el-row>
          <el-col :span="12">
            <el-form-item label="申请部门：" prop="applicantDeptId">
              <el-input
                style="width: 90%"
                v-model="formData.applicantDeptId"
                placeholder="请输入单位名称"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="申请人：" prop="applicantUserId">
              <el-select
                style="width: 90%"
                v-model="formData.applicantUserId"
                size="medium"
              >
                <el-option
                  v-for="item in listUser"
                  :key="item.userId"
                  :label="item.nickName"
                  :value="item.userId"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="作业区域：" prop="workTicketAreaId">
              <el-input
                style="width: 90%"
                v-model="formData.workTicketAreaId"
                placeholder="请输入负责人手机号"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="作业地点：" prop="workTicketPlace">
              <el-input
                style="width: 90%"
                v-model="formData.workTicketPlace"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="作业内容：" prop="workTicketContent">
              <el-input
                style="width: 90%"
                v-model="formData.workTicketContent"
                type="textarea"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关联作业票编号：" prop="linkWorkTicketNo">
              <el-input
                style="width: 90%"
                v-model="formData.linkWorkTicketNo"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="作业开始时间：" prop="workPlanStartTime">
              <el-input
                style="width: 90%"
                v-model="formData.workPlanStartTime"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="作业结束时间：" prop="workPlanEndTime">
              <el-input
                style="width: 90%"
                v-model="formData.workPlanEndTime"
                clearable
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="作业前置文件：">
              <div class="file-list" v-if="formData.workTicketProfiler.length">
                <div
                  v-for="(item, index) in formData.workTicketProfiler"
                  :key="index"
                  @click="handleItme(item)"
                >
                  <div class="item">
                    <el-tooltip
                      class="item"
                      effect="dark"
                      :content="item.name"
                      placement="top-start"
                    >
                      <img class="item-img" src="@/assets/images/wenjian.png" />
                    </el-tooltip>
                    <!-- <img class="item-img" src="@/assets/images/wenjian.png" /> -->
                    <!-- <span class="item-text">{{ item.name }}</span> -->
                  </div>
                </div>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="row-title">作业人员</div>
        <div v-if="formData.workTicketCompanyType === '10'">
          <el-row>
            <el-col :span="12">
              <el-form-item label="作业单位类型：">
                <el-radio-group v-model="formData.workTicketCompanyType">
                  <el-radio label="20">内部</el-radio>
                  <el-radio label="10">承保商</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="作业单位：">
                <el-select
                  style="width: 90%"
                  v-model="formData.workTicketCompany"
                  size="medium"
                >
                  <el-option
                    v-for="item in queryContractorList"
                    :key="item.id"
                    :label="item.companyName"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="作业负责人：">
                <el-select
                  style="width: 90%"
                  v-model="formData.workTicketDirectorId"
                  size="medium"
                >
                  <el-option
                    v-for="item in listUser"
                    :key="item.userId"
                    :label="item.nickName"
                    :value="item.userId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="作业监护人：">
                <!-- <el-select
                  style="width: 90%"
                  v-model="formData.workTicketGuardianUser"
                  size="medium"
                >
                  <el-option
                    v-for="item in queryUserList"
                    :key="item.id"
                    :label="item.manageName"
                    :value="item.id"
                  />
                </el-select> -->
                <el-input
                  style="width: 90%"
                  v-model="formData.workTicketGuardianUserName"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="承包商作业人：">
                <el-input
                  style="width: 90%"
                  v-model="formData.contractorUserNameList"
                  placeholder="请输入负责人手机号"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div v-if="formData.workTicketCompanyType === '20'">
          <el-row>
            <el-col :span="12">
              <el-form-item label="作业单位类型：">
                <el-radio-group v-model="formData.workTicketCompanyType">
                  <el-radio label="20">内部</el-radio>
                  <el-radio label="10">承保商</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="作业单位：">
                <el-input
                  style="width: 90%"
                  v-model="formData.workTicketCompany"
                  placeholder="请输入负责人姓名"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="作业负责人：">
                <el-select
                  style="width: 90%"
                  v-model="formData.workTicketDirectorId"
                  size="medium"
                >
                  <el-option
                    v-for="item in listUser"
                    :key="item.userId"
                    :label="item.nickName"
                    :value="item.userId"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="内部监护人：">
                <!-- <el-select
                  style="width: 90%"
                  v-model="formData.workTicketGuardianUser"
                  size="medium"
                >
                  <el-option
                    v-for="item in listUser"
                    :key="item.userId"
                    :label="item.nickName"
                    :value="item.userId"
                  />
                </el-select> -->
                <el-input
                  style="width: 90%"
                  v-model="formData.workTicketGuardianUserName"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="内部作业人员：">
                <!-- <el-select
                  style="width: 90%"
                  v-model="formData.executeUserIdList"
                  multiple
                  size="medium"
                >
                  <el-option
                    v-for="item in listUser"
                    :key="item.userId"
                    :label="item.nickName"
                    :value="item.userId"
                  />
                </el-select> -->
                <el-input
                  style="width: 90%"
                  v-model="formData.executeUserNameList"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div v-if="formData.workTicketType == '10'">
          <div class="row-title">动火作业</div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="动火级别：">
                <el-radio-group v-model="workTicketExtendDTO.hwWorkLevel">
                  <el-radio
                    v-for="(item, index) in level"
                    :key="index"
                    :label="item.code"
                    >{{ item.name }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="动火方式：">
                <el-input
                  style="width: 90%"
                  v-model="workTicketExtendDTO.hwWorkWay"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="动火地点及动火方式：">
                <el-input
                  style="width: 90%"
                  v-model="workTicketExtendDTO.hwWorkLocation"
                  placeholder="请输入安全许可编号"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div v-if="formData.workTicketType == '20'">
          <div class="row-title">受限作业</div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="受限空间名称：">
                <el-input
                  style="width: 90%"
                  v-model="workTicketExtendDTO.rsWorkName"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="受限空间内原有介质名称：">
                <el-input
                  style="width: 90%"
                  v-model="workTicketExtendDTO.rsWorkMediumName"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div v-if="formData.workTicketType == '30'">
          <div class="row-title">盲板抽堵</div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="作业类别：">
                <el-radio-group v-model="workTicketExtendDTO.bpWorkType">
                  <el-radio label="20">堵盲板</el-radio>
                  <el-radio label="10">抽盲板</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="管道设备名称：">
                <el-input
                  style="width: 90%"
                  v-model="workTicketExtendDTO.bpWorkEpName"
                  placeholder="请输入安全许可编号"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <div>
            <div class="row-title-child">管道参数</div>
            <el-row>
              <el-col :span="12">
                <el-form-item label="介质：">
                  <el-input
                    style="width: 90%"
                    v-model="workTicketExtendDTO.bpWorkMedium"
                    placeholder="请输入安全许可编号"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="温度：">
                  <el-input
                    style="width: 90%"
                    v-model="workTicketExtendDTO.bpWorkTemperature"
                    placeholder="请输入安全许可编号"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="压力：">
                  <el-input
                    style="width: 90%"
                    v-model="workTicketExtendDTO.bpWorkPressure"
                    placeholder="请输入安全许可编号"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div>
            <div class="row-title-child">盲板参数</div>
            <el-row>
              <el-col :span="12">
                <el-form-item label="材质：">
                  <el-input
                    style="width: 90%"
                    v-model="workTicketExtendDTO.bpWorkMaterial"
                    placeholder="请输入安全许可编号"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="规格：">
                  <el-input
                    style="width: 90%"
                    v-model="workTicketExtendDTO.bpWorkNumber"
                    placeholder="请输入安全许可编号"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="编号：">
                  <el-input
                    style="width: 90%"
                    v-model="workTicketExtendDTO.bpWorkSpec"
                    placeholder="请输入安全许可编号"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div>
            <div class="row-title-child">盲板位置图及编号</div>
            <el-row>
              <el-col :span="12">
                <el-form-item label="编号：">
                  <el-input
                    style="width: 90%"
                    v-model="workTicketExtendDTO.bpWorkPrepared"
                    placeholder="请输入安全许可编号"
                    clearable
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="位置图：">
                  <ImageUpload
                    v-model="workTicketExtendDTO.bpWorkImgUrl"
                    :isShowTip="false"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>

        <div v-if="formData.workTicketType == '40'">
          <div class="row-title">高处作业</div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="高处作业级别：">
                <el-radio-group v-model="workTicketExtendDTO.haWorkLevel">
                  <el-radio
                    v-for="(item, index) in level"
                    :key="index"
                    :label="item.name"
                    >{{ item.name }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="高度：">
                <el-input
                  style="width: 90%"
                  v-model="workTicketExtendDTO.haWorkHigh"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div v-if="formData.workTicketType == '50'">
          <div class="row-title">吊装作业</div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="吊装作业级别：">
                <el-radio-group v-model="workTicketExtendDTO.hoWorkLevel">
                  <el-radio
                    v-for="(item, index) in level"
                    :key="index"
                    :label="item.code"
                    >{{ item.name }}</el-radio
                  >
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="吊具名称：">
                <el-input
                  style="width: 90%"
                  v-model="workTicketExtendDTO.hoWorkSpreaderName"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="指挥人员：">
                <el-input
                  style="width: 90%"
                  v-model="workTicketExtendDTO.hoWorkCommander"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="司索人：">
                <el-input
                  style="width: 90%"
                  v-model="workTicketExtendDTO.hoWorkSolicitor"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="吊物质量：">
                <el-input
                  style="width: 90%"
                  v-model="workTicketExtendDTO.hoWorkSuspendedObject"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div v-if="formData.workTicketType == '60'">
          <div class="row-title">临时用电作业</div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="用电人：">
                <el-input
                  style="width: 90%"
                  v-model="workTicketExtendDTO.teWorkElectricityUser"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用电设备：">
                <el-input
                  style="width: 90%"
                  v-model="workTicketExtendDTO.teWorkElectricityDevice"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="电源接入点及许可用电功率：">
                <el-input
                  style="width: 90%"
                  v-model="workTicketExtendDTO.teWorkApEp"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工作电压：">
                <el-input
                  style="width: 90%"
                  v-model="workTicketExtendDTO.teWorkVoltage"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div v-if="formData.workTicketType == '70'">
          <div class="row-title">动土作业</div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="描述：">
                <el-input
                  style="width: 90%"
                  v-model="workTicketExtendDTO.bgWorkDescribe"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="简图：">
                <ImageUpload
                  v-model="workTicketExtendDTO.bgWorkImg"
                  :isShowTip="false"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div v-if="formData.workTicketType == '80'">
          <div class="row-title">断路作业</div>
          <el-row>
            <el-col :span="12">
              <el-form-item label="相关单位：">
                <el-input
                  style="width: 90%"
                  v-model="workTicketExtendDTO.rbWorkRelevantUnits"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="相关说明：">
                <el-input
                  style="width: 90%"
                  v-model="workTicketExtendDTO.rbWorkIllustrate"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="断路原因：">
                <el-input
                  style="width: 90%"
                  v-model="workTicketExtendDTO.rbWorkReason"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-col :span="24">
                <el-form-item label="地段示意图：">
                  <ImageUpload
                    v-model="workTicketExtendDTO.rbWorkImg"
                    :isShowTip="false"
                  />
                </el-form-item>
              </el-col>
            </el-col>
          </el-row>
        </div>
        <div class="row-title">气体分析</div>
        <div
          v-for="(item, index) in formData.workTicketGasAnalysisDTOList"
          :key="index"
        >
          <h6 style="font-size: 0.08rem">检测时间：{{ item.sampleTime }}</h6>

          <el-row>
            <el-col :span="12">
              <el-form-item label="检测人：">
                <el-input
                  style="width: 90%"
                  v-model="item.inspectorate"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="分析位置/部位：">
                <el-input
                  style="width: 90%"
                  v-model="item.analysisLocation"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="氧气(%)：">
                <el-input style="width: 90%" v-model="item.o2" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="可燃气(%)：">
                <el-input style="width: 90%" v-model="item.ca" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="硫化氢(%)：">
                <el-input style="width: 90%" v-model="item.h2s" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="一氧化碳(%)：">
                <el-input style="width: 90%" v-model="item.co" clearable />
              </el-form-item>
            </el-col>
          </el-row>
        </div>

        <div class="row-title">措施确认</div>
        <el-row>
          <el-table
            :data="formData.workTicketSmOptionRunDTOList"
            :row-style="{ height: '0px' }"
            :header-cell-style="{ 'text-align': 'center', padding: '0px' }"
            :cell-style="{ 'text-align': 'center', padding: '2px' }"
            style="width: 100%"
          >
            <el-table-column
              label="序号"
              align="center"
              width="80px"
              type="index"
            />
            <el-table-column
              label="安全措施"
              align="center"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>{{ scope.row.smOptionName || '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="是否涉及" align="center" width="100px">
              <template slot-scope="scope">
                <span>{{ scope.row.smOptionState == '0' ? '否' : scope.row.smOptionState == '1' ? '是' : '' }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        <el-row style="margin: 10px 0">
          <el-col :span="12" style="display: flex; align-items: center">
            安全交底人：
            <img
            v-show="formData.workTicketDiscloseUserSignImg"
              :src="baseUrl + formData.workTicketDiscloseUserSignImg"
              alt=""
              style="width: 100px; height: 50px"
            />
          </el-col>
          <el-col :span="12" style="display: flex; align-items: center">
            接受交底人：
            <img
            v-show="formData.workTicketAcceptUserSignImg"
              :src="baseUrl + formData.workTicketAcceptUserSignImg"
              alt=""
              style="width: 100px; height: 50px"
            />
          </el-col>
        </el-row>

        <div class="row-title">启动与验收</div>
        <div
          v-for="(item, index) in formData.workTicketSignOptionRunDTOList"
          :key="index"
        >
          <el-row style="margin: 10px 0; display: flex; align-items: center">
            <el-col :span="2" style="text-align: right;margin-right: 5px;">
              {{ item.workTicketSignOption }}
            </el-col>
            <span>
              ：
            </span>
            <el-col :span="12" style="display: flex; align-items: center">
              <img
              v-show="item.workSignOptionUserImg"
                :src="baseUrl + item.workSignOptionUserImg"
                alt=""
                style="width: 100px; height: 50px"
              />
            </el-col>
          </el-row>
        </div>
        <div>
          <el-row style="margin: 10px 0; display: flex; align-items: center">
            <el-col :span="2" style="text-align: right;margin-right: 5px;">
              验收人
            </el-col>
            <span>
              ：
            </span>
            <el-col :span="12" style="display: flex; align-items: center">
              <img
              v-show="formData.workTicketCheckUserSignImg"
                :src="baseUrl + formData.workTicketCheckUserSignImg"
                alt=""
                style="width: 100px; height: 50px"
              />
            </el-col>
          </el-row>
        </div>
        </el-form>
    </el-dialog>
    <el-dialog :visible.sync="imgDialog" width="600px" title="证书图片">
      <div style="padding: 0 20px; height: 500px; overflow: auto">
        <div
          style="height: 500px; margin-bottom: 20px"
          v-for="(item, index) in imgList"
          :key="index"
        >
          <el-image
            style="width: 100%; height: 100%"
            :src="item"
            fit="cover"
            :preview-src-list="imgList"
          >
          </el-image>
        </div>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="recordsDialog" width="600px" title="操作记录">
      <div class="tabMain">
        <div
          class="flowText"
          v-for="(item, index) in workFlowList"
          :key="index"
        >
          <div :class="[item.operateUserName ? 'borderText' : 'borderText1']">
            <p>{{ item.operateUserName + item.workTicketStatusDesc }}</p>
            <p>完成时间：{{ item.operateTime }}</p>
          </div>
          <p class="flowText" v-show="index !== workFlowList.length - 1">
            <b>↑</b>
          </p>
        </div>
      </div>
    </el-dialog>
    <!-- 文件预览 -->
    <el-dialog
      title="预览附件"
      :visible.sync="previewAnnex"
      :fullscreen="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
    >
      <preview-file
        :preview-url="previewUrl"
        :preview-type="previewType"
        @handleDownload="handleDownload"
      />

      <div slot="footer" class="batch-dialog-footer">
        <el-button type="primary" @click="previewAnnex = false">
          关闭
        </el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import {
  queryWorktecketList,
  delWorktecket,
  worktecketOperateRecord,
  getWorktecketDetails,
  dictType,
  listUser,
  deptTree,
  areaTree,
  getBase64
} from '@/api/jobSheet.js'
import { queryContractorList, queryUserList } from '@/api/contractor.js'
import previewFile from '@/components/previewFile/previewFile.vue'
export default {
  name: 'RuoyiIndex',
  components: { previewFile },
  data() {
    return {
      workFlowList: [],
      recordsDialog: false,
      previewAnnex: false,
      previewType: '',
      previewUrl: '',
      setDateRange: {
        disabledDate: (time) =>
          // 禁用今天之后的日期【当前天可选】
          time.getTime() > Date.now()
      },
      loading: false,
      imgDialog: false,
      dateValue: [],
      //模糊搜索
      search: {
        applicantDeptName: '',
        applicantUserName: '',
        workTicketType: '',
        workTicketNoLike: '',
        workTicketStatus: '',
        workTicketCompanyType: '',
        workTicketCompanyName: '',
        workPlanStartTime: '',
        workPlanEndTime: ''
      },
      imgList: [],
      title: '',
      type: '',
      total: 0,
      isSearch: true,
      list: [],
      multipleSelection: [],
      pageNum: 1,
      pageSize: 10,
      addAlert: false,
      isCheck: false,
      rowId: '',
      formData: {
        workTicketGuardianUser: '', // 监护人
        workTicketCompany: '', // 作业单位
        contractorUserIdList: [], // 承保商作业人员
        executeUserIdList: [], // 内部作业人员
        executeUserNameList: [], // 内部作业人员
        workTicketProfiler: '', // 作业前置文件
        workTicketType: '', // 作业票类型
        linkWorkTicketNo: '', // 关联作业票号
        applicantUserId: '', // 申请人
        workTicketAreaId: '', // 作业区域
        workTicketCompanyType: '', // 作业单位类型
        workTicketPlace: '', // 作业地点
        workTicketContent: '', // 作业内容
        applicantDeptId: '', // 申请单位
        workPlanStartTime: '', // 开始时间
        workTicketDirectorId: '', // 作业负责人
        workPlanEndTime: '' // 结束时间
      },
      workTicketExtendDTO: {
        hwWorkLevel: '', // 动火作业级别
        hwWorkLocation: '', // 动火作业地点及动火部位
        hwWorkWay: '', // 动火方式
        rsWorkMediumName: '', // 受限空间内原有介质名称
        rsWorkName: '', // 受限空间名称
        bpWorkEpName: '', // 盲板抽堵作业-管道设备名称
        bpWorkImgUrl: '', // 盲板抽堵作业-位置图
        bpWorkMaterial: '', // 盲板抽堵作业-材质
        bpWorkMedium: '', // 盲板抽堵作业-介质
        bpWorkNumber: '', // 盲板抽堵作业-规格
        bpWorkPrepared: '', // 盲板抽堵作业-位置图编制人
        bpWorkPressure: '', // 盲板抽堵作业-压力
        bpWorkSpec: '', // 盲板抽堵作业-规格
        bpWorkTemperature: '', // 盲板抽堵作业-温度
        bpWorkType: '', // 盲板抽堵作业-类别 10抽、20堵
        haWorkHigh: '', // 高处作业-高度
        haWorkLevel: '', // 高处作业-级别
        hoWorkCommander: '', // 吊装作业-指挥人员
        hoWorkLevel: '', // 吊装作业-吊装作业级别
        hoWorkSolicitor: '', // 吊装作业-司索人
        hoWorkSpreaderName: '', // 吊装作业-吊具名称
        hoWorkSuspendedObject: '', // 吊装作业-吊物质量
        teWorkApEp: '', // 临时用电作业-电源接入点及许可用电功率
        teWorkElectricityDevice: '', // 临时用电作业-用电设备
        teWorkElectricityUser: '', // 临时用电作业-用电人
        teWorkVoltage: '', // 临时用电作业-工作电压
        bgWorkDescribe: '', // 动土作业-描述
        bgWorkImg: '', // 动土作业-简图
        rbWorkIllustrate: '', // 断路作业-相关说明
        rbWorkImg: '', // 断路作业-地段示意图
        rbWorkReason: '', // 断路作业-断路原因
        rbWorkRelevantUnits: '' // 断路作业-相关单位
      },
      level: [
        {
          code: '10',
          name: '特级'
        },
        {
          code: '20',
          name: '一级'
        },
        {
          code: '30',
          name: '二级'
        }
      ],
      bpWorkType: [
        {
          name: '堵盲板',
          code: '10'
        },
        {
          name: '抽盲板',
          code: '20'
        }
      ],
      flatType: [
        {
          name: '承包商',
          code: '10'
        },
        {
          name: '内部',
          code: '20'
        }
      ],
      workType: [
        {
          code: '10',
          name: '动火作业'
        },
        {
          code: '20',
          name: '受限作业'
        },
        {
          code: '30',
          name: '盲板抽堵'
        },
        {
          code: '40',
          name: '高处作业'
        },
        {
          code: '50',
          name: '吊装作业'
        },
        {
          code: '60',
          name: '临时用电'
        },
        {
          code: '70',
          name: '动土作业'
        },
        {
          code: '80',
          name: '断路作业'
        }
      ],
      ticketType: [],
      workTicketStatus: {
        10: '待交底',
        20: '待接受',
        30: '会签中',
        40: '作业中',
        50: '已验收'
      },
      listUser: [],
      deptTree: [],
      areaTree: [],
      queryContractorList: [],
      queryUserList: [],
      baseUrl: process.env.VUE_APP_BASE_API
    }
  },
  computed: {
    manageName() {
      return this.workType.reduce((t, item) => {
        return {
          ...t,
          [item.code]: item.name
        }
      }, {})
    },
    workTypeName() {
      return (arr, type) => {
        const obj = arr.reduce((t, item) => {
          return {
            ...t,
            [item.code]: item.name
          }
        }, {})
        return obj[type]
      }
    }
  },
  created() {
    this.getTotalList()
  },
  methods: {
    handleDownload() {
      // 生成地址
      var myUrl = URL.createObjectURL(this.previewUrl)

      // 下载文件
      this.downloadFile(myUrl, '')
    },
    downloadFile(url, name) {
      const a = document.createElement('a')
      a.setAttribute('href', url)
      a.setAttribute('download', name)
      a.setAttribute('target', '_blank')
      const clickEvent = document.createEvent('MouseEvents')
      clickEvent.initEvent('click', true, true)
      a.dispatchEvent(clickEvent)
    },
    async handleItme({ url, previewType }) {
      const path = await getBase64(url)
      let wj = encodeURIComponent(path.msg)
      wj = decodeURIComponent(wj)
      const myBlob = this.dataURLtoBlob(wj)
      this.previewUrl = myBlob
      this.previewType = previewType
      this.previewAnnex = true
    },
    dataURLtoBlob(dataurl) {
      const arr = dataurl.split(',')
      const mime = arr[0].match(/:(.*?);/)[1]
      const bstr = atob(arr[1])
      let n = bstr.length
      const u8arr = new Uint8Array(n)
      // eslint-disable-next-line no-plusplus
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new Blob([u8arr], { type: mime })
    },
    reset() {
      this.search = this.$options.data().search
      this.dateValue = ''
      this.getList()
    },
    getTotalList() {
      const params = {
        pageNum: 1,
        pageSize: 1000
      }
      dictType({ ...params, dictType: 'sys_contractor_type' }).then((data) => {
        if (data.code === 200) {
          this.ticketType = data.rows
        } else {
          this.$message.error(data.msg)
        }
      })
      queryContractorList(params).then((data) => {
        if (data.code === 200) {
          this.queryContractorList = data.rows
        } else {
          this.$message.error(data.msg)
        }
      })
      listUser(params).then((data) => {
        if (data.code === 200) {
          this.listUser = data.rows
        } else {
          this.$message.error(data.msg)
        }
      })
      queryUserList(params).then((data) => {
        if (data.code === 200) {
          this.queryUserList = data.rows
        } else {
          this.$message.error(data.msg)
        }
      })
      deptTree(params).then((data) => {
        if (data.code === 200) {
          this.deptTree = data.data
        } else {
          this.$message.error(data.msg)
        }
      })
      areaTree(params).then((data) => {
        if (data.code === 200) {
          this.areaTree = data.data
        } else {
          this.$message.error(data.msg)
        }
      })
      this.getList()
    },
    getList() {
      if (
        this.search.workTicketCompanyName &&
        !this.search.workTicketCompanyType
      ) {
        this.$message({
          message: '请选择作业单位类型！！！',
          type: 'warning'
        })
        return
      }
      const params = {
        ...this.search,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        workPlanStartTime: this.dateValue[0],
        workPlanEndTime: this.dateValue[1]
      }
      queryWorktecketList(params).then((data) => {
        if (data.code === 200) {
          this.list = data.rows
          this.total = data.total
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    getObj(obj, arrKey) {
      arrKey.forEach((k) => {
        const jobKes = Object.keys(this[k])
        jobKes.forEach((key) => {
          this[k] = {
            ...this[k],
            [key]: obj[key]
          }
        })
      })
    },
    // 全选/反选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    dleSignTemolate(row) {
      let ids =
        row.id || this.multipleSelection.map((item) => item.id).join(',')
      this.$confirm('是否删除？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delWorktecket(ids).then((data) => {
            if (data.code === 200) {
              this.$message({
                message: '删除成功',
                type: 'success'
              })
              this.getList()
            } else {
              this.$message.error(data.msg)
            }
          })
        })
        .catch(() => {
          // 取消后退出
        })
    },
    findItemById(list, id, key) {
      // 每次进来使用find遍历一次
      let res = list.find((item) => item.id == id)

      if (res) {
        return res[key]
      } else {
        for (let i = 0; i < list.length; i++) {
          if (
            list[i].children instanceof Array &&
            list[i].children.length > 0
          ) {
            res = this.findItemById(list[i].children, id, key)
            if (res) return res
          }
        }

        return null
      }
    },
    // 取消添加
    handleClose() {
      this.addAlert = false
      setTimeout(() => {
        this.rowId = ''
        this.isCheck = false
        this.formData = this.$options.data().formData
        this.$refs.formData.resetFields()
      }, 200)
    },
    handleSave() {
      // this.$refs.formData.validate((valid) => {
      //   if (valid) {
      //   } else {
      //     return false;
      //   }
      // });
    },
    getDetails(id) {
      getWorktecketDetails(id).then((data) => {
        if (data.code === 200) {
          this.formData = data.data
          this.formData.executeUserNameList = this.formData.executeUserNameList
            ? this.formData.executeUserNameList.join()
            : ''
          this.formData.contractorUserNameList = this.formData
            .contractorUserNameList
            ? this.formData.contractorUserNameList.join()
            : ''
          this.workTicketExtendDTO = data.data.workTicketExtendDTO
          this.formData.applicantDeptId = this.findItemById(
            this.deptTree,
            this.formData.applicantDeptId,
            'label'
          )
          this.formData.workTicketAreaId = this.findItemById(
            this.areaTree,
            this.formData.workTicketAreaId,
            'name'
          )
          this.formData.workTicketProfiler = this.fileList(
            this.formData.workTicketProfiler
          )
          if (this.formData.workTicketCompanyType === '20') {
            this.formData.workTicketGuardianUser =
              this.formData.workTicketGuardianUser * 1
            this.formData.workTicketCompany = this.findItemById(
              this.deptTree,
              this.formData.workTicketCompany,
              'label'
            )
          }
          console.log(this.formData, 888)
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    fileList(fileList) {
      if (!fileList) return ''
      const arr = fileList.split(',')
      return arr.map((item) => {
        const url = item.split('/')
        const name = url[url.length - 1]
        const previewType = this.iconByType(name)
        return {
          url: item,
          name,
          previewType
        }
      })
    },
    // 获取文件后缀名
    iconByType(filename) {
      return filename.substring(filename.lastIndexOf('.') + 1, filename.length)
    },
    handleItem(row = {}) {
      this.addAlert = true
      this.getDetails(row.id)
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        '/worktecket/data/export',
        {},
        `job_${new Date().getTime()}.xlsx`
      )
    },
    handleCheckImg(imgList) {
      this.imgList = []
      if (imgList) {
        this.imgDialog = true
        this.imgList = imgList.split(',').map((item) => {
          return process.env.VUE_APP_BASE_API + item
        })
      }
    },
    operatingRecord({ id }) {
      this.recordsDialog = true
      worktecketOperateRecord(id).then((data) => {
        if (data.code === 200) {
          this.workFlowList = data.data
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.row-title {
  height: 40px;
  line-height: 40px;
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 16px;
  border-bottom: solid 1px #eee;
}
.row-title-child {
  height: 40px;
  line-height: 40px;
  margin-bottom: 20px;
  font-weight: 600;
  border-bottom: solid 1px #eee;
}
.tabMain {
  width: 100%;
  height: 600px;
  padding: 2%;
  overflow-y: auto;
  text-align: left;
}
.flowText {
  text-align: center;
  margin-top: 10px;
  span {
    border: 2px solid #67c23a;
    // background: #1c4990;
    color: #67c23a;
    border-radius: 3px;
    padding: 10px 20px;
    // font-weight: 600;
    font-size: 16px;
  }
  b {
    font-size: 20px;
    font-weight: 900;
    color: #67c23a;
  }
  .borderText {
    display: inline-block;
    border: 2px solid #67c23a;
    color: #67c23a;
    border-radius: 3px;
    padding: 5px 40px;
    // font-weight: 600;
    font-size: 16px;
    p {
      &:last-child {
        color: #67c23a;
        font-size: 13px;
        margin-top: 10px;
      }
    }
  }
  .borderText1 {
    display: inline-block;
    border: 2px solid #fff;
    color: #fff;
    border-radius: 3px;
    padding: 5px 40px;
    // font-weight: 600;
    font-size: 16px;
    p {
      &:last-child {
        color: #fff;
        font-size: 13px;
        margin-top: 10px;
      }
    }
  }
}
.file-list {
  padding: 10px;
  display: flex;
  grid-gap: 10px;
  .item {
    width: 95px;
    height: 100px;
    background: #1c4990;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    .item-img {
      width: 50px;
      height: 60px;
    }
    .item-text {
      position: absolute;
      bottom: 0;
      background: rgba(176, 198, 211, 0.9);
      left: 0;
      overflow: hidden;
      word-break: break-all;
      width: 100%;
    }
    .item-close {
      position: absolute;
      right: 5px;
      top: 5px;
      font-size: 18px;
      color: #fff;
    }
  }
}
</style>
