<template>
  <!-- 排水防涝子系统 长效运维  易涝点治理-->
  <div class="publicContainer">
    <!-- 搜索区域 -->
    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
      <el-form-item label="易涝点名称" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入" clearable @keyup.enter="handleQuery" />
      </el-form-item>
      <el-form-item label="易涝点类型" prop="waterlogging">
        <el-select v-model="queryParams.waterlogging" placeholder="请选择" clearable>
          <el-option v-for="item in waterlogging_type" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="风险级别" prop="riskLevel">
        <el-select v-model="queryParams.riskLevel" placeholder="请选择" clearable>
          <el-option v-for="item in levelType" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否安装视频监控" prop="isCameraInstall">
        <el-select v-model="queryParams.isCameraInstall" placeholder="请选择" clearable>
          <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="积水原因选择" prop="originType">
        <el-select v-model="queryParams.originType" placeholder="请选择" clearable>
          <el-option v-for="item in waterlogging_origin" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否专人值守" prop="isPersonDuty">
        <el-select v-model="queryParams.isPersonDuty" placeholder="请选择" clearable>
          <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="是否实施工程治理" prop="isProjectAdminister">
        <el-select v-model="queryParams.isProjectAdminister" placeholder="请选择" clearable>
          <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button type="success" icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 按钮区域 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
      </el-col>
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getDataList"></right-toolbar>
    </el-row>
    <!-- 表格 -->
    <el-table v-loading="tableLoading" :data="tableData" max-height="650">
      <el-table-column label="易涝点名称" prop="name" width="200" />
      <el-table-column label="积水原因" prop="originType" width="200">
        <template #default="scope">
          <dict-tag :options="waterlogging_origin" :value="scope.row.originType" />
        </template>
      </el-table-column>
      <el-table-column label="风险级别" prop="riskLevel">
        <template #default="scope">
          <dict-tag :options="levelType" :value="scope.row.riskLevel" />
        </template>
      </el-table-column>
      <el-table-column label="易涝点位置" prop="address" width="300" />
      <el-table-column label="易涝点经度" prop="longitude" width="100" />
      <el-table-column label="易涝点纬度" prop="latitude" width="100" />
      <el-table-column label="行政辖区" prop="jurisdiction" width="200" />
      <el-table-column label="所属街道" prop="belongsStreet" width="200" />
      <el-table-column label="是否为易涝点专项行动方案工程整治点位" prop="isEngineeringRenovation" width="200">
        <template #default="scope">
          <dict-tag :options="flowType" :value="scope.row.isEngineeringRenovation" />
        </template>
      </el-table-column>
      <el-table-column label="是否为易涝点整治专项行动方案点位" prop="isPlanRectification" width="200">
        <template #default="scope">
          <dict-tag :options="flowType" :value="scope.row.isPlanRectification" />
        </template>
      </el-table-column>
      <el-table-column label="视频监控等设备安装情况" prop="isCameraInstall" width="150">
        <template #default="scope">
          <dict-tag :options="flowType" :value="scope.row.isCameraInstall" />
        </template>
      </el-table-column>
      <el-table-column label="本年度发生积水次数" prop="yearHappenCount" width="120" />
      <el-table-column label="联系人" prop="contactsPerson" width="100" />
      <el-table-column label="联系手机号" prop="telephone" width="100" />
      <el-table-column label="操作" width="220" fixed="right">
        <template #default="scope">
          <el-button type="warning" link icon="Edit" @click="handleEdit(scope.row)">修改</el-button>
          <el-button type="danger" link icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
          <el-button link type="primary" icon="Edit" @click="handleDetail(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getDataList"
    />
    <!-- 内涝治理点详情 -->
    <el-dialog title="内涝治理点详情" v-model="dialogDetail" width="1000px" append-to-body>
      <WaterPointDetail v-if="dialogDetail" :detailObj="detailObj"></WaterPointDetail>
    </el-dialog>
    <!-- 易涝点新增修改弹窗 -->
    <el-dialog :title="dialogTitle" v-model="dialogAdd" width="1200px" append-to-body>
      <el-form ref="formRef" :model="formData" :rules="rulesForm" label-width="280px" class="publicForm flex50">
        <el-form-item label="易涝点名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="易涝点类型" prop="waterlogging">
          <el-select v-model="formData.waterlogging" placeholder="请选择" clearable>
            <el-option v-for="item in waterlogging_type" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="行政辖区" prop="jurisdiction">
          <el-input v-model="formData.jurisdiction" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="所属街道" prop="belongsStreet">
          <el-input v-model="formData.belongsStreet" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="易涝点位置" prop="address">
          <el-input v-model="formData.address" controls-position="right" placeholder="请输入">
            <template #append>
              <el-button type="primary" @click="showMap = true">获取经纬度</el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="contactsPerson">
          <el-input v-model="formData.contactsPerson" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="联系人手机号" prop="telephone">
          <el-input v-model="formData.telephone" placeholder="请输入" maxlength="11" />
        </el-form-item>
        <el-form-item label="积水原因" prop="originType">
          <el-select v-model="formData.originType" placeholder="请选择" clearable>
            <el-option v-for="item in waterlogging_origin" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="风险级别" prop="riskLevel">
          <el-select v-model="formData.riskLevel" placeholder="请选择" clearable>
            <el-option v-for="item in levelType" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否为易涝点专项行动方案工程整治点位" prop="isEngineeringRenovation">
          <el-select v-model="formData.isEngineeringRenovation" placeholder="请选择" clearable>
            <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否为易涝点专项行动方案整治点位" prop="isPlanRectification">
          <el-select v-model="formData.isPlanRectification" placeholder="请选择" clearable>
            <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否提前清掏疏浚" prop="isClearDredg">
          <el-select v-model="formData.isClearDredg" placeholder="请选择" clearable>
            <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否消除点位" prop="isEliminate">
          <el-select v-model="formData.isEliminate" placeholder="请选择" clearable>
            <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否专人值守" prop="isPersonDuty">
          <el-select v-model="formData.isPersonDuty" placeholder="请选择" clearable>
            <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否实施工程治理" prop="isProjectAdminister">
          <el-select v-model="formData.isProjectAdminister" placeholder="请选择" clearable @change="clearChange">
            <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="工程项目选择项" prop="projectInfoIds">
          <el-select v-model="formData.projectInfoIds" placeholder="请选择" clearable :disabled="formData.isProjectAdminister == 0">
            <el-option v-for="item in projectList" :key="item.id" :label="item.projectName" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否提前备置排涝设备" prop="isStandbyEquipment">
          <el-select v-model="formData.isStandbyEquipment" placeholder="请选择" clearable @change="clearChange1">
            <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="内涝积水电监测站" prop="stCodes">
          <el-select v-model="formData.stCodes" placeholder="请选择" clearable :disabled="formData.isStandbyEquipment == 0">
            <el-option v-for="item in stCodesList" :key="item.stCode" :label="item.stName" :value="item.stCode" />
          </el-select>
        </el-form-item>
        <el-form-item label="是否安装视频监控" prop="isCameraInstall">
          <el-select v-model="formData.isCameraInstall" placeholder="请选择" @change="clearChange2">
            <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="视频监控点选择项" prop="cameraInfoIndexList" v-if="formData.isCameraInstall == 2">
          <el-select v-model="formData.cameraInfoIndexList" placeholder="请选择" clearable filterable multiple>
            <el-option v-for="item in cameraList" :key="item.indexCode" :label="item.name" :value="item.indexCode" />
          </el-select>
        </el-form-item>
        <el-form-item label="本年度发生积水次数" prop="yearHappenCount">
          <el-input v-model="formData.yearHappenCount" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="本年度积水最大深度(mm)" prop="yearMaxDepth">
          <el-input-number v-model="formData.yearMaxDepth" placeholder="请输入" style="width: 100%" controls-position="right" />
        </el-form-item>
        <el-form-item label="本年度积水最大深度退水时长(h)" prop="yearMaxHour">
          <el-input v-model="formData.yearMaxHour" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="info" @click="dialogAdd = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 地图选取位置 -->
    <el-dialog title="地图选取位置(可搜索可直接点击获取)" v-model="showMap" width="800px" append-to-body>
      <MapPosition v-if="showMap" :isShowSearch="true" :isShowTool="false" :isSelectAddress="true" @getPlace="getAddress"></MapPosition>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="showMap = false">确 定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="易涝点治理">
import { waterPointPage, waterPointEdit, waterPointAdd, waterPointDetail, waterPointDelete } from '@/api/floodSys/repair';
import { pagecameraResource } from '@/api/cameraResource/cameraResource';
import { getProjectInfoNewPage } from '@/api/project/projectInformationNew';
// import { pagertuSiteInfo } from '@/api/dataAnalysis/rtuSiteInfo';
import { rtuSiteInfolist } from '@/api/cameraResource/siteCameraRelation';
import WaterPointDetail from './waterPointDetail.vue'; //详情
import MapPosition from '@/components/Map/index.vue'; //获取地图点位信息

const { proxy } = getCurrentInstance();

const tableData = ref([]);
const tableLoading = ref(true);
const total = ref(0);
const dialogDetail = ref(false);
const showSearch = ref(true);
const dialogTitle = ref('');
const dialogAdd = ref(false);
const showMap = ref(false);
const detailObj = ref({});
const stCodesList = ref([]);
const projectList = ref([]);
const cameraList = ref([]);

const allData = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    riskLevel: '',
    name: '',
    waterlogging: '',
    originType: '',
    isProjectAdminister: '',
    isPersonDuty: '',
    isCameraInstall: '',
  },
  formData: {
    address: '',
    longitude: '',
    latitude: '',
    name: '',
    belongsStreet: '',
    cameraIndexs: '',
    contactsPerson: '',
    isCameraInstall: '',
    isClearDredg: '',
    isEliminate: '',
    isEngineeringRenovation: '',
    isPersonDuty: '',
    isPlanRectification: '',
    isProjectAdminister: '',
    isStandbyEquipment: '',
    originType: '',
    jurisdiction: '',
    riskLevel: '',
    telephone: '',
    waterlogging: '',
    yearHappenCount: '',
    yearMaxDepth: '',
    yearMaxHour: '',
  },
  rulesForm: {
    name: [{ required: true, message: '请输入', trigger: 'blur' }],
    isCameraInstall: [{ required: true, message: '请选择', trigger: 'change' }],
    isClearDredg: [{ required: true, message: '请选择', trigger: 'change' }],
    isEliminate: [{ required: true, message: '请选择', trigger: 'change' }],
    isEngineeringRenovation: [{ required: true, message: '请选择', trigger: 'change' }],
    isPersonDuty: [{ required: true, message: '请选择', trigger: 'change' }],
    isPlanRectification: [{ required: true, message: '请选择', trigger: 'change' }],
    isProjectAdminister: [{ required: true, message: '请选择', trigger: 'change' }],
    isStandbyEquipment: [{ required: true, message: '请选择', trigger: 'change' }],
    originType: [{ required: true, message: '请选择', trigger: 'change' }],
    waterlogging: [{ required: true, message: '请选择', trigger: 'change' }],
    telephone: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' }],
  },
});
const { queryParams, formData, rulesForm } = toRefs(allData);
const { waterlogging_type } = proxy.useDict('waterlogging_type'); //易涝点类型  字典数据
const { waterlogging_origin } = proxy.useDict('waterlogging_origin'); // 易涝点原因 字典数据

const levelType = ref([
  { label: 'I级', value: 'one' },
  { label: 'II级', value: 'two' },
  { label: 'III级', value: 'three' },
]);
const flowType = ref([
  { label: '是', value: 2 },
  { label: '否', value: 0 },
]);

/** 获取查询数据列表 */
function getDataList() {
  tableLoading.value = true;
  waterPointPage(queryParams.value).then(response => {
    tableData.value = response.data;
    total.value = response.total;
    tableLoading.value = false;
  });
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getDataList();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm('queryRef');
  handleQuery();
}
// 新增
function handleAdd() {
  proxy.resetForm('formRef'); //清空表单
  dialogTitle.value = '新增易涝积水点';
  dialogAdd.value = true;
}
// 修改
function handleEdit(row) {
  const postId = row.id;
  waterPointDetail(postId).then(response => {
    dialogAdd.value = true;
    dialogTitle.value = '修改易涝积水点';
    nextTick(() => {
      formData.value = response.data;
    });
  });
}
/** 提交按钮 */
function submitForm() {
  proxy.$refs['formRef'].validate(valid => {
    if (valid) {
      if (formData.value.isCameraInstall == 0) formData.value.cameraInfoIndexList = [];
      if (dialogTitle.value == '修改易涝积水点') {
        waterPointEdit(formData.value).then(response => {
          proxy.$modal.msgSuccess('修改成功');
          dialogAdd.value = false;
          getDataList();
        });
      } else {
        waterPointAdd(formData.value).then(response => {
          proxy.$modal.msgSuccess('新增成功');
          dialogAdd.value = false;
          getDataList();
        });
      }
    }
  });
}
// 删除
function handleDelete(row) {
  const postIds = row.id;
  proxy.$modal
    .confirm('是否确认删除该数据项？')
    .then(function () {
      return waterPointDelete(postIds);
    })
    .then(() => {
      getDataList();
      proxy.$modal.msgSuccess('删除成功');
    })
    .catch(() => {});
}
// 获取位置
function getAddress(val) {
  formData.value.address = val.caseAddress;
  formData.value.longitude = val.lonLat[0];
  formData.value.latitude = val.lonLat[1];
}
/** 详情按钮操作 */
function handleDetail(row) {
  waterPointDetail(row.id).then(response => {
    detailObj.value = response.data;
    dialogDetail.value = true;
  });
}

/** 查询RTU站点列表 */
function getList() {
  let param = {
    monitorTargetType: 'waterlogging',
  };
  rtuSiteInfolist(param).then(response => {
    stCodesList.value = response.data;
  });
}

function getList2() {
  let param = {
    pageNum: 1,
    pageSize: 9999,
  };
  getProjectInfoNewPage(param).then(response => {
    projectList.value = response.data;
  });
}

function getList3() {
  let param = {
    pageNum: 1,
    pageSize: 9999,
  };
  pagecameraResource(param).then(response => {
    cameraList.value = response.data;
  });
}

function clearChange() {
  if (formData.value.isProjectAdminister == 0) {
    formData.value.projectInfoIds = '';
  }
}

function clearChange1() {
  if (formData.value.isStandbyEquipment == 0) {
    formData.value.stCodes = '';
  }
}

function clearChange2() {
  if (formData.value.isCameraInstall == 0) {
    formData.value.cameraInfoIndexList = [];
  }
}

onMounted(() => {
  getDataList();
  getList();
  getList2();
  getList3();
});
</script>