<template>
  <div class="informationShowDiv" @click="console.log('currentData', currentData)">
    <div class="HeaderTitle"> 灾害名称：{{ title }} </div>
    <div class="infoHeader">
      <template v-for="(item, index) in heaerList" :key="'infoHeader_' + index">
        <div
          class="infoHeaderItem"
          :style="'width:' + 100 / Object.getOwnPropertyNames(heaerList).length + '%'"
          @click="changeCurrentData(item)"
          :class="currentData && currentData.title == item.title ? 'currentDataDiv' : ''"
        >
          {{ index }}
        </div>
      </template>
    </div>
    <div class="showData" @click="console.log('heaerList', heaerList)">
      <a-carousel class="showDataarrows" v-if="currentData && currentData.value && currentData.value.length > 0" arrows>
        <template #prevArrow>
          <div class="custom-slick-arrow" style="left: 10px; zindex: 1">
            <!-- <left-circle-outlined /> -->
            <img src="/src/assets/lunbo/left.png" alt="Previous Arrow" />
          </div>
        </template>
        <template #nextArrow>
          <div class="custom-slick-arrow" style="right: 10px; zindex: 1">
            <!-- <right-circle-outlined /> -->
            <img src="/src/assets/lunbo/right.png" alt="Next Arrow" />
          </div>
        </template>
        <template v-if="currentData && currentData.type == type.image">
          <div v-for="(item, index) in currentData.value" :key="'currentData_' + index" class="group">
            <div class="imageDiv">
              <a-image class="imageDivItem" :src="item.filePath" :preview="false" @click="handleOpen(item, currentData.value)" />
            </div>
            <div class="infoDiv">
              <span class="imageName">{{ item.fileName }}</span>
              <span class="imageNumber">{{ index + 1 + '/' + currentData.value.length }}</span>
            </div>
          </div>
        </template>
        <template v-else-if="currentData && currentData.type == type.video">
          <template v-for="(item, index) in currentData.value" :key="'currentData_' + index">
            <div class="group">
              <div class="imageDiv">
                <!-- <img :src='item.path'> -->
                <video class="videoDiv" controls> <source :src="item.filePath" type="video/mp4" /></video>
              </div>
              <div class="infoDiv">
                <span class="imageName">{{ item.fileName }}</span>
                <span class="imageNumber">{{ index + 1 + '/' + currentData.value.length }}</span>
              </div>
            </div>
          </template>
        </template>
      </a-carousel>
      <div v-else class="noData"></div>
    </div>

    <!-- 预览 -->
    <!-- <a-modal :visible="previewImgVisible" :footer="null" centered width="auto" @cancel="handleCancel"> -->
    <!-- <Dialog :width="500" :height="110" :dialogVisable="previewImgVisible" :title="title">
      <Review :path="previewImgUrl" :pathList="previewImgUrlList" />
    </Dialog> -->

    <Review @register="registerModal" :path="previewImgUrl" :pathList="previewImgUrlList" />
   
    <!-- </a-modal> -->
  </div>
</template>

<script>
import Dialog from '/@/components/Dialog/index.vue';

import { useModal } from '/@/components/Modal';
import { defineComponent, reactive, toRefs, ref, onMounted, defineExpose, watch } from 'vue';
import { LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
import { getDzFileInfo, getloadImg, getloadFile } from '/@/api/map/getData.ts';

import Review from './Review.vue';

export default {
  name: 'InformationShow',
  components: {
    LeftCircleOutlined,
    RightCircleOutlined,

    Dialog,
    Review,
  },
  props: {
    searchId: null,
    searchName: null,
  },
  setup(props, ctx) {
    const type = { image: 'image', video: 'video' };
    const title = ref('');
    const heaerList = reactive({
      '平/剖面图': {
        title: '平/剖面图',
        value: [],
        type: type.image,
      },
      监测布置图: {
        title: '监测布置图',
        value: [],
        type: type.image,
      },
      现场照片: {
        title: '现场照片',
        value: [],
        type: type.image,
      },
      监测视频: {
        title: '监测视频',
        value: [],
        type: type.video,
      },
    });
    let currentData = reactive({});
    const infoHeader = heaerList[0];

    /**监听*/
    watch(
      () => props.searchId,
      (newValue) => {
        title.value = props.searchName;
        getCurrentInfo();
      }
    );
    getCurrentInfo();
    title.value = props.searchName;
    /**获取附件*/
    function getCurrentInfo() {
      for (let item in heaerList) {
        heaerList[item].value = [];
      }
      window.setTimeout((e) => {
        if (!props.searchId) {
          return;
        }
        const params = {
          current: 1,
          size: 1000,
          tableId: props.searchId,
          tableName: 'T_DZDX_INFO',
        };
        getDzFileInfo(params).then((res) => {
          console.log(getDzFileInfo,'getDzFileInfo');
          if (res.code == 1) {
            const tempData = [];
            res.result.records.forEach((item) => {
              if (item.tableId == props.searchId) {
                if (item.fileFormat.indexOf('png') != -1 || item.fileFormat.indexOf('jpg') != -1 || item.fileFormat.indexOf('jpeg') != -1) {
                  item.filePath = getloadImg(item.filePath);
                } else if (item.fileFormat.indexOf('mp4') != -1) {
                  item.filePath = getloadFile(item.filePath);
                }
                if (item.fileTypeMC) {
                  heaerList[item.fileTypeMC].value.push(item);
                }
              }
            });
            changeCurrentData(heaerList['平/剖面图']);
          } else {
            title.value = '';
          }
        });
      }, 50);
    }
    function changeCurrentData(item) {
      console.log('改变当前数据?',item,currentData);
      for (let item in currentData) {
        delete currentData[item];
      }
      console.log('delete完毕',currentData);
      // currentData=[]
      // Object.assign(currentData,item);
      window.setTimeout((e) => {
        Object.assign(currentData, item);
        console.log('修改完毕',currentData);
      }, 50);
    }

    const previewImgVisible = ref(false); // 查看附件图片
    const previewImgUrl = ref(''); //预览图片类路径
    const previewImgUrlList = ref([]); //预览图片列表

    const [registerModal, { openModal }] = useModal();

    function handleOpen(current, imgList) {
      console.log('打开?',current,imgList);
      debugger;

      // imgList = imgList.forEach((item) => {
      //   item.isCurrent = current.filePath == item.filePath ? true : false;
      // });

      openModal(true, {
        data: {
          current,
          imgList,
        },
      });
      if (map.popup) {
        map.popup.remove();
      }
      // previewImgVisible.value = true;

      // const imgAry = imgList.map((item) => {
      //   return item.filePath;
      // });

      // handlePreview(current.filePath, imgAry);
    }

    // 关闭预览
    function handleCancel() {
      previewImgVisible.value = false;
    }
    // 预览图片
    function handlePreview(url, imgAry) {
      previewImgUrl.value = url;
      previewImgVisible.value = true;
      previewImgUrlList.value = imgAry;
    }

    return {
      type,
      currentData,
      title,
      heaerList,
      changeCurrentData,

      previewImgVisible,
      previewImgUrl,
      previewImgUrlList,

      handleOpen,
      handleCancel,
      handlePreview,

      registerModal,
    };
  },
};
</script>

<style lang="less" scoped>
.informationShowDiv {
  position: relative;
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: column;
  padding: 0px 10px 0px 10px;
  .showData {
    position: relative;
    width: 100%;
    height: calc(100% - 70px);
    .showDataarrows {
      width: 100%;
      height: 100%;
    }
  }
  .infoHeader {
    display: flex;
    flex-direction: row;
    text-align: center;
    align-content: center;
    background: url('/@/assets/images/tab-背景.png') no-repeat;
    color: #55bfdf;
    padding: 10px;
    cursor: pointer;
    font-style: oblique;
  }
  .currentDataDiv {
    color: white;
    background: url('/@/assets/images/imageSelect2.png') no-repeat;
    background-position: 7px 13px;
  }
  :deep(.slick-slider),
  :deep(.slick-list),
  :deep(.slick-track) {
    height: 100%;
  }
  :deep(.slick-slide div:first-child) {
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
  }
  .group {
    height: 100%;
    width: 100%;
    position: relative;
  }
  .imageDiv {
    height: 100%;
    width: 100%;
    .imageDivItem {
      height: 100%;
      width: 100%;
      // padding: 10px 50px 0px 50px;
    }
    .videoDiv {
      height: 120px;
      width: 100%;
    }
  }
  .infoDiv {
    position: absolute;
    width: 100%;
    height: 30px;
    bottom: 0px;
    background: rgb(0 0 0 / 50%);
    .imageName {
      height: 100%;
      color: white;
      font-size: 14px;
      text-align: left;
      width: 50%;
      position: relative;
      float: left;
      top: 4px;
      left: 10px;
    }
    .imageNumber {
      height: 100%;
      color: white;
      font-size: 14px;
      width: 50%;
      position: relative;
      float: right;
      top: 4px;
      right: 10px;
      text-align: right;
    }
  }

  .HeaderTitle {
    color: #00d0e3;
    font-size: 16px;
    padding-bottom: 5px;
    padding-left: 20px;
  }
  .ant-carousel :deep(.slick-slide) {
    text-align: center;
    height: 100%;
    overflow: hidden;
  }

  .ant-carousel :deep(.slick-arrow.custom-slick-arrow) {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: black;
    opacity: 0.3;
    z-index: 10;
    &:hover {
      color: black !important;
      opacity: 1 !important;
    }
  }
  .ant-carousel :deep(.custom-slick-arrow:before) {
    display: none;
  }
  .ant-carousel :deep(.custom-slick-arrow:hover) {
    opacity: 0.5;
  }

  .ant-carousel :deep(.slick-slide h3) {
    color: #fff;
  }
  /deep/.slick-dots.slick-dots-bottom {
    display: none !important;
  }
  .noData {
    width: 125px;
    height: 96px;
    background: url('/@/assets/images/dialog/noData.png') no-repeat;
    background-size: 100% 100%;
    left: calc((100% - 125px) / 2);
    position: relative;
    top: calc((100% - 96px) / 2);
  }
}
</style>
