<template>
  <div class="payoff">
    <el-row type="flex" style="width: 100%; height: 100%">
      <el-col class="left-col">
        <vue-scroll>
          <div class="scroll">
            <div class="list-wrapper">
              <div
                v-for="(item, index) in operationList"
                :key="item.id"
                :class="['list-item', { 'is-active': activeIndex == index }]"
                @click="handleItemClick(index)"
              >
                <span class="title">{{ item.operationName }}</span>
              </div>
            </div>
          </div>
        </vue-scroll>
      </el-col>
      <el-col class="right-col">
        <el-row style="width: 100%; height: 100%">
          <el-col class="top-col" :span="4" :class="styleType == 3 ? 'changeStyle' : ''">
            <el-form size="medium" :model="queryParams" ref="queryForm" :inline="true">
              <el-form-item label="选择设备" prop="devSn">
                <el-select
                  v-model="queryParams.devSn"
                  placeholder="请选择"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="(item, index) in allUfaceDev"
                    :key="item.devSn"
                    :label="item.devName"
                    :value="item.devSn"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="时间" prop="createDate">
                <el-date-picker
                  v-model="queryParams.createDate"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" plain @click="handleQuery">查询</el-button>
                <el-button type="warning" plain @click="handleRefresh">刷新</el-button>
              </el-form-item>
              <el-form-item>
                <el-button
                  v-permission="{
                    key: 'demonGeneration',
                    menuPath: '/project/operationManagement/sewageMonitoring',
                  }"
                  type="primary"
                  @click="ruleConfigDialog"
                  >演示数据生成</el-button
                >
              </el-form-item>
              <el-form-item>
                <el-button
                  v-permission="{
                    key: 'datchDelete',
                    menuPath: '/project/operationManagement/sewageMonitoring',
                  }"
                  type="primary"
                  @click="deleteAttendanceBatch"
                  >批量删除</el-button
                >
              </el-form-item>
            </el-form>
          </el-col>
          <el-col
            class="bottom-col"
            :span="20"
            :class="styleType == 3 ? 'bottomTwo' : ''"
          >
            <div class="scroll" :class="styleType == 3 ? 'boxBottom' : ''">
              <el-table
                :max-height="570"
                :height="570"
                ref="multipleTable"
                v-loading="loading"
                :data="userList"
                class="tables table-box"
                :class="{ 'scrollbar-exists': scrollbarFlag }"
              >
                <template slot="empty">
                  <el-empty
                    :image="require('@/assets/images/noData4.png')"
                    :image-size="100"
                    description="暂无数据"
                  ></el-empty>
                </template>
                <el-table-column type="selection" align="center" width="55"></el-table-column>
                <el-table-column label="设备名称" align="center" prop="devName" />
                <el-table-column label="上传时间" align="center" prop="createDate">
                  <template #default="{ row }">
                    <span>{{ row.createDate }}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="电导率(uS/cm)"
                  align="center"
                  prop="conductivity"
                />
                <el-table-column
                  label="溶解氧(mg/L)"
                  align="center"
                  prop="dissolvedOxygen"
                />
                <el-table-column label="流速(m/s)" align="center" prop="flowVelocity" />
                <el-table-column label="PH值" align="center" prop="phValue" />
                <el-table-column
                  label="浊度值(NTU)"
                  align="center"
                  prop="turbidityValue"
                />
                <el-table-column label="水位(m)" align="center" prop="waterLevel" />
                <el-table-column label="水温(℃)" align="center" prop="waterTemperature" />
                <!-- <el-table-column label="报警状态" align="center" prop="alarmType">
                      <template #default="{ row }">
                        <span>{{ deviceStateUp(row.alarmType) }}</span>
                      </template>
                    </el-table-column> -->
                <el-table-column label="操作" align="center">
                  <template #default="{ row }">
                    <el-button
                      v-permission="{
                        key: 'edit',
                        menuPath: '/project/operationManagement/sewageMonitoring',
                      }"
                      style="border: 0 !important"
                      type="text"
                      icon="el-icon-edit"
                      @click="handleUpdate(row)"
                      >编辑</el-button
                    >
                    <el-button
                      v-permission="{
                        key: 'delete',
                        menuPath: '/project/operationManagement/sewageMonitoring',
                      }"
                      style="border: 0 !important; color: #f56c6c"
                      type="text"
                      icon="el-icon-delete"
                      @click="handleDelete(row)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
              <el-row type="flex" justify="center">
                <pagination
                  v-show="total > 0"
                  :total="total"
                  :page.sync="queryParams.pageNo"
                  :limit.sync="queryParams.pageSize"
                  @pagination="getList"
                  :pageSizes="[...$store.state.PAGESIZRS, 100, 200, 500, 1000]"
                  layout="total,sizes, prev, pager, next, jumper"
                />
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>

    <!-- 编辑弹窗 -->
    <el-dialog :visible.sync="open" width="600px" append-to-body title="编辑">
      <el-form
        ref="editForm"
        :model="editForm"
        :rules="editFormRules"
        size="medium"
        label-width="140px"
      >
        <el-form-item label="选择设备" prop="devSn">
          <el-select v-model="editForm.devSn" placeholder="请选择" clearable filterable>
            <el-option
              v-for="(item, index) in allUfaceDev"
              :key="item.devSn"
              :label="item.devName"
              :value="item.devSn"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="电导率(uS/cm)" prop="conductivity">
          <el-input-number
            :controls="false"
            v-model="editForm.conductivity"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="溶解氧(mg/L)" prop="dissolvedOxygen">
          <el-input-number
            :controls="false"
            v-model="editForm.dissolvedOxygen"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="流速(m/s)" prop="flowVelocity">
          <el-input-number
            :controls="false"
            v-model="editForm.flowVelocity"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="PH值" prop="phValue">
          <el-input-number :controls="false" v-model="editForm.phValue"></el-input-number>
        </el-form-item>
        <el-form-item label="浊度值(NTU)" prop="turbidityValue">
          <el-input-number
            :controls="false"
            v-model="editForm.turbidityValue"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="水位(m)" prop="waterLevel">
          <el-input-number
            :controls="false"
            v-model="editForm.waterLevel"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="水温(℃)" prop="waterTemperature">
          <el-input-number
            :controls="false"
            v-model="editForm.waterTemperature"
          ></el-input-number>
        </el-form-item>

        <!-- <el-form-item label="报警状态" prop="alarmType">
              <el-select v-model="editForm.alarmType" placeholder="请选择" clearable filterable>
                <el-option
                  v-for="(item, index) in deviceStateList"
                  :key="item.deviceStateId"
                  :label="item.deviceStateName"
                  :value="item.deviceStateId"
                ></el-option>
              </el-select>
            </el-form-item> -->
        <el-form-item label="上报时间" prop="createDate">
          <el-date-picker
            value-format="yyyy-MM-dd hh:mm:ss"
            type="datetime"
            placeholder="上传时间"
            v-model="editForm.createDate"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" style="text-align: center">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
    </el-dialog>
    <!-- 下载模拟数据弹窗 -->
    <el-dialog
      :visible.sync="downSimulateShow"
      width="600px"
      append-to-body
      title="下载模拟数据"
    >
      <el-radio-group class="simulate_box" v-model="staffSimulateRadio">
        <el-radio
          :label="item.staffSimulateId"
          v-for="item in staffSimulateList"
          :key="item.staffSimulateId"
          >{{ item.staffSimulateName }}</el-radio
        >
      </el-radio-group>
      <div slot="footer">
        <el-button @click="downSimulateShow = false">取消</el-button>
        <el-button type="primary" @click="submitDownSimulate">确定</el-button>
      </div>
    </el-dialog>
    <!-- 演示数据生成弹窗 -->
    <el-dialog
      :visible.sync="ruleConfigShow"
      width="800px"
      append-to-body
      title="规则配置"
      class="ruleConfig_box"
    >
      <el-form
        ref="ruleConfigForm"
        :model="ruleConfigForm"
        :rules="ruleConfigFormRules"
        size="medium"
        label-width="160px"
      >
        <el-form-item label="选择设备" prop="devSns">
          <el-checkbox-group v-model="ruleConfigForm.devSns">
            <el-checkbox
              :label="item.devSn"
              v-for="item in allUfaceDev"
              :key="item.devSn"
              >{{ item.devName }}</el-checkbox
            >
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="数据量" prop="devGenerateNum">
          <span class="mr_8">所选设备每个设备随机生成</span
          ><el-input-number
            v-model="ruleConfigForm.devGenerateNum"
            :min="0"
            :max="999"
          ></el-input-number
          ><span class="ml_8">条数据</span>
        </el-form-item>
        <template v-if="activeIndex == 0">
          <el-form-item label="模拟接收时间范围" prop="startTime">
            <div class="flex">
              <el-form-item prop="startTime">
                <el-date-picker
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  placeholder="开始时间"
                  :picker-options="handleTimeChange(ruleConfigForm.endTime, 'startTime')"
                  v-model="ruleConfigForm.startTime"
                ></el-date-picker>
              </el-form-item>
              <span class="mr_8 ml_8">至</span>
              <el-form-item prop="endTime">
                <el-date-picker
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="datetime"
                  placeholder="结束时间"
                  :picker-options="handleTimeChange(ruleConfigForm.startTime, 'endTime')"
                  v-model="ruleConfigForm.endTime"
                ></el-date-picker>
              </el-form-item>
            </div>
          </el-form-item>
          <el-form-item label="数据范围" prop="enterpriseIds">
            <div class="ruleconfig_staff">
              <el-form-item
                label-width="120px"
                :label="item.label"
                v-for="item in scopeData"
                :key="item.id"
              >
                <el-input-number
                  placeholder="小"
                  :controls="false"
                  v-model="item.minValue"
                  :max="item.maxValue ? item.maxValue : Infinity"
                  controls-position="right"
                ></el-input-number>
                <span class="mr_8 ml_8">~</span>
                <el-input-number
                  :controls="false"
                  :min="item.minValue ? item.minValue : -Infinity"
                  v-model="item.maxValue"
                  controls-position="right"
                  placeholder="大"
                ></el-input-number>
              </el-form-item>
            </div>
          </el-form-item>
        </template>
        <!-- <el-form-item label="设备状态" prop="deviceStatuses">
                    <el-checkbox-group v-model="ruleConfigForm.deviceStatuses">
                      <el-checkbox
                        v-for="item in deviceStateList"
                        :key="item.deviceStateId"
                        :label="item.deviceStateId.toString()"
                        >{{ item.deviceStateName }}</el-checkbox
                      >
                    </el-checkbox-group>
                  </el-form-item>
                  <el-form-item label="全选" prop="detailStatuses">
                    <div class="flex">
                      <el-checkbox
                        :indeterminate="isIndeterminate"
                        v-model="checkAll"
                        @change="handleCheckAllChange"
                      ></el-checkbox>
                      <el-form-item label="全部状态" label-width="80px">
                        <el-checkbox-group
                          @change="handleCheckedCitiesChange"
                          v-model="ruleConfigForm.detailStatuses"
                        >
                          <el-checkbox
                            v-for="item in cardTypeList"
                            :key="item.cardTypeName"
                            :label="item.cardTypeName"
                            >{{ item.cardTypeName }}</el-checkbox
                          >
                        </el-checkbox-group>
                      </el-form-item>
                    </div>
                  </el-form-item> -->
      </el-form>
      <div slot="footer" style="text-align: center">
        <el-button
          :loading="ruleConfigLoading"
          type="primary"
          @click="submitRuleConfigForm"
          >{{ ruleConfigLoading ? "正在生成数据，请耐心等待!" : "开始生成" }}</el-button
        >
        <el-button type="primary" @click="ruleConfigReset">重置配置</el-button>
        <el-button @click="ruleConfigCancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  enterpriseList,
  teamList,
  departmentList,
  payrollRecord,
  exportSalaryPdf,
  exportSalaryExcel,
  updateWorkerWagesPayment,
} from "@/assets/js/api/laborManagement/payoff";

import {
  exportAttendanceExcel,
  deleteBatchSewageDataApi,
  editSewageDataApi,
  mockDataSewageDataApi,
  getDepartmentAndTeamListApi,
  getMockSewageDataConfigApi,
  saveMockFrontierProtectionNoNetDataConfigApi,
  resetMockSewageDataConfigApi,
} from "@/assets/js/api/operationManagement";
import { selectDustNoisePageListApi } from "@/assets/js/api/environmentManage";
import {
  getWorkerInfoList,
  getPageListApi,
  getEnterpriseInfoList,
} from "@/assets/js/api/laborPerson";
import { sewageDevList, sewageMonitorDataPage } from "@/assets/js/api/sewageMonitor.js";
import { nowDate } from "@/util";
import dayjs from "dayjs";
export default {
  data: () => ({
    // 模拟数据下载弹窗
    downSimulateShow: false,
    staffSimulateRadio: 50,
    staffSimulateList: [
      {
        staffSimulateId: 50,
        staffSimulateName: "人员模拟数据(50)人.zip",
      },
      {
        staffSimulateId: 100,
        staffSimulateName: "人员模拟数据(100)人.zip",
      },
      {
        staffSimulateId: 500,
        staffSimulateName: "人员模拟数据(500)人.zip",
      },
      {
        staffSimulateId: 1000,
        staffSimulateName: "人员模拟数据(1000)人.zip",
      },
    ],
    gasTypeList: [
      {
        gasTypeId: 1,
        gasTypeName: "氧气",
      },
      {
        gasTypeId: 2,
        gasTypeName: "甲烷",
      },
      {
        gasTypeId: 3,
        gasTypeName: "一氧化碳",
      },
    ],
    deviceStateList: [
      {
        deviceStateId: 0,
        deviceStateName: "正常",
      },
      {
        deviceStateId: 1,
        deviceStateName: "低报警",
      },
      {
        deviceStateId: 2,
        deviceStateName: "高报警",
      },
      {
        deviceStateId: 3,
        deviceStateName: "超量程",
      },
    ],
    cardTypeList: [
      {
        cardTypeId: 1,
        cardTypeName: "布防",
      },
      {
        cardTypeId: 2,
        cardTypeName: "撤防",
      },
      {
        cardTypeId: 3,
        cardTypeName: "SOS",
      },
      {
        cardTypeId: 4,
        cardTypeName: "盗警",
      },
      {
        cardTypeId: 5,
        cardTypeName: "交流电故障",
      },
    ],
    devGenerateList: [
      {
        devGenerateId: 1,
        devGenerateName: "每日抄表一次",
      },
      {
        devGenerateId: 2,
        devGenerateName: "每周抄表一次",
      },
      {
        devGenerateId: 3,
        devGenerateName: "每月抄表一次",
      },
      {
        devGenerateId: 4,
        devGenerateName: "每年抄表一次",
      },
    ],
    scopeData: [
      {
        id: 1,
        label: "电导率(uS/cm)",
        minValue: "",
        maxValue: "",
      },
      {
        id: 2,
        label: "溶解氧(mg/L)",
        minValue: "",
        maxValue: "",
      },
      {
        id: 3,
        label: "流速(m/s)",
        minValue: "",
        maxValue: "",
      },
      {
        id: 4,
        label: "PH值",
        minValue: "",
        maxValue: "",
      },
      {
        id: 5,
        label: "浊度值(NTU)",
        minValue: "",
        maxValue: "",
      },
      {
        id: 6,
        label: "水位(m)",
        minValue: "",
        maxValue: "",
      },
      {
        id: 7,
        label: "水温(℃)",
        minValue: "",
        maxValue: "",
      },
    ],
    checkAll: false,
    isIndeterminate: true,
    ruleConfigLoading: false,
    isDepartmentTeamList: [],
    personList: [],
    allUfaceDev: [],
    // 演示数据生成弹窗
    ruleConfigShow: false,
    ruleConfigForm: {
      devSns: [],
      devGenerateNum: "",
      startTime: "",
      endTime: "",
      degreeBegin: "",
      degreeEnd: "",
      gasTypes: [],
      alarmTypes: [],
    },
    ruleConfigFormRules: {
      devSns: [
        {
          type: "array",
          required: true,
          message: "请至少选择一个设备",
          trigger: "change",
        },
      ],
      devGenerateNum: [{ required: true, message: "请输入数据量", trigger: "blur" }],
      startTime: [
        {
          required: true,
          message: "请选择模拟开始时间",
          trigger: "change",
        },
      ],
      endTime: [
        {
          required: true,
          message: "请选择模拟结束时间",
          trigger: "change",
        },
      ],
      gasTypes: [
        {
          type: "array",
          required: true,
          message: "请至少选择一个气体类型",
          trigger: "change",
        },
      ],
      alarmTypes: [
        {
          type: "array",
          required: true,
          message: "请至少选择一个报警状态",
          trigger: "change",
        },
      ],
    },

    // 3 衢州版 2 星璇版 1 正常版本
    styleType: "",
    // 项目SN
    projectSn: "",
    // 弹窗标题
    title: "",
    // 控制弹窗的打开与关闭
    open: false,
    // 遮罩层
    loading: false,
    // 当前激活的项目
    activeIndex: 0,
    // 项目列表
    operationList: [
      {
        operationId: 1,
        operationName: "实时数据",
      },
    ],
    // 总条数
    total: 1,
    // 用户数据
    userList: [],
    // 班组列表选项
    teamOptions: [],
    // 部门列表选项
    departmentOptions: [],
    // 查询参数
    queryParams: {
      pageNo: 1,
      pageSize: 10,
      projectSn: undefined, // 项目SN
      enterpriseId: undefined, // 企业ID

      createDate: [], // 报警时间
      devSn: "",
    },
    editForm: {},
    editFormRules: {
      devSn: [{ required: true, message: "请选择设备", trigger: "change" }],
      gasType: [{ required: true, message: "请选择气体类型", trigger: "change" }],
      alarmType: [{ required: true, message: "请选择报警状态", trigger: "change" }],
      createDate: [{ required: true, message: "请选择报警时间", trigger: "change" }],
    },
    enterpriseListData: [],
    scrollbarFlag: false,
  }),
  computed: {
    headers() {
      return { Authorization: this.$store.state.userInfo.token };
    },
    gasTypeUp() {
      return (gasType) => {
        const resultList = [...this.gasTypeList];
        const find = resultList.find((item) => item.gasTypeId == gasType);
        return find ? find.gasTypeName : "";
      };
    },
    deviceStateUp() {
      return (deviceStatus) => {
        const resultList = [...this.deviceStateList];
        const find = resultList.find((item) => item.deviceStateId == deviceStatus);
        return find ? find.deviceStateName : "";
      };
    },
  },
  created() {
    this.projectSn = this.$store.state.projectSn;
    this.styleType = this.$store.state.userInfo.styleType;
    // 查询企业列表
    this.getEnterpriseList();
    // this.getPersonListFn();
    this.getMachineList();
    this.getCompanyList();
  },
  methods: {
    handleTimeChange(diffTime, type) {
      return {
        disabledDate: (time) => {
          // console.log(time, diffTime, type)
          const date1 = dayjs(time);
          const date2 = dayjs(diffTime);
          if (type == "startTime") {
            return date1.diff(date2) > 0 ? true : false;
          } else if (type == "endTime") {
            return date2.diff(date1) > 0 ? true : false;
          }
          return false;
        },
      };
    },
    handleCheckAllChange(val) {
      this.ruleConfigForm.detailStatuses = val
        ? this.cardTypeList.map((item) => item.cardTypeName)
        : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cardTypeList.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.cardTypeList.length;
    },
    enterpriseChange(enterpriseIds, departmentTeamIds, type) {
      getDepartmentAndTeamListApi({
        projectSn: this.projectSn,
        enterpriseIds:
          enterpriseIds instanceof Array ? enterpriseIds.join(",") : enterpriseIds,
      }).then((res) => {
        if (res.success) {
          this.isDepartmentTeamList = res.result;
          if (type != 1) {
            this.ruleConfigForm.departmentTeamIds = [];
            this.editForm.departmentTeamId = "";
          }
          this.departmentTeamChange(enterpriseIds, departmentTeamIds, type);
        }
      });
    },
    departmentTeamChange(enterpriseIds, departmentTeamIds, type) {
      let reqeustData = {
        projectSn: this.$store.state.projectSn,
      };
      if (enterpriseIds instanceof Array && departmentTeamIds instanceof Array) {
        reqeustData.enterpriseIds = enterpriseIds;
        reqeustData.departmentTeamIds = departmentTeamIds;
      } else {
        reqeustData.enterpriseId = enterpriseIds;
        reqeustData.departmentTeamId = departmentTeamIds;
      }
      getWorkerInfoList(reqeustData).then((res) => {
        this.personList = res.result.records;
        if (type != 1) {
          this.ruleConfigForm.personSns = [];
          this.editForm.personSn = "";
        }
      });
    },
    // 演示数据生成弹窗
    ruleConfigDialog() {
      //   this.ruleConfigReset();
      getMockSewageDataConfigApi({
        projectSn: this.projectSn,
      }).then((res) => {
        if (res.success) {
          if (res.result instanceof Array && res.result.length > 0) {
            const result = res.result[0];
            this.ruleConfigForm = {
              ...result,
              devSns: result.devSns ? result.devSns.split(",") : [],
              gasTypes: result.gasTypes ? result.gasTypes.split(",") : [],
              alarmTypes: result.alarmTypes ? result.alarmTypes.split(",") : [],
            };
            this.setScopeDataListFn(result);
          }
          this.$nextTick(() => {
            this.$refs["ruleConfigForm"].clearValidate();
          });
        }
      });
      this.ruleConfigShow = true;
    },
    submitRuleConfigForm() {
      this.$refs["ruleConfigForm"].validate((valid) => {
        if (!valid) return;
        this.ruleConfigLoading = true;
        const resultScope = this.initScopeDataListFn();
        const params = {
          ...this.ruleConfigForm,
          ...resultScope,
          devSns: this.ruleConfigForm.devSns.join(","),
          gasTypes: this.ruleConfigForm.gasTypes.join(","),
          alarmTypes: this.ruleConfigForm.alarmTypes.join(","),
          projectSn: this.projectSn,
        };

        mockDataSewageDataApi(params)
          .then((res) => {
            if (res.success) {
              this.$message.success(res.message);
              this.getList();
              this.ruleConfigShow = false;
            }
          })
          .finally(() => {
            this.ruleConfigLoading = false;
          });
      });
    },
    initScopeDataListFn() {
      const conductivity = this.scopeData.find((item) => item.label == "电导率(uS/cm)");
      const dissolvedOxygen = this.scopeData.find((item) => item.label == "溶解氧(mg/L)");
      const flowVelocity = this.scopeData.find((item) => item.label == "流速(m/s)");
      const phValue = this.scopeData.find((item) => item.label == "PH值");
      const turbidityValue = this.scopeData.find((item) => item.label == "浊度值(NTU)");
      const waterLevel = this.scopeData.find((item) => item.label == "水位(m)");
      const waterTemperature = this.scopeData.find((item) => item.label == "水温(℃)");

      return {
        conductivityBegin: conductivity ? conductivity.minValue : "",
        conductivityEnd: conductivity ? conductivity.maxValue : "",
        dissolvedOxygenBegin: dissolvedOxygen ? dissolvedOxygen.minValue : "",
        dissolvedOxygenEnd: dissolvedOxygen ? dissolvedOxygen.maxValue : "",
        flowVelocityBegin: flowVelocity ? flowVelocity.minValue : "",
        flowVelocityEnd: flowVelocity ? flowVelocity.maxValue : "",
        phValueBegin: phValue ? phValue.minValue : "",
        phValueEnd: phValue ? phValue.maxValue : "",
        turbidityValueBegin: turbidityValue ? turbidityValue.minValue : "",
        turbidityValueEnd: turbidityValue ? turbidityValue.maxValue : "",
        waterLevelBegin: waterLevel ? waterLevel.minValue : "",
        waterLevelEnd: waterLevel ? waterLevel.maxValue : "",
        waterTemperatureBegin: waterTemperature ? waterTemperature.minValue : "",
        waterTemperatureEnd: waterTemperature ? waterTemperature.maxValue : "",
      };
    },
    setScopeDataListFn(row) {
      const conductivity = this.scopeData.find((item) => item.label == "电导率(uS/cm)");
      if (conductivity) {
        conductivity.minValue = row.conductivityBegin;
        conductivity.maxValue = row.conductivityEnd;
      }
      const dissolvedOxygen = this.scopeData.find((item) => item.label == "溶解氧(mg/L)");
      if (dissolvedOxygen) {
        dissolvedOxygen.minValue = row.dissolvedOxygenBegin;
        dissolvedOxygen.maxValue = row.dissolvedOxygenEnd;
      }
      const flowVelocity = this.scopeData.find((item) => item.label == "流速(m/s)");
      if (flowVelocity) {
        flowVelocity.minValue = row.flowVelocityBegin;
        flowVelocity.maxValue = row.flowVelocityEnd;
      }
      const phValue = this.scopeData.find((item) => item.label == "PH值");
      if (phValue) {
        phValue.minValue = row.phValueBegin;
        phValue.maxValue = row.phValueEnd;
      }
      const turbidityValue = this.scopeData.find((item) => item.label == "浊度值(NTU)");
      if (turbidityValue) {
        turbidityValue.minValue = row.turbidityValueBegin;
        turbidityValue.maxValue = row.turbidityValueEnd;
      }
      const waterLevel = this.scopeData.find((item) => item.label == "水位(m)");
      if (waterLevel) {
        waterLevel.minValue = row.waterLevelBegin;
        waterLevel.maxValue = row.waterLevelEnd;
      }
      const waterTemperature = this.scopeData.find((item) => item.label == "水温(℃)");
      if (waterTemperature) {
        waterTemperature.minValue = row.waterTemperatureBegin;
        waterTemperature.maxValue = row.waterTemperatureEnd;
      }
    },
    ruleConfigCancel() {
      //   this.ruleConfigReset();
      this.ruleConfigShow = false;
    },
    // 表单重置
    ruleConfigReset() {
      //   this.ruleConfigForm = {
      //     devSns: [],
      //     devGenerateNum: "",
      //     startTime: "",
      //     endTime: "",
      //     detailStatuses: []
      //   };
      //   this.resetForm("ruleConfigForm");
      const params = {
        // ...this.ruleConfigForm,
        // devSns: this.ruleConfigForm.devSns.join(","),
        // deviceStatuses: this.ruleConfigForm.deviceStatuses.join(","),
        // detailStatuses: this.ruleConfigForm.detailStatuses.join(","),
        projectSn: this.projectSn,
      };
      //   saveMockFrontierProtectionNoNetDataConfigApi
      resetMockSewageDataConfigApi(params).then((res) => {
        if (res.success) {
          this.$message.success(res.message);
          // this.ruleConfigShow = false;
          this.ruleConfigDialog();
        }
      });
    },
    // 打卡人员模拟数据弹窗
    downSimulateDialog() {
      this.downSimulateShow = true;
    },
    // 下载人员模拟数据
    submitDownSimulate() {
      this.downSimulateShow = false;
      const find = this.staffSimulateList.find(
        (item) => item.staffSimulateId === this.staffSimulateRadio
      );
      exportAttendanceExcel({
        workerNum: this.staffSimulateRadio,
        projectSn: this.projectSn,
        fetchName: find ? find.staffSimulateName : "",
        url: "xmgl/workerInfo/downloadMockWorkerInfo",
      }).then((res) => {
        window.open(res.result);
      });
    },
    getPersonListFn() {
      let reqeustData = {
        projectSn: this.$store.state.projectSn,
        enterpriseId: "",
      };
      getWorkerInfoList(reqeustData).then((res) => {
        this.personList = res.result.records;
      });
    },
    //获取所有的闸机设备
    getMachineList() {
      sewageDevList({ projectSn: this.$store.state.projectSn }).then((list) => {
        this.allUfaceDev = list.result;
      });
    },
    // 批量删除考勤人员
    deleteAttendanceBatch() {
      if (this.$refs.multipleTable.selection.length === 0)
        return this.$message.warning("请勾选需要删除的数据！");
      this.$confirm("删除后操作不可恢复，请谨慎操作！", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const ids = this.$refs.multipleTable.selection.map((item) => item.id).join(",");
          console.log(this.$refs.multipleTable.selection);
          deleteBatchSewageDataApi({ ids }).then((res) => {
            this.getList();
          });
        })
        .catch(() => {});
    },
    /** 查询企业列表 */
    getEnterpriseList() {
      const params = {
        projectSn: this.projectSn,
        enterpriseName: undefined,
        userEnterpriseId: this.$store.state.userInfo.userEnterpriseId,
        enterpriseTypeId: undefined,
      };
      enterpriseList(params).then((res) => {
        // 查询数据
        this.getList();
        // 查询班组列表
        this.getTeamList();
        // 查询部门列表
        this.getDepartmentList();
      });
    },
    /** 查询用户数据 */
    getList() {
      this.loading = true;
      this.queryParams.projectSn = this.projectSn;
      sewageMonitorDataPage({
        projectSn: this.projectSn,
        pageNo: this.queryParams.pageNo,
        pageSize: this.queryParams.pageSize,
        devSn: this.queryParams.devSn,
        createDate_begin:
          this.queryParams.createDate.length > 0
            ? dayjs(this.queryParams.createDate[0]).format("YYYY-MM-DD 00:00:00")
            : "",
        createDate_end:
          this.queryParams.createDate.length > 0
            ? dayjs(this.queryParams.createDate[1]).format("YYYY-MM-DD 23:59:59")
            : "",
        mockDesc: 1,
        // isMock: this.queryParams.enterpriseId == 2 ? 1 : "",
      }).then(({ result }) => {
        console.log("查询用户数据: ", result);
        this.userList = result.records;
        this.total = result.total - 0;
        this.$nextTick(() => {
          this.scrollbarFn();
        });
        this.loading = false;
      });
    },
    scrollbarFn() {
      const div = document.querySelector(".table-box .el-table__body-wrapper");
      if (div.scrollHeight > div.clientHeight) {
        this.scrollbarFlag = true;
      } else {
        this.scrollbarFlag = false;
      }
    },
    //获取所属 企业下拉
    getCompanyList() {
      let data = {
        projectSn: this.projectSn,
        enterpriseName: "",
        userEnterpriseId: this.$store.state.userInfo.userEnterpriseId,
      };
      getEnterpriseInfoList(data).then((res) => {
        this.enterpriseListData = res.result;
      });
    },
    /** 查询班组列表 */
    getTeamList() {
      const params = {
        // enterpriseId: this.queryParams.enterpriseId,
        projectSn: this.projectSn,
      };
      teamList(params).then((res) => {
        console.log("查询班组列表: ", res);
        this.teamOptions = res.result.list;
        // this.isDepartmentTeamList = [...this.isDepartmentTeamList, ...res.result.list];
      });
    },
    /** 查询部门列表 */
    getDepartmentList() {
      const params = {
        // enterpriseId: this.queryParams.enterpriseId,
        projectSn: this.projectSn,
      };
      departmentList(params).then((res) => {
        console.log("查询部门列表: ", res);
        this.departmentOptions = res.result.list;
        // this.isDepartmentTeamList = [...this.isDepartmentTeamList, ...res.result.list];
      });
    },
    /** 项目列表 点击操作 */
    handleItemClick(index) {
      if (this.activeIndex == index) return;

      this.activeIndex = index;
      this.queryParams.pageNo = 1;
      this.getList();
      //   this.getTeamList();
      //   this.getDepartmentList();
    },
    // 表单重置
    reset() {
      this.editForm = {
        devSn: "",
        createDate: "",
        gasType: "",
        conductivity: "",
        dissolvedOxygen: "",
        flowVelocity: "",
        phValue: "",
        turbidityValue: "",
        waterLevel: "",
        waterTemperature: "",

        alarmType: "",
      };
      this.resetForm("editForm");
    },
    /** 查询 */
    handleQuery() {
      this.queryParams.pageNo = 1;
      this.getList();
    },
    handleRefresh() {
      this.queryParams.pageNo = 1;
      this.queryParams.devSn = "";
      this.queryParams.createDate = [];
      this.getList();
    },
    /** 导出 */
    handleExport() {
      let params = {
        projectSn: this.projectSn,
        teamName: this.queryParams.teamName,
        departmentId: this.queryParams.departmentId,
        payStatus: this.queryParams.payStatus,
        payMonth: this.queryParams.payMonth,
        enterpriseId: this.queryParams.enterpriseId,
      };
      exportSalaryPdf(params);
    },
    /** 导出Excel */
    handleExportExcel() {
      let params = {
        projectSn: this.projectSn,
        teamName: this.queryParams.teamName,
        departmentId: this.queryParams.departmentId,
        payStatus: this.queryParams.payStatus,
        payMonth: this.queryParams.payMonth,
        enterpriseId: this.queryParams.enterpriseId,
      };
      // console.log('导出参数',params)
      exportSalaryExcel(params);
    },
    handleUploadSuccess(res) {
      console.log("导入成功");
      if (res.code == 200) {
        this.$message.success(res.message);
        this.getEnterpriseList();
        this.$refs.upload.clearFiles();
      } else {
        this.$message.error(res.message);
      }
    },
    handleUploadError() {
      this.$message.error("导入失败");
    },
    // 删除人员考勤
    handleDelete(row) {
      this.$confirm("删除后操作不可恢复，请谨慎操作！", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deleteBatchSewageDataApi({ ids: row.id }).then((res) => {
            this.getList();
          });
        })
        .catch(() => {});
    },
    /** 编辑 || 更新 */
    handleUpdate(row) {
      this.reset();
      this.editForm = Object.assign(this.editForm, row);
      console.log("this.editForm: ", this.editForm);
      this.open = true;
    },
    /** 取消按钮 */
    cancel() {
      this.reset();
      this.open = false;
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["editForm"].validate((valid) => {
        if (!valid) return;
        const params = {
          ...this.editForm,
          projectSn: this.projectSn,
        };

        editSewageDataApi(params).then((res) => {
          this.getList();
          this.cancel();
        });
      });
    },
    handleAvatarSuccess(res, file) {
      if (res.status == "SUCCESS") {
        this.editForm.fileList.push({
          name: file.response.data[0].imageUrl,
          url: this.$store.state.FILEURL + file.response.data[0].imageUrl,
        });
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        this.$t("message.docManage.dialog_upload_files.limitingChoice")
      );
    },
    handleDeleteDialog(file, fileList) {
      this.editForm.fileList = fileList;
    },
  },
};
</script>
<style lang="scss">
.text_hint {
  width: 280px;
}
</style>
<style lang="scss" scoped>
:deep(.el-table__empty-block) {
  width: 100% !important;
  .el-empty__description {
    margin-top: 0px;
    p {
      line-height: 30px;
    }
  }
}
:deep(.el-table__fixed-right) {
  bottom: 0 !important;
  right: 0 !important;
}
.scrollbar-exists :deep(.el-table__fixed-right) {
  right: 4px !important;
}
.flex {
  display: flex;
}
.ruleConfig_box :deep(.el-dialog__title) {
  font-weight: bold;
}
.mr_8 {
  margin-right: 8px;
}
.ml_8 {
  margin-left: 8px;
}
.el-input {
  width: 220px;
}
.ruleconfig_staff {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  //   align-content: center;
  .el-input-number {
    width: 70px;
  }
  > div:not(:first-child) {
    margin-top: 12px;
  }
}
.simulate_box {
  display: flex;
  flex-direction: column;
  padding-left: 80px;
  .el-radio {
    line-height: 30px;
  }
}

.el-icon-question {
  margin-left: 5px;
}
.payoff {
  display: flex;
  width: 100%;
  height: 100%;
  .left-col {
    width: calc(10% - 20px);
    padding-top: 20px;
    margin-right: 20px;
    height: 100%;
    background-color: #fff;
    // 工程列表
    .list-wrapper {
      box-sizing: border-box;

      height: 100%;
      border-top: 2px solid #f3f5fd;
    }

    .list-item {
      box-sizing: border-box;

      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 45px;
      padding: 10px 20px;
      cursor: pointer;
      transition: all 0.3s ease-in;
      background-color: #fff;
      border-left: 3px solid transparent;
      border-bottom: 2px solid #f3f5fd;
    }
    .list-item.is-active {
      width: 100%;
      box-sizing: border-box;
      // border-left-color: #0e74d6;
      // background-color: #f3f6fd;
      border-left-color: #4e7cff;
      color: #4e7cff;
      background-color: rgba(78, 124, 255, 0.25) !important;
    }
  }

  .right-col {
    width: 90%;
    height: 100%;
    .top-col,
    .bottom-col {
      background: #fff;
    }
    .top-col {
      padding: 20px 25px;
      width: 100%;
      height: 10%;
      margin-bottom: 20px;
    }
    .bottom-col {
      width: 100%;
      height: calc(90% - 20px);
    }
  }
}
/* 查询表单 按钮样式 */
// .right-col ::v-deep .el-button {
//   border-color: #4e7cff;
// }

.scroll {
  overflow-y: auto;
}
.boxBottom {
  margin-top: 30px;
}
::v-deep .el-input__inner {
  line-height: 1px !important;
}
</style>
