<template>
  <div class="fullHeight" v-if="!taskDetailBool">
    <div class="searchBox whiteBlock">
      <el-form
        :inline="true"
        size="medium"
        :model="searchForm"
        ref="searchForm"
      >
        <el-form-item label="巡检路线名称">
          <el-input
            placeholder="请输入"
            v-model="searchForm.routeName"
          ></el-input>
        </el-form-item>
        <el-button type="primary" size="medium" plain @click="getRouteList"
          >查询</el-button
        >
        <el-button type="warning" size="medium" plain @click="refresh"
          >刷新</el-button
        >
        <el-button type="primary" size="medium" @click="toAdd">新增</el-button>
      </el-form>
    </div>
    <div class="table_wrap whiteBlock">
      <vue-scroll class="tables">
        <el-table :data="tableData" @row-click="rowClickFn">
          <el-table-column
            label="序号"
            align="center"
            type="index"
          ></el-table-column>
          <el-table-column
            prop="routeName"
            label="路线名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="inspectUserNames"
            label="巡检人员"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="noticeUserNames"
            label="巡检通知人员"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="inspectUserNames"
            label="巡检周期"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.startTime }}-{{ scope.row.endTime }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="inspectUserNames"
            label="巡检频次"
            align="center"
          >
            <template v-slot="{ row }">
              <span
                >{{ row.frequencyNum
                }}{{
                  row.frequencyType == 1
                    ? "次"
                    : row.frequencyType == 2
                    ? "次/日"
                    : row.frequencyType == 3
                    ? "次/周"
                    : row.frequencyType == 4
                    ? "次/月"
                    : row.frequencyType == 5
                    ? "次/年"
                    : ""
                }}</span
              >
            </template>
          </el-table-column>

          <el-table-column
            :label="
              $t('message.personnelPosition.beaconManage.table.operation')
            "
            align="center"
            width="200"
          >
            <template slot-scope="scope">
              <div class="operation-style">
                <div class="operationText" @click.stop="deilBtn(scope.row)">
                  <i
                    class="el-icon-tickets"
                    style="color: #8dacfa; font-size: 16px; margin-right: 2px"
                  ></i>
                  <span>任务详情</span>
                </div>
                <div @click.stop="toDelete(scope.row)" class="operationText">
                  <img
                    src="@/assets/images/icon-delete.png"
                    width="15px"
                    height="15px"
                  />
                  <span>删除</span>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </vue-scroll>
      <el-pagination
        class="pagerBox"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNo"
        :page-sizes="$store.state.PAGESIZRS"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next"
        :total="Number(total)"
        background
      ></el-pagination>
    </div>
    <!-- 新增巡检点弹框 -->
    <el-dialog
      :modal-append-to-body="false"
      :title="cardDialogTitle"
      :visible.sync="cardDialog"
      width="60%"
      @close="close"
    >
      <div class="dialog-route-content">
        <el-form
          size="medium"
          :model="cardForm"
          ref="cardForm"
          :rules="cardFormRules"
          label-width="150px"
          style="width: 40%"
        >
          <el-form-item label="路线名称：" prop="routeName">
            <el-input
              :disabled="cardDialogTitle == '详情'"
              v-model="cardForm.routeName"
              :placeholder="isAdding ? '请输入' : ''"
              style="width: 100%"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="区域名称：" prop="qualityRegionId">
            <el-select
              style="width: 100%"
              :disabled="cardDialogTitle == '详情'"
              collapse-tags
              filterable
              v-model="cardForm.qualityRegionId"
              :placeholder="isAdding ? '请选择' : ''"
              @change="updateArea"
            >
              <el-option
                v-for="item in pointAreaList"
                :key="item.id"
                :label="item.regionName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="分包单位：" prop="enterpriseId">
            <el-select
              style="width: 100%"
              :disabled="cardDialogTitle == '详情'"
              collapse-tags
              filterable
              v-model="cardForm.enterpriseId"
              multiple
              :placeholder="isAdding ? '请选择' : ''"
              @change="changeDutyId"
            >
              <el-option
                v-for="item in enterpriseList"
                :key="item.id"
                :label="item.enterpriseName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="巡检人员：" prop="inspectUserIds">
            <el-select
              style="width: 100%"
              :disabled="cardDialogTitle == '详情'"
              collapse-tags
              filterable
              v-model="cardForm.inspectUserIds"
              multiple
              :placeholder="isAdding ? '请选择' : ''"
            >
              <el-option
                v-for="item in chargerList"
                :key="item.userId + 'inspectUserIds'"
                :label="item.realName"
                :value="item.userId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="通知人员：" prop="noticeUserIds">
            <el-select
              style="width: 100%"
              :disabled="cardDialogTitle == '详情'"
              collapse-tags
              filterable
              v-model="cardForm.noticeUserIds"
              multiple
              :placeholder="isAdding ? '请选择' : ''"
            >
              <el-option
                v-for="item in accountList"
                :key="item.userId + 'inspectUserIds'"
                :label="item.workerName"
                :value="item.userId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="计划检查时间：" prop="startTime">
            <!-- 开始日期 结束日期 -->
            <el-date-picker
              :disabled="cardDialogTitle == '详情'"
              style="width: 100%"
              v-model="checkDaterange"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              @change="changeDate"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="检查频次：" prop="frequencyNum">
            <el-input-number
              style="width: 47%"
              :disabled="true"
              v-model="cardForm.frequencyNum"
              :min="1"
              :controls="false"
            >
            </el-input-number>
            <!-- 检查频次  选择单位 -->
            <el-select
              :disabled="cardDialogTitle == '详情'"
              v-model="cardForm.frequencyType"
              :placeholder="isAdding ? '请输入' : ''"
              style="width: 47%; margin-left: 17px"
            >
              <el-option
                v-for="(item, index) in frequencyType"
                :key="index + 'frequencyType'"
                :label="item"
                :value="index + 1"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="route-manage">
          <div class="route-manage-title">
            <span>巡检路线</span>
          </div>
          <vue-scroll style="height: 300px; margin-top: 10px">
            <div class="route-manage-list">
              <el-form
                size="medium"
                :model="routeForm"
                ref="routeForm"
                :rules="routeFormRules"
                label-width="80px"
                style="width: 95%; margin: 0 auto"
              >
                <div
                  class="list-item"
                  v-for="(item, index) in routeForm.routeToPointList"
                  :key="index"
                >
                  <el-form-item
                    label="排序:"
                    :prop="`routeToPointList[${index}].sort`"
                    :rules="routeFormRules.sort"
                  >
                    <el-input
                      :disabled="cardDialogTitle == '详情'"
                      v-model="routeForm.routeToPointList[index].sort"
                      :placeholder="isAdding ? '请输入' : ''"
                      style="width: 100px"
                    ></el-input>
                  </el-form-item>
                  <el-form-item
                    label="巡检点:"
                    :prop="`routeToPointList[${index}].checkingPointId`"
                    :rules="routeFormRules.checkingPointId"
                  >
                    <el-select
                      :disabled="cardDialogTitle == '详情'"
                      collapse-tags
                      filterable
                      v-model="
                        routeForm.routeToPointList[index].checkingPointId
                      "
                      :placeholder="isAdding ? '请选择' : ''"
                      style="width: 120px"
                    >
                      <el-option
                        v-for="item in inspectPointList"
                        :key="item.id"
                        :label="item.checkingPointName"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <i
                    v-if="cardDialogTitle != '详情'"
                    class="el-icon-close"
                    style="
                      color: #ec1111;
                      position: absolute;
                      top: 0px;
                      right: 0px;
                      font-size: 20px;
                      cursor: pointer;
                    "
                    @click="deleteRouteItem(index)"
                  ></i>
                </div>
              </el-form>
            </div>
          </vue-scroll>
          <div
            class="add-route"
            @click="addInspectPoint"
            v-if="cardDialogTitle != '详情'"
          >
            <img src="@/assets/images/icon-add.png" alt="" srcset="" />
            <span>添加巡检点</span>
          </div>
        </div>
      </div>
      <div class="dialog-footer" v-if="cardDialogTitle != '详情'">
        <el-button
          class="cancleBtn"
          @click="closeEvent"
          icon="el-icon-circle-close"
          size="medium"
          >取消</el-button
        >
        <el-button
          v-if="isAdding != false"
          type="primary"
          icon="el-icon-circle-check"
          @click="addRouteFn"
          size="medium"
          >确定</el-button
        >
      </div>
    </el-dialog>
  </div>
  <div class="task-detail-main" v-else>
    <div class="searchBox whiteBlock">
      <span>巡检路线：{{ rowObj.routeName }}</span>
      <el-button
        type="warning"
        size="medium"
        plain
        @click="taskDetailBool = false"
        style="margin-left: 35px"
        >返回</el-button
      >
    </div>
    <div class="task-detail-part">
      <vue-scroll
        style="height: 100%; width: 370px"
        class="task-detail-option whiteBlock"
      >
        <div class="option-title">巡检任务</div>
        <ul>
          <li
            class="el-menu-item2"
            :class="checkedIndex == index ? 'checked_item' : ''"
            v-for="(item, index) in centerModuleList"
            @click="selectMenu(item, index)"
            :key="index"
          >
            <div class="option-list-item">
              <div :title="item.itemName">{{ item.itemName }}</div>
              <img
                @click="deleteTaskItem(item)"
                src="@/assets/images/icon-delete.png"
                width="15px"
                height="15px"
              />
            </div>
          </li>
        </ul>
      </vue-scroll>
      <vue-scroll class="task-detail-table whiteBlock">
        <el-table :data="recordTableData" style="height: 87%">
          <el-table-column
            label="序号"
            align="center"
            type="index"
          ></el-table-column>
          <el-table-column
            prop="checkingPointName"
            label="巡检点名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="regionName"
            label="所属区域"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="enterpriseName"
            label="责任单位"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="minInspectTime"
            label="最低巡检时长(分钟)"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="checkingPointUserName"
            label="巡检人员"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="noticeUserNames"
            label="巡检通知人员"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="position"
            label="巡检点位置"
            align="center"
          ></el-table-column>
          <el-table-column label="巡检结果" align="center">
            <template v-slot="{ row }">
              <span>{{
                row.status == 1
                  ? "正常"
                  : "异常"
              }}</span>
            </template>
          </el-table-column>

          <el-table-column
            :label="
              $t('message.personnelPosition.beaconManage.table.operation')
            "
            align="center"
            width="200"
          >
            <template slot-scope="scope">
              <div class="operation-style">
                <div class="operationText" @click="recordDetail(scope.row)">
                  <i
                    class="el-icon-tickets"
                    style="color: #8dacfa; font-size: 16px; margin-right: 2px"
                  ></i>
                  <span>详情</span>
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          class="pagerBox"
          @size-change="handleRecordSizeChange"
          @current-change="handleRecordCurrentChange"
          :current-page="recordTableParams.pageNo"
          :page-sizes="$store.state.PAGESIZRS"
          :page-size="recordTableParams.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="Number(recordTableParams.total)"
          background
        ></el-pagination>
      </vue-scroll>
    </div>

    <!-- 详情弹框-->
    <el-dialog
      :modal-append-to-body="false"
      title="巡检记录详情"
      :visible.sync="detailsShow"
      width="667px"
    >
      <div class="dialog_content">
        <el-form size="medium" ref="addEditForm" label-width="150px">
          <el-form-item label="巡检点名称">
            <el-input
              v-model="recordRowObj.checkingPointName"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="巡检点位置">
            <el-input v-model="recordRowObj.position" disabled></el-input>
          </el-form-item>
          <el-form-item label="最低巡检时长(分钟)">
            <el-input v-model="recordRowObj.minInspectTime" disabled></el-input>
          </el-form-item>
          <el-form-item label="巡检人员">
            <el-input
              v-model="recordRowObj.checkingPointUserName"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="巡检记录通知人员">
            <el-input
              v-model="recordRowObj.noticeUserNames"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-input v-model="recordRowObj.statusName" disabled>
            </el-input>
          </el-form-item>
          <el-form-item label="巡检时间">
            <el-input v-model="recordRowObj.createDate" disabled></el-input>
          </el-form-item>
          <el-form-item label="巡检详情">
            <el-input
              style="width: 320px"
              type="textarea"
              v-model="recordRowObj.alarmDetails"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="巡检图片">
            <img
              v-if="recordRowObj.alarmImage"
              style="width: 150px; height: 100px"
              :src="$store.state.FILEURL + recordRowObj.alarmImage[0].url"
              :preview="$store.state.FILEURL + recordRowObj.alarmImage[0].url"
              alt=""
            />
          </el-form-item>
          <!-- <div class="grid-content">
            <div class="label">异常巡检图片</div>
            <div class="value">
              <img
                v-if="imgSrc"
                style="width: 150px; height: 100px"
                :src="$store.state.FILEURL + imgSrc"
                alt=""
              />
            </div>
          </div> -->
          <el-form-item
            :label="item.title"
            v-for="(item, index) in formData"
            :key="index"
          >
            <el-input
              style="width: 320px"
              v-model="item.value"
              disabled
            ></el-input>
          </el-form-item>
          <!-- 动态表单 -->
          <!-- <div
            class="formBox"
            style="padding-left: 10%; padding-bottom: 5%; margin-top: -5%"
          >
            <div
              class="formInput flex"
              v-for="(item, index) in formData"
              :key="index"
            >
              <input class="fromsTit" v-model="item.title" disabled />
              <el-input
                style="width: 400px !important"
                disabled
                class="inputBox"
                v-model="item.value"
              ></el-input>
            </div>
          </div> -->
          <div class="dialog-footer">
            <el-button @click="detailsShow = false" type="primary" size="medium"
              >关闭
            </el-button>
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  routeCheckPageApi,
  routeCheckAddApi,
  routeCheckEditApi,
  routeCheckDeleteApi,
  routeCheckDetailApi,
  pointAreaApi,
  getPointListApi,
  routeTaskListApi,
  getCheckPointApi,
  routeTaskDeleteApi,
} from "@/assets/js/api/insect.js";
import {
  getProjectChilderSystemUserListApi,
  getEnterpriseInfoListApi,
} from "@/assets/js/api/configManage.js";
import dynamicForms from "./components/dynamicForms/index.vue";
// import QRCode from "qrcodejs2";
var mouseTool;
var mouseTool;
var objs = [];
export default {
  components: { dynamicForms },
  data() {
    return {
      recordTableParams: {
        total: 0,
        pageNo: 1,
        pageSize: 10,
      },
      routeForm: {
        routeToPointList: [],
      },
      routeFormRules: {
        sort: [
          {
            required: true,
            message: "请输入正整数数字",
            trigger: "blur",
            pattern: /^\d+$/
          },
        ],
        checkingPointId: [
          {
            required: true,
            message: "请选择",
            trigger: "change",
          },
        ],
      },
      detailsShow: false,
      checkedIndex: 0,
      taskDetailBool: false,
      chargerList: [],
      enterpriseList: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 1 * 24 * 3600 * 1000;
        },
      },
      searchForm: {
        routeName: "",
      },
      cardDialogTitle: "",
      tableData: [],
      recordTableData: [],
      total: 0,
      pageNo: 1,
      pageSize: 10,
      cardForm: {
        routeName: "",
        position: "",
        // qualityRegionId: "", // 区域ID
        enterpriseId: "", // 责任企业
        inspectUserIds: [], //检查人
        noticeUserIds: "", //通知人
        startTime: "",
        endTime: "",
        frequencyType: 1,
        frequencyNum: 1,
        standArea: 100, //范围
        latitude: "", //纬度
        longitude: "", //经度
        addr: "", //地图区域
      },
      qrCode: "",
      cardDialog: false,
      projectSn: "",
      centerModuleList: [],
      cardFormRules: {
        routeName: [
          { required: true, message: "请输入巡检点名称", trigger: "blur" },
        ],
        position: [
          { required: true, message: "请输入巡检位置", trigger: "blur" },
        ],
        // qualityRegionId: [
        //   { required: true, message: "请选择", trigger: "change" },
        // ],
        enterpriseId: [
          { required: true, message: "请选择", trigger: "change" },
        ],
        inspectUserIds: [
          { required: true, message: "请输入检查人员", trigger: "change" },
        ],
        noticeUserIds: [
          { required: true, message: "请输入通知人员", trigger: "change" },
        ],
        startTime: [
          { required: true, message: "请选择检查日期", trigger: "change" },
        ],
        frequencyNum: [
          { required: true, message: "请输入巡检频次", trigger: "blur" },
        ],
        standArea: [{ required: true, message: "请选择", trigger: "blur" }],
        addr: [{ required: true, message: "请选择区域", trigger: "change" }],
      },
      checkDaterange: [],
      frequencyType: ["次", "次/日", "次/周", "次/月", "次/年"],
      mapOperateType: 1,
      accountList: [], //检查人员列表
      options: [30, 50, 100, 200, 300],
      map: null,
      locationList: [],
      formData: [], // 存储动态表单数据
      isAdding: true,
      pointAreaList: [],
      areaData: {},
      inspectPointList: [],
      rowObj: {},
      recordRowObj: {},
    };
  },
  mounted() {
    this.projectSn = this.$store.state.projectSn;
    this.getRouteList();
    this.getPointAreaFn();
    this.getPointList();
    this.getUpdateUnitListFn();
  },
  methods: {
    // 获取分包单位列表
    getUpdateUnitListFn() {
      getEnterpriseInfoListApi({ projectSn: this.projectSn }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.enterpriseList = res.result;
        }
      });
    },
    recordDetail(row) {
      this.recordRowObj = {...row};
      this.recordRowObj.statusName = row.status == 1?'正常':'异常'
      if(row.alarmImage){
        this.recordRowObj.alarmImage = JSON.parse(row.alarmImage)
      }
      this.detailsShow = true;
    },
    getRouteTaskRecordFn(item) {
      let requestData = {
        id: this.rowObj.id,
        xzCheckingRouteTaskId: item.id,
      };
      getCheckPointApi(requestData).then((res) => {
        console.log("res111111111", res);
        this.recordTableData = res.result.records;
        this.recordTableParams.total = Number(res.result.total);
      });
    },
    deleteRouteItem(index) {
      this.routeForm.routeToPointList.splice(index, 1);
    },
    // 查询任务详情左侧任务列表
    getTaskListFn() {
      let data = {
        pageNo: 10,
        pageSize: -1,
        projectSn: this.projectSn,
        xzCheckingRouteId: this.rowObj.id,
      };
      routeTaskListApi(data).then((res) => {
        console.log("----巡检路线任务列表", res);
        this.centerModuleList = res.result;
        if (this.centerModuleList.length) {
          this.checkedIndex = 0;
          this.getRouteTaskRecordFn(this.centerModuleList[0]);
        }
      });
    },
    // 查询巡检点
    getPointList() {
      let data = {
        pageNo: 10,
        pageSize: -1,
        projectSn: this.projectSn,
      };
      getPointListApi(data).then((res) => {
        console.log("----巡检点列表", res);
        this.inspectPointList = res.result.records;
      });
    },
    addInspectPoint() {
      this.routeForm.routeToPointList.push({
        sort: null,
        checkingPointId: null,
      });
    },
    rowClickFn(obj) {
      console.log(obj, 777888);
      routeCheckDetailApi({ id: obj.id }).then((res) => {
        console.log(res, "巡检路线详情");
        let responseData = res.result;
        if (responseData) {
          this.isAdding = false;
          this.cardDialogTitle = "详情";
          this.cardDialog = true;
          this.cardForm = { ...responseData };
          this.routeForm.routeToPointList = responseData.routeToPointList;
          console.log(this.cardForm, 888666);
          if (responseData.startTime && responseData.endTime) {
            this.checkDaterange = [
              new Date(responseData.startTime),
              new Date(responseData.endTime),
            ];
          } else {
            this.checkDaterange = [];
          }
          // this.formData.splice(0); // 清空数组
          // JSON.parse(responseData.template).forEach((item) => {
          //   this.formData.push(item); // 添加新的数据到数组中
          // });
          if (this.cardForm.inspectUserIds) {
            this.cardForm.inspectUserIds =
              this.cardForm.inspectUserIds.split(",");
          }
          if (this.cardForm.enterpriseId) {
            this.cardForm.enterpriseId = this.cardForm.enterpriseId.split(",");
          }
          if (this.cardForm.noticeUserIds) {
            this.cardForm.noticeUserIds =
              this.cardForm.noticeUserIds.split(",");
          }
          // let findItem = this.pointAreaList.find((item) => {
          //   return item.id == this.cardForm.qualityRegionId;
          // });
          // if (findItem) {
          //   this.areaData = findItem;
          //   this.chargerList = findItem.systemUsers;
          //   this.enterpriseList = findItem.enterpriseInfos;
          // }
          this.$nextTick(() => {
            this.$refs.cardForm.clearValidate();
            this.$refs.routeForm.clearValidate();
          });
          this.getAccountList();
          this.getUpdatePersonListFn();
        }
      });
    },
    //切换 单位类型
    selectMenu(value, index) {
      console.log("切换菜单", value);
      this.checkedIndex = index;
      this.getRouteTaskRecordFn(value);
    },
    //切换 整改人
    changeDutyId(value) {
      console.log(value);
      console.log(this.cardForm, 666777);
      console.log(this.chargerList, 888999);
      if (this.cardForm.enterpriseId.length > 0) {
        let shouldHavePersonIdList = this.chargerList.map((item) => {
          if (this.cardForm.enterpriseId.includes(item.enterpriseId)) {
            return item.userId;
          }
        });
        const newArr = this.cardForm.inspectUserIds.filter((item) =>
          shouldHavePersonIdList.includes(item)
        );
        this.cardForm.inspectUserIds = newArr;
      } else {
        this.form.inspectUserIds = [];
      }
      this.getUpdatePersonListFn();
    },
    // 获取整改人列表
    getUpdatePersonListFn() {
      let data = {
        projectSn: this.projectSn,
        enterpriseId: this.cardForm.enterpriseId ? this.cardForm.enterpriseId.join(",") : "",
      };
      getProjectChilderSystemUserListApi(data).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.chargerList = res.result;
        }
      });
    },
    // changeDutyId(value) {
    //   console.log(this.cardForm, 777888);
    //   if (this.cardForm.enterpriseId.length > 0) {
    //     this.chargerList = this.areaData.systemUsers.filter((item) => {
    //       return this.cardForm.enterpriseId.includes(item.enterpriseId);
    //     });
    //     let shouldHavePersonIdList = this.chargerList.map((item) => {
    //       if (this.cardForm.enterpriseId.includes(item.enterpriseId)) {
    //         return item.userId;
    //       }
    //     });
    //     if (this.cardForm.inspectUserIds) {
    //       const newArr = this.cardForm.inspectUserIds.filter((item) =>
    //         shouldHavePersonIdList.includes(item)
    //       );
    //       this.cardForm.inspectUserIds = newArr;
    //     }
    //   } else {
    //     this.chargerList = this.areaData.systemUsers;
    //     this.cardForm.inspectUserIds = "";
    //   }
    // },
    updateArea() {
      let findItem = this.pointAreaList.find((item) => {
        return item.id == this.cardForm.qualityRegionId;
      });
      this.cardForm.enterpriseId = "";
      this.cardForm.inspectUserIds = [];
      console.log(findItem, 777888);
      if (findItem) {
        this.areaData = findItem;
        this.chargerList = findItem.systemUsers;
        this.enterpriseList = findItem.enterpriseInfos;
      }
    },
    // 获取区域列表
    getPointAreaFn() {
      let requestData = {
        projectSn: this.projectSn,
      };
      pointAreaApi(requestData).then((res) => {
        console.log(res);
        this.pointAreaList = res.result;
      });
    },
    //查看详情
    deilBtn(row) {
      console.log(row, 666777);
      this.rowObj = row;
      this.getTaskListFn();
      this.taskDetailBool = true;
    },
    //关键字查询查询
    select(e) {
      console.log("select", e);
      this.placeSearch.setCity(e.poi.adcode);
      this.placeSearch.search(e.poi.name);
    },
    //清空地图
    clearFn() {
      this.map.clearMap();
    },
    //添加点标记
    addMarker() {
      // 创建一个 Icon
      var startIcon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(25, 34),
        // 图标的取图地址
        image:
          "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
        // 图标所用图片大小
        imageSize: new AMap.Size(25, 34),
        // 图标取图偏移量
        // imageOffset: new AMap.Pixel(-9, -3)
      });
      var marker = new AMap.Marker({
        icon: startIcon,
        position: [
          this.locationList[0].longitude,
          this.locationList[0].latitude,
        ],
        size: new AMap.Size(25, 34),
        // offset: new AMap.Pixel(-13, -30)
      });
      marker.setMap(this.map);
    },
    exitEditFn() {
      mouseTool.close();
    },
    //画圆
    drawCircle() {
      if (this.locationList.length == 0) {
        return;
      }
      this.clearFn();
      this.addMarker();
      var circle = new AMap.Circle({
        center: [this.locationList[0].longitude, this.locationList[0].latitude],
        radius: this.cardForm.standArea, //半径
        borderWeight: 2,
        strokeColor: "#6caffc",
        strokeOpacity: 1,
        strokeWeight: 2,
        fillOpacity: 0.6,
        strokeStyle: "solid",
        // strokeDasharray: [10, 10],
        // 线样式还支持 'dashed'
        fillColor: "#6caffc",
        zIndex: 50,
      });

      circle.setMap(this.map);
      // 缩放地图到合适的视野级别
      this.map.setFitView([circle]);
    },
    //绘制矩形
    drawRectangle() {
      this.clearFn();
      mouseTool.rectangle({
        strokeColor: "#6caffc",
        // strokeOpacity: 0.5,
        strokeWeight: 2,
        fillColor: "#6caffc",
        fillOpacity: 0.6,
        // strokeStyle还支持 solid
        strokeStyle: "solid",
        // strokeDasharray: [30,10],
      });
    },
    drawPolygon() {
      this.clearFn();
      mouseTool.polygon({
        strokeColor: "#6caffc",
        strokeOpacity: 1,
        strokeWeight: 2,
        // strokeOpacity: 0.2,
        fillColor: "#6caffc",
        fillOpacity: 0.6,
        // 线样式还支持 'dashed'
        strokeStyle: "solid",
        // strokeStyle是dashed时有效
        // strokeDasharray: [30,10],
      });
    },
    ////-------------------地图分割线
    //日期
    changeDate() {
      if (this.checkDaterange) {
        this.cardForm.startTime = this.checkDaterange[0];
        this.cardForm.endTime = this.checkDaterange[1];
      } else {
        this.cardForm.startTime = "";
        this.cardForm.endTime = "";
      }
    },
    handleRecordSizeChange(val) {
      this.recordTableParams.pageSize = val;
      this.getRouteTaskRecordFn();
    },
    //查看页
    handleRecordCurrentChange(val) {
      this.recordTableParams.pageNo = val;
      this.getRouteTaskRecordFn();
    },
    //查看条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.getRouteList();
    },
    //查看页
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getRouteList();
    },
    // 查询
    getRouteList() {
      let data = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        projectSn: this.projectSn,
        routeName: this.searchForm.routeName
      };
      routeCheckPageApi(data).then((res) => {
        console.log("----巡检点列表", res);
        this.tableData = res.result.records;
        this.total = res.result.total;
        this.inspectUserIdsList = res.result.records;
        this.noticeUserIdsList = res.result.records;
      });
    },
    // 刷新
    toRefresh() {
      this.getRouteList();
    },
    editBtn(obj) {
      console.log("编辑的信息", obj);
      this.cardDialog = true;
      this.isAdding = true;
      this.cardForm = JSON.parse(JSON.stringify(obj));
      this.cardDialogTitle = "编辑巡检点";
      // this.checkDaterange[0] = this.cardForm.startTime
      // this.checkDaterange[1] = this.cardForm.endTime
      if (obj.startTime && obj.endTime) {
        this.checkDaterange = [new Date(obj.startTime), new Date(obj.endTime)];
      } else {
        this.checkDaterange = [];
      }
      this.formData.splice(0); // 清空数组
      JSON.parse(obj.template).forEach((item) => {
        this.formData.push(item); // 添加新的数据到数组中
      });
      if (this.cardForm.inspectUserIds) {
        this.cardForm.inspectUserIds = this.cardForm.inspectUserIds.split(",");
      }
      if (this.cardForm.enterpriseId) {
        this.cardForm.enterpriseId = this.cardForm.enterpriseId.split(",");
      }
      if (this.cardForm.noticeUserIds) {
        this.cardForm.noticeUserIds = this.cardForm.noticeUserIds.split(",");
      }
      // let findItem = this.pointAreaList.find((item) => {
      //   return item.id == this.cardForm.qualityRegionId;
      // });
      // if (findItem) {
      //   this.areaData = findItem;
      //   this.chargerList = findItem.systemUsers;
      //   this.enterpriseList = findItem.enterpriseInfos;
      // }
      this.getAccountList();
    },
    // 新增
    toAdd() {
      this.cardDialog = true;
      this.isAdding = true;
      this.formData.splice(0);
      this.formData.push({
        title: "表单标题",
        name: "",
        isRequired: true,
        value: "",
      });
      this.checkDaterange = [];
      this.cardDialogTitle = "新建巡检路线";
      this.areaData = {};
      this.chargerList = [];
      // this.enterpriseList = [];
      this.resetForm();
      this.$nextTick(() => {
        this.$refs.cardForm.clearValidate();
      });
      this.getAccountList();
    },
    // 删除
    toDelete(val) {
      console.log("删除", val);
      this.$confirm("此操作将永久删除该巡检点, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = {
            id: val.id,
          };
          routeCheckDeleteApi(data).then((res) => {
            if (res.success) {
              this.getRouteList();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              this.$message({
                type: "error",
                message: res.message,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    deleteTaskItem(val) {
      console.log("删除", val);
      this.$confirm("请确认是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = {
            id: val.id,
          };
          routeTaskDeleteApi(data).then((res) => {
            if (res.success) {
              this.getTaskListFn();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              this.$message({
                type: "error",
                message: res.message,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 获取当前时间 返回YYYY-MM-DD HH:mm:ss
    selectNowDate() {
      var date = new Date(),
        year = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate(),
        hours = date.getHours(), //获取当前小时数(0-23)
        minutes = date.getMinutes(), //获取当前分钟数(0-59)
        seconds = date.getSeconds();
      month >= 1 && month <= 9 ? (month = "0" + month) : "";
      day >= 0 && day <= 9 ? (day = "0" + day) : "";
      hours >= 0 && hours <= 9 ? (hours = "0" + hours) : "";
      minutes >= 0 && minutes <= 9 ? (minutes = "0" + minutes) : "";
      seconds >= 0 && seconds <= 9 ? (seconds = "0" + seconds) : "";
      var timer =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds;
      return timer;
    },
    // 添加路线
    addRouteFn() {
      this.$refs.cardForm.validate((valid) => {
        if (valid) {
          if (!this.routeForm.routeToPointList.length) {
            this.$message.error("请添加巡检路线");
            return;
          }
          this.$refs.routeForm.validate((valid) => {
            if (valid) {
              let data = { ...this.cardForm, ...this.routeForm };
              data.projectSn = this.$store.state.projectSn;
              data.createUserId = this.$store.state.userInfo.userId;
              data.createUserName = this.$store.state.userInfo.account;
              data.inspectUserIds = data.inspectUserIds.join(",");
              data.enterpriseId = data.enterpriseId.join(",");
              data.noticeUserIds = data.noticeUserIds.join(",");
              if (this.cardDialogTitle == "新建巡检路线") {
                routeCheckAddApi(data).then((res) => {
                  console.log("新增", res);
                  if (res.code == 200) {
                    this.$message.success("添加成功！");
                    this.getRouteList();
                  }
                });
              } else if (this.cardDialogTitle == "编辑巡检点") {
                routeCheckEditApi(data).then((res) => {
                  if (res.success) {
                    this.$message.success(res.message);
                    this.getRouteList();
                  }
                });
              }
              this.cardDialog = false;
            }
          });
        }
      });
    },

    close() {
      // this.cardForm = {}
      // this.$nextTick(() => {
      //   this.$refs.cardForm.clearValidate()
      // })
      this.closeEvent();
    },
    resetForm() {
      this.cardForm = {
        routeName: "",
        position: "",
        // qualityRegionId: "", // 区域ID
        enterpriseId: "", // 责任企业
        inspectUserIds: [], //检查人
        noticeUserIds: "", //通知人
        startTime: "",
        endTime: "",
        frequencyType: 1,
        frequencyNum: 1,
        standArea: 100, //范围
        latitude: "", //纬度
        longitude: "", //经度
        addr: "", //地图区域
      };
      this.routeForm.routeToPointList = [];
    },
    //检查人员下拉列表
    getAccountList() {
      getProjectChilderSystemUserListApi({
        projectSn: this.$store.state.projectSn,
      }).then((result) => {
        this.accountList = result.result;
        console.log("检查人员列表", this.accountList);
      });
    },
    //新增弹框取消
    closeEvent() {
      this.cardDialog = false;
      this.$refs.cardForm.resetFields();
      this.$refs.cardForm.clearValidate();
      this.cardForm.startTime = "";
      this.cardForm.endTime = "";
      console.log(this.cardForm, 777888);
    },
    refresh() {
      this.searchForm = {};
      this.getRouteList();
    },
  },
};
</script>

<style lang="less" scoped>
.download {
  text-decoration: none;
}
.smallInput {
  display: inline-block;
  width: 148px !important;
  /deep/.el-input__inner {
    width: 148px;
  }
  /deep/.el-input {
    width: 100% !important;
  }
}
::v-deep .el-input__inner {
  height: 30px !important;
}

::v-deep .el-range-editor--medium .el-range__icon,
.el-range-editor--medium .el-range__close-icon {
  line-height: 10px;
}
::v-deep .el-select__caret {
  line-height: 36px;
}

.addrTitle {
  font-size: 16px;
  line-height: 56px;
}
::v-deep .el-tag {
  max-width: 200px;
}

// 新增弹框的样式
.dialog-route-content {
  width: 100%;
  display: flex;
  justify-content: space-around;
  .route-manage {
    width: 470px;
    background: #ffffff;
    border-radius: 10px 10px 10px 10px;
    border: 1px dashed #5181f6;
    &-title {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 7px;
      span {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: bold;
        font-size: 14px;
        color: #5181f6;
        border-bottom: 2px solid #5181f6;
      }
    }
    &-list {
      display: flex;
      flex-direction: column;
      align-items: center;
      .list-item {
        background: #ffffff;
        border-radius: 10px 10px 10px 10px;
        border: 1px dashed #5181f6;
        padding: 16px 0px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        position: relative;
        /deep/.el-form-item {
          margin-bottom: 0;
        }
      }
      .list-item:not(:last-child) {
        margin-bottom: 10px;
      }
    }
    .add-route {
      width: 203px;
      height: 32px;
      margin: 8px auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      background: #ffffff;
      border-radius: 4px 4px 4px 4px;
      border: 1px dashed #d8dbe8;
      cursor: pointer;
      img {
        width: 20px;
        height: 20px;
        margin-right: 8px;
      }
      span {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #a2a4af;
      }
    }
  }
}
.task-detail-main {
  height: 100%;
  display: flex;
  flex-direction: column;
  .task-detail-part {
    display: flex;
    flex: 1;
    .task-detail-option {
      .option-title {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 15px;
        color: #000000;
        margin: 12px 0 10px 15px;
      }
      .el-menu-item2 {
        border-bottom: 2px #ebf0fc solid;
        height: 43px;
        line-height: 43px;
        padding: 0 30px !important;
        cursor: pointer;
        .option-list-item {
          display: flex;
          align-items: center;
          div {
            width: 80%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-right: auto;
          }
          img {
            width: 15px;
            height: 15px;
            margin-right: 15px;
          }
        }
      }
      .checked_item {
        border-left: 3px solid #5181f6;
        padding: 0 27px !important;
        background-color: #e1e8fa !important;
      }
    }
    .task-detail-table {
      width: calc(100% - 370px);
      margin-left: 36px;
      height: 100%;
      display: flex;
      flex-direction: column;
      .pagerBox {
        margin-top: 35px;
      }
    }
  }
}
</style>
