<template>
  <div class="app-container">
    <!-- 头部统计 -->
    <headerStatistics @change="changeTargetType" :monitorTargetType="queryParams.monitorTargetType"></headerStatistics>
    <div class="table-content">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="" prop="siteType">
          <el-select v-model="queryParams.siteType" placeholder="请选择站点类型">
            <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="onlineStatus">
          <el-select v-model="queryParams.onlineStatus" placeholder="请选择在线状态">
            <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="请选择故障状态">
            <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>
          <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="warning"
            plain
            icon="Download"
            @click="handleExport"
            v-hasPermi="['newfiber-business-base: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" border @selection-change="handleSelectionChange">
        <!-- <el-table-column type="selection" width="55"  /> -->
        <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="120" />
        <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="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="contractDate" width="120">
          <template #default="scope">
            <span>{{ parseTime(scope.row.contractDate, '{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="['newfiber-business-base:rtuSiteInfo:edit']"
            >
              修改
            </el-button>
            <el-button link type="primary" 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="title" v-model="dialogShow" width="900px" append-to-body>
      <!-- 添加或修改RTU站点对话框 -->
      <el-form ref="rtuSiteInfoRef" :model="form" :rules="rules" label-width="150px">
        <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="请选择" @change="changeSiteType">
                <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="请选择">
                <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="substituteStCode">
              <el-select v-model="form.substituteStCode" placeholder="请选择">
                <el-option
                  v-for="item in substituteStList"
                  :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="referRainStCode">
              <el-select v-model="form.referRainStCode" placeholder="请选择">
                <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="请选择">
                <el-option v-for="dict in buildTypes" :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="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="请选择">
                <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="请选择">
                <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="24">
            <el-form-item label="安装地址" prop="address">
              <el-input v-model="form.address" placeholder="请输入安装地址" @focus="openMapDialog">
                <template #append>
                  <el-icon color="#81888e" size="23"><LocationInformation /></el-icon>
                </template>
              </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="安装高度(米)" 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="请选择安装日期"
              >
              </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="请选择合同日期"
              >
              </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>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</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 { pagertuSiteInfo, getrtuSiteInfo, addrtuSiteInfo, updatertuSiteInfo } from '@/api/dataAnalysis/rtuSiteInfo';
import { listSite } from '@/api/dataAnalysis/repairdata';
import mapBox from '@/components/Map/index.vue';
import headerStatistics from '../components/headerStatistics.vue';
import monitorList from './monitorList';
const { proxy } = getCurrentInstance();
const { rated_voltage } = proxy.useDict('rated_voltage');
const siteTypes = proxy.fixDict['siteTypes']; //站点类型
const elevationSystemTypes = proxy.fixDict['elevationSystemTypes']; //高程系统/坐标系
const monitorTargetTypes = proxy.fixDict['monitorTargetTypes']; //监测对象类型
const buildTypes = proxy.fixDict['buildTypes']; //建设方式
const onlineStatus = proxy.fixDict['onlineStatus']; //在线状态
const faultStatus = proxy.fixDict['faultStatus']; //故障状态
const yulianglist = ref([]); //雨量站下拉框
const substituteStList = ref([]); //替补站点下拉
const rtuSiteInfoList = ref([]);
const dialogShow = ref(false);
const loading = ref(false);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref('');
const detailOpen = ref(false);
const currentRow = ref({});
const refresh = ref(1);
const mapDialogOpen = ref(false); //地图弹框
const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    siteType: null,
    onlineStatus: null,
    faultStatus: null,
    monitorTargetType: '',
  },
  rules: {
    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 reset() {
  form.value = {
    id: null,
    address: '',
    belongId: '',
    belongType: '',
    buildType: '',
    chargeUser: '',
    contractDate: '',
    createBy: '',
    createTime: '',
    delFlag: '',
    drainageSystem: '',
    // elevationHeight: 0,
    elevationSystem: '',
    faultStatus: '',
    id: '',
    installDate: '',
    installHeight: 0,
    lonLat: '',
    monitorIntervalMinute: '',
    monitorTargetType: '',
    offlineCheckMinute: '',
    substituteStCode: '',
    referRainStCode: '',
    onlineStatus: '',
    referRainStCode: '',
    remark: '',
    requireDataCompleteRate: 0,
    siteType: '',
    stCode: '',
    stName: '',
    status: '',
    substituteStCode: '',
    tt: '',
    updateBy: '',
    updateTime: '',
    ut: '',
  };
  proxy.resetForm('rtuSiteInfoRef');
}

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

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm('queryRef');
  queryParams.value.monitorTargetType = '';
  handleQuery();
}

// 多选框选中数据
function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

//修改站点类型下拉
function changeSiteType() {
  form.value.substituteStCode = '';
  listSite({ samePlatformSt: form.value.stCode, existProperty: form.value.siteType }).then(res => {
    //替补站点
    substituteStList.value = res.data;
  });
}

//获取下拉数据
function selectionList(row) {
  let apiArr = [
    listSite({ samePlatformSt: row.stCode, existProperty: row.siteType }),
    listSite({ samePlatformSt: row.stCode, existProperty: 'pj' }),
  ];
  Promise.all(apiArr).then(result => {
    //替补站点
    substituteStList.value = result[0].data;
    //雨量站下拉
    yulianglist.value = result[1].data;
    getrtuSiteInfo(row.id).then(response => {
      form.value = response.data;
      dialogShow.value = true;
      title.value = '修改RTU站点';
    });
  });
}

/** 修改按钮操作 */
function handleUpdate(row) {
  reset();
  selectionList(row);
}
//打开单位地址地图弹框
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: NewFiberMapConfig.SDK_INIT_SRC_PREFIX + '/static/images/running_path/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() {
  proxy.$refs['rtuSiteInfoRef'].validate(valid => {
    if (valid) {
      if (form.value.id != null) {
        updatertuSiteInfo(form.value).then(response => {
          proxy.$modal.msgSuccess('修改成功');
          dialogShow.value = false;
          getList();
        });
      } else {
        addrtuSiteInfo(form.value).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();
}
getList();
</script>
<style lang="scss" scoped>
.app-container {
  background: #f1f1f1;
  .table-content {
    background: #ffffff !important;
    padding: 20px;
    margin-top: 10px;
  }
}
</style>