<template>
  <basic-container>
    <avue-crud
      ref="crud"
      :data="data"
      id="avue-id"
      :option="option"
      :page.sync="listPage"
      :row-key="getRowKeys"
      :table-loading="loading"
      @row-del="rowDel"
      @row-save="rowSave"
      @search-reset="reset"
      @row-update="rowUpdate"
      @refresh-change="refresh"
      @search-change="searchChangeScope"
      @selection-change="selectionChange"
      @size-change="sizeChange"
      @current-change="currentChange"
    >
      <template slot="menuLeft">
        <el-form
          ref="searchForm"
          :model="searchForm"
          label-width="120px"
          style="border: 0px solid red; margin-bottom: 8px"
        >
          <el-row>
            <el-col :span="2.5">
              <el-select
                v-model="searchForm.status"
                class="search-select"
                placeholder="请选择启用状态"
              >
                <el-option label="启用" :value="0"></el-option>
                <el-option label="禁用" :value="1"></el-option>
              </el-select>
            </el-col>
            <el-col :span="2.5">
              <el-select
                v-model="searchForm.posId"
                class="search-select"
                placeholder="请选择点位位置"
              >
                <el-option v-for="item in optionData(posData)" :key="item.value" :label="item.label" :value="item.value" style="display:none"></el-option>
                <el-tree
                  ref="posTree"
                  :data="posData"  
                  :props="defaultProps"
                  style="margin-left: 20px"
                  node-key="id"
                  :current-node-key="currentNodeKey"
                  :expand-on-click-node="false"
                  :default-expand-all="true"
                  @node-click="handleNodeClick"></el-tree>
              </el-select>
            </el-col>
             <el-col :span="2.5">
              <el-input
                class="search-input"
                v-model="searchForm.code"
                placeholder="请输入点位编码"
              ></el-input>
            </el-col>
            <el-col :span="2.5">
              <el-input
                class="search-input"
                v-model="searchForm.name"
                placeholder="请输入点位名称"
              ></el-input>
            </el-col>
           
            <el-col style="margin-left: 18px" :span="3.5">
              <el-button class="search" @click="searchHandle(0)"
                >查询</el-button
              >
              <el-button class="reset" @click="searchHandle(1)">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <template slot-scope="{ type }" slot="menuForm">
        <el-button
          class="buttonOne"
          size="small"
          @click="$refs.crud.closeDialog()"
          >取 消</el-button
        >
        <el-button
          v-if="type == 'add'"
          class="buttonOne"
          size="small"
          @click="$refs.crud.rowSave()"
          >确 定</el-button
        >
        <el-button
          v-if="type == 'edit'"
          class="buttonOne"
          size="small"
          @click="$refs.crud.rowUpdate()"
          >修 改</el-button
        >
      </template>
      <template slot="menuRight">
        <el-button class="search" style="width: 120px" @click="handleAdd"
          >新建</el-button
        >
      </template>
      <template slot-scope="{ row }" slot="status">
        <span v-if="row.status === 0" style="color: #34c447">启用</span>
        <span v-if="row.status === 1" style="color: #e56926">禁用</span>
      </template>
      <template slot-scope="{ row }" slot="type">
        <span v-if="row.type === 1">类型1</span>
        <span v-if="row.type === 2">类型2</span>
      </template>
      <template slot-scope="{ row }" slot="device">
        <span>{{row.device | deviceName}}</span>
      </template>
      <template slot-scope="{ row, index }" slot="menu">
        <el-button @click="handleView(row, index)" class="look">查看</el-button>
        <el-button @click="handleEdit(row, index)" class="look">编辑</el-button>
        <el-button @click="handleDelete(row, index)" class="look">删除</el-button>
      </template>
    </avue-crud>
    <!-- 新增 弹窗 -->
    <el-dialog
      :before-close="handleClose"
      :cell-style="tableCellStyle"
      :visible.sync="showAddDialog"
      :title="title"
      width="70%"
      :append-to-body="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      custom-class="planAdd_form"
    >
      <div style="height: 550px; overflow-y: auto; overflow-x: hidden">
        <el-form :model="addForm" :rules="addRules" ref="addForm">
          <div class="add_all">
            <h1
              style="
                font-size: 16px;
                font-weight: 500;
                color: rgba(0, 0, 0, 0.85);
                line-height: 20px;
              "
            >
              <span
                style="
                  border-left: 4px solid blue;
                  margin-top: -20px;
                  height: 15px;
                  display: inline-block;
                  transform: translateY(2px);
                "
              >
              </span
              >&ensp;<b>基本信息</b>
            </h1>
          </div>
          <el-row :gutter="20">
            <el-col :span="6" style="width: 31%; margin-left: 1%">
              <el-form-item label="点位名称" prop="name">
                <el-input
                  style="width: 98%"
                  v-model="addForm.name"
                  placeholder="请输入点位名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="6" style="width: 31%; margin-left: 1%">
              <el-form-item label="RFID" prop="rfid">
                <el-input
                  style="width: 98%"
                  v-model="addForm.rfid"
                  placeholder="请输入RFID"
                ></el-input>
              </el-form-item>
            </el-col> -->
            <el-col :span="6" style="width: 31%; margin-left: 1%">
              <el-form-item label="巡检路线" prop="routeId">
                <el-select
                  v-el-select-lazyloading="lazyloading"
                  v-model="addForm.routeId"
                  placeholder="请选择巡检路线"
                  style="width: 98%"
                >
                  <el-option v-for="item in pathData" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" style="width: 31%; margin-left: 1%">
              <el-form-item label="启用状态" prop="status">
                <el-select
                  v-model="addForm.status"
                  placeholder="请选择启用状态"
                  style="width: 98%"
                >
                  <el-option label="启用" :value="0"></el-option>
                  <el-option label="禁用" :value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="6" style="width: 31%; margin-left: 1%">
              <el-form-item label="开始日期" prop="startTime">
                <el-date-picker
                  v-model="addForm.startTime"
                  type="date"
                  placeholder="请选择开始时间"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  style="width: 98%"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6" style="width: 31%; margin-left: 1%">
              <el-form-item label="截止日期" prop="endTime">
                <el-date-picker
                  v-model="addForm.endTime"
                  type="date"
                  placeholder="请选择开始时间"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  style="width: 98%"
                >
                </el-date-picker>
              </el-form-item>
            </el-col> -->
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6" style="width: 31%; margin-left: 1%">
              <el-form-item label="位置经度" prop="posLongitude">
                <el-input
                  style="width: 98%"
                  v-model="addForm.posLongitude"
                  placeholder="请输入位置经度"
                  @blur="getValueData"
                ></el-input>
              </el-form-item>
            </el-col>
             <el-col :span="6" style="width: 31%; margin-left: 1%">
              <el-form-item label="位置纬度" prop="posLatitude">
                <el-input
                  style="width: 98%"
                  v-model="addForm.posLatitude"
                  placeholder="请输入位置纬度"
                  @blur="getLatData"
                ></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="6" style="width: 31%; margin-left: 1%">
              <el-form-item label="计划状态" prop="status">
                <el-select
                  v-model="addForm.status"
                  placeholder="请选择计划状态"
                  style="width: 98%"
                >
                  <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="6" style="width: 31%; margin-left: 1%">
              <el-form-item label="点位位置" prop="posId">
                <el-select
                  v-model="addForm.posId"
                  placeholder="请选择点位位置"
                  style="width: 98%"
                >
                 <el-option v-for="item in optionData(posData)" :key="item.value" :label="item.label" :value="item.value" style="display:none"></el-option>
                  <el-tree
                    ref="posTree"
                    :data="posData"  
                    :props="defaultProps"
                    style="margin-left: 20px"
                    node-key="id"
                    :current-node-key="currentNodeKey"
                    :expand-on-click-node="false"
                    :default-expand-all="true"
                    @node-click="handleAddNodeClick"></el-tree>
                </el-select>
              </el-form-item>
            </el-col>
             <!-- <el-col :span="6" style="width: 31%; margin-left: 1%">
              <el-form-item label="巡检顺序" prop="order">
                <el-select
                  v-model="addForm.order"
                  placeholder="请选择巡检顺序"
                  style="width: 98%"
                >
                  <el-option label="随机" :value="1"></el-option>
                  <el-option label="顺序" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
          </el-row>
          <el-row :gutter="20">
             
            <el-col :span="6" style="width: 31%; margin-left: 1%">
              <el-form-item label="位置详情" prop="pos">
                <el-input
                  style="width: 98%"
                  v-model="addForm.pos"
                  placeholder="请输入位置详情"
                ></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="6" style="width: 31%; margin-left: 1%">
              <el-form-item label="预计用时(时)" prop="totalCost">
                <el-input-number style="width: 98%" controls-position="right" v-model="addForm.totalCost" :min="0" :precision="1" :step="1"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="6" style="width: 31%; margin-left: 1%">
              <el-form-item label="超时处理" prop="assetId">
                <el-select
                  v-model="addForm.assetId"
                  placeholder="请选择超时处理"
                  style="width: 98%"
                >
                  <el-option label="不处理" :value="0"></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
          </el-row>
          <el-row :gutter="20">
            <el-col style="width: 90%; margin-left: 1%">
              <el-form-item label="关联设备" prop="assetId">
                <el-select
                  v-el-select-lazyloading="lazyDevice"
                  v-model="addForm.assetId"
                  placeholder="请选择关联设备"
                  style="width: 98%"
                >
                  <el-option v-for="item in deviceData" :key="item.id"  :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col style="width: 90%; margin-left: 1%">
              <el-form-item label="巡检内容" prop="content">
                <el-input
                  style="width: 100%"
                  type="textarea"
                  v-model="addForm.content"
                  placeholder="请输入巡检内容"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col style="width: 90%; margin-left: 1%">
              <el-form-item label="备注" prop="notes">
                <el-input
                  style="width: 100%"
                  type="textarea"
                  v-model="addForm.notes"
                  placeholder="请输入备注"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col style="width: 90%; margin-left: 1%">
              <el-form-item label="图片" prop="notes">
                <el-upload
                  :headers="headers"
                  action="/api/blade-lims/inspectionPoint/uploadFile"
                  list-type="picture-card"
                  :on-success="handleSuccess"
                  :on-remove="handleRemove"
                  :limit="1"
                  :file-list="fileList">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="add_all">
          <h1
            style="
              font-size: 16px;
              font-weight: 500;
              color: rgba(0, 0, 0, 0.85);
              line-height: 20px;
            "
          >
            <span
              style="
                border-left: 4px solid blue;
                margin-top: -20px;
                height: 15px;
                display: inline-block;
                transform: translateY(2px);
              "
            >
            </span
            >&ensp;<b>巡检项</b>
          </h1>
        </div>
        <el-row :gutter="20">
          <el-table
            :data="addForm.orderList"
            :key="index"
            border
            style="
              margin-bottom: 30px;
              width: 92%;
              margin-left: 4%;
              border-radius: 4px;
            "
            header-cell-style="background-color:#fafafa;font-size:12px;color:black"
          >
            <el-table-column width="57px">
              <template slot="header">
                <el-button
                  circle
                  size="small"
                  type="primary"
                  icon="el-icon-plus"
                  @click="addSpecimen()"
                />
              </template>
              <template slot-scope="scope">
                <el-button
                  circle
                  size="small"
                  type="danger"
                  icon="el-icon-delete"
                  @click="removeSpecimen(scope.$index, scope.row)"
                />
              </template>
            </el-table-column>
            <el-table-column
              prop="code"
              label="编码"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="status"
              label="状态"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <div v-if="scope.row.status == 1">禁用</div>
                <div v-if="scope.row.status == 0">启用</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="名称"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="defValue"
              label="默认内容"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              fixed="right"
              align="left"
              header-align="left"
              label="操作"
              width="100px"
            >
              <template slot-scope="scope">
                <el-button
                  class="look"
                  size="mini"
                  @click="handleViewPro(scope.row)"
                  >查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAddDialog = false">取 消</el-button>
        <el-button @click="handleSubmit()">提 交</el-button>
      </span>
    </el-dialog>
    <!-- 选择巡检项 弹窗 -->
    <el-dialog
      :before-close="handleClose"
      :cell-style="tableCellStyle"
      :visible.sync="showProjectDialog"
      height="160vh"
      max-height="480"
      title="选择巡检项"
      width="60%"
      :append-to-body="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div style="height: 550px; overflow-y: auto; overflow-x: hidden">
        <!-- 查询区 -->
        <el-form
          ref="proForm"
          :model="proForm"
          label-width="120px"
          style="border: 0px solid red; margin-bottom: 8px"
        >
          <el-row>
            <el-col :span="2.5">
              <el-select
                v-model="proForm.status"
                class="search_select"
                placeholder="请选择状态"
                clearable
              >
                <el-option label="启用" :value="0"></el-option>
                <el-option label="禁用" :value="1"></el-option>
              </el-select>
            </el-col>
            <el-col :span="2.5">
              <el-input
                class="search-input"
                clearable
                v-model="proForm.name"
                placeholder="请输入名称"
              ></el-input>
            </el-col>
            <el-col :span="2.5">
              <el-input
                class="search-input"
                v-model="proForm.code"
                placeholder="请输入编码"
                clearable
              ></el-input>
            </el-col>
            <el-col style="margin-left: 18px" :span="3.5">
              <el-button class="search" @click="searchProject()">查询</el-button>
              <!-- <el-button class="reset" @click="searchHandle(1)">重置</el-button> -->
              <el-button class="search" @click="addProject">选择</el-button>
            </el-col>
          </el-row>
        </el-form>
        <!-- 表格区 -->
        <el-table
          ref="maintainTable"
          :data="tableData"
          :row-style="{ height: '66px' }"
          :header-cell-style="{
            background: '#f6f8fa',
            color: '#999999',
            fontWeight: '400',
            height: '66px',
          }"
          :row-key="getRowKey"
          tooltip-effect="dark"
          style="width: 100%; color: #333333"
          v-loading="loading"
          @selection-change="handleSelectionChange"
        >
          <el-table-column fixed type="selection" :reserve-selection="true" width="50"></el-table-column>
          <el-table-column
            align="left"
            prop="code"
            label="编码"
            show-overflow-tooltip
          />
          <el-table-column
            align="left"
            prop="name"
            label="名称"
            show-overflow-tooltip
          />
          <!-- applyStatus:0-暂存 1-提交 2-审批通过 3-审批驳回 4-完成 -->
          <el-table-column align="left" prop="status" width="120" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.status === 1" style="color: #e56926">禁用</span>
              <span v-if="scope.row.status === 0" style="color: #34c447">启用</span>
            </template>
          </el-table-column>
          <el-table-column
            align="left"
            prop="defValue"
            label="默认内容"
            show-overflow-tooltip
            width="170"
          />
           <el-table-column
            align="left"
            prop="checkDesc"
            label="描述"
            show-overflow-tooltip
            width="170"
          />
          <!-- <el-table-column
            fixed="right"
            align="left"
            header-align="left"
            label="操作"
            width="260px"
          >
            <template slot-scope="scope">
              <el-button
                class="look"
                size="mini"
                @click="handleViewPro(scope.row)"
                >查看</el-button
              >
            </template>
          </el-table-column> -->
        </el-table>
        <!-- 分页器 -->
        <el-row
          :gutter="20"
          id="avue-id"
          style="margin-top: 40px; margin-bottom: 20px"
        >
          <el-col :span="12" :offset="8"
            ><div class="grid-content bg-purple">
              <div class="block">
                <el-pagination
                  :current-page="page[0].current"
                  :page-sizes="[10, 20, 30, 50, 100]"
                  :page-size="10"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="this.total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
    <!-- 查看巡检项详情 弹框 -->
    <el-dialog
      :before-close="handleClose"
      :cell-style="tableCellStyle"
      :visible.sync="showDialog"
      height="160vh"
      max-height="480"
      title="查看巡检项详情"
      width="48%"
      :append-to-body="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <el-descriptions :column="3" border direction="vertical">
        <el-descriptions-item span="1" label="编码">{{
          projectForm.code
        }}</el-descriptions-item>
        <el-descriptions-item span="1" label="名称">{{
          projectForm.name
        }}</el-descriptions-item>
        <el-descriptions-item span="1" label="状态">
          <span v-if="projectForm.status === 1" style="color: #e56926">停用</span>
          <span v-if="projectForm.status === 0" style="color: #34c447">启用</span>
        </el-descriptions-item>
        <el-descriptions-item span="2" label="默认内容">{{
          projectForm.defValue
        }}</el-descriptions-item>
        <el-descriptions-item span="2" label="描述">{{
          projectForm.checkDesc
        }}</el-descriptions-item>
        <el-descriptions-item span="3" label="备注">{{
          projectForm.notes
        }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <!-- 查看巡检点详情 弹窗 -->
    <el-dialog
      :before-close="handleClose"
      :cell-style="tableCellStyle"
      :visible.sync="showPointDialog"
      title="查看巡检点位详情"
      width="70%"
      :append-to-body="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div style="height: 550px; overflow-y: auto; overflow-x: hidden">
        <div class="add_all">
          <h1
            style="
              font-size: 16px;
              font-weight: 500;
              color: rgba(0, 0, 0, 0.85);
              line-height: 20px;
            "
          >
            <span
              style="
                border-left: 4px solid blue;
                margin-top: -20px;
                height: 15px;
                display: inline-block;
                transform: translateY(2px);
              "
            >
            </span
            >&ensp;<b>基本信息</b>
          </h1>
        </div>
        <el-descriptions :column="3" border direction="vertical">
          <el-descriptions-item span="1" label="点位名称">{{
            pointsForm.name
          }}</el-descriptions-item>
          <!-- <el-descriptions-item span="1" label="RFID">
            {{pointsForm.rfid}}
          </el-descriptions-item> -->
          <el-descriptions-item span="1" label="巡检路线">{{
            pointsForm.routeName
          }}</el-descriptions-item>
          <el-descriptions-item span="1" label="点位编码">
            {{pointsForm.code}}
          </el-descriptions-item>
          <el-descriptions-item span="1" label="位置经度">
            {{pointsForm.posLongitude}}
          </el-descriptions-item>
          <el-descriptions-item span="1" label="点位位置">{{
            pointsForm.posHierarchy
          }}</el-descriptions-item>
          <el-descriptions-item span="1" label="启用状态">{{
            pointsForm.status == 0 ? '启用' : pointsForm.status == 1 ? '禁用' : ''
          }}</el-descriptions-item>
          <el-descriptions-item span="1" label="位置纬度">{{
            pointsForm.posLatitude
          }}</el-descriptions-item>
          <el-descriptions-item span="1" label="位置详情">{{
            pointsForm.pos
          }}</el-descriptions-item>
          <el-descriptions-item span="3" label="关联设备">{{
            pointsForm.assetName
          }}</el-descriptions-item>
          <el-descriptions-item span="3" label="巡检内容">{{
            pointsForm.content
          }}</el-descriptions-item>
          <el-descriptions-item span="3" label="备注">{{
            pointsForm.notes
          }}</el-descriptions-item>
          <el-descriptions-item span="3" label="图片">
            <img style="width:200px;height:200px;" :src="pointsForm.picture" alt="">
          </el-descriptions-item>
        </el-descriptions>
        <div class="add_all">
          <h1
            style="
              font-size: 16px;
              font-weight: 500;
              color: rgba(0, 0, 0, 0.85);
              line-height: 20px;
            "
          >
            <span
              style="
                border-left: 4px solid blue;
                margin-top: -20px;
                height: 15px;
                display: inline-block;
                transform: translateY(2px);
              "
            >
            </span
            >&ensp;<b>巡检项</b>
          </h1>
        </div>
        <el-row :gutter="20">
          <el-table
            :data="pointsForm.orderList"
            :key="index"
            border
            style="
              margin-bottom: 30px;
              width: 92%;
              margin-left: 4%;
              border-radius: 4px;
            "
            header-cell-style="background-color:#fafafa;font-size:12px;color:black"
          >
            <el-table-column
              prop="code"
              label="编码"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="status"
              label="状态"
              show-overflow-tooltip
            >
            <template slot-scope="scope">
              <div v-if="scope.row.status == 1">停用</div>
              <div v-if="scope.row.status == 0">启用</div>
            </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="名称"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="defValue"
              label="默认内容"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              fixed="right"
              align="left"
              header-align="left"
              label="操作"
              width="100px"
            >
              <template slot-scope="scope">
                <el-button
                  class="look"
                  size="mini"
                  @click="handleViewPro(scope.row)"
                  >查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </div>
    </el-dialog>
  </basic-container>
</template>

<script>
import {getPointList,savePoints,getPointDetail,deletePoint} from "@/api/inspection/setting/point"
import {getPositionTree} from "@/api/inspection/setting/position"
import {getPathList} from "@/api/inspection/setting/path"
import {listInstrument} from "@/api/lims/instrument";
import { getToken } from "@/util/auth";
import {getCheckList} from "@/api/inspection/setting/check"

let that;
export default {
  directives: {
    "el-select-lazyloading": {
      bind(el, binding) {
        let SELECT_DOM = el.querySelector(
          ".el-select-dropdown .el-select-dropdown__wrap"
        );
        SELECT_DOM.addEventListener("scroll", function () {
          let condition =
            this.scrollHeight - this.scrollTop <= this.clientHeight;
          if (condition) {
            binding.value();
          }
        });
      },
    },
  },
  data() {
    return {
      showDialog: false,
      showAddDialog: false,
      showProjectDialog: false,
      showPlanDialog: false,
      showPointDialog:false,
      pointsForm:{},
      proForm:{},
      addForm: {
        posId:null,
        orderList: [],
      },
      periodForm: {},
      planForm: {},
      searchForm: {
        name: null,
        status: null,
        posId: null,
        code: null,
      },
      projectForm: {},
      option: {
        searchMenuSpan: 8,
        selection: true,
        index: true,
        delBtn: false,
        editBtn: false,
        labelSuffix: " ", //控制标题后缀
        labelWidth: 120,
        gutter: 20, //设置input的大小
        expandLevel: 3,
        headerAlign: "left",
        menuWidth: 300,
        align: "left",
        menuPosition: "left",
        tree: true,
        menuBtn: false,
        submitBtn: true,
        emptyBtn: false,
        addBtn: false,
        searchBtn: false,
        columnBtn: false,
        refreshBtn: false,
        tip: false,
        border: false,
        saveBtn: false,
        cancelBtn: false,
        dialogWidth: 920,
        updateBtn: false,
        labelPosition: "top",
        dialogCustomClass: "custom",
        indexLabel: "序号",
        column: [
          {
            label: "点位编码",
            prop: "code",
            overHidden: true,
            align: "left",
            width:"200"
          },
          {
            label: "点位名称",
            prop: "name",
            overHidden: true,
            align: "left",
            width:"200"
          },
          {
            label: "启用状态",
            prop: "status",
            slot: true,
            align: "left",
            width:"200",
            overHidden: true,
          },
          {
            label: "巡检内容",
            prop: "content",
            align: "left",
            width:"200",
            overHidden: true,
          },
          // {
          //   overHidden: true,
          //   label: "RFID",
          //   prop: "rfid",
          //   align: "left",
          //   width:"200",
          // },
          {
            label: "点位位置",
            prop: "posHierarchy",
            overHidden: true,
            align: "left",
            width:"200"
          },
          {
            label: "关联设备",
            prop: "assetName",
            overHidden: true,
            align: "left",
            width:"200"
          },
          {
            label: "检查项数",
            overHidden: true,
            prop: "itemSize",
            align: "left",
            width:"120",
            slot:true
          },
          // {
          //   label: "检查项数(未启用)",
          //   overHidden: true,
          //   prop: "itemDisableCount",
          //   align: "left",
          // },
        ],
      },
      posData:[],
      defaultProps: {
                children: 'children',
                label: 'name',
            },
      data: [],
      isShowNum: "",
      tableData: [],
      page: [
        {
          size: 10,
          current: 1,
          total: 2,
        },
      ],
      listPage:{
        current: 1, //当前第几页
        total: 0, //总页数
        size: 10, //每一页加载多少数据
      },
      total: '',
      selectionList: [],
      deviceList:[],
      loading:false,
      typeList:[],
      addRules:{
        name:[{required:true,message:'请输入计划名称',trigger:'blur'}],
        routeId:[{required:true,message:'请选择巡检路线',trigger:'blur'}],
        status:[{required:true,message:'请选择启用状态',trigger:'blur'}],
      },
      groupList:[],
      methodList:[
        {label:'单次',value:'1'},{label:'周期性',value:'2'}
      ],
      cycleList:[
        {label:'年',value:'1'},{label:'月',value:'2'},{label:'间隔',value:'3'}
      ],
      title:'',
      statusList:[
        {label:'停用',value:0},
        {label:'运行中',value:1},
        {label:'结束',value:2},
        {label:'已过期',value:3},
      ],
      planTypeGroup:[
        {label:'类型一',value:1},
        {label:'类型二',value:2},
      ],
      pathData:[],
      pathCurrent:1,
      deviceCurrent:1,
      deviceData:[],
      // 图片
      headers: {
        "Blade-Auth": "",
      }, //认证
      imgList:[],
      fileList:[]
    };
  },
  beforeCreate() {
    that = this
  },
  created() {
    this.headers["Blade-Auth"] = getToken();
    getPositionTree({name:''}).then(res =>{
      this.posData = res.data.data
    })
    this.onLoad();
    this.lazyloading();
    this.lazyDevice()
  },
  filters: {
    deviceName: (data) => {
      for (const i in that.deviceList) {
        const element = that.deviceList[i];
        if (data == element.id) {
          return element.name;
        }
      }
    },
    routeName: (data) => {
      for (const i in that.pathData) {
        const element = that.pathData[i];
        if (data == element.id) {
          return element.name;
        }
      }
    },
    posName: (data) => {
      for (const i in that.optionData(that.posData)) {
        const element = that.optionData(that.posData)[i];
        if (data == element.value) {
          return element.label;
        }
      }
    },
    assetName: (data) => {
      for (const i in that.deviceData) {
        const element = that.deviceData[i];
        if (data == element.id) {
          return element.name;
        }
      }
    },
  },
  methods: {
    // 这操作是如果是小数0点多，那就不理它，但是如果是0+一个数字，那么就把这个0去掉
		getValueData() {
      if (this.addForm.posLongitude) {
        // 只能输入"数字"和"."
        this.addForm.posLongitude = this.addForm.posLongitude.replace(/[^\d.]/g, '');
        // 第一位字符不能为"."
        this.addForm.posLongitude = this.addForm.posLongitude.replace(/^\./g, '');
        // 只能输入一个小数点且只保留一个
        this.addForm.posLongitude = this.addForm.posLongitude.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
        // 只能输入两位小数
        this.addForm.posLongitude = this.addForm.posLongitude.replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3');
        // 如果第一位为"0"，第二位必须为"."，否则替换
        // this.addForm.posLongitude = this.addForm.posLongitude.replace(/^0(?!\.|$)(.*)/, '$1');
        let a = this.addForm.posLongitude.substring(0, 1);
        let b = this.addForm.posLongitude.substring(1, 2);
        let index = this.addForm.posLongitude.indexOf('.')
        console.log('aaa ====>',a, 'bbbbb==================>',b,'index ====>',this.addForm.posLongitude.indexOf('.'))
        if (a == '0' && b != '.') {
          this.addForm.posLongitude = this.addForm.posLongitude.slice(index - 1);
        }
      }
    },
    getLatData(){
      if (this.addForm.posLatitude) {
        // 只能输入"数字"和"."
        this.addForm.posLatitude = this.addForm.posLatitude.replace(/[^\d.]/g, '');
        // 第一位字符不能为"."
        this.addForm.posLatitude = this.addForm.posLatitude.replace(/^\./g, '');
        // 只能输入一个小数点且只保留一个
        this.addForm.posLatitude = this.addForm.posLatitude.replace('.', '$#$').replace(/\./g, '').replace('$#$', '.');
        // 只能输入两位小数
        this.addForm.posLatitude = this.addForm.posLatitude.replace(/^(\-)*(\d+)\.(\d).*$/, '$1$2.$3');
        // 如果第一位为"0"，第二位必须为"."，否则替换
        // this.addForm.posLatitude = this.addForm.posLatitude.replace(/^0(?!\.|$)(.*)/, '$1');
        let a = this.addForm.posLatitude.substring(0, 1);
        let b = this.addForm.posLatitude.substring(1, 2);
        let index = this.addForm.posLatitude.indexOf('.')
        console.log('aaa ====>',a, 'bbbbb==================>',b,'index ====>',this.addForm.posLatitude.indexOf('.'))
        if (a == '0' && b != '.') {
          this.addForm.posLatitude = this.addForm.posLatitude.slice(index - 1);
        }
      }
    },
    optionData(array,result = []){
      array.forEach(item =>{
        result.push({label:item.name,value:item.id})
        if(item.children && item.children.length != 0){
          this.optionData(item.children,result)
        }
      })
      return JSON.parse(JSON.stringify(result))
    },
    handleNodeClick(node){
      this.searchForm.posId = node.id
    },
    handleAddNodeClick(node){
      
      this.$set(this.addForm,'posId',node.id)
      console.log('add ===>',this.addForm.posId)
    },
    // 懒加载巡检路线
    async lazyloading() {
      const data = await getPathList({current:this.pathCurrent,size:10});
      if(data.data.data.records.length == 0){
        return
      }
      this.pathData.push(...data.data.data.records);
      this.pathCurrent++;
    },
    // 懒加载设备
    async lazyDevice(){
      const data = await listInstrument({current:this.deviceCurrent,size:10});
      if(data.data.data.records.length == 0){
        return
      }
      this.deviceData.push(...data.data.data.records);
      this.deviceCurrent++;
    },
    // 图片上传成功
    handleSuccess(response,file,fileList){
      this.imgList.push(response.data)
      this.fileList.push({url:response.data})
    },
    handleRemove(file, fileList){
      if(file.status == "success"){
        this.imgList = this.imgList.filter(item => item != file.url)
        this.fileList = this.imgList.filter(item => item.url != file.url)
      }
    },
    // 切换周期
    changePeriod(val) {
      this.isShowNum = val;
    },
    getRowKey(row) {
      return row.id;
    },
    // 查询 0搜索 1重置
    searchHandle(val) {
      if (val == 0) {
        this.onLoad();
      } else {
        this.searchForm = {
          status: null,
          name: null,
          code: null,
          posId: null,
        };
        this.$nextTick(() =>{
          this.$refs.posTree.setCurrentKey(null)
        })
        this.onLoad();
      }
    },
    // 查询检查项
    searchProject(){
      getCheckList({current:this.page[0].current,size:this.page[0].size,...this.proForm}).then(res =>{
        this.tableData = res.data.data.records
        this.total = res.data.data.total
        this.$nextTick(() =>{
          if(this.addForm.orderList.length !== 0){
              this.addForm.orderList.forEach(row => {
                this.tableData.map((item,index) =>{
                  if(item.id == row.id){
                    this.$refs.maintainTable.toggleRowSelection(this.tableData[index],true);
                  }
                })
              });

          }
        })
      })
    },
    // 按照条数查询保养项目
    handleSizeChange(val){
       this.page[0].size = val
       this.searchProject()
    },
    // 分页查询保养项目
    handleCurrentChange(val){
      this.page[0].current = val;
      this.searchProject()
    },
    // 停用计划
    handleStop(row,index){
      changePlanStatus({id:row.id,status:0}).then(res =>{
        if(res.data.code == 200){
          this.$message.success('停用成功')
          this.onLoad()
        }
      })
    },
    // 启用计划
    handleStart(row,index){
      changePlanStatus({id:row.id,status:1}).then(res =>{
        if(res.data.code == 200){
          this.$message.success('启用成功')
          this.onLoad()
        }
      })
    },
    // 添加保养项目弹窗
    addSpecimen() {
      this.showProjectDialog = true;
      this.page[0].current = 1
      this.searchProject()
      // getProList({current:1,size:200}).then(res =>{
      //   this.tableData = res.data.data.records
        
      // })
    },
    // 删除保养项目
    removeSpecimen(index, row){
       if (index > 0 || this.addForm.orderList.length > 1) {
        this.addForm.orderList.splice(index, 1);
      } else {
        this.$message({
          message: "至少要填写一行",
          type: "warning",
        });
      }
    },
    // 添加保养项目
    addProject() {
      if (this.selectionList.length == 0) {
        this.$message.warning("请至少选择一个保养项目");
      }else {
        let tmp = this.selectionList.find(item => item.status == 1)
        if(tmp){
          this.$message.warning("不可选择已经禁用的项目");
          return
        }
        this.addForm.orderList = this.selectionList
        this.showProjectDialog = false;
      }
    },
    // 保养项目多选
    handleSelectionChange(val) {
      this.selectionList = val;
    },
    // 查询数据
    onLoad() {
      this.loading = true
      getPointList({current:this.listPage.current,size:this.listPage.size,...this.searchForm}).then(res =>{
        this.data = res.data.data.records
        this.listPage.total = res.data.data.total
        this.loading = false
      })
    },
    // 查看
    handleView(row, index) {
      getPointDetail(row.id).then(res =>{
        console.log('res ============>',res)
        this.pointsForm = res.data.data;
        this.pointsForm.orderList = this.pointsForm.checkItemList
        this.showPointDialog = true;
      })
    },
    // 查看保养项目弹窗
    handleViewPro(row, index) {
      this.showDialog = true;
      this.projectForm = row;
    },
    // 打开新增弹窗
    handleAdd() {
      this.showAddDialog = true;
      this.$nextTick(() =>{
        this.addForm = {
          orderList:[]
        }
        this.title = '新建巡检点位'
        this.$refs.addForm.clearValidate()
      })
    },
    // 新增保存
    handleSubmit() {
      this.$refs['addForm'].validate((valid) => {
        if(valid){
          console.log("row ========>", this.addForm);
          if(this.addForm.orderList.length == 0){
              this.$message.warning('至少选择一条保养项目')
            }else{
              let arr = []
              if(this.addForm.orderList.length !== 0){
                this.addForm.orderList.map(item =>{
                  arr.push({id:item.id})
                })
              }
              this.addForm.checkItemList = arr
              this.addForm.picture = this.imgList.length > 0 ? this.imgList[0] : ''
              console.log('add ======>',this.addForm)
              savePoints(this.addForm).then(res =>{
                if(res.data.code == 200){
                  this.$message.success('提交成功')
                  this.showAddDialog = false
                  this.listPage.current = 1
                  this.onLoad()
                }
              })
            }
         
        }
      })
    },
    // 分页
    currentChange(currentPage) {
      this.listPage.current = currentPage;
      this.onLoad();
    },
    sizeChange(pageSize) {
      this.listPage.size = pageSize;
      this.onLoad();
    },
    // 打开编辑弹窗
    handleEdit(row, index) {
      console.log('row ====>',row)
      getPointDetail(row.id).then(res =>{
        console.log('res ============>',res)
        this.addForm = res.data.data;
        this.addForm.orderList = this.addForm.checkItemList
        this.fileList = [{url:this.addForm.picture}]
        this.title = '编辑巡检点位'
        this.showAddDialog = true;
        this.$nextTick(() =>{
          this.$refs.posTree.setCurrentKey(this.addForm.posId)
        })
      })

    },
    // 删除计划
    handleDelete(row,index){
      this.$confirm("确定删除此巡检点位吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deletePoint(row.id).then(res =>{
          if(res.data.code == 200){
            this.$message.success('删除成功')
            this.onLoad()
          }
        })
      })
    },
    // 创建任务
    handleCreatTask(row,index){
       this.$confirm("确定创建任务吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        createTask(row.id).then(res =>{
          if(res.data.code == 200){
            this.$message.success('任务创建成功')
            this.onLoad()
          }
        })
      })
    }
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom: 1px solid #f0f3f7;
}
::v-deep .el-table .el-table__cell.is-center {
  text-align: left;
}
::v-deep .avue-crud .el-table th {
  color: #999999;
  font-weight: 400;
  background: #f6f8fa;
  height: 66px;
}
::v-deep .avue-crud .el-table td {
  height: 66px;
  color: #333333;
}
::v-deep .el-table .el-table__cell.is-center {
  text-align: left;
}
::v-deep .el-table__row .el-button--default,
.el-table__row .el-button--text {
  background-color: #fff !important;
}
// 按钮样式
::v-deep .el-table__row .el-button--default,
.el-table__row .el-button--text {
  background-color: #fff !important;
  width: 70px;
  height: 36px;
  border-radius: 0;
  padding: 10px;
  border-color: #e4e7ec;
  color: #333333;
}
// /deep/ .avue-crud__pagination {
//   height: 30px;
//   padding-top: 30px;
//   padding-bottom: 30px;
// }
.search-input {
  width: 255px;
  height: 46px;
  margin-left: 10px;
  /deep/ .el-input__inner {
    width: 255px;
    height: 46px;
  }
}
.search {
  color: #fff;
  background-color: #1e60f5;
  border-color: #1e60f5;
  height: 46px;
  width: 100px;
  border-radius: 0px;
  // margin-left:18px!important;
  margin-right: 0 !important;
}
// 重置按钮
.reset {
  color: #999999;
  background-color: #fff;
  border-color: #e4e7ec;
  height: 46px;
  width: 100px;
  margin-left: 18px !important;
  border-radius: 0px;
}
.search-picker {
  width: 240px;
  height: 46px;
  border-radius: 0;
  margin-left: 10px;
}
.search-select {
  width: 240px !important;
  height: 46px;
  border-radius: 0;
  margin-left: 10px;
  /deep/ .el-input__inner {
    width: 240px;
    height: 46px;
  }
}
.search_select {
  width: 150px !important;
  height: 46px;
  border-radius: 0;
  margin-left: 10px;
  /deep/ .el-input__inner {
    width: 150px;
    height: 46px;
  }
}
// 新增取消确定
.buttonOne {
  color: #999999;
  background-color: #fff;
  border-color: #e4e7ec;
  height: 46px;
  width: 100px;
  border-radius: 0px;
  margin-left: 20px;
}
.buttonOne:hover {
  color: #fff;
  background-color: #1e60f5;
  border-color: #1e60f5;
  height: 46px;
  width: 100px;
  border-radius: 0px;
  margin-left: 20px;
}
// 分页
::v-deep .el-pagination .el-select .el-input .el-input__inner {
  height: 20px;
}

 
</style>
<style lang="scss">
     /*选择日期，年份的隐藏 */
  .picker-dateNoneYear {
    .el-date-picker__header {
      span:nth-child(3) { /*第三个标签是span的标签，把它隐藏*/
        display: none;
      }
      button:nth-child(1) {
        display: none;
      }
      button:nth-child(5) {
        display: none;  
      }
    }
  }
</style>
