<template>
  <!-- rtu站点管理 -->
  <div class="publicContainer">
    <div class="table-content">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
        <el-form-item label="站点类型" prop="siteType">
          <el-select v-model="queryParams.siteType" placeholder="请选择" clearable>
            <el-option v-for="dict in siteTypes" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="监测类型" prop="monitorTargetType">
          <el-select v-model="queryParams.monitorTargetType" placeholder="请选择" clearable>
            <el-option v-for="dict in monitorTargetTypes" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="在线状态" prop="onlineStatus">
          <el-select v-model="queryParams.onlineStatus" placeholder="请选择" clearable style="width: 100px">
            <el-option v-for="dict in onlineStatus" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="故障状态" prop="faultStatus">
          <el-select v-model="queryParams.faultStatus" placeholder="请选择" clearable>
            <el-option v-for="dict in faultStatus" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="建设方式" prop="buildType">
          <el-select v-model="queryParams.buildType" placeholder="请选择" clearable style="width: 100px">
            <el-option v-for="dict in camera_access_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button 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" v-hasPermi="['dataAnalysis:rtuSiteInfo:add']">新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['dataAnalysis:rtuSiteInfo:export']">
            导出
          </el-button>
        </el-col>
        <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

      <el-table v-loading="loading" :data="rtuSiteInfoList" max-height="650">
        <el-table-column label="序号" type="index" width="55" />
        <el-table-column label="站点类型" prop="siteType" width="90">
          <template #default="scope">
            <span>{{ selectDictLabel(siteTypes, scope.row.siteType) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="监测类型" prop="monitorTargetType" width="90">
          <template #default="scope">
            <span>{{ selectDictLabel(monitorTargetTypes, scope.row.monitorTargetType) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="站点编号" prop="stCode" width="130" />
        <el-table-column label="站点名称" prop="stName" show-overflow-tooltip />
        <el-table-column label="在线状态" prop="onlineStatus" width="90">
          <template #default="scope">
            <dict-tag :options="onlineStatus" :value="scope.row.onlineStatus" />
          </template>
        </el-table-column>
        <el-table-column label="故障状态" prop="faultStatus" width="90">
          <template #default="scope">
            <dict-tag :options="faultStatus" :value="scope.row.faultStatus" />
          </template>
        </el-table-column>
        <el-table-column label="建设方式" prop="buildType" width="90">
          <template #default="scope">
            <dict-tag :options="camera_access_type" :value="scope.row.buildType" />
          </template>
        </el-table-column>
        <el-table-column label="安装地址" prop="address" show-overflow-tooltip />
        <el-table-column label="安装日期" prop="installDate" width="120">
          <template #default="scope">
            <span>{{ parseTime(scope.row.installDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="负责人" prop="chargeUser" width="150" show-overflow-tooltip />
        <el-table-column label="操作" width="200" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['dataAnalysis:rtuSiteInfo:edit']">
              修改
            </el-button>
            <el-button link type="warning" icon="View" @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="getList"
      />
    </div>

    <el-dialog :title="dialogTitle" v-model="dialogShow" width="900px" append-to-body>
      <!-- 添加或修改RTU站点对话框 -->
      <el-form ref="rtuSiteInfoRef" :model="form" :rules="rules" label-width="140px" style="max-height: 730px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="站点编号" prop="stCode">
              <el-input v-model="form.stCode" placeholder="请输入站点编号" :disabled="form.id ? true : false" /> </el-form-item
          ></el-col>
          <el-col :span="12">
            <el-form-item label="站点名称" prop="stName">
              <el-input v-model="form.stName" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="站点类型" prop="siteType">
              <el-select v-model="form.siteType" placeholder="请选择" style="width: 100%" :disabled="dialogTitle == '修改RTU站点'">
                <el-option v-for="dict in siteTypes" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="监测类型" prop="monitorTargetType">
              <el-select v-model="form.monitorTargetType" placeholder="请选择" style="width: 100%">
                <el-option v-for="dict in monitorTargetTypes" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关联雨量站" prop="referRainStCode">
              <el-select v-model="form.referRainStCode" placeholder="请选择" style="width: 100%" filterable multiple>
                <el-option v-for="item in yulianglist" :key="item.stCode" :label="item.stName" :value="item.stCode"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="建设方式" prop="buildType">
              <el-select v-model="form.buildType" placeholder="请选择" style="width: 100%">
                <el-option v-for="dict in camera_access_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.buildType == 'share'">
            <el-form-item label="共享接口地址" prop="shareUrl">
              <el-input v-model="form.shareUrl" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属水系" prop="drainageSystem">
              <el-input v-model="form.drainageSystem" placeholder="请输入所属水系" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="高程系统" prop="elevationSystem">
              <el-select v-model="form.elevationSystem" placeholder="请选择" style="width: 100%">
                <el-option v-for="dict in elevationSystemTypes" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="额定电压(伏)" prop="ratedVoltage">
              <el-select v-model="form.ratedVoltage" placeholder="请选择" style="width: 100%">
                <el-option v-for="dict in rated_voltage" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="监测时间间隔(分钟)" prop="monitorIntervalMinute">
              <el-input v-model="form.monitorIntervalMinute" placeholder="请输入监测时间间隔" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="离线时间判断(分钟)" prop="offlineCheckMinute">
              <el-input v-model="form.offlineCheckMinute" placeholder="请输入离线时间判断" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否安装视频监控" prop="isCameraInstall">
              <el-select v-model="form.isCameraInstall" placeholder="请选择" clearable @change="clearChange2" style="width: 100%">
                <el-option v-for="item in flowType" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="form.isCameraInstall == 2">
            <el-form-item label="视频监控点选择项" prop="cameraInfoIndexs">
              <el-select style="width: 100%" v-model="form.cameraInfoIndexs" 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-col>

          <el-col :span="24">
            <el-form-item label="安装地址" prop="address">
              <el-input v-model="form.address" placeholder="请输入安装地址">
                <template #append>
                  <el-icon color="#81888e" size="23" @click="openMapDialog">
                    <LocationInformation />
                  </el-icon>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="经纬度" prop="lonLat">
              <el-input v-model="form.lonLat" placeholder="请输入经纬度"> </el-input>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="12">
            <el-form-item label="监测高度(米)" prop="elevationHeight">
              <el-input v-model="form.elevationHeight" placeholder="请输入监测高度" />
            </el-form-item>
          </el-col> -->
          <el-col :span="12">
            <el-form-item label="管网直径(m)" prop="pipelineDiameterTemp">
              <el-input-number :min="0" v-model="form.pipelineDiameterTemp" placeholder="请输入" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="井深(m)" prop="bottomBuriedDepthTemp">
              <el-input-number :min="0" v-model="form.bottomBuriedDepthTemp" placeholder="请输入" style="width: 100%" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="安装高度(米)" prop="installHeight">
              <el-input v-model="form.installHeight" placeholder="请输入安装高度" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="安装日期" prop="installDate">
              <el-date-picker
                clearable
                v-model="form.installDate"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择安装日期"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同日期" prop="contractDate">
              <el-date-picker
                clearable
                v-model="form.contractDate"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择合同日期"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人" prop="chargeUser">
              <el-input v-model="form.chargeUser" placeholder="请输入负责人" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="图片:" v-if="dialogShow" style="width: 90%" prop="coverPhotosFileList">
          <ImageFileUpload
            :limit="3"
            :saveFileArr="form.coverPhotosFileList"
            :listType="'picture-card'"
            :refField="'coverPhotos'"
            :refType="'rtu_site_info'"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="info" @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog title="选择单位地址" v-model="mapDialogOpen" width="1100px" append-to-body destroy-on-close class="dialog-detail-box">
      <!-- 地址选择 -->
      <div class="map-box" style="height: 600px">
        <mapBox :isShowTool="false" :isShowSearch="true" :isSelectAddress="true" @getPlace="getAddress"></mapBox>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="mapDialogOpen = false">确 定</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog title="监测项列表" v-model="detailOpen" width="1100px" append-to-body class="dialog-detail-box">
      <!-- 监测项列表 -->
      <monitorList :refresh="refresh" :row="currentRow"></monitorList>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="detailOpen = false">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="RtuSiteInfo">
import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
import { pagertuSiteInfo, addrtuSiteInfo, updatertuSiteInfo } from '@/api/dataAnalysis/rtuSiteInfo';
import { realtimeDataListByType } from '@/api/floodSys/oneMap.js';
import mapBox from '@/components/Map/index.vue';
import monitorList from './monitorList';
import { nextTick } from 'vue';
import { pagecameraResource } from '@/api/cameraResource/cameraResource';
const { proxy } = getCurrentInstance();
const { rated_voltage } = proxy.useDict('rated_voltage');
const camera_access_type = ref([
  { value: 'owner', label: '自建' },
  { value: 'share', label: '共享' },
]);
const siteTypes = proxy.fixDict['siteTypes']; //站点类型
const elevationSystemTypes = proxy.fixDict['elevationSystemTypes']; //高程系统/坐标系
const monitorTargetTypes = proxy.fixDict['monitorTargetTypes']; //监测对象类型
const onlineStatus = proxy.fixDict['onlineStatus']; //在线状态
const faultStatus = proxy.fixDict['faultStatus']; //故障状态
const yulianglist = ref([]); //雨量站下拉框
const rtuSiteInfoList = ref([]);
const dialogShow = ref(false);
const loading = ref(false);
const showSearch = ref(true);
const total = ref(0);
const dialogTitle = ref('');
const detailOpen = ref(false);
const currentRow = ref({});
const refresh = ref(1);
const mapDialogOpen = ref(false); //地图弹框
const flowType = ref([
  { label: '是', value: 2 },
  { label: '否', value: 0 },
]);
const cameraList = ref([]);
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    siteType: null,
    onlineStatus: null,
    faultStatus: null,
    buildType: null,
    monitorTargetType: '',
  },
  rules: {
    isCameraInstall: [{ required: true, message: '安装视频监控不能为空', trigger: 'change' }],
    siteType: [{ required: true, message: '站点类型不能为空', trigger: 'change' }],
    monitorTargetType: [{ required: true, message: '监测对象类型不能为空', trigger: 'change' }],
    buildType: [{ required: true, message: '建设方式不能为空', trigger: 'change' }],
    stName: [{ required: true, message: '站点不能为空', trigger: 'blur' }],
    stCode: [{ required: true, message: '站点编号不能为空', trigger: 'blur' }],
  },
});

const { queryParams, form, rules } = toRefs(data);

/** 搜索RTU站点列表 */
function getList() {
  loading.value = true;
  pagertuSiteInfo(queryParams.value).then(response => {
    rtuSiteInfoList.value = response.data;
    total.value = response.total;
    loading.value = false;
  });
}
//切换类型
function changeTargetType(val) {
  queryParams.value.monitorTargetType = val;
  getList();
}
// 取消按钮
function cancel() {
  dialogShow.value = false;
  reset();
}
function clearChange2() {
  if (form.value.isCameraInstall == 0) {
    form.value.cameraInfoIndexs = [];
  }
}
// 表单重置
function reset() {
  form.value = {
    id: null,
    address: '',
    belongId: '',
    belongType: '',
    buildType: '',
    chargeUser: '',
    contractDate: '',
    createBy: '',
    createTime: '',
    delFlag: '',
    drainageSystem: '',
    shareUrl: '',
    // elevationHeight: 0,
    elevationSystem: '',
    id: '',
    installDate: '',
    installHeight: 0,
    pipelineDiameterTemp: 0,
    bottomBuriedDepthTemp: 0,
    lonLat: '',
    monitorIntervalMinute: '',
    monitorTargetType: '',
    offlineCheckMinute: '',
    substituteStCode: '',
    referRainStCode: '',
    remark: '',
    requireDataCompleteRate: 0,
    siteType: '',
    stCode: '',
    stName: '',
    status: '',
    substituteStCode: '',
    tt: '',
    updateBy: '',
    updateTime: '',
    ut: '',
    isCameraInstall: '',
    cameraInfoIndexs: [],
    coverPhotosFileList: [],
  };
  proxy.resetForm('rtuSiteInfoRef');
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm('queryRef');
  queryParams.value.monitorTargetType = [];
  handleQuery();
}
// 新增操作
function handleAdd() {
  reset();
  dialogShow.value = true;
  dialogTitle.value = '新增RTU站点';
}

/** 修改按钮操作 */
function handleUpdate(row) {
  dialogShow.value = true;
  dialogTitle.value = '修改RTU站点';
  nextTick(() => {
    form.value = { ...form.value, ...row };
    if (!!form.value.referRainStCode) form.value.referRainStCode = form.value.referRainStCode.split(',');
    if (!!form.value.cameraInfoIndexs) form.value.cameraInfoIndexs = form.value.cameraInfoIndexs.split(',');
  });
}
//打开单位地址地图弹框
function openMapDialog() {
  mapDialogOpen.value = true;
  setTimeout(() => {
    if (window.newfiberMap && form.value.lonLat) {
      let position = form.value.lonLat.split(',');
      newfiberMap.removeByIds(['addressSearch']);
      newfiberMap.geojsonToMap(
        NewFiberMap.Data.ToGeoJSON.beansWktToGeoJson([
          {
            id: 'addressSearch',
            name: form.value.address,
            geometrys: `POINT(${position.join(' ')})`,
            type: NewFiberMap.Enum.VectorType.ICON,
            style: {
              url: '/src/assets/images/gisMap/marker.png',
              width: 50,
              height: 50,
            },
            labelOptions: {
              font: '13px HarmonyOS Sans SC-Bold, HarmonyOS Sans SC',
              color: 'rgb(255,255,255,1)',
              pixelOffset: [0, -38],
              backgroundColor: 'rgba(64,158,255,1)',
              showBackground: true,
              distanceDisplayCondition: [Number.MIN_VALUE, 55000],
            },
          },
        ])
      );
    }
  }, 100);
}
function getAddress(val) {
  form.value.address = val.caseAddress;
  form.value.lonLat = val.lonLat.join(',');
}

/** 提交按钮 */
function submitForm() {
  let params = { ...form.value };
  if (!!params.referRainStCode) params.referRainStCode = params.referRainStCode.join(',');
  if (!!params.cameraInfoIndexs) params.cameraInfoIndexs = params.cameraInfoIndexs.join(',');
  proxy.$refs['rtuSiteInfoRef'].validate(valid => {
    if (valid) {
      delete params.onlineStatus;
      delete params.faultStatus;
      if (dialogTitle.value == '修改RTU站点') {
        updatertuSiteInfo(params).then(response => {
          proxy.$modal.msgSuccess('修改成功');
          dialogShow.value = false;
          getList();
        });
      } else {
        addrtuSiteInfo(params).then(response => {
          proxy.$modal.msgSuccess('新增成功');
          dialogShow.value = false;
          getList();
        });
      }
    }
  });
}

/** 导出按钮操作 */
function handleExport() {
  proxy.download(
    '/business/rtuSiteInfo/export',
    {
      ...queryParams.value,
    },
    `rtuSiteInfo_${new Date().getTime()}.xlsx`
  );
}
//查看详情操作
function handleDetail(row) {
  detailOpen.value = true;
  currentRow.value = row;
  refresh.value = Math.random();
}
function getList3() {
  let param = {
    pageNum: 1,
    pageSize: 9999,
  };
  pagecameraResource(param).then(response => {
    cameraList.value = response.data;
  });
}

//获取雨量站数据
const getRealtimeRain = async () => {
  let params = {
    monitorTargetType: 'rainfall',
    orderBy: 'tt desc',
  };
  let res = await realtimeDataListByType(params);
  if (res && res.code == 200) {
    yulianglist.value = res.data || [];
  }
};

onMounted(() => {
  getList();
  getList3();
  getRealtimeRain();
});
</script>
<style lang="scss" scoped></style>