<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-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.cycleType"
          filterable
          clearable
          size="small"
          placeholder="请选择巡检周期类型"
          class="filter-item"
          style="width: 170px"
          @change="crud.toQuery"
        >
         <el-option
            v-for="item of optionsObj.CycleType"
            :key="item.value"
            :label="item.label"
            :value="+item.value"
          />
        </el-select>
        <el-select
          v-model="query.enable"
          filterable
          clearable
          size="small"
          placeholder="请选择启用状态"
          class="filter-item"
          style="width: 160px"
          @change="crud.toQuery"
        >
         <el-option
            v-for="item in 2"
            :key="item"
            :label="item == 1 ? '启用' : '禁用'"
            :value="item == 1 ? 1 : 0"
          />
        </el-select>
        <rrOperation />
      </div>
      <crudOperation :permission="permission"></crudOperation>
    </div>
    <!-- 选择责任部门 -->
    <select-department title="选择部门" ref='selectDept' width="40%" @getData="selectDept"/>
    <!-- 选择检查人员 -->
    <select-view title="选择检查人员" dataM='form' ref="selectCheckUsers" dataType="person" @getData="selectCheckUsers"  checkFlag=2></select-view>
    <!-- 选择提醒人员 -->
    <select-view title="选择提醒人员" dataM='form' ref="selectRemindUsers" dataType="person" @getData="selectRemindUsers" checkFlag=2></select-view>
    <!-- 选择巡检点 -->
    <select-check-point title="选择巡检点" dataM='form' ref="selectCheckPoint" dataType="checkPoint" @getData="selectCheckPoint" checkFlag=2 width="50%"></select-check-point>
    <!-- 路线 -->
    <el-dialog
      title="巡检路线"
      :visible.sync="patrolPath"
    >
      <el-row>
        <template>
          <el-col :span="21">
            路线：
            <span v-for="(item,index) in form.checkpoints " :key="index">
              <span v-if="index > 0">—</span>
              {{index+1}}.{{item.name}}
            </span>
          </el-col>
          <el-col :span="3">
            <el-button type="primary" @click="setSort = true">设置排序</el-button>
          </el-col>
        </template>
      </el-row>
      <el-row>
        <relative-map
          v-if="crudCU"
          ref="relativeMap"
          v-model="mapData"
          :drawShow="false"
          :buildFloor="buildFloor"
          drawMode="Polygon"
          width="40%"/>
      </el-row>
      <div slot="footer" class="dialog-footer-batchMap">
        <el-button @click="patrolPath = false">关闭</el-button>
      </div>
    </el-dialog>
    <!-- 设置排序 -->
    <el-dialog
      title="设置排序"
      :visible.sync="setSort"
      width="500px"
    >
      <template>
        输入数字仅用作排序使用,代表巡检点的先后顺序
      </template>
        <el-table
          :data="form.checkpoints"
          border
          style="width: 100%; margin-top: 20px">
          <el-table-column
            prop="name"
            label="巡检点名称"
            align="center">
          </el-table-column>
          <el-table-column
            label="顺序"
            align="center">
            <template slot-scope="scope">
              <el-button type="primary" icon="el-icon-top" size="mini" @click="handleUp(scope.$index, scope.row)"  :disabled="scope.$index == 0"></el-button>
              <el-button type="primary" icon="el-icon-bottom" size="mini" @click="handleDown(scope.$index, scope.row)" :disabled="scope.$index == form.checkpoints.length-1"></el-button>
            </template>
          </el-table-column>
        </el-table>
      <div slot="footer" class="dialog-footer-batchMap">
        <el-button type="primary" @click="setSortO()">确定</el-button>
        <el-button @click="setSort = false">取消</el-button>
      </div>
    </el-dialog>
    <!--  -->
    <!--表单组件-->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :before-close="crud.cancelCU"
      :visible="crud.status.cu > 0"
      :title="crud.status.title"
      width="970px"
    >
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="110px">
        <div class="info-title">
          <div></div>
          <span>基本信息</span> 
        </div>
        <el-row>
          <el-col :span="8">
            <el-form-item label="巡检计划名称" prop="name">
              <el-input v-model="form.name" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="巡检类型" prop="type">
              <el-select
                v-model="form.type"
                clearable
                size="small"
                placeholder="请选择巡检类型"
                class="filter-item"
              >
                <el-option
                  v-for="item of typeList"
                  :key="item.value"
                  :label="item.label"
                  :value="+item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="责任部门" prop="departmentName">
              <el-input v-model="form.departmentName" :disabled="true" style="width:130px"/>
              <el-button type="primary" @click="openSelectDept">选择</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="周期类型" prop="cycleType">
              <el-select
                v-model="form.cycleType"
                clearable
                size="small"
                placeholder="请选择周期类型"
                class="filter-item"
              >
                <el-option
                  v-for="item of optionsObj.CycleType"
                  :key="item.value"
                  :label="item.label"
                  :value="+item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <div v-if="form.cycleType == '1'">
            <el-col :span="6">
                <el-form-item label="周期设置" prop="cycleDescription" >
                  <el-input v-if="form.cycleUnit <= 1" v-model="form.frequencyInterval" placeholder="最大24的数字"/>
                  <el-input v-if="form.cycleUnit == 2" v-model="form.frequencyInterval" placeholder="最大3位数"/>
                  <el-input v-if="form.cycleUnit == 3" v-model="form.frequencyInterval" placeholder="最大2位数"/>
                  <el-input v-if="form.cycleUnit == 4" v-model="form.frequencyInterval" placeholder="最大12的数字"/>
                </el-form-item>
            </el-col>
            <el-col :span="2">
                <el-form-item label="" prop="cycleUnit" label-width="10px">
                  <el-select
                    v-model="form.cycleUnit"
                    clearable
                    size="small"
                    placeholder=""
                    class="filter-item"
                    style="width: 80px"
                  >
                    <el-option
                      v-for="item of optionsObj.CycleUnit"
                      :key="item.value"
                      :label="item.label"
                      :value="+item.value"
                    />
                  </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="开始时间" prop="planStartTime">
                  <el-time-picker
                    v-if="form.cycleUnit <= 1"
                    v-model="form.planStartTime"
                    placeholder="任意时间点"
                    format="HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm"
                    style="width: 180px">
                  </el-time-picker>
                 <el-date-picker
                  v-if="form.cycleUnit == 2"
                  v-model="form.planStartTime"
                  type="date"
                  style="width: 180px">
                </el-date-picker>
                <el-select
                    v-if="form.cycleUnit == 3"
                    v-model="form.weekPeriod"
                    clearable
                    size="small"
                    placeholder=""
                    class="filter-item"
                    style="width: 180px"
                  >
                    <el-option
                      v-for="item of optionsObj.DayOfWeek"
                      :key="item.value"
                      :label="item.label"
                      :value="+item.value"
                    />
                </el-select>  
                <el-select
                    v-if="form.cycleUnit == 4"
                    v-model="form.monthPeriod"
                    clearable
                    size="small"
                    placeholder=""
                    class="filter-item"
                    style="width: 180px"
                  >
                    <el-option
                      v-for="item of optionsObj.DayOfMonth"
                      :key="item.value"
                      :label="item.label"
                      :value="+item.value"
                    />
                </el-select>  

                </el-form-item>
            </el-col>
          </div>
          <el-col :span="8">
            <div v-if="form.cycleType == '2'">
              <el-form-item label="巡检时间" prop="timeRange">
                <el-date-picker
                  v-model="timeRange"
                  type="datetimerange"
                  range-separator="~"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  @change="handleChangeTime($event)"
                  style="width:350px"
                  >
                </el-date-picker>
              </el-form-item>
            </div>
          </el-col>
          <div v-if="form.cycleType == '3'">
            <el-col :span="5">
              <el-form-item label="次数设置" prop="cycleSpecifyType">
                <el-select
                  v-model="form.cycleSpecifyType"
                  clearable
                  size="small"
                  placeholder=""
                  class="filter-item"
                >
                  <el-option
                    v-for="item of optionsObj.CycleSpecifyType"
                    :key="item.value"
                    :label="item.label"
                    :value="+item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="3">
              <el-form-item label="" prop="frequencyInterval" label-width="30px">
                <el-input v-model="form.frequencyInterval" @change="setTimeRangeArray(form.frequencyInterval)" maxlength="2" placeholder=""/>
              </el-form-item>
            </el-col>
            <el-col>
              <div v-if="form.cycleSpecifyType == '1'">
                <el-form-item label="巡检时间" prop="timeRange">
                  <span v-for="(item,index) in timeRange" :key="index">
                  <el-time-picker
                    is-range
                    v-model="timeRange[index]"
                    range-separator="-"
                    start-placeholder="开始时间"
                    end-placeholder="结束时间"
                    format="HH:mm"
                    value-format="HH:mm"
                    style="width: 200px ; margin: 0 8px 8px 0">
                  </el-time-picker>
                  </span>
                </el-form-item>
              </div>
              <div v-if="form.cycleSpecifyType == '2'">
                <el-form-item label="巡检时间" prop="timeRange">
                  <span v-for="(item,index) in timeRange" :key="index">
                    <el-select
                      v-model="timeRange[index]"
                      clearable
                      size="small"
                      placeholder=""
                      class="filter-item"
                      style="width: 80px ; margin: 0 8px 8px 0"
                    >
                      <el-option
                        v-for="item of optionsObj.DayOfWeek"
                        :key="item.value"
                        :label="item.label"
                        :value="+item.value"
                      />
                    </el-select>
                  </span>
                </el-form-item>
              </div>
              <div v-if="form.cycleSpecifyType == '3'">
                <el-form-item label="巡检时间" prop="timeRange">
                  <span v-for="(item,index) in timeRange" :key="index">
                    <el-select
                    v-model="timeRange[index]"
                    clearable
                    size="small"
                    placeholder=""
                    class="filter-item"
                    style="width: 80px ; margin: 0 8px 8px 0"
                  >
                    <el-option
                      v-for="item of optionsObj.DayOfMonth"
                      :key="item.value"
                      :label="item.label"
                      :value="+item.value"
                    />
                  </el-select>  
                  </span>
                </el-form-item>
              </div>
            </el-col>
          </div>
        </el-row>
        <el-row>
            <el-form-item label="检查人员" prop="patrolPersonNames">
              <div class="check-users" style="display:flex;overflow:hidden;zoom:1">
                <el-button type="primary" @click="openSelectCheckUsers" style="width:56px;height:32px">选择</el-button>
                <div style="margin:0 0 2px 6px;float:left;">
                  <el-tag
                    :key="tag"
                    v-for="tag in checkUsers"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(checkUsers,tag)"
                    style="margin:2px 0 0 4px;">
                    {{tag}}
                  </el-tag>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="异常提醒人员" prop="remindPersonIds">
              <div class="remind-users" style="display:flex;overflow:hidden;zoom:1">
                <el-button type="primary" @click="openSelectRemindUsers" style="width:56px;height:32px">选择</el-button>
                <div style="float:left;">
                  <el-tag
                    :key="index"
                    v-for="(tag,index) in remindUsers"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(remindUsers,tag)"
                    style="margin:2px 0 0 6px;">
                    {{tag}}
                  </el-tag>
                </div>
              </div>
            </el-form-item>
        </el-row>
        <div class="info-title">
          <div></div>
          <span>配置信息</span> 
        </div>
        <el-row>
          <el-col :span="8">
            <el-form-item label="任务启动状态" prop="enable">
              <el-switch
                v-model="form.enable"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="启用"
                inactive-text="禁用"
                :active-value="true"
                :inactive-value="false"
              >
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="按顺序检查" prop="orderCheck">
              <el-switch
                v-model="form.orderCheck"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="开启"
                inactive-text="关闭"
                :active-value="true"
                :inactive-value="false"
              >
              </el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="巡更模式" prop="checkInOnly">
              <el-switch
                v-model="form.checkInOnly"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-text="开启"
                inactive-text="关闭"
                :active-value="true"
                :inactive-value="false"
              >
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-button type="primary" @click="openSelectCheckPoint">新增巡检点</el-button>
          <el-button type="primary" @click="openPatrolPath">路线</el-button>
          <el-button type="primary" @click="print">ceshi</el-button>
          <el-table
            :data="form.checkpoints"
            border
            style="width: 100%; margin-top: 20px">
            <!-- :default-sort="{prop:'orderNo'}" -->
            <el-table-column
              type="index"
              label="序号"
              width="120"
              align="center">
            </el-table-column>
            <el-table-column
              prop="name"
              label="巡检点名称"
              align="center">
            </el-table-column>
            <el-table-column
              prop="areaName"
              label="所属区域"
              align="center">
            </el-table-column>
            <el-table-column
              prop="objectCount"
              label="设备数量"
              align="center">
            </el-table-column>
            <el-table-column
              prop="itemCount"
              label="检查项目数量"
              align="center">
            </el-table-column>
            <el-table-column
              prop="amount6"
              label="操作"
              align="center"
              min-width="90px">
              <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-top" size="mini" @click="handleUp(scope.$index, scope.row)"  :disabled="scope.$index == 0"></el-button>
                <el-button type="primary" icon="el-icon-bottom" size="mini" @click="handleDown(scope.$index, scope.row)" :disabled="scope.$index == form.checkpoints.length-1"></el-button>
                <el-button type="danger" icon="el-icon-minus" size="mini" @click="handleDelete(scope.$index, scope.row)" plain></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU"
          >确认</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 patrolPlanTableOptions"
        :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', 'patrolPlan:edit', 'patrolPlan:del'])"
        label="操作"
        width="230px"
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          <div style="display:flex;">
            <el-button v-permission="['admin', 'patrolPlan:edit']" type="primary" size="mini" v-if="!scope.row.enable" @click="changeStatus(scope.row)" style="margin-right:5px;">启动</el-button>
            <el-button v-permission="['admin', 'patrolPlan:edit']" type="warning" size="mini" v-if="scope.row.enable" @click="changeStatus(scope.row)" style="margin-right:5px;">关闭</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 crudPatrolPlan from '@/api/patrolManage/patrolPlan'
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 { patrolPlanTableOptions } from '../tableConfig'
import { getToken } from '@/utils/auth'
import { initData } from '@/api/data'
import RelativeMap from "@/components/RelativeMap";
import SelectView from "@/views/common/selectView";
import SelectCheckPoint from "@/views/common/selectCheckPoint";
import SelectDepartment from "@/views/common/selectDepartment";

const defaultForm = {
  //主要参数
  id: null,
  code: '',
  name: '测试00',
  type: '',
  departmentId:0,
  departmentName:'',
  
  cycleType:1,
  cycleTypeStr:'1',
  cycleDescription:'',
  cycleUnit:1,
  frequencyInterval:0,
  cycleSpecifyType: 1,
  //临时单次
  planStartTime:"",
  planEndTime:"",
  //指定次数
  timePeriod:[],
  weekPeriod:[],
  monthPeriod:[],
  //巡检人员
  patrolPersonIds:[],
  patrolPersonNames:[],
  //提醒人员
  remindPersonIds:[],
  remindPersonNames:[],
  //配置信息
  orderCheck:true,
  orderCheckStr:'',
  checkInOnly:false,
  checkInOnlyStr:'',
  enable:true,
  enableStr:'',
  status:0,
  //关联巡检点
  checkpointCount:0,
  checkpointIds:[],
  checkpoints:[],
}

export default {
  name: 'PatrolPlan',
  directives: { permission },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  components: { ...crudComps, DateRangePicker,RelativeMap,SelectView,SelectDepartment,SelectCheckPoint },
  cruds() {
    return CRUD({
      title: '巡检计划',
      url: 'patrol/plan/getList',
      listOrder: [],
      crudMethod: { ...crudPatrolPlan },
      optShow: { add: true, edit: true, del: true, reset: true },
    })
  },
  computed: {
    crudCU() {
      return this.crud.status.cu > 0
    },
    VUE_APP_BASE_API() {
      return process.env.VUE_APP_BASE_API
    },
  },
  data() {
    return {
      mapData: [],
      buildFloor:{},
      patrolPlanTableOptions,
      viewLoading: false,
      patrolPath: false,
      setSort:false,
      checkOpening:false,
      permission: {
        add: ['admin', 'patrolPlan : add'],
        edit: ['admin', 'patrolPlan : edit'],
        del: ['admin', 'patrolPlan : del'],
      },
      rules: {
        name: [{ required: true, message: '请输入巡检计划名称', trigger: 'blur' }],
        departmentId: [{ required: true, message: '请输入责任部门', trigger: 'blur' }],
        cycleType: [{ required: true, message: '请输入周期类型', trigger: 'blur' }],
        frequencyInterval: [{ required: true, message: '请输入周期设置', trigger: 'blur' }],
        checkpoints: [{ required: true, message: '请添加巡检点', trigger: 'blur' }],
      },
      optionsObj: {
        Build:[],
        CycleType: [],
        CycleUnit: [],
        CycleSpecifyType: [],
        DayOfMonth: [],
        DayOfWeek: [],
      },
      departmentOptions:[],
      token: getToken() ?? '',
      typeList:[
        {label: '类型1', value: 1},
        {label: '类型2', value: 2},
        {label: '类型3', value: 3},
      ],
      timeRange:[],
      checkUsers:[],
      remindUsers:[],
    }
  },
  created() {
    this.getOptions()
    this.getDeptOptions()
  },
  methods: {
    // // 提交前的验证
    [CRUD.HOOK.afterValidateCU]() {
      if (this.timeRange  && this.timeRange.length>0) {
        if (this.form.cycleType == '3') {
          if (this.form.cycleSpecifyType == '1') {
            this.form.timePeriod = []
            for (let i = 0; i < this.timeRange.length; i++) {
              this.form.timePeriod.push(
                {
                "startTime": this.timeRange[i][0],
                "endTime": this.timeRange[i][1],
              })  
              // console.log(1);
              // console.log(this.form.timePeriod);
             }
          }else if (this.form.cycleSpecifyType == '2'){
            this.form.weekPeriod = []
            // console.log(2);
            this.form.weekPeriod = this.timeRange
            // console.log(this.form.weekPeriod);
          }else if (this.form.cycleSpecifyType == '3'){
            this.form.monthPeriod = []
            // console.log(3);
            this.form.monthPeriod = this.timeRange
            // console.log(this.form.monthPeriod);
          }
          // console.log(this.timeRange);
          this.form.timeRange = []
        }
      }
      // if (this.form.checkpointIds.length<1) {
      //   this.$message({
      //     message: '请选择巡检点',
      //     type: 'warning'
      //   });
      // }
    },
    [CRUD.HOOK.beforeToAdd]() {
      //清空人员
      this.remindUsers = []
      this.checkUsers = []
      this.timeRange = []
      if (this.form.id) delete this.form.id
      this.mapData = []
    },
    [CRUD.HOOK.beforeToEdit]() {
      //人员标签
      this.remindUsers = []
      this.remindUsers = this.form.remindPersonNames
      this.checkUsers = []
      this.checkUsers = this.form.patrolPersonNames
      if (this.form.cycleType == 1) {
        
      }

      if (this.form.cycleType == 2) {
        this.timeRange = []
        console.log(this.form.planStartTime);
        console.log(this.form.planEndTime);
        this.timeRange.push(this.form.planStartTime)
        this.timeRange.push(this.form.planEndTime)
        console.log(this.timeRange);
        console.log(1);
        this.timePeriod = []
      }

      //按次时段
      if (this.form.cycleType == 3) {
        if (this.form.cycleSpecifyType == 1) {
            this.timeRange = []
            for (let i = 0; i < this.form.timePeriod.length; i++) {
              const times = this.form.timePeriod[i];
              // this.timeRange.push([times.startTime.slice(11,19),times.endTime.slice(11,19)])
              this.timeRange.push([times.startTime,times.endTime])
              console.log(this.timeRange);
            }
          }else if (this.form.cycleSpecifyType == 2){
            this.timeRange = []
            this.timeRange = this.form.weekPeriod
            console.log(this.form.weekPeriod);
          }else if (this.form.cycleSpecifyType == 3){
            this.timeRange = []
            this.timeRange = this.form.monthPeriod
          }
          console.log(this.timeRange);
      }

    },
    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)
        }
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex % 2 === 0) {
        if (columnIndex === 0) {
          return [1, 2];
        } else if (columnIndex === 1) {
          return [0, 0];
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },
    onExchange(index){
      let moment = this.tableData[index]  // 此处的tableData为自己的table表格绑定的data数组
      this.$set(this.tableData, index, moment)// 此处是将修改的那一行的数据重新赋值给table表格对应的那一行，触发热更新。
    },
    //时间赋值
    handleChangeTime(val, index) {
      this.form.planStartTime = val[0]
      this.form.planEndTime = val[1]
    },
    countItems(list){
      const num = 0
      for (let i = 0; i < list.length; i++) {
        const e = list[i];
        if (e && e.items) {
          num += e.items.length
        }
      }
      return num
    },
    print(){
      // this.form.timePeriod = []
      console.log(this.timeRange);
      
      // console.log(this.mapData)
      // console.log(this.form.timePeriod)
      // console.log(this.timeRange)
    },
    handleUp(index, row) {
      if (index > 0) {
        let upData = this.form.checkpoints[index - 1];
        this.form.checkpoints.splice(index - 1, 1);
        this.form.checkpoints.splice(index, 0, upData);
        let a = this.form.checkpoints[index-1].orderNo
        this.form.checkpoints[index].orderNo=a
        this.form.checkpoints[index-1].orderNo=upData.orderNo-1
      } else {
        this.$message({
          message: '已经是第一条，上移失败',
              type: 'warning'
        });
      }
    },
    handleDown(index, row) {
      if ((index + 1) == this.form.checkpoints.length) {
        this.$message({
              message: '已经是最后一条，下移失败',
              type: 'warning'
          });
      } else {
        let downData = this.form.checkpoints[index + 1];
          this.form.checkpoints.splice(index + 1, 1);
          this.form.checkpoints.splice(index, 0, downData);
          let a = this.form.checkpoints[index+1].orderNo
          this.form.checkpoints[index].orderNo=a;
          this.form.checkpoints[index+1].orderNo=downData.orderNo+1;
      }
    },
    handleDelete(index, row) {
      this.form.checkpoints.splice(index, 1)
    },
    setSortO(){
      this.setSort = false
      this.setMapData()
    },
    setMapData(){
      this.mapData = []
      for(let i = 0; i < this.form.checkpoints.length; i++) {
        const p = this.form.checkpoints[i];
        if ( p && p.label && p.label.extent && p.label.extent.points && p.label.extent.points.length >2) {
          console.log(1);
          this.mapData.push(
          {
            buildId: p.label.extent.buildId,
            floorNo: p.label.extent.floor,
            geometries: [
              {
                type: 'Polygon',
                points: p.label.extent.points,
                mark: i+1,
              },
            ]
          })
        } else {
          console.log(2);
          if (p && p.areaExtent) {
            for (let j = 0; j < p.areaExtent.length; j++) {
              const a = p.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);
    },
    // 改变状态
    changeStatus(row) {
      console.log(row);
      row.enable = !row.enable
      crudPatrolPlan
        .edit(row)
        .then((res) => {
          this.crud.toQuery()
          this.crud.notify('操作成功', CRUD.NOTIFICATION_TYPE.SUCCESS)
        })
        .catch((err) => {
          console.err(err)
        })
    },
    setTimeRangeArray(length){
      this.timeRange = []
      if(length ==null || length == 0 ){
        this.$message({
          message: '请输入正常的次数',
          type: 'warning'
        })
      }
      if (this.form.cycleSpecifyType == 1) {
        this.timeRange = new Array(parseInt(length)).fill(['00:00','08:00'])
      }else if (this.form.cycleSpecifyType == 2 && length < 8) {
        this.timeRange = new Array(parseInt(length)).fill([])
      }else if (this.form.cycleSpecifyType == 3 && length < 31) {
        this.timeRange = new Array(parseInt(length)).fill([])
      }else{
        this.$message({
          message: '请输入正常的次数',
          type: 'warning'
        })
      }
    },
    openSelectDept(){
      this.$refs.selectDept.openOrClose = true
    },
    openSelectCheckUsers(){
      this.$refs.selectCheckUsers.openOrClose = true
    },
    openSelectRemindUsers(){
      this.$refs.selectRemindUsers.openOrClose = true
    },
    openSelectCheckPoint(){
      this.$refs.selectCheckPoint.openOrClose = true
    },
    openPatrolPath(){
      this.patrolPath = true
      // console.log(this.form.checkpoints);
      this.setMapData()
      // console.log(this.mapData)
    },
    selectDept(list){
      console.log(list)
      this.form.departmentId = list[0].id
      this.form.departmentName= list[0].departmentName
    },
    selectCheckUsers(list){
      list.forEach(i=>{
        this.checkUsers.push(i.name)
      })
      console.log(list)
      if (list) {
        for (let i = 0; i < list.length; i++) {
          this.form.patrolPersonIds.push(list[i].id)
          this.form.patrolPersonNames.push(list[i].name)
        }
      }
    },
    selectRemindUsers(list){
      list.forEach(i=>{
        this.remindUsers.push(i.name)
      })
      console.log(list)
      if (list) {
        for (let i = 0; i < list.length; i++) {
          this.form.remindPersonIds.push(list[i].id)
          this.form.remindPersonNames.push(list[i].name)
        }
      }
    },
    selectCheckPoint(list){
      console.log(list)
      if (list) {
        for (let i = 0; i < list.length; i++) {
          const item = list[i];
          if (!this.inCheckPointList(item,this.form.checkpoints)) {
            this.form.checkpoints.push({
              id: item.id,
              code: item.code,
              name: item.name,
              departmentId: item.departmentId,
              departmentName: item.departmentName,
              areaId: item.areaId,
              areaName: item.areaName,
              checkInMethod: item.checkInMethod,
              checkInMethodStr:item.checkInMethodStr,
              labelId: item.labelId,
              labelName: item.labelName,
              oneKeyFinish: item.oneKeyFinish,
              objects: item.objects
            })
            // console.log(1);
            // console.log(item.objects);
            this.form.checkpointIds.push(item.id)
          }
        }
      }
    },
    handleClose(list,tag) {
      list.splice(list.indexOf(tag), 1);
    },
    inCheckPointList(item,list){
      for (let i = 0; i < list.length; i++) {
        const e = list[i];
        console.log(2);
        console.log(e);
        console.log(item);
        if(item && e && item.id == e.id){
          return true
        }
      }
      return false
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep .info-title {display: flex;margin-left: 6px;margin-bottom: 10px;}
::v-deep .info-title div{width: 4px; height: 15px;background: blue;margin-right: 8px;}
::v-deep .info-title span{font-size: 14px;font-weight: bold;}
</style>
