<template>
  <div class="fullHeight">
    <div class="searchBox whiteBlock">
      <el-form
        :inline="true"
        size="medium"
        :model="searchForm"
        ref="searchForm"
      >
        <el-form-item label="巡检点名称">
          <el-input
            placeholder="请输入"
            v-model="searchForm.checkingPointName"
          ></el-input>
        </el-form-item>
        <el-button type="primary" size="medium" plain @click="getPointList"
          >查询</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">
        <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="position"
          label="巡检位置"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="createUserName"
          label="创建人"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="createDate"
          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="inspectUserNames"
          label="检查人员"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="noticeUserNames"
          label="通知人"
          align="center"
        ></el-table-column>

        <el-table-column prop="qrCode" label="二维码" align="center">
          <template slot-scope="{ row }">
            <!-- {{$store.state.FILEURL + row.qrCode}} -->
            <el-image
              style="
                margin-right: 8px;
                width: 80px;
                height: 80px;
                cursor: pointer;
                border-radius: 4px;
              "
              fit="cover"
              :src="$store.state.FILEURL + row.qrCode"
              :preview-src-list="[$store.state.FILEURL + row.qrCode]"
            />
          </template>
        </el-table-column>

        <el-table-column
          :label="$t('message.personnelPosition.beaconManage.table.operation')"
          align="center"
          width="400"
        >
          <template slot-scope="scope">
            <div class="tableBtns">
              <div class="operationText">
                <i
                  class="el-icon-download"
                  style="
                    width: 30px;
                    height: 30px;
                    color: #1684fc;
                    margin-top: 15px;
                  "
                ></i>
                <a
                  class="download"
                  target="_blank"
                  :href="$store.state.FILEURL + scope.row.qrCode"
                  download
                  >下载巡检二维码</a
                >
              </div>

              <div class="operationText" @click="deilBtn(scope.row)">
                <i
                  class="el-icon-tickets"
                  style="color: #8dacfa; font-size: 16px; margin-right: 2px"
                ></i>
                <span>详情</span>
              </div>
              <div class="operationText" @click="editBtn(scope.row)">
                <img
                  src="@/assets/images/icon-edit.png"
                  width="15px"
                  height="15px"
                />
                <span>编辑</span>
              </div>
              <div @click="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="667px"
      @close="close"
    >
      <div class="dialog_content">
        <el-form
          size="medium"
          :model="cardForm"
          ref="cardForm"
          :rules="cardFormRules"
          label-width="150px"
          class="dialogFormBox"
        >
          <el-form-item label="巡检点名称：" prop="checkingPointName">
            <el-input
              :disabled="cardDialogTitle == '详情'"
              v-model="cardForm.checkingPointName"
              :placeholder="isAdding ? '请输入' : ''"
            ></el-input>
          </el-form-item>
          <el-form-item label="巡检点位置：" prop="position">
            <el-input
              :disabled="cardDialogTitle == '详情'"
              v-model="cardForm.position"
              :placeholder="isAdding ? '请输入' : ''"
            ></el-input>
          </el-form-item>
          <el-form-item label="所属区域：" prop="qualityRegionId">
            <el-select
              :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
              :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
              :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="inspectUserIds">
            <el-select
              :disabled="cardDialogTitle == '详情'"
              collapse-tags
              filterable
              v-model="cardForm.inspectUserIds"
              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="noticeUserIds">
            <el-select
              :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: 320px"
              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
              :disabled="cardDialogTitle == '详情'"
              class="smallInput"
              v-model="cardForm.frequencyNum"
              :min="1"
              :controls="false"
            >
            </el-input-number>
            <!-- 检查频次  选择单位 -->
            <el-select
              :disabled="cardDialogTitle == '详情'"
              class="smallInput"
              v-model="cardForm.frequencyType"
              :placeholder="isAdding ? '请输入' : ''"
              style="margin-left: 12px"
            >
              <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-item label="经度：" prop="longitude">
            <el-input v-model="cardForm.longitude"></el-input>
          </el-form-item>

          <el-form-item label="纬度：" prop="latitude">
            <el-input v-model="cardForm.latitude"></el-input>
          </el-form-item> -->

          <el-form-item label="自定义范围：" prop="standArea">
            <el-select
              :disabled="cardDialogTitle == '详情'"
              v-model="cardForm.standArea"
              :placeholder="isAdding ? '请输入' : ''"
              @change="drawCircle()"
            >
              <el-option
                v-for="item in options"
                :key="item"
                :label="item + $t('message.laborMange.meter')"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <div class="addrTitle" style="width: calc(100% - 160px):">
            <el-form-item label="区域：" prop="addr">
              <el-input
                :disabled="cardDialogTitle == '详情'"
                size="medium"
                v-model="cardForm.addr"
                id="tipinput"
                :placeholder="isAdding ? '请输入' : ''"
              >
                <el-button slot="append" icon="el-icon-search"></el-button>
              </el-input>
            </el-form-item>
          </div>

          <div
            id="container"
            style="width: 580px; height: 400px; background: pink"
          ></div>
          <div class="addrTitle">{{ cardForm.addr }}</div>
          <!-- 动态表单 -->
          <dynamicForms
            ref="dynamicFormsRef"
            :templateData="formData"
            :isAdding="isAdding"
          ></dynamicForms>

          <div id="qrCode" ref="qrCodeDiv"></div>
          <div class="dialog-footer">
            <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="addCardFn"
              size="medium"
              >生成巡检二维码</el-button
            >
          </div>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPointListApi,
  addPointApi,
  deletePointApi,
  editPointApi,
  pointAreaApi,
} from "@/assets/js/api/insect.js";
import { getProjectChilderSystemUserListApi } from "@/assets/js/api/configManage";
import dynamicForms from "./components/dynamicForms/index.vue";
// import QRCode from "qrcodejs2";
var mouseTool;
var mouseTool;
var objs = [];
export default {
  components: { dynamicForms },
  data() {
    return {
      chargerList: [],
      enterpriseList: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 1 * 24 * 3600 * 1000;
        },
      },
      searchForm: {
        checkingPointName: "",
      },
      cardDialogTitle: "",
      tableData: [],
      total: 0,
      pageNo: 1,
      pageSize: 10,
      cardForm: {
        checkingPointName: "",
        position: "",
        qualityRegionId: "", // 区域ID
        enterpriseId: "", // 责任企业
        inspectUserIds: "", //检查人
        noticeUserIds: "", //通知人
        startTime: "",
        endTime: "",
        frequencyType: 1,
        frequencyNum: 1,
        standArea: 100, //范围
        latitude: "", //纬度
        longitude: "", //经度
        addr: "", //地图区域
      },
      qrCode: "",
      cardDialog: false,
      projectSn: "",
      cardFormRules: {
        checkingPointName: [
          { required: true, message: "请输入巡检点名称", trigger: "blur" },
        ],
        position: [
          { required: true, message: "请输入巡检位置", trigger: "blur" },
        ],
        qualityRegionId: [
          { required: true, message: "请选择", trigger: "blur" },
        ],
        enterpriseId: [{ required: true, message: "请选择", trigger: "blur" }],
        inspectUserIds: [
          { required: true, message: "请输入检查人员", trigger: "blur" },
        ],
        noticeUserIds: [
          { required: true, message: "请输入通知人员", trigger: "blur" },
        ],
        startTime: [
          { required: true, message: "请选择检查日期", trigger: "blur" },
        ],
        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: {},
    };
  },
  mounted() {
    this.projectSn = this.$store.state.projectSn;
    this.getPointList();
    this.getPointAreaFn();
  },
  methods: {
    //切换 整改人
    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(obj) {
      this.isAdding = false;
      this.cardDialogTitle = "详情";
      this.cardDialog = true;
      this.cardForm = JSON.parse(JSON.stringify(obj));
      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.$nextTick(() => {
        this.initMap();
      });
      this.getAccountList();
    },
    //地图加载
    initMap() {
      var that = this;
      //地图加载
      this.map = new AMap.Map("container", {
        resizeEnable: true,
      });
      var geocoder = new AMap.Geocoder({});
      //输入提示
      var autoOptions = {
        input: "tipinput",
      };
      this.auto = new AMap.Autocomplete(autoOptions);
      this.placeSearch = new AMap.PlaceSearch({
        map: this.map,
      }); //构造地点查询类
      AMap.event.addListener(this.auto, "select", this.select); //注册监听，当选中某条记录时会触发
      mouseTool = new AMap.MouseTool(this.map);
      mouseTool.on("draw", function (event) {
        // event.obj 为绘制出来的覆盖物对象
        console.log("覆盖物对象绘制完成", event.obj.getPath());

        let overlaysList = that.map.getAllOverlays("polygon");

        if (overlaysList.length > 1) {
          that.map.remove(overlaysList[0]);
        }

        that.locationList = [];
        var pathArr = event.obj.getPath();
        pathArr.forEach((element) => {
          that.locationList.push({
            longitude: element.lng,
            latitude: element.lat,
          });
        });
      });
      geocoder.getLocation(this.cardForm.addr, function (status, result) {
        if (status === "complete" && result.geocodes.length) {
          var lnglat = result.geocodes[0].location;
          console.log(result.geocodes[0]);
          // var arr = lnglat.split(',')
          that.locationList = [
            {
              longitude: lnglat.lng,
              latitude: lnglat.lat,
            },
          ];
          that.drawCircle();
        }
      });
      this.map.on("click", (e) => {
        console.log(
          "您在 [ " +
            e.lnglat.getLng() +
            "," +
            e.lnglat.getLat() +
            " ] 的位置单击了地图！"
        );
        this.cardForm.latitude = e.lnglat.getLat();
        this.cardForm.longitude = e.lnglat.getLng();

        this.locationList = [];
        this.locationList.push({
          longitude: e.lnglat.getLng(),
          latitude: e.lnglat.getLat(),
        });
        var lnglatXY = new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat());
        geocoder.getAddress(lnglatXY, function (status, result) {
          console.log(status, result);
          that.cardForm.addr = result.regeocode.formattedAddress;
        });
        this.drawCircle();
        //  else {
        //   this.locationList.push({
        //     longitude: e.lnglat.getLng(),
        //     latitude: e.lnglat.getLat(),
        //   });

        // }
      });
    },
    //关键字查询查询
    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 = "";
      }
    },
    //查看条数
    handleSizeChange(val) {
      this.pageSize = val;
      this.getPointList();
    },
    //查看页
    handleCurrentChange(val) {
      this.pageNo = val;
      this.getPointList();
    },
    // 查询
    getPointList() {
      let data = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        projectSn: this.projectSn,
        checkingPointName: this.searchForm.checkingPointName,
      };
      getPointListApi(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.getPointList();
    },
    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.$nextTick(() => {
        this.initMap();
      });
      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.$nextTick(() => {
        this.initMap();
        this.$refs.cardForm.clearValidate();
      });
      this.getAccountList();
    },
    // 删除
    toDelete(val) {
      console.log("删除", val);
      this.$confirm("此操作将永久删除该巡检点, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let data = {
            id: val.id,
          };
          deletePointApi(data).then((res) => {
            if (res.success) {
              this.getPointList();
              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;
    },
    // 生成二维码
    addCardFn() {
      this.$refs.cardForm.validate((valid) => {
        if (valid) {
          let formTemplate;
          formTemplate = this.$refs.dynamicFormsRef.dynamicFroms;

          // 新增
          let data = { ...this.cardForm };
          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(",");
          data.template = JSON.stringify(formTemplate);
          if (this.cardDialogTitle == "新建巡检点") {
            addPointApi(data).then((res) => {
              console.log("新增", res);
              if (res.code == 200) {
                this.$message.success("添加成功！");

                this.getPointList();
              }
            });
            //   document.getElementById("qrCode").innerHTML = "";
            //   console.log("QRCode", QRCode);
            //   let QRCodeData = new QRCode(this.$refs.qrCodeDiv, {
            //     text: JSON.stringify(data),
            //     width: 150,
            //     height: 150,
            //     colorDark: "#333333", //二维码颜色
            //     colorLight: "#ffffff", //二维码背景色
            //     correctLevel: QRCode.CorrectLevel.L //容错率，L/M/H
            //   });
            //   console.log("QRCodeData", QRCodeData);
            //   setTimeout(() => {
            //     let img = QRCodeData._el.innerHTML;
            //     let baseurl = img
            //       .split("=")[5].split('"')[1]
            //     console.log("baseurl", baseurl);
            //     data.qrCode = baseurl;
            //     data.createDate = this.selectNowDate();
            //     addPointApi(data).then(res => {
            //       console.log("新增", res);
            //       if (res.code == 200) {
            //         this.cardDialog = false;
            //         this.getPointList()
            //       }
            //     });
            //   }, 500);
          } else if (this.cardDialogTitle == "编辑巡检点") {
            editPointApi(data).then((res) => {
              if (res.success) {
                this.$message.success(res.message);
                this.getPointList();
              }
            });
          }
          this.cardDialog = false;
        }
      });
    },

    close() {
      // this.cardForm = {}
      // this.$nextTick(() => {
      //   this.$refs.cardForm.clearValidate()
      // })
      this.closeEvent();
    },
    //检查人员下拉列表
    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.getPointList();
    },
  },
};
</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;
}

.dialogFormBox {
  width: 580px;
}
.addrTitle {
  font-size: 16px;
  line-height: 56px;
}
</style>
