<template>
  <div id="dgtxg">
    <!-- 公用部分,所有弹窗都要的分区查询,由于类型较多,不封装,通过复制代码公用 -->
    <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="startPointNumber"
          label="检查井号"
          width="100"
          show-overflow-tooltip
        />
        <el-table-column
          prop="pipelineCode"
          label="管段编号"
          width="100"
          show-overflow-tooltip
          ><template #default="scope">
            {{ scope.row.pipelineCode ? scope.row.pipelineCode : "-" }}
          </template>
        </el-table-column>
        <el-table-column prop="location" label="位置" width="180">
          <template #default="scope">
            <div class="color_blue" @click="ClickZBQJ(scope.row)">
              {{ scope.row.location }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="pipelineTexture" label="管网材质" width="100">
          <template #default="scope">
            {{ scope.row.pipelineTexture ? scope.row.pipelineTexture : "-" }}
          </template>
        </el-table-column>
        <el-table-column prop="defectTypeName" label="分析缺陷" width="100">
          <template #default="scope">
            {{ scope.row.defectTypeName ? scope.row.defectTypeName : "-" }}
          </template>
        </el-table-column>
        <el-table-column prop="resurveyFlag" label="复勘情况" width="100">
          <template #default="scope">
            <div :class="[scope.row.resurveyFlag == '已复勘' ? 'color_aqua' : '']">
              {{ scope.row.resurveyFlag }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="problemDescription" label="问题描述">
          <template #default="scope">
            {{ scope.row.problemDescription ? scope.row.problemDescription : "-" }}
          </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="dgtxg">
import { ref, reactive, toRefs, onMounted, nextTick } from "vue";
import { listPipelineDefectRisk } from "@/api/MonitoringAnalysis";
import usepartitionStore from "@/store/modules/partition";
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,
  },
});
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: "defect", //分析类型：（defect：本地缺陷 || risk：风险分析）
    queryType: "big_cover_small", //查询类型：（slope：坡度 || big_cover_small：大管套小管 || mix：混接 || sewageQualityAbnormal：水质异常 || outerWaterInject：外水注入 || siltRisk：淤堵风险 || fullPipe：满管 || overFlow：溢流风险 || groundwaterInflow：地下水渗入 || sewageInject：污水注入）
    startTime: "",
    endTime: "",
    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.problemInfoVoList;
      Search_form.query.total = res.total;
    }
  });
};
// 打开周边全景
const ClickZBQJ = (item) => {
  item.RefName = "zhoubianjiejing";
  item.NoPromise = true;
  item.Getmenuarr = [
    {
      menuName: "周边全景",
      moduleName: "zhoubianjiejing",
      pointName: "",
      pointType: "",
      show: true,
    },
  ];
  item.comIDs = ["zhoubianjiejing", "szycfxJCFX"];
  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>
#dgtxg {
  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;
      }
    }
  }
  // 分页样式
  .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>