<template>
  <div id="gwfx">
    <!-- 公用部分,所有弹窗都要的分区查询,由于类型较多,不封装,通过复制代码公用 -->
    <div class="JCFX_Com_SearchBox">
      <el-form :model="Search_form" label-width="auto" :inline="true">
        <el-form-item :label="TypeID == 'sewage' ? '污水系统' : '汇水分区'">
          <el-select
            v-model="Search_form.oneID"
            style="width: 160px"
            @change="OneChange()"
          >
            <el-option
              v-for="item in AllData.oneOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="TypeID == 'sewage' ? '污水片区' : '汇水片区'">
          <el-select
            v-model="Search_form.twoID"
            style="width: 160px"
            @change="TwoChange()"
          >
            <el-option
              v-for="item in AllData.twoOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="TypeID == 'sewage' ? '污水干管' : '雨水干管'">
          <el-select
            v-model="Search_form.threeID"
            style="width: 160px"
            @change="ThreeChange()"
          >
            <el-option
              v-for="item in AllData.threeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="排水单元">
          <el-select v-model="Search_form.fourID" style="width: 160px">
            <el-option
              v-for="item in AllData.fourOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="井编号">
          <el-input v-model="Search_form.JBH" style="width: 160px" clearable />
        </el-form-item>
        <!-- <el-form-item label="复勘状态">
          <el-select v-model="Search_form.FKID" style="width: 160px">
            <el-option
              v-for="item in AllData.FKOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item label="位置关键字">
          <el-input v-model="Search_form.GJZ" style="width: 240px" clearable />
        </el-form-item>
        <el-form-item>
          <el-button color="#0B9BFF" :icon="Search" @click="getTableData">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 业务部分 -->
    <div class="JCFX_Com_Body">
      <el-table
        class="JCFX_Com_Table"
        :data="AllData.tableData"
        height="100%"
        style="width: 100%"
        stripe
        v-loading="AllData.TBloading"
        element-loading-text="加载中..."
        element-loading-background="rgba(0, 0, 0, 0.8)"
      >
        <el-table-column type="index" label="序号" width="60" />
        <!-- <el-table-column
          prop="dataName"
          label="检查井号"
          width="100"
          show-overflow-tooltip
        /> -->
        <el-table-column prop="stCode" label="监测编号" width="100" show-overflow-tooltip
          ><template #default="scope">
            {{ scope.row.stCode ? scope.row.stCode : "-" }}
          </template>
        </el-table-column>
        <el-table-column prop="address" label="监测位置" width="180">
          <template #default="scope">
            <div class="color_blue" @click="ClickZBQJ2(scope.row)">
              {{ scope.row.address }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="tt" label="监测日期" width="140">
          <template #default="scope">
            {{ scope.row.tt ? scope.row.tt : "-" }}
          </template>
        </el-table-column>
        <el-table-column prop="problemAnalysis" label="问题分析">
          <template #default="scope">
            {{ scope.row.problemAnalysis ? scope.row.problemAnalysis : "-" }}
          </template>
        </el-table-column>
        <el-table-column prop="duration" label="持续时长" width="100">
          <template #default="scope">
            {{ scope.row.duration ? scope.row.duration : "-" }}
          </template>
        </el-table-column>
        <el-table-column prop="watchName" label="所属分区" width="120">
          <template #default="scope">
            {{ scope.row.watchName ? scope.row.watchName : "-" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button type="primary" link @click="rowIgnore(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="paginationBox">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="Search_form.query.size"
          :total="Search_form.query.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup name="gwfx">
import { ref, reactive, toRefs, onMounted, nextTick } from "vue";
import usepartitionStore from "@/store/modules/partition";
import { listPipelineDefectRisk } from "@/api/MonitoringAnalysis";
const useStore = usepartitionStore();
import { Search } from "@element-plus/icons-vue";
import bus from "@/bus";
const props = defineProps({
  //污水/雨水
  TypeID: {
    type: [String],
    default: "sewage",
  },
  //当前父页面选择的层级数据
  FenQuData: {
    type: Array,
  },
  //点击echarts图形对应的数据名称
  lastFQName: {
    type: String,
  },
  // 时间
  TimerData: {
    type: Array,
  },
});
const Search_form = reactive({
  oneID: "",
  twoID: "",
  threeID: "",
  fourID: "",
  FKID: "",
  JBH: "",
  GJZ: "",
  query: {
    current: 1,
    size: 10,
    total: 0,
  },
});
const AllData = reactive({
  oneOptions: [{ name: "全部", shortName: "全部", id: "" }],
  twoOptions: [{ name: "全部", shortName: "全部", id: "" }],
  threeOptions: [{ name: "全部", shortName: "全部", id: "" }],
  fourOptions: [{ name: "全部", shortName: "全部", id: "" }],
  FKOptions: [
    { name: "全部", id: "" },
    { name: "已复勘", id: "true" },
    { name: "未复勘", id: "false" },
  ],
  tableData: [],
  TBloading: false,
});
const handleSizeChange = (val) => {
  Search_form.query.size = val;
  console.log(Search_form.query);
  getTableData();
};
const handleCurrentChange = (val) => {
  Search_form.query.current = val;
  console.log(Search_form.query);
  getTableData();
};
// 一级下拉框选择
const OneChange = () => {
  console.log(Search_form.oneID);
  //   通过id获取到下一级数据
  AllData.twoOptions = [{ name: "全部", shortName: "全部", id: "" }];
  Search_form.twoID = "";
  AllData.threeOptions = [{ name: "全部", shortName: "全部", id: "" }];
  Search_form.threeID = "";
  AllData.fourOptions = [{ name: "全部", shortName: "全部", id: "" }];
  Search_form.fourID = "";
  AllData.oneOptions.forEach((element) => {
    if (element.id == Search_form.oneID) {
      AllData.twoOptions = AllData.twoOptions.concat(element.childList);
    }
  });
};
// 二级下拉框选择
const TwoChange = () => {
  console.log(Search_form.twoID);
  //通过id获取到下一级数据
  AllData.threeOptions = [{ name: "全部", shortName: "全部", id: "" }];
  Search_form.threeID = "";
  AllData.fourOptions = [{ name: "全部", shortName: "全部", id: "" }];
  Search_form.fourID = "";
  AllData.twoOptions.forEach((element) => {
    if (element.id == Search_form.twoID) {
      AllData.threeOptions = AllData.threeOptions.concat(element.childList);
    }
  });
};
// 三级下拉框选择
const ThreeChange = () => {
  console.log(Search_form.threeID);
  //通过id获取到下一级数据
  AllData.fourOptions = [{ name: "全部", shortName: "全部", id: "" }];
  Search_form.fourID = "";
  AllData.threeOptions.forEach((element) => {
    if (element.id == Search_form.threeID) {
      AllData.fourOptions = AllData.fourOptions.concat(element.childList);
    }
  });
};
// 获取数据
const getTableData = () => {
  AllData.TBloading = true;
  AllData.tableData = [];
  listPipelineDefectRisk({
    regionType: props.TypeID, //分区类型（sewage：污水 || rain：雨水）
    analysisType: "risk", //分析类型：（defect：本地缺陷 || risk：风险分析）
    queryType: "overFlow", //查询类型：（slope：坡度 || big_cover_small：大管套小管 || mix：混接 || sewageQualityAbnormal：水质异常 || outerWaterInject：外水注入 || siltRisk：淤堵风险 || fullPipe：满管 || overFlow：溢流风险 || groundwaterInflow：地下水渗入 || sewageInject：污水注入）
    startTime: props.TimerData[0],
    endTime: props.TimerData[1],
    oneGradeId: Search_form.oneID, //一级分区id
    twoGradeId: Search_form.twoID, //二级分区id
    threeGradeId: Search_form.threeID, //三级分区id
    fourGradeId: Search_form.fourID, //四级分区id
    pageNum: Search_form.query.current,
    pageSize: Search_form.query.size,
    pointNumber: Search_form.JBH, //井编号
    resurveyFlag: Search_form.FKID, //复勘状态
    location: Search_form.GJZ, //位置关键字
  }).then(
    (res) => {
      AllData.TBloading = false;
      if (res && res.code == 200) {
        AllData.tableData = res.data.dataSiteRelationVoList;
        Search_form.query.total = res.total;
      }
    },
    (err) => {
      AllData.TBloading = false;
      // 失败
    }
  );
};

const rowIgnore = (item) => {
  item.RefName = "ylfxJCFX";
  item.daterange = [item.tt + " 00:00:00", item.tt + " 23:59:59"];
  bus.emit("DynamicBus", item);
  // localStorage.setItem("JCFXDialogTimer", item.tt);
};

// 打开周边全景
const ClickZBQJ2 = (item) => {
  item.RefName = "zhoubianjiejing";
  item.NoPromise = true;
  item.Getmenuarr = [
    {
      menuName: "周边全景",
      moduleName: "zhoubianjiejing",
      pointName: "",
      pointType: "",
      show: true,
    },
    {
      menuName: "管网档案",
      moduleName: "guanwangpoumian",
      pointName: "",
      pointType: "",
      show: true,
    },
  ];
  item.comIDs = ["zhoubianjiejing", "guanwangpoumian"];
  bus.emit("DynamicBus", item);
};
onMounted(() => {
  // 下拉框赋值
  nextTick(() => {
    // 一级菜单选项赋值
    let Data = props.TypeID == "sewage" ? useStore.sewageData : useStore.rainData;
    AllData.oneOptions = AllData.oneOptions.concat(Data);
    // 根据外层点击的层级赋值
    console.log(props.FenQuData);
    console.log(props.lastFQName);
    // 通过判断父级FenQuData选择了几层数据,确定lastFQName对应的层级,FenQuData有一条非空数据:lastFQName对应一级...
    let CengJi = 0;
    props.FenQuData.forEach((element) => {
      if (element.abbreviation != "") CengJi++;
    });
    // 根据层级的数量来动态判断默认选中下拉框
    if (CengJi == 2) {
      // 赋值一级
      Search_form.oneID = Number(props.FenQuData[1].id);
      // 二级下拉框数据赋值
      AllData.oneOptions.forEach((element) => {
        if (element.id == Search_form.oneID) {
          AllData.twoOptions = AllData.twoOptions.concat(element.childList);
        }
      });
      // 二级下拉框选中以及给三级下拉框赋值
      AllData.twoOptions.forEach((element) => {
        if (element.shortName == props.lastFQName) {
          Search_form.twoID = element.id;
          //给三级下拉框赋值
          AllData.threeOptions = AllData.threeOptions.concat(element.childList);
        }
      });
    } else if (CengJi == 3) {
      // 赋值一级
      Search_form.oneID = Number(props.FenQuData[1].id);
      // 赋值二级
      Search_form.twoID = Number(props.FenQuData[2].id);
      // 二级下拉框数据赋值
      AllData.oneOptions.forEach((element) => {
        if (element.id == Search_form.oneID) {
          AllData.twoOptions = AllData.twoOptions.concat(element.childList);
        }
      });
      // 二级下拉框选中以及给三级下拉框赋值
      AllData.twoOptions.forEach((element) => {
        if (element.id == Search_form.twoID) {
          Search_form.twoID = element.id;
          //给三级下拉框赋值
          AllData.threeOptions = AllData.threeOptions.concat(element.childList);
        }
      });
      //三级下拉框选中以及给四级下拉框赋值
      AllData.threeOptions.forEach((element) => {
        if (element.shortName == props.lastFQName) {
          Search_form.threeID = element.id;
          //给三级下拉框赋值
          AllData.fourOptions = AllData.fourOptions.concat(element.childList);
        }
      });
    } else if (CengJi == 4) {
      // 赋值一级
      Search_form.oneID = Number(props.FenQuData[1].id);
      // 赋值二级
      Search_form.twoID = Number(props.FenQuData[2].id);
      // 赋值三级
      Search_form.threeID = Number(props.FenQuData[3].id);
      // 二级下拉框数据赋值
      AllData.oneOptions.forEach((element) => {
        if (element.id == Search_form.oneID) {
          AllData.twoOptions = AllData.twoOptions.concat(element.childList);
        }
      });
      // 二级下拉框选中以及给三级下拉框赋值
      AllData.twoOptions.forEach((element) => {
        if (element.id == Search_form.twoID) {
          Search_form.twoID = element.id;
          //给三级下拉框赋值
          AllData.threeOptions = AllData.threeOptions.concat(element.childList);
        }
      });
      //三级下拉框选中以及给四级下拉框赋值
      AllData.threeOptions.forEach((element) => {
        if (element.id == Search_form.threeID) {
          Search_form.threeID = element.id;
          //给三级下拉框赋值
          AllData.fourOptions = AllData.fourOptions.concat(element.childList);
        }
      });
      //四级下拉框选中
      AllData.fourOptions.forEach((element) => {
        if (element.shortName == props.lastFQName) {
          Search_form.fourID = element.id;
        }
      });
    } else {
      // CengJi =1
      AllData.oneOptions.forEach((element) => {
        if (element.shortName == props.lastFQName) {
          Search_form.oneID = element.id;
          //给二级下拉框赋值
          AllData.twoOptions = AllData.twoOptions.concat(element.childList);
        }
      });
    }
    getTableData();
  });
});
</script>

<style lang="scss" scoped>
#gwfx {
  width: 100%;
  height: 100%;

  :deep(.JCFX_Com_SearchBox) {
    height: 110px;
    width: 100%;
    .el-form-item__label {
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 14px;
      color: #ccdfff;
    }
    .el-input__wrapper {
      background: #0d2359;
      border-radius: 6px;
      border: 1px solid #0b9bff;
      box-shadow: none;

      .el-input__inner {
        color: #8fbffe;
      }
    }
    .el-select {
      background: #0d2359;
    }
  }
  .JCFX_Com_Body {
    width: 100%;
    height: calc(100% - 165px);

    :deep(.JCFX_Com_Table) {
      &.el-table {
        font-family: Source Han Sans CN;
        background: none;
        width: 100%;
        height: calc(100% - 50px);
      }
      .el-table__inner-wrapper::before {
        height: 0;
      }
      tr {
        background: #ffffff00;
      }
      td.el-table__cell,
      th.el-table__cell.is-leaf {
        border-color: #ffffff00;
        color: #ccdfff;
        font-weight: lighter !important;
      }
      &.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
        background: #0d2359;
      }
      .el-table__header-wrapper th {
        background: #153990 !important;
      }

      th {
        color: #ffffff !important;
        font-size: 14px;
      }

      &.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
        background: rgba(13, 57, 139, 0.7);
      }

      .color_aqua {
        color: #00fcff;
      }

      .color_blue {
        color: #2cb7ff;
        font-size: 14px;
        font-weight: 100 !important;
        cursor: pointer;
      }
    }
  }
  // 分页样式
  .paginationBox {
    padding-top: 15px;
    text-align: right;
    display: flex;
    justify-content: flex-end;
    flex-direction: row;
    flex-wrap: nowrap;
    font-family: Source Han Sans CN;
  }
}
</style>