<!--
 * @Author: sjl
 * @Date: 2023-04-23 15:58:39
 * @Descripttion: 
-->
<template>
  <div class="right-details" v-show="mapStore.rightSideMenu">
    <div class="leafTotal">
      <i>
        灾害点：<span style="font-size: 24px">{{ dzTotal }}</span
        >个
      </i>
      <!-- <a-button type="text" @click="queryAllInfo">全部</a-button> -->
      <div @click="queryAllInfo" class="allBtu1"></div>
    </div>
    <div class="wrapper">
      <!-- <div class="secondTab">
         <span style="font-size: 16px; margin-left: 35px;">所属河流：<span style="font-size: 24px;">10</span>个</span> 
        <a-tabs v-model:activeKey="activeKey" class="user">
        <a-tab-pane key="1">
          <template #tab>
            <span> 所属河流 </span>
          </template>
          <a-input-search v-model:value="value" placeholder="输入关键字搜索" size="large" @search="onSearch">
           <template #enterButton>
            <a-button>Custom</a-button> 
           </template>
          </a-input-search>
           <Histogram></Histogram> 
        </a-tab-pane>
        <a-tab-pane key="2">
          <template #tab>
            <span>影响工程 </span>
          </template>
          <a-input-search v-model:value="value" placeholder="input search text" size="large" @search="onSearch">
      <template #enterButton>
        <a-button>Custom</a-button>
      </template>
    </a-input-search>
           <Histogram2></Histogram2> 
        </a-tab-pane>
      </a-tabs>
      </div> -->
      <!-- <gcly /> -->
      <gcly ref="childComp" @hdTotal="getDdTotal" />
    </div>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
// import { Image, ImagePreviewGroup } from 'ant-design-vue';
import { Image, ImagePreviewGroup } from 'ant-design-vue/es';
import 'ant-design-vue/es/message/style/css';
import nsl_xc1 from '/@/assets/images/nsl_xc1.jpg';
import nsl_xc2 from '/@/assets/images/nsl_xc2.jpg';
import nsl_xc3 from '/@/assets/images/nsl_xc3.jpg';
import gcly from './gcly.vue';
import { useMapStore } from '/@/store/modules/map';
import eventBus from '/@/utils/eventBus';
import { nextTick } from 'process';

export default defineComponent({
  name: 'Details',
  components: {
    Image,
    ImagePreviewGroup,
    gcly,
  },
  setup() {
    const mapStore = useMapStore();
    const items = [
      { name: '基础信息', selected: false },
      { name: '评估信息', selected: false },
      { name: '监测信息', selected: false },
      { name: '历史信息', selected: false },
    ];
    const sceneOne = ref(nsl_xc1);
    const sceneSecond = ref(nsl_xc2);
    const sceneThree = ref(nsl_xc3);
    const dzTotal = ref(0);
    console.log(sceneOne);

    let panelValue = ref('');

    // 查询所有信息
    // 接受其他组件传递的值
    eventBus.on('toPanel', (value) => {
      console.log('全部按钮需要的参数', value);
      if (value == '') {
        panelValue.value = 'all';
      } else {
        panelValue.value = 'all';
      }
    });
    const childComp = ref(null);
    const queryAllInfo = () => {
      eventBus.emit('toDzlxid', '');
      nextTick(() => {
        // childComp.value.getGcList('', '', 'all');

        childComp.value.getAllGcList()
        // dzTotal.value = childComp.value.gcTableTotal.value;
      });
    };

    /**
     * @description 设置获取数据
     */
    function getDdTotal(result) {
      dzTotal.value = result;
    }

    return {
      mapStore,
      items,
      sceneOne,
      sceneSecond,
      sceneThree,
      columns: [
        {
          // title: '姓名',
          dataIndex: 'name',
          key: 'name',
        },
        {
          title: '年龄',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: '住址',
          dataIndex: 'address',
          key: 'address',
        },
      ],

      dataSource: [
        {
          key: '1',
          name: '胡彦斌',
          age: 32,
          address: '西湖区湖底公园1号',
        },
        {
          key: '2',
          name: '胡彦祖',
          age: 42,
          address: '西湖区湖底公园1号',
        },
      ],
      panelValue,
      childComp,
      queryAllInfo,

      dzTotal,
      getDdTotal,
    };
  },
});
</script>

<style lang="less" scoped>
@font-face {
  font-family: 'AlimamaShuHeiTi';
  src: url('../../assets/font/AlimamaShuHeiTi-Bold.ttf');
}
::v-deep .ant-carousel .slick-dots {
  top: 89px !important;
}
::v-deep .banner .slick-slide {
  background: rgba(3, 49, 79, 0) !important;
}
.banner {
  height: 100px;
  overflow: hidden;
}
.nsl_xc :deep(.ant-image) {
  width: 117px;
  height: 80px;
  float: left;
  margin-right: 9px;
}
.nsl_xc :deep(.ant-image) img {
  width: 100%;
  height: 100%;
}
.nsl_xc :deep(.ant-image):last-child {
  margin-right: 0px;
}

// .wrapper p:last-child {
//   margin-top: 12px;
// }
.label {
  font-style: normal;
}
// .wrapper p {
//   font-size: 18px;
//   color: #00d0e3;
//   font-weight: bold;
//   margin-bottom: 5px;
// }
.video {
  width: 100%;
  height: auto;
}
::v-deep .ant-carousel .slick-dots li.slick-active {
  width: 10px;
}
::v-deep .ant-carousel .slick-dots li,
::v-deep .ant-carousel .slick-dots li button {
  width: 10px;
  height: 10px;
  border-radius: 10px;
}
::v-deep .ant-carousel .slick-dots {
  top: 170px;
}
.ant-carousel :deep(.slick-slide) {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

.ant-carousel :deep(.slick-slide h3) {
  color: #fff;
}
.ckxq {
  width: 100%;
  text-align: right;
  display: inline-block;
  color: #fff;
  margin: 20px 0px;
}
.wrapper {
  background: rgba(3, 49, 79, 0.4);
  width: 100%;
  // height: calc(100vh - 190px);
  height: 896px;
  // padding: 15px;
  // padding-left: 15px;
  overflow: hidden;
  position: relative;
  // border: 1px solid rgba(39, 209, 238, 0.3);
  .wrapperTitle {
    width: 60px;
    display: block;
    position: absolute;
    font-size: 14px;
    text-align: left;
    color: #a7e6fa !important;
    line-height: normal;
  }
  .wrapperSpan {
    display: block;
    position: relative;
    width: calc(100% - 60px);
    text-align: right;
    float: right;
    font-size: 16px !important;
  }
}

.wrapper:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 100%;
  border-left: 1px solid transparent;
  border-radius: 5px;
  border-image: linear-gradient( rgba(39, 209, 238, 0.3) 0%, #00d0e3 50%, rgba(255, 255, 255, 0) 99%) 1;
 // background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1),rgba(253, 253, 253, 0.3));
}
.wrapper:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1px;
  height: 100%;
  border-right: 1px solid transparent;
  border-radius: 5px;
  border-image: linear-gradient( rgba(39, 209, 238, 0.3) 0%, #00d0e3 50%, rgba(255, 255, 255, 0) 99%) 1;
}
.wrapper ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-gap: 10px;
  background: url('../../assets/images/dzxqlb_bg.png') no-repeat 9px 6px;
  background-size: 342px 260px;
}
.wrapper ul li span {
  color: #fff;
  font-size: 16px;
  display: inline-block;
  float: right;
}
.wrapper ul li {
  padding: 15px;
  height: 47px;
  line-height: 32px;
  text-align: left;
  color: #a7e6fa;
  // display: flex;;
}
.list li span {
  font-size: 28px;
  margin-bottom: 8px;
}
.list {
  display: flex;
  height: 82px;
  width: 100%;
  list-style: none;
  color: #fff;
  padding: 0;
  margin: 0;
  margin-bottom: 10px;
  border: 1px solid #0b6f9a;
  background: rgba(3, 49, 79, 0.4);
}

.list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 25%;
  text-align: center;
  cursor: pointer;
}
.list li.selected {
  background-color: yellow;
}
.right-details .leafTotal i {
  margin-right: 196px;
}
.leafTotal {
  width: 400px;
  height: 47px;
  background: url('../../assets/images/jcsbtj2.png') no-repeat;
  font-size: 19px;
  font-weight: bold;
  color: #fff;
  line-height: 38px;
  margin: 0px 0px 10px 0px;
}
.right-details {
  animation-name: move;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}
@keyframes move {
  0% {
    right: -400px;
  }
  100% {
    right: 20px;
  }
}
.right-details {
  // position: fixed;
  position: absolute;
  right: 20px;
  top: 90px;
  z-index: 3;
  width: 400px;
  height: calc(100vh - 7rem);
}
.leafTotal i {
  margin-left: 32px;
  font-family: 'AlimamaShuHeiTi';
  margin-right: 98px;
  font-weight: bold;
  font-style: italic;
  margin-left: 32px;
  margin-right: 198px;
}
.leafTotal b {
  text-align: right;
  font-size: 16px;
  font-weight: normal;
}

::v-deep .secondTab .ant-tabs-nav .ant-tabs-tab-active {
  background: url('../../assets/images/tab.png') no-repeat;
  width: 210px;
}

::v-deep .ant-tabs-nav-wrap {
  background: url('../../assets/image/tab-背景.png') no-repeat;
  height: 38px;
}

::v-deep .ant-tabs .ant-tabs-top-content,
.ant-tabs .ant-tabs-bottom-content {
  width: 95%;
}
</style>
<style lang="less">
body {
  .ant-image-preview-wrap {
    background: rgba(8, 39, 55, 0.7);
    position: fixed;
    // top: 10%;
    // right: 20%;
    // bottom: 10%;
    // left: 20%;
    overflow: auto;
    z-index: 99999999;
  }
  .ant-image-preview-switch-left {
    width: 90px;
    height: 90px;
    background: rgba(0, 0, 0, 0.3) !important;
  }
  .ant-image-preview-switch-right {
    width: 90px;
    height: 90px;
    background: rgba(0, 0, 0, 0.3) !important;
  }
}

.allBtu1 {
  position: relative;
  left: 330px;
  top: -34px;
  padding-left: 25px;
  font-size: 14px;
  background: url('/@/assets/images/全部按钮状态.png') no-repeat;
  cursor: pointer;
  z-index: 999;
  width: 70px;
  height: 28px;
}
</style>
