<!--
 * @Author: zjz
 * @Date: 2023-06-25 09:45:14
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-07-17 17:33:43
 * @FilePath: \yx-big-screen\src\views\product\gcly.vue
 * @Description: 
-->
<template>
  <div class="gcly">
    <div class="total_lb">
      <div class="table-container sblb">
        <div class="searchWrapper">
          <a-input-search v-model:value="searchStrHd" style="width: 100%" placeholder="请输入关键字" @search="onSearch" />
        </div>
        <div class="table-header">
          <div class="table-row">
            <div class="table-cell table-cell-1">灾害点名称</div>
            <div class="table-cell table-cell-2">灾害类型</div>
            <div class="table-cell table-cell-3">危险性分级</div>
            <div class="table-cell table-cell-4">规模</div>
            <!-- <div class="table-cell">关注情况</div> -->
          </div>
        </div>
        <!-- <div
          style="
            width: 100%;
            height: 3px;
            margin-top: -15px;
            background-image: radial-gradient(#03dcf6, #032236);
            border-radius: 50%;
            box-shadow: 0px -5px 10px 0px #ccc;
          "
        ></div> -->
        <div class="table-body">
          <ul
            class="table-row"
            v-for="(item, index) in hdTableData"
            :key="index"
            @click="gcEvent(item)"
            :class="{ 'table-row-active': activeEquipId === item.id }"
          >
            <li class="table-cell table-cell-1" :title="item.dzmc">
              <img v-if="item.gztyp == '重点关注'" :src="zdgz" alt="重点关注" class="image" />
              <span>{{ item.dzmc }}</span>
            </li>
            <li class="table-cell table-cell-2" :title="item.dzlxmc">
              <span>{{ item.dzlxmc }}</span>
            </li>
            <li class="table-cell table-cell-3" :title="item.wxxfjmc">
              <span>{{ item.wxxfjmc }}</span>
            </li>
            <li class="table-cell table-cell-4" :title="item.gm">
              <span>{{ item.gm }}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <informationShow :searchId="searchId" :searchName="searchName" />
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, ref, onMounted, defineExpose } from 'vue';
import { CaretRightOutlined } from '@ant-design/icons-vue';
import { useGeologicalStore } from '/@/store/modules/geological';
import TFMapUitl from '/@/utils/TFMapUitl.ts';
import eventBus from '/@/utils/eventBus';
import { template } from 'lodash-es';

import zdgz from '../../assets/images/zdgz.png';

import informationShow from './informationShow/index.vue';

export default defineComponent({
  name: 'Gcly',
  components: {
    CaretRightOutlined,
    informationShow,
  },
  setup(props, { emit }) {
    const data = reactive({
      datatable: ref([]),
      keyNum: { 1: 0, 2: 0 },
    });
    const totalObj = reactive({
      hd: 0,
      gc: 0,
    });
    let activeKey = ref('1');
    const geologicalStore = useGeologicalStore();
    const searchId = ref(null);
    const searchName = ref(null);
    //const datatable = ref([]);
    //const keyNum = ref({ 1: 0 ,2: 0 });

    let panelValue = 'all'; //切换面板值
    let searchStr = ''; //关键字搜索
    const searchStrHd = ref(''); //河段关键字搜索
    const searchStrGc = ref(''); //工程关键字搜索
    let dzlxid = ref(''); //灾害类型参数
    let sshdid = ref(''); //所属河段参数
    let ssgcid = ref(''); //所属工程参数
    let zhdqztid = ref(''); //当前状态参数
    let djfxid = ref(''); //堵江风险参数

    let gztypeid = ref(''); //灾害关注类型id
    let activeEquipId = ref('');

    let hdTableData = ref([]);
    let gcTableData = ref([]);
    const gcTableTotal = ref(0); //灾害点数量

    const panelChange = (value) => {
      console.log('面板+++', value);
      panelValue = 'all';
      eventBus.emit('toPanel', panelValue);
      if (value == 1) {
        searchStr = searchStrHd.value;
      } else {
        searchStr = searchStrGc.value;
      }
      getGcList(dzlxid.value, searchStr, value);
    };

    // 接受全部按钮传过来的灾害类型参数(空)
    eventBus.on('toDzlxid', (value) => {
      dzlxid.value = value;
    });

    const getAllGcList = () => {
      let params = {
        type: 'all',
      };
      geologicalStore.DzdxInfo(params).then((res) => {
        console.log('所有的数据', res);
        hdTableData.value = res;
        emit('hdTotal', res.length);
      });
    };

    //获取数量
    function GetGcCount() {
      getGcList('', '', '1');
      getGcList('', '', '2');
    }
    const getGcList = (dzlxid, searchStr, value, sshdid, ssgcid, zhdqztid, djfxid) => {
      let type = 'all';
      if (value == 2) {
        type = 'all';
      } else {
        type = 'all';
      }
      let params = {
        dzlxid: dzlxid ? dzlxid : '',
        searchStr: searchStr ? searchStr : '',
        type: type,
        sshdid: sshdid ? sshdid : '',
        ssgcid: ssgcid ? ssgcid : '',
        gztypeid: zhdqztid ? zhdqztid : '',
        djfxid: djfxid ? djfxid : '',
      };
      if (params.dzlxid == '') {
        delete params.dzlxid;
      }
      if (params.sshdid == '') {
        delete params.sshdid;
      }
      if (params.ssgcid == '') {
        delete params.ssgcid;
      }
      if (params.gztypeid == '') {
        delete params.gztypeid;
      }
      if (params.djfxid == '') {
        delete params.djfxid;
      }
      const keyNum = ref(0);
      geologicalStore.DzdxInfo(params).then((res) => {
        console.log('河段信息列表2222222222211111:', res);
        console.log(dzlxid == '', 'dzlxiddzlxiddzlxid');
        console.log(istotalpc, istotalzd, 'istotalpcistotalpc');

        if (istotalpc == 'y') {
          let newArr = [];
          res.map((e) => {
            if (e.gztyp === '普查') {
              newArr.push(e);
            }
          });
          console.log(newArr, '这是总的普查');
          res = newArr;
        } else if (istotalzd == 'y') {
          let newArr = [];
          res.map((e) => {
            if (e.gztyp === '重点关注') {
              newArr.push(e);
            }
          });
          console.log(newArr, '这是总的重点');
          res = newArr;
        }
        data.datatable = res;
        // data.keyNum[value] = data.datatable.length;
        const tempFunc = (e, name) => {
          const tempObj = {};
          e.forEach((item) => {
            if (!tempObj[item[name]]) {
              tempObj[item[name]] = { data: [item] };
            } else {
              tempObj[item[name]].data.push(item);
            }
          });
          const tempArr = [];
          for (let item in tempObj) {
            tempArr.push(...tempObj[item].data);
          }
          return { dataList: tempArr, datalength: Object.getOwnPropertyNames(tempObj).length };
        };
        if (type == 'all') {
          const tempArr = JSON.parse(JSON.stringify(data.datatable));
          const listInfo = tempFunc(tempArr, 'lymc');
          hdTableData.value = listInfo.dataList;
          //获取数量
          // gcTableTotal.value = listInfo.dataList.length;
          emit('hdTotal', listInfo.dataList.length);

          if (listInfo.dataList.length > 0) {
            searchId.value = listInfo.dataList[0].id;
            searchName.value = listInfo.dataList[0].dzmc;
          } else {
            searchId.value = null;
            searchName.value = '';
          }
          totalObj.hd = listInfo.datalength;
        } else if (type == 'all') {
          // gcTableData.value = JSON.parse(JSON.stringify(data.datatable));
          const tempArr = JSON.parse(JSON.stringify(data.datatable));
          const listInfo = tempFunc(tempArr, 'gcmc');
          gcTableData.value = listInfo.dataList;
          totalObj.gc = listInfo.datalength;
        }
      });
    };
    onMounted(() => {
      GetGcCount();
    });

    // 启用侦听,接受词云传过来的参数并调用查询方法
    eventBus.on('sayHi', (value) => {
      console.log('其他组件传过来的值', value);
      dzlxid.value = value;
      // panelValue = '1';
      getGcList(dzlxid.value, searchStr, panelValue);
      // if (panelValue == '1') {
      //   getGcList(dzlxid.value, searchStr, '2');
      // } else {
      //   getGcList(dzlxid.value, searchStr, '1');
      // }
    });
    // 接受柱状图河段传过来的参数
    eventBus.on('toSshdid', (value) => {
      // if(!value){
      //   value="-11"
      // }
      sshdid.value = value;
      dzlxid.value = '';
      ssgcid.value = '';
      zhdqztid.value = '';
      djfxid.value = '';
      panelValue = 'all';
      eventBus.emit('toPanel', panelValue);
      getGcList(dzlxid.value, searchStr, panelValue, sshdid.value, ssgcid.value);
      activeKey.value = '1';

      // if (panelValue == '1') {
      //   getGcList(dzlxid.value, searchStr, '2');
      // } else {
      //   getGcList(dzlxid.value, searchStr, '1');
      // }
    });
    // 接受柱状图工程传过来的参数
    eventBus.on('toSsgcid', (value) => {
      // if(!value){
      //   value="-11"
      // }
      ssgcid.value = value;
      dzlxid.value = '';
      sshdid.value = '';
      zhdqztid.value = '';
      djfxid.value = '';
      panelValue = 'all';
      eventBus.emit('toPanel', panelValue);
      getGcList(dzlxid.value, searchStr, panelValue, sshdid.value, ssgcid.value);
      activeKey.value = '2';

      // if (panelValue == '1') {
      //   getGcList(dzlxid.value, searchStr, '2');
      // } else {
      //   getGcList(dzlxid.value, searchStr, '1');
      // }
    });
    // 接受当前状态饼图传过来的参数
    eventBus.on('toZhdqztid', (value) => {
      console.log('重点关注组件传过来的值', value);

      gztypeid.value = value.gztypeid;
      dzlxid.value = value.dzlxid;

      console.log(value.dzlxid, '----------------------通过dzlxid判断');
      if (value.dzlxid == 'zhongdian') {
        dzlxid.value = '';
        istotalpc = 'n';
        istotalzd = 'y';
      } else {
        istotalpc = 'n';
        istotalzd = 'n';
      }
      console.log(istotalpc, istotalzd, 'istotalzd');

      getGcList(dzlxid.value, searchStr, panelValue, sshdid.value, ssgcid.value, gztypeid.value);

      // // if(!value){
      // //   value="-11"
      // // }
      // zhdqztid.value = value;
      // dzlxid.value = '';
      // sshdid.value = '';
      // ssgcid.value = '';
      // djfxid.value = '';
      // // panelValue = '1'
      // eventBus.emit('toPanel', panelValue);
      // getGcList(dzlxid.value, searchStr, panelValue, sshdid.value, ssgcid.value, zhdqztid.value);
      // // activeKey.value = '1'

      // // if (panelValue == '1') {
      // //   getGcList(dzlxid.value, searchStr, '2');
      // // } else {
      // //   getGcList(dzlxid.value, searchStr, '1');
      // // }
    });
    let istotalpc = ref('');
    let istotalzd = ref('');
    // 接受堵江风险饼图传过来的参数
    eventBus.on('toDjfxid', (value) => {
      console.log('普查组件传过来的值', value);

      gztypeid.value = value.gztypeid;
      dzlxid.value = value.dzlxid;
      console.log(value.dzlxid, '----------------------通过dzlxid判断');
      if (value.dzlxid == 'pucha') {
        dzlxid.value = '';
        istotalpc = 'y';
        istotalzd = 'n';
      } else if (value.dzlxid == 'zhongdian') {
        dzlxid.value = '';
        istotalpc = 'n';
        istotalzd = 'y';
      } else {
        istotalpc = 'n';
        istotalzd = 'n';
      }
      console.log(istotalpc, istotalzd, 'istotalzd');
      getGcList(dzlxid.value, searchStr, panelValue, sshdid.value, ssgcid.value, gztypeid.value);

      // // if(!value){
      // //   value="-11"
      // // }
      // djfxid.value = value;
      // dzlxid.value = '';
      // sshdid.value = '';
      // ssgcid.value = '';
      // zhdqztid.value = '';
      // // panelValue = '2'
      // eventBus.emit('toPanel', panelValue);
      // getGcList(dzlxid.value, searchStr, panelValue, sshdid.value, ssgcid.value, zhdqztid.value, djfxid.value);
      // // activeKey.value = '2'
    });
    //地灾点事件
    function editStyle(i, d) {
      TFMapUitl.active(`dzdmarker&&${i.id}`);
      map.openInfoWindowHtml(TFMapUitl.dzdMarkerDom(i), { position: d }, () => {
        TFMapUitl.clearPointLocation_list(map);
      });
      map.popup.setOffset(-235, 80);
    }
    const gcEvent = (i) => {
      console.log(i);
      activeEquipId.value = activeEquipId.value == i.id ? '' : i.id;
      searchId.value = i.id;
      searchName.value = i.dzmc;
      //垂直视角
      // let op = {
      //   destination: { x: i.x, y: i.y, z: 15000 },
      //   orientation: { heading: 6.283185307179586, pitch: -1.5688928482139568, roll: 0 },
      // };
      // map.flyTo(op, 1, () => {
      //   var p = [i.x, i.y, map.terrain ? i.z : 0];
      //   TFMapUitl.mapPointLocation_list(p);
      //   map.openInfoWindowHtml(TFMapUitl.dzdMarkerDom(i), { position: p }, () => TFMapUitl.clearPointLocation_list(map));
      //   map.popup.setOffset(0, -50);
      // });

      geologicalStore
        .getVisualangle({
          type: 'dz',
          typeId: i.id + '',
        })
        .then((res) => {
          console.log('222222:', res);
          var d = [i.x, i.y, map.terrain ? i.z : 0];
          if (res) {
            map.flyTo(res, 1, () => TFMapUitl.trends(d, null, true), editStyle(i, d));
          } else {
            TFMapUitl.trends(d, () => editStyle(i, d));
          }
        });

      //之前没有调用接口的
      // var d = [i.x, i.y, map.terrain ? i.z : 0];
      // TFMapUitl.trends(d, () => {
      //   map.openInfoWindowHtml(TFMapUitl.dzdMarkerDom(i), { position: d }, () => {
      //     TFMapUitl.clearPointLocation_list(map);
      //   });
      //   map.popup.setOffset(0, -60);
      // });
    };

    const onSearch = (value) => {
      console.log(`selected ${value}`);
      getGcList(dzlxid.value, value, panelValue);
    };
    const current = ref(2);
    //暴露getGcList方法
    defineExpose({
      getGcList,
    });
    return {
      ...toRefs(data),
      totalObj,
      panelChange,
      gcEvent,
      onSearch,
      activeKey,
      current,
      searchStrHd,
      searchStrGc,
      getGcList,
      sshdid,
      ssgcid,
      zhdqztid,
      djfxid,
      hdTableData,
      gcTableData,
      activeEquipId,
      searchId,
      searchName,

      gztypeid,

      zdgz,

      getAllGcList,
    };
  },
});
</script>

<style lang="less" scoped>
.gcly {
  height: 100%;

  .total_lb {
    overflow: hidden;
    width: 400px;
    color: #fff;
    height: calc(100% - 300px);

    .table-container {
      display: flex;
      flex-direction: column;
      width: 100%;
      overflow: hidden;
      overflow-y: auto;
      padding: 10px;
      // height: calc(100vh - 200px);
      height: 100%;

      .searchWrapper {
        width: calc(100% - 2px);
        height: 42px;
        // border: 1px solid #0b6f9a;
        border: none;
        margin: 10px 10px 10px 0px;
        // background: rgba(3, 49, 79, 0.5);
        // box-shadow: 0 0 0px #fff, 0 0 0px #fff, 0 0 0px #fff, 0 0 5px rgba(40, 188, 252, 0.2), 0 0 5px rgba(40, 188, 252, 0.2),
        //   0 0 5px rgba(40, 188, 252, 0.2), 0 0 5px rgba(40, 188, 252, 0.2);
        background: rgba(3, 49, 79, 0.5);
        box-shadow: 0 0 0 #fff;

        ::v-deep(.ant-input) {
          background: none !important;
        }

        ::v-deep(.ant-input-search) {
          margin-bottom: 20px;
        }

        ::v-deep(.ant-input-affix-wrapper) {
          border: 0px solid #303030 !important;
          height: 42px !important;
        }
      }

      .table-header {
        height: 44px;
        // background: rgba(3, 49, 79, 0.4);
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 10px;
        color: #00d0e3;
        font-weight: normal;

        &::after {
          // position: absolute;
          content: '';
          height: 1px;
          display: block;
          background-image: radial-gradient(#03dcf6, #032236);
          border-radius: 50%;
          box-shadow: 0px -5px 10px 0px #ccc;
        }

        .table-row {
          display: flex;
          flex-direction: row;
          list-style: none;
          padding: 0;
          margin: 0;
          // margin-bottom: 10px;
        }
      }

      .table-body {
        overflow-y: auto;
        height: calc(100% - 84px) !important;

        ::v-deep(ul) {
          background: transparent;
          // position: relative;
        }

        .table-row {
          cursor: pointer;
          display: flex;
          flex-direction: row;
          list-style: none;
          padding: 0;
          margin: 0;
          margin-bottom: 10px;

          .table-cell-left {
            width: 25%;
            display: flex;
            align-items: center;

            padding: 8px;
            text-align: left;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .table-cell:last-child {
            border-right: none;
          }
        }

        .table-row:hover {
          background: rgba(0, 175, 237, 0.1);
          border-bottom: 1px solid;
          border-image: linear-gradient(to right, rgba(0, 175, 237, 0) 10%, rgba(0, 175, 237, 1) 50%, rgba(0, 175, 237, 0) 90%) 20 20;
        }

        .table-row-active {
          background: rgba(0, 175, 237, 0.1);
          border-bottom: 1px solid;
          border-image: linear-gradient(to right, rgba(0, 175, 237, 0) 10%, rgba(0, 175, 237, 1) 50%, rgba(0, 175, 237, 0) 90%) 20 20;
        }

        .table-row-active {
          background: rgba(0, 175, 237, 0.1);
          border-bottom: 1px solid;
          border-image: linear-gradient(to right, rgba(0, 175, 237, 0) 10%, rgba(0, 175, 237, 1) 50%, rgba(0, 175, 237, 0) 90%) 20 20;
        }
      }

      .table-body::-webkit-scrollbar {
        width: 4px;
        height: 6px;
      }

      .table-body::-webkit-scrollbar-thumb {
        background-color: #007e8f !important;
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2) !important;
        border-radius: 2px;
      }

      .table-body::-webkit-scrollbar-track {
        background-color: rgba(0, 0, 0, 0.05) !important;
      }

      .table-cell {
        // width: 22%;
        display: flex;
        align-items: left;
        justify-content: left;
        padding: 8px;
        text-align: left;
        // white-space: nowrap;
        // overflow: hidden;
        // text-overflow: ellipsis;
        // // word-wrap: break-word; //换行
        // white-space: nowrap;

        span {
          align-items: left;
          justify-content: left;
          overflow: hidden;
          text-overflow: ellipsis;
          // word-wrap: break-word; //换行
          white-space: nowrap;
        }
      }

      .table-cell-1 {
        width: 30%;
      }
      .table-cell-2 {
        width: 20%;
      }
      .table-cell-3 {
        width: 30%;
      }
      .table-cell-4 {
        width: 20%;
      }
    }

    .sblb {
      padding: 0px 10px;
    }
  }
}

// .table-body::-webkit-scrollbar {
//   width: 8px; /* 设置滚动条宽度 */
// }

// .table-body::-webkit-scrollbar-track {
//    /* 设置滚动条背景颜色 */
// }

// .table-body::-webkit-scrollbar-thumb {
//   background-color: #007E8F; /* 设置滚动条滑块颜色 */
//   border-radius: 4px; /* 设置滚动条滑块圆角 */
// }

// .table-body::-webkit-scrollbar-thumb:hover {
//   background-color: #007E8F; /* 设置滚动条滑块在鼠标悬停时的颜色 */
// }
</style>
