<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <el-input
          v-model="query.name"
          clearable
          size="small"
          placeholder="输入巡检计划"
          style="width: 160px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-input
          v-model="query.patrolPersonId"
          clearable
          size="small"
          placeholder="输入巡检人员"
          style="width: 160px"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <!-- <el-cascader
          v-model="query.departmentId"
          :options="departmentOptions"
          :props="{ checkStrictly: true, emitPath: false }"
          filterable
          clearable
          size="small"
          placeholder="请选择责任部门"
          style="width: 160px"
          class="filter-item"
        /> -->
        <el-select
          v-model="query.exceptionHandleStatus"
          filterable
          clearable
          size="small"
          placeholder="请选择异常状态"
          class="filter-item"
          style="width: 160px"
          @change="crud.toQuery"
        >
          <el-option
            v-for="item in optionsObj.ExceptionType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <span style="margin-right:8px;">任务日期</span>
        <el-date-picker
          v-model="timeRange"
          type="datetimerange"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd HH:mm"
          value-format="yyyy-MM-dd HH:mm:ss"
          @change="handleChangeTime($event)"
          style="width:350px"
          >
        </el-date-picker>
        <rrOperation />
      </div>
      <crudOperation :permission="permission"></crudOperation>
    </div>
    <!--表单组件-->
    <!-- 大图 -->
    <el-dialog width="800" :visible.sync="dialogVisible">
      <img width="100%" height="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <!-- 异常处理 -->
    <el-dialog
        class="ex-handle"
        width="50%"
        title="异常处理"
        :visible.sync="handleEX"
        >
        <el-row v-for="(item,index) in taskCheckPoints" :key="index">
          <template>
          <el-form size="small" label-width="100px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="巡检点名称" prop="checkpointName">
                  <el-input v-model="item.checkpointName" disabled/>
                </el-form-item> 
              </el-col>
              <el-col :span="8">
                <el-form-item label="检查人员" prop="patrolPersonName">
                  <el-input v-model="item.patrolPersonName" disabled/>
                </el-form-item> 
              </el-col>
              <el-col :span="8">
                <el-form-item label="检查完成时间" prop="checkEndTime">
                  <el-input v-model="item.checkEndTime" disabled/>
                </el-form-item> 
              </el-col>
            </el-row>
          </el-form> 
          <!-- <el-form size="small" label-width="100px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="巡检点名称" prop="planName">
                  <el-input v-model="item.planName" disabled/>
                </el-form-item> 
              </el-col>
              <el-col :span="8">
                <el-form-item label="检查人员" prop="patrolPersonName">
                  <el-input v-model="form.patrolPersonName" disabled/>
                </el-form-item> 
              </el-col>
              <el-col :span="8">
                <el-form-item label="检查完成时间" prop="actualEndTime">
                  <el-input v-model="form.actualEndTime" disabled/>
                </el-form-item> 
              </el-col>
            </el-row>
          </el-form>  -->
          <!-- <el-table
            :data="form.tableData"
            border
            style="width: 100%; margin-top: 20px">
            <el-table-column
              label="序号"
              width="120"
              :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{scope.$index+1}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="设备名称"
              width="120">
            </el-table-column>
            <el-table-column
              prop="checkItem"
              label="检查项目">
            </el-table-column>
            <el-table-column
              prop="standard"
              label="检查标准">
            </el-table-column>
            <el-table-column
              prop="dataRecord"
              label="数据记录">
            </el-table-column>
            <el-table-column
              prop="result"
              label="检查结果">
            </el-table-column>
            <el-table-column
              prop="att"
              label="异常处理状态">
            </el-table-column>
            <el-table-column
              prop="att"
              label="操作">
              <el-button type="primary" @click="handleRecord = true">整改处理</el-button>
            </el-table-column>
          </el-table> -->
          <el-table
            :data="item.objects"
            border
            style="width: 100%; margin-top: 20px">
            <el-table-column
              label="序号"
              width="120"
              :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{scope.$index+1}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="设备名称"
              width="120">
            </el-table-column>
            <el-table-column
              label="检查项目">
              <template slot-scope="scope">
                <el-row v-for="(it,index) in scope.row.items" :key="index">
                <el-input type="textarea" v-model="it.checkpointItem.content" style="margin-bottom:6px;" disabled/>
                </el-row>
              </template>
            </el-table-column>
            <el-table-column
              label="检查标准">
              <template slot-scope="scope">
                <el-row v-for="(it,index) in scope.row.items" :key="index">
                <el-input type="textarea" v-model="it.checkpointItem.standard" style="margin-bottom:6px;" disabled/>
                </el-row>
              </template>
            </el-table-column>
            <el-table-column
              label="数据记录">
              <template slot-scope="scope">
                <el-row v-for="(it,index) in scope.row.items" :key="index">
                <el-input type="textarea" v-model="it.checkData" style="margin-bottom:6px;" disabled/>
                </el-row>
              </template>
            </el-table-column>
            <el-table-column
              label="检查结果">
              <template slot-scope="scope">
                <el-row v-for="(it,index) in scope.row.items" :key="index">
                <el-input type="textarea" v-model="it.checkResultStr" style="margin-bottom:6px;" disabled/>
                </el-row>
              </template>
            </el-table-column>
            <el-table-column
              label="异常处理状态">
              <template slot-scope="scope">
                <el-row v-for="(it,index) in scope.row.items" :key="index">
                  <el-input type="textarea" v-model="it.exceptionHandleStatusStr" style="margin-bottom:6px;" disabled/>
                </el-row>
              </template>
            </el-table-column>
            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <el-row v-for="(it,index) in scope.row.items" :key="index">
                  <el-button type="primary" @click="openHandleRecord(it,index,scope.row)" style="margin:10px 0 10px 0;">整改处理</el-button>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
          </template>
        </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleEX = false">关 闭</el-button>
        </span>
    </el-dialog>
    <!-- 整改处理 -->
    <el-dialog
      class="handle-record"
      width="36%"
      title="整改处理"
      :visible.sync="handleRecord"
      >
        <el-form size="small" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="整改人员" prop="exceptionHandlePersonName">
                <el-input v-model="form.exceptionHandlePersonName"  />
              </el-form-item> 
              <el-form-item label="整改情况" prop="remark">
                <el-input v-model="form.remark"  />
              </el-form-item> 
              <el-form-item label="整改前照片" prop="exceptPictureBefore">
                <el-upload
                  class="avatar-uploader"
                  v-model="form.exceptPictureBefore"
                  list-type="picture-card"
                  :action="VUE_APP_BASE_API + '/file/uploadFile'"
                  :show-file-list="true"
                  :before-upload="beforeUpload"
                  :on-success="handleSuccess1"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove1"
                  :data="{ fileModule: 1 }"
                  :headers="{ token }"
                  accept=".jpg,.jpeg,.gif,.png">
                    <i class="el-icon-plus"></i>
                    <div style="margin-top: 20px; line-height: 20px" slot="tip" class="el-upload__tip">
                      只能上传 jpg / jpeg / gifx / png 文件，<br />且不超过 5 MB
                    </div>
                  </el-upload>
              </el-form-item> 
            </el-col>
            <el-col :span="12">
              <el-form-item label="治理资金(元)" prop="amount">
                <el-input v-model="form.amount" />
              </el-form-item> 
              <el-form-item label="填报时间" prop="inputTime">
                    <el-date-picker
                      v-model="form.inputTime"
                      type="datetime"
                      placeholder="选择日期时间"
                    >
                    </el-date-picker>
              </el-form-item> 
              <el-form-item label="整改后照片" prop="exceptPictureAfter">
                <el-upload
                  class="avatar-uploader"
                  v-model="form.exceptPictureAfter"
                  name="finished"
                  list-type="picture-card"
                  :action="VUE_APP_BASE_API + '/file/uploadFile'"
                  :show-file-list="true"
                  :before-upload="beforeUpload"
                  :on-success="handleSuccess2"
                  :on-preview="handlePictureCardPreview"
                  :on-remove="handleRemove2"
                  :data="{ fileModule: 1 }"
                  :headers="{ token }"
                  accept=".jpg,.jpeg,.gif,.png">
                    <i class="el-icon-plus"></i>
                    <div style="margin-top: 20px; line-height: 20px" slot="tip" class="el-upload__tip">
                      只能上传 jpg / jpeg / gifx / png 文件，<br />且不超过 5 MB
                    </div>
                  </el-upload>
              </el-form-item> 
            </el-col>
          </el-row>
        </el-form> 
        <span slot="footer" class="dialog-footer">
          <el-button :loading="crud.status.cu === 2" type="primary" @click="submitHandle">保 存</el-button>
          <el-button @click="handleRecord = false">关 闭</el-button>
        </span>
    </el-dialog>
    <!-- 巡检详情 -->
    <el-dialog
      class="patrol-details"
      width="50%"
      title="查看巡检记录"
      :visible.sync="patrolDetails"
    >
      <el-form size="small" label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="检查计划名称" prop="planName">
              <el-input v-model="form.planName" disabled/>
            </el-form-item> 
          </el-col>
          <el-col :span="8">
            <el-form-item label="任务时间" prop="planStartTime">
              <el-date-picker
                v-model="form.planStartTime"
                type="datetime"
                disabled>
              </el-date-picker>
            </el-form-item> 
          </el-col>
          <el-col :span="8">
            <el-form-item label="检查人员" prop="patrolNames">
              <el-input v-model="form.patrolNames" disabled/>
            </el-form-item> 
          </el-col>
        </el-row>
      </el-form>
      <div class="check-point">
        <el-row v-for="(item,index) in taskCheckPoints" :key="index">
          <div class="check-point-content">
            <el-form size="small" label-width="120px">
              <div class="check-point-title">
                <div></div>
                <span>{{item.checkpointName}}</span> 
              </div>
              <el-row class="check-point-info">
                <el-col :span="5">
                  <el-form-item label="签到状态：" prop="checkInState" label-width="90px">
                    <el-tag v-if="item.checkInState" type="success">已签到</el-tag>
                    <el-tag v-if="!item.checkInState" type="info">未签到</el-tag>
                  </el-form-item> 
                </el-col>
                <el-col :span="9">
                  <el-form-item label="巡检开始时间：" prop="checkStartTime">
                    <el-date-picker
                      v-model="item.checkStartTime"
                      type="datetime"
                      width="130px"
                      disabled>
                    </el-date-picker>
                  </el-form-item> 
                </el-col>
                <el-col :span="10">
                  <el-form-item label="巡检完成时间：" prop="checkEndTime" label-width="140px">
                    <el-date-picker
                      v-model="item.checkEndTime"
                      type="datetime"
                      width="130px"
                      disabled>
                    </el-date-picker>
                  </el-form-item> 
                </el-col>
              </el-row>
            </el-form> 
          </div>
          <div class="check-point-table">
            <!-- item.objects -->
            <el-table
              :data="item.objects"
              :default-sort="{ prop:'id' }"
              row-key="key"
              border
              style="width: 100%">
              <el-table-column
                prop="name"
                label="巡检对象名称"
                width="100px"
                align="center">
              </el-table-column>
              <el-table-column
                prop="code"
                label="编号"
                width="60px"
                align="center">
              </el-table-column>
              <el-table-column
                label="检查项目">
                <template slot-scope="scope">
                  <el-row v-for="(it,index) in scope.row.items" :key="index">
                  <el-input type="textarea" v-model="it.checkpointItem.content" style="margin-bottom:6px;" disabled/>
                  </el-row>
                </template>
              </el-table-column>
              <el-table-column
                label="检查标准">
                <template slot-scope="scope">
                  <el-row v-for="(it,index) in scope.row.items" :key="index">
                  <el-input type="textarea" v-model="it.checkpointItem.standard" style="margin-bottom:6px;" disabled/>
                  </el-row>
                </template>
              </el-table-column>
              <el-table-column
                label="数据记录">
                <template slot-scope="scope">
                  <el-row v-for="(it,index) in scope.row.items" :key="index">
                  <el-input type="textarea" v-model="it.checkData" style="margin-bottom:6px;" disabled/>
                  </el-row>
                </template>
              </el-table-column>
              <el-table-column
                label="检查结果">
                <template slot-scope="scope">
                  <el-row v-for="(it,index) in scope.row.items" :key="index">
                  <el-input type="textarea" v-model="it.checkResultStr" style="margin-bottom:6px;" disabled/>
                  </el-row>
                </template>
              </el-table-column>
              <el-table-column
                label="附件信息"
                width="280px">
                <template slot-scope="scope">
                   <el-row v-for="(it,index) in scope.row.items" :key="index" style="margin:10px 0 10px 0">
                    <div class="block" v-for="(img,index) in it.attachment" :key="index">
                      <span>照片：</span>
                      <el-image
                        style="width: 100px; height: 100px"
                        :src="img.path"
                        fit="cover"></el-image>
                    </div>
                   </el-row>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="patrolDetails = false">关 闭</el-button>
      </span>
    </el-dialog>
    <!-- 地图快照 -->
    <el-dialog
      title="地图快照"
      :visible.sync="mapSnapshot"
      width="950px"
    >
      <el-row style="margin-bottom:10px">
        <template >
          <el-col :span="3">
            <el-button v-if="personTrack==false" type="primary" @click="openPersonTrack()">人员轨迹：关</el-button>
            <el-button v-if="personTrack" type="primary" @click="closePersonTrack()">人员轨迹：开</el-button>
          </el-col>
        </template>
      </el-row>
      <el-row>
        <el-col :span="18">
          <relative-map
            ref="mapSnapshota"
            v-model="mapData"
            :buildFloor="buildFloor"
            :drawShow=false
            drawMode="Ploygion"
            width="40%"
          />
        </el-col>
        <el-col  :span="6">
          <div class="point-info">
            <!-- <div v-for="(item,index) in checkPointList" :key="index"  :class="[item.result == 1 ? 'point-info-normal':'', item.result == 2 ? 'point-info-loss':'' ,item.result > 2 ? 'point-info-abnormal':'']">
              <el-col class="point-info-base" :span="22">
                <div>2022年6月30日 08:30:29</div>
                <div>巡检人员：管理员</div>
                <div>巡检点位：日常检查</div>
                <div>结论：正常</div>
              </el-col>
              <el-col class="point-info-order" :span="2">
                <div>1</div>
              </el-col>
            </div> -->
            <div v-for="(item,index) in taskCheckPoints" :key="index"  :class="[item.checkInState &&  item.exceptionCount == 0 ? 'point-info-normal':'', !item.checkInState &&  item.exceptionCount == 0  ? 'point-info-loss':'' ,!item.checkInState && item.exceptionCount > 0 ? 'point-info-abnormal':'']">
              <el-col class="point-info-base" :span="22">
                <div>{{item.checkEndTime}}</div>
                <div>巡检人员：{{item.patrolPersonName}}</div>
                <div>巡检点位：{{item.checkpointName}}</div>
                <div>结论：{{item.checkResultStr}}</div>
              </el-col>
              <el-col class="point-info-order" :span="2">
                <div>{{index+1}}</div>
              </el-col>
            </div>
          </div>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer-batchMap">
        <el-button @click=" mapSnapshot = false">关闭</el-button>
      </div>
    </el-dialog>
    <!--表格渲染-->
    <el-table
      ref="table"
      v-loading="crud.loading"
      :data="crud.data"
      style="width: 100%"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column
        v-for="item in patrolRecordTableOptions"
        :key="item.prop"
        :label="item.label"
        :prop="item.prop"
        :width="item.width"
        :align="item.align"
        :fixed="item.fixed"
        :sortable="item.sortable"
      ></el-table-column>
      <!--   编辑与删除   -->
      <el-table-column
        v-if="checkPer(['admin', 'patrolRecord:del'])"
        label="操作"
        width="400px"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <div style="display:flex;">
            <el-button type="primary" size="mini" style="margin-right:5px;" @click="openPatrolDetails(scope.row)" >巡检详情</el-button>
            <el-button type="primary" size="mini" style="margin-right:5px;" v-if="true" @click="openHandleEX(scope.row)">异常处理</el-button>
            <el-button type="primary" size="mini" style="margin-right:5px;" @click="openMapSnapshot(scope.row)">地图快照</el-button>
            <udOperation :data="scope.row" :permission="permission"/>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import permission from '@/directive/permission'
import crudPatrolRecord from '@/api/patrolManage/patrolRecord'
import { getOptions } from '@/api/patrolManage/options'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
// import { crudOperation, rrOperation, udOperation, pagination } from '@crud'
import crudComps from '@crud'
import DateRangePicker from '@/components/DateRangePicker'
import { patrolRecordTableOptions } from '../tableConfig'
import { getToken } from '@/utils/auth'
import { initData } from '@/api/data'
import RelativeMap from '@/components/RelativeMap'

const defaultForm = {
  //巡检记录
  id: null,
  planId: 0,
  planName: "string",
  planStartTime:'',
  actualStartTime:'',
  actualEndTime:'',
  status:1,
  statusStr: "string",
  timeCost: 0,
  timeCostStr: "string",
  patrolResult: true,
  patrolResultStr: "string",
  //异常状态
  exceptionReason: "string",
  exceptionHandleStatus: true,
  exceptionHandleStatusStr: "string",
  //巡检完成人员
  patrolPersonId: 0,
  patrolPersonName: "string",
  //可巡检人员列表
  personIds: [],
  personNames: [],

  //整改记录
  userId: '',
  amount: '',
  rectifyState: '',
  inputTime:'',
  picJson:[],
  finishedPic:[],
  //人员轨迹信息
  points:[
    {'x': 119436,'y': 36865},
    {'x': 119436,'y': 60265},
    {'x': 16436,'y': 60265},
  ],
  //巡检任务详情
  taskCheckPoints:[{
    id: null,
    taskId: 0,
    checkpointId: 0,
    checkpointCode: "string",
    checkpointName: "string",
    patrolPersonId: 0,
    patrolPersonName: "string",
    checkStartTime: "2022-07-21T07:58:45.737Z",
    checkEndTime: "2022-07-21T07:58:45.737Z",
    reportWay: 1,
    reportWayStr: "string",
    checkResult: true,
    checkResultStr: "string",
    exceptionCount: 0,
    checkInType: [
      1
    ],
    checkInTypeStr: [
      "string"
    ],
    checkInState: true,
    checkInStateStr: "string",
    checkInLocation: {
      "x": 0,
      "y": 0,
      "buildId": "string",
      "floorNo": 0
    },
    checkInNFCCode: "string",
    checkInRFIDCode: "string",
    checkInQRCode: "string",
    checkInBarCode: "string",
    objects: [{
      objectId: 0,
      code: "string",
      name: "string",
      buildId: "string",
      buildName: "string",
      floorNo: 0,
      floorStr: "string",
      areaId: 0,
      items: [
        {
          id: 0,
          taskId: 0,
          taskCheckpointId: 0,
          objectId: 0,
          itemId: 0,
          dataType: 1,
          checkResult: "string",
          checkResultState: 0,
          exceptionHandleUser: 0,
          exceptionHandleStatus: true,
          exceptionType: 1,
          exceptPictureBefore: [
            "string"
          ],
          exceptPictureAfter: [
            "string"
          ],
          exceptionRemark: "string",
          remark: "string",
          object: {
            id: 0,
            token: "string",
            baseCreateTime: "2022-07-21T07:58:45.738Z",
            baseCreatorId: 0,
            baseVersion: 0,
            baseModifyTime: "2022-07-21T07:58:45.738Z",
            baseModifierId: 0,
            baseIsDelete: 0,
            code: "string",
            name: "string",
            type: 0,
            typeStr: "string",
            departmentId: 0,
            departmentName: "string",
            buildId: "string",
            buildName: "string",
            floorNo: 0,
            floorStr: "string",
            location: {
              x: 0,
              y: 0,
              buildId: "string",
              floorNo: 0
            },
            areaId: 0,
            areaName: "string",
            personInChargeId: 0,
            personInChargeName: "string"
          },
          item: "string",
        }
      ]
    }]
  }],
  //巡检任务详情
  checkPointAndItemList:[
    {
      pointId:'',
      pointName:'',
      checkStartTime:'',
      checkEndTime:'',
      reportWay:'',
      checkResult:'',
      exceptionCount:'',
      verifyType:'',
      verifyState:'',
      verifyLocation:'',
      checkItemList:[
        {
          objectTypeId:'',
          objectTypeName:'',
          objectId:'',
          objectName:'',
          objectCode:'',
          itemId:'',
          content:'',
          standard:'',
          resultType:'',
          symbol:'',
          lowerLimit:'',
          upperLimit:'',
          checkResultState:'',
          exceptHandlerStatus:'',
          exceptInfo:'',
          pictureFiles:'',
          videoFiles:'',
          voiceFiles:'',
          remark:'',
        },
      ],
    },
  ],
  //检查点项目列表
  tableData: [{
    id:123122,
    name: '王小虎',
    checkItem: '234',
    standard: '3.2',
    dataRecord: 1,
    result:10,
    att:'sdwddd'
  }, {
    id:123123,
    name: '王小虎',
    checkItem: '165',
    standard: '4.43',
    dataRecord: 1,
    result:12,
    att:'sdwddd'
  }, {
    id:12124,
    name: '王二虎',
    checkItem: '324',
    standard: '1.9',
    dataRecord: 1,
    result:9,
    att:'sdwddd'
  }, {
    id:12125,
    name: '王二虎',
    checkItem: '621',
    standard: '2.2',
    dataRecord: 1,
    result:17,
    att:'sdwddd'
  }, {
    id:12312,
    name: '王三虎',
    checkItem: '539',
    standard: '4.1',
    dataRecord: 1,
    result:15,
    att:'sdwddd'
  }],

  
}

export default {
  name: 'PatrolRecord',
  directives: { permission },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  components: { ...crudComps, DateRangePicker,RelativeMap },
  cruds() {
    return CRUD({
      title: '巡检记录',
      // url: 'system/person/getPageListJson',
      url: 'patrol/task/getList',
      // props:{status:3},
      listOrder: [],
      crudMethod: { ...crudPatrolRecord },
      optShow: { add: false, edit: false, del: false, reset: true,export:true},
    })
  },
  computed: {
    crudCU() {
      return this.crud.status.cu > 0
    },
    VUE_APP_BASE_API() {
      return process.env.VUE_APP_BASE_API
    },
  },
  data() {
    return {
      mapData: [],
      buildFloor: {},
      patrolRecordTableOptions,
      viewLoading: false,
      permission: {
        add: ['admin', 'patrolRecord : add'],
        edit: ['admin', 'patrolRecord : edit'],
        del: ['admin', 'patrolRecord : del'],
      },
      // rules: {
      //   code: [{ required: true, message: '请输入标签编号', trigger: 'blur' }],
      //   name: [{ required: true, message: '请输入标签名称', trigger: 'blur' }],
      //   location: [{ required: true, message: '请输入所属位置', trigger: 'blur' }],
      // },
      token: getToken() ?? '',
      handleEX:false,
      handleRecord:false,
      patrolDetails:false,
      mapSnapshot:false,
      personTrack:true,
      dialogVisible:false,
      dialogImageUrl:'',
      optionsObj: {
        Build: [],
        // FloorNo: [],
        ExceptionType: [],
        TaskStatus: [],
        ReportWay: [],
      },
      departmentOptions:[],
      timeRange:[],
      spanArr: [],
      taskCheckPoints:[
        {
        id: 0,
        token: "string",
        taskId: 0,
        checkpointId: 0,
        checkpointCode: "string",
        checkpointName: "string",
        checkpoint: {
          id: 0,
          token: "string",
          code: "string",
          name: "string",
          departmentId: 0,
          departmentName: "string",
          department: {
            id: 0,
            token: "string",
            parentId: 0,
            departmentName: "string",
            telephone: "string",
            fax: "string",
            email: "string",
            principalId: 0,
            departmentSort: 0,
            remark: "string",
            personCount_All: 0,
            personCount: 0,
            personCount_Remaining: 0,
            ids: [
              0
            ],
            principalName: "string",
            children: [
              "string"
            ],
            iChildren: [
              {
                id: 0,
                parentId: 0,
                iChildren: [
                  "string"
                ]
              }
            ],
            hasChildren: true,
            leaf: true,
            label: "string"
          },
          areaId: 0,
          areaName: "string",
          area: {
            id: 0,
            token: "string",
            buildId: "string",
            buildName: "string",
            areaName: "string",
            remark: "string",
            riskLevel: "string",
            riskLevelStr: "string",
            enableLog: true,
            enableLogStr: "string",
            crossAlarm: true,
            overstayAlarm: true,
            overstayTime: 0,
            overmanAlarm: true,
            overmanCount: 0,
            overmanTime: 0,
            undermanAlarm: true,
            undermanCount: 0,
            undermanTime: 0,
            actionlessAlarm: true,
            actionlessTime: 0,
            effectiveTimeJson: "string",
            rails: [
              {
                id: 0,
                token: "string",
                buildId: "string",
                buildName: "string",
                floorNo: 0,
                floorStr: "string",
                railName: "string",
                remark: "string",
                solidRail: true,
                enableLog: true,
                enableLogStr: "string",
                crossAlarm: true,
                overstayAlarm: true,
                overstayTime: 0,
                overmanAlarm: true,
                overmanCount: 0,
                overmanTime: 0,
                undermanAlarm: true,
                undermanCount: 0,
                undermanTime: 0,
                actionlessAlarm: true,
                actionlessTime: 0,
                effectiveTimeJson: "string",
                points: [
                  {
                    "x": 0,
                    "y": 0
                  }
                ],
                effectiveTimes: [
                  {
                    startTime: "string",
                    endTime: "string",
                    weekday: [
                      0
                    ]
                  }
                ]
              }
            ],
            railIds: [
              0
            ],
            effectiveTimes: [
              {
                startTime: "string",
                endTime: "string",
                weekday: [
                  0
                ]
              }
            ]
          },
          areaExtent: [
            {
              buildId: "string",
              floor: [
                0
              ],
              points: [
                {
                  "x": 0,
                  "y": 0
                }
              ]
            }
          ],
          checkInMethod: [
            1
          ],
          checkInMethodStr: [
            "string"
          ],
          labelId: 0,
          labelName: "string",
          label: {
            id: 0,
            token: "string",
            code: "string",
            name: "string",
            description: "string",
            buildId: "string",
            buildName: "string",
            floorNo: 0,
            floorStr: "string",
            extent: {
              buildId: "string",
              floor: [
                0
              ],
              points: [
                {
                  x: 0,
                  y: 0
                }
              ]
            },
            nfcCode: "string",
            rfidCode: "string",
            qrCode: "string",
            barCode: "string"
          },
          oneKeyFinish: true,
          oneKeyFinishStr: "string",
          objects: [
            {
              sort: 0,
              objectId: 0,
              code: "string",
              name: "string",
              type: 0,
              typeStr: "string",
              buildId: "string",
              buildName: "string",
              floorNo: 0,
              floorStr: "string",
              areaId: 0,
              areaName: "string",
              items: [
                {
                  id: 0,
                  token: "string",
                  checkpointId: 0,
                  objectId: 0,
                  content: "string",
                  standard: "string",
                  dataType: 1,
                  unit: "string",
                  numberJudgment: [
                    {
                      judgementConditions: [
                        {
                          logicalOperator: 1,
                          comparisonOperator: 1,
                          comparisonValue: 0
                        }
                      ]
                    }
                  ],
                  statusOptionId: 0,
                  statusOptionName: [
                    "string"
                  ],
                  statusOption: [
                    "string"
                  ],
                  normalStatusOptionId: 0,
                  forcePhotograph: true,
                  tag: "string"
                }
              ]
            }
          ],
          objectCount: 0,
          itemCount: 0
        },
        patrolPersonId: 0,
        patrolPersonName: "string",
        patrolPerson: {
          id: 0,
          token: "string",
          name: "string",
          workNo: "string",
          type: 0,
          typeName: "string",
          iconPath: "string",
          department: 0,
          departmentName: "string",
          position: 0,
          positionName: "string",
          sex: "string",
          sexName: "string",
          labelId: 0,
          labelMAC: "string",
          photoPath: "string",
          oneKeyAlarm: true,
          oneKeyAlarmStr: "string",
          entryTime: "2022-07-21T13:00:13.753Z",
          birthday: "2022-07-21T13:00:13.753Z",
          age: 0,
          politicalStatus: "string",
          politicalStatusStr: "string",
          ethnicity: "string",
          ethnicityStr: "string",
          idType: "string",
          idTypeStr: "string",
          idNumber: "string",
          telephone: "string",
          officePhone: "string",
          email: "string",
          healthCondition: "string",
          healthConditionStr: "string",
          education: "string",
          educationStr: "string",
          speciality: "string",
          registeredPermanent: "string",
          contactAddress: "string",
          zipCode: "string",
          startWorkTime: "2022-07-21T13:00:13.753Z",
          jobTitle: "string",
          duty: "string",
          dutyOfWork: "string",
          workExperience: "string",
          positioningOnline: true,
          positioningOnlineStr: "string",
          commOnline: true,
          commOnlineStr: "string",
          personAlarmConfigList: [
            {
              railId: 0,
              railName: "string",
              areaId: 0,
              areaName: "string",
              crossInAlarm: true,
              crossOutAlarm: true,
              overstayAlarm: true,
              actionlessAlarm: true
            }
          ],
          locationData: {
            buildId: "string",
            floorNo: 0,
            labelId: 0,
            time: 0,
            x: 0,
            y: 0,
            xMillimeter: 0,
            yMillimeter: 0,
            status: 0
          },
          onOneKeyAlarm: true,
          onCrossInAlarm: true,
          onCrossOutAlarm: true,
          onOverstayAlarm: true,
          onActionlessAlarm: true,
          onRailAlarm: [
            0
          ],
          onAreaAlarm: [
            0
          ]
        },
        checkStartTime: "2022-07-21T13:00:13.753Z",
        checkEndTime: "2022-07-21T13:00:13.753Z",
        reportWay: 1,
        reportWayStr: "string",
        checkResult: 0,
        checkResultStr: "string",
        exceptionCount: 0,
        checkInType: [
          1
        ],
        checkInTypeStr: [
          "string"
        ],
        checkInState: true,
        checkInStateStr: "string",
        checkInLocation: {
          x: 0,
          y: 0,
          buildId: "string",
          floorNo: 0
        },
        checkInNFCCode: "string",
        checkInRFIDCode: "string",
        checkInQRCode: "string",
        checkInBarCode: "string",
        objects: [
          {
            sort: 0,
            objectId: 0,
            code: "string",
            name: "string",
            buildId: "string",
            buildName: "string",
            floorNo: 0,
            floorStr: "string",
            areaId: 0,
            items: [
              {
                id: 0,
                token: "string",
                taskId: 0,
                taskCheckpointId: 0,
                objectId: 0,
                checkpointItemId: 0,
                checkpointItem: {
                  id: 0,
                  token: "string",
                  checkpointId: 0,
                  objectId: 0,
                  content: "string",
                  standard: "string",
                  dataType: 1,
                  unit: "string",
                  numberJudgment: [
                    {
                      judgementConditions: [
                        {
                          logicalOperator: 1,
                          comparisonOperator: 1,
                          comparisonValue: 0
                        }
                      ]
                    }
                  ],
                  statusOptionId: 0,
                  statusOptionName: [
                    "string"
                  ],
                  statusOption: [
                    "string"
                  ],
                  normalStatusOptionId: 0,
                  forcePhotograph: true,
                  tag: "string"
                },
                checkData: "string",
                checkResult: 0,
                checkResultStr: "string",
                attachment: [
                  {
                    type: 1,
                    path: "string"
                  }
                ],
                exceptionHandlePersonId: 0,
                exceptionHandlePersonName: "string",
                exceptionHandlePerson: {
                  id: 0,
                  token: "string",
                  name: "string",
                  workNo: "string",
                  type: 0,
                  typeName: "string",
                  iconPath: "string",
                  department: 0,
                  departmentName: "string",
                  position: 0,
                  positionName: "string",
                  sex: "string",
                  sexName: "string",
                  labelId: 0,
                  labelMAC: "string",
                  photoPath: "string",
                  oneKeyAlarm: true,
                  oneKeyAlarmStr: "string",
                  entryTime: "2022-07-21T13:00:13.753Z",
                  birthday: "2022-07-21T13:00:13.753Z",
                  age: 0,
                  politicalStatus: "string",
                  politicalStatusStr: "string",
                  ethnicity: "string",
                  ethnicityStr: "string",
                  idType: "string",
                  idTypeStr: "string",
                  idNumber: "string",
                  telephone: "string",
                  officePhone: "string",
                  email: "string",
                  healthCondition: "string",
                  healthConditionStr: "string",
                  education: "string",
                  educationStr: "string",
                  speciality: "string",
                  registeredPermanent: "string",
                  contactAddress: "string",
                  zipCode: "string",
                  startWorkTime: "2022-07-21T13:00:13.754Z",
                  jobTitle: "string",
                  duty: "string",
                  dutyOfWork: "string",
                  workExperience: "string",
                  positioningOnline: true,
                  positioningOnlineStr: "string",
                  commOnline: true,
                  commOnlineStr: "string",
                  personAlarmConfigList: [
                    {
                      railId: 0,
                      railName: "string",
                      areaId: 0,
                      areaName: "string",
                      crossInAlarm: true,
                      crossOutAlarm: true,
                      overstayAlarm: true,
                      actionlessAlarm: true
                    }
                  ],
                  locationData: {
                    buildId: "string",
                    floorNo: 0,
                    labelId: 0,
                    time: 0,
                    x: 0,
                    y: 0,
                    xMillimeter: 0,
                    yMillimeter: 0,
                    status: 0
                  },
                  onOneKeyAlarm: true,
                  onCrossInAlarm: true,
                  onCrossOutAlarm: true,
                  onOverstayAlarm: true,
                  onActionlessAlarm: true,
                  onRailAlarm: [
                    0
                  ],
                  onAreaAlarm: [
                    0
                  ]
                },
                exceptionHandleStatus: 0,
                exceptionHandleStatusStr: "string",
                exceptionType: 1,
                exceptionTypeStr: "string",
                exceptPictureBefore: [
                  "string"
                ],
                exceptPictureAfter: [
                  "string"
                ],
                exceptionRemark: "string",
                remark: "string"
              }
            ]
          }
        ]

        }
      ],
      checkPointList:[
        {result:1},
        {result:2},
        {result:3},
        {result:4},
      ],  
    }
  },
  created() {
    this.getOptions()
    this.getDeptOptions()
  },
  methods: {
    getOptions() {
      Object.keys(this.optionsObj).forEach(async (key) => {
        try {
          let res = await getOptions(key)
          if (res.code === 20000) this.optionsObj[key] = res.data.content
        } catch (error) {
          console.log(error)
        }
      })
    },
    async getDeptOptions(){
      try {
          let res = await initData('system/options/getDepartmentOptions')
          if (res.code === 20000) this.departmentOptions = res.data.content
          console.log(res);
        } catch (error) {
          console.log(error)
        }
    },
    async getTaskCheckPointOptions(id){
      try {
          let res = await initData('patrol/taskCheckpoint/getList',{taskId:id,token:this.token})
          if (res.code === 20000) this.taskCheckPoints = res.data.content
          // console.log(res);
        } catch (error) {
          console.log(error)
        }
    },
    async getPersonPathOptions(id){
      try {
          let res = await initData('patrol/taskCheckpoint/getList',{taskId:id,token:this.token})
          if (res.code === 20000) this.taskCheckPoints = res.data.content
          // console.log(res);
        } catch (error) {
          console.log(error)
        }
    },
    //合并表格
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
     // 判断哪一列 如果需要处理多了 使用 || 进行处理即可
      if (columnIndex === 0) {
        const _row = this.flitterData(this.form.tableData).one[rowIndex];
        const _col = _row > 0 ? 1 : 0;
        return {
          rowspan: _row,
          colspan: _col,
        };
      }
    },
    /**合并表格的第一列，处理表格数据 */
    flitterData(arr) {
      let spanOneArr = [];
      let concatOne = 0;
      arr.forEach((item, index) => {
        console.log(item, index);
        if (index === 0) {
          spanOneArr.push(1);
        } else {
        //注意这里的data是表格绑定的字段，根据自己的需求来改
          if (item.data === arr[index - 1].data) {
            //第一列需合并相同内容的判断条件
            spanOneArr[concatOne] += 1;
            spanOneArr.push(0);
          } else {
            spanOneArr.push(1);
            concatOne = index;
          }
        }
      });
      return {
        one: spanOneArr,
      };
    },
    //上传图片相关
    beforeUpload(file) {
      console.log(file)
      if (file.size > 1024 * 1024 * 5) {
        this.$message.warning('文件最大限制为 5MB')
        return false
      }
      let fileName = file.name

      let fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase()
      console.log(fileExtension)
      const whiteList = ['jpg', 'jpeg', 'gif', 'png']
      if (!whiteList.includes(fileExtension)) {
        this.$message.warning(`只能上传扩展名为 ${whiteList.join(' / ')} 的文件`)
        return false
      }
    },
    handleSuccess1(res, file, fileList) {
      console.log(fileList);
      if (res.code === 20000) {
        this.form.picJson = []
        for (let i = 0; i < fileList.length; i++) {
          const f = fileList[i];
          this.form.picJson.push(f.response.data.path)
        }
      } else {
        this.$message.error(res.msg)
      }
    },
    handleRemove1(file, fileList) {
      console.log(file, fileList);
      this.form.picJson = []
      for (let i = 0; i < fileList.length; i++) {
        const f = fileList[i];
        this.form.picJson.push(f.response.data)
      }
    },
    handleSuccess2(res, file, fileList) {
      console.log(fileList);
      if (res.code === 20000) {
        this.form.finishedPic = []
        for (let i = 0; i < fileList.length; i++) {
          const f = fileList[i];
          this.form.finishedPic.push(f.response.data.path)
        }
      } else {
        this.$message.error(res.msg)
      }
    },
    handleRemove2(file, fileList) {
      console.log(file, fileList);
      this.form.finishedPic = []
      for (let i = 0; i < fileList.length; i++) {
        const f = fileList[i];
        this.form.finishedPic.push(f.response.data)
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    submitHandle(){
      this.handleRecord = false
    },
    openPersonTrack(){
      this.personTrack = true
      this.$refs.mapSnapshota.geometryLayer.options.visible = true
    },
    closePersonTrack(){
      this.personTrack = false
      this.$refs.mapSnapshota.geometryLayer.options.visible = false
    },
    openMapSnapshot(row){
      this.mapSnapshot = true
      this.taskCheckPoints = row
      this.getTaskCheckPointOptions(row.id)
      this.setMapData()
      // 人员轨迹
      // this.mapData = [
      //   {
      //     buildId: "204209",
      //     floorNo: 1,
      //     geometries: [
      //       {
      //         type: 'LineString',
      //         points: this.form.points,
      //       },
      //     ],
      //   },
      // ]
    },
    openPatrolDetails(row){
      this.patrolDetails = true
      this.form = row
      this.getTaskCheckPointOptions(row.id)
    },
    openHandleEX(row){
      this.handleEX = true
      this.form = row
      this.getTaskCheckPointOptions(row.id)
    },
    openHandleRecord(it,index,row){
      this.handleRecord = true
      // console.log(it);
    },
    handleChangeTime(val, index) {
      this.query.startTime = val[0]
      this.query.endTime = val[1]
    },
    setMapData(){
      this.mapData = []
      for(let i = 0; i < this.taskCheckPoints.length; i++) {
        const p = this.taskCheckPoints[i];
        if ( p && p.checkpoint && p.checkpoint.label && p.checkpoint.label.extent && p.checkpoint.label.extent.points && p.checkpoint.label.extent.points.length >2) {
          console.log(1);
          this.mapData.push(
          {
            buildId: p.checkpoint.label.extent.buildId,
            floorNo: p.checkpoint.label.extent.floor,
            geometries: [
              {
                type: 'Polygon',
                points: p.checkpoint.label.extent.points,
                mark: i+1,
              },
            ]
          })
        } else {
          console.log(2);
          if (p && p.checkpoint && p.checkpoint.areaExtent) {
            for (let j = 0; j < p.checkpoint.areaExtent.length; j++) {
              const a = p.checkpoint.areaExtent[j];
              if (a.points && a.points.length>2) {
                this.mapData.push(
                {
                  buildId: a.buildId,
                  floorNo: a.floor,
                  geometries: [
                    {
                      type: 'Polygon',
                      points: a.points,
                      mark: i+1,
                    },
                  ]
                })
              }
            }
          }
        }
      }
      console.log(this.mapData);
    },
  }
}
</script>

<style lang="scss" scoped>
::v-deep .point-info{margin-left: 10px;}
::v-deep .point-info-normal {display: flex; margin-bottom: 6px;padding: 10px;width: 210px;border-radius: 10px;background-color: blue;color: white;}
::v-deep .point-info-abnormal {display: flex; margin-bottom: 6px;padding: 10px;width: 210px;border-radius: 10px;background-color:orange;color: white;}
::v-deep .point-info-loss {display: flex; margin-bottom: 6px;padding: 10px;width: 210px;border-radius: 10px;background-color: gray;color: white;}
::v-deep .point-info-order {width: 20px; height: 17px;margin: 2px 2px 0 0;background: #f2f2f2;text-align: center;border-radius: 2px;color:gray;}
::v-deep .check-point {padding: 10px;border-radius: 6px;background: white;}
::v-deep .check-point-title {display: flex;margin-left: 6px;margin-bottom: 10px;}
::v-deep .check-point-title div{width: 4px; height: 17px;background: blue;margin-right: 8px;}
::v-deep .check-point-title span{font-size: 16px;font-weight: bold;}
</style>
