<template>
  <!-- 海绵项目详情 -->
  <Transition name="slide-fade">
    <div class="pmpSitNewDialogw">
      <div class="title">
        <span class="text">{{ allDate.projectName }}</span>
        <el-icon class="icon_clas" size="22" @click="dclosed">
          <Close />
        </el-icon>
      </div>
      <div class="content">
        <div class="left_content">
          <div>
            <div class="timage">
              建设规模及内容
              <div class="text_x" :title="BoxList.constructionAchievements">{{ BoxList.constructionAchievements }}</div>
            </div>
          </div>
          <div>
            <div class="timage">
              项目概况
              <div class="text_x" :title="BoxList.projectOverview">{{ BoxList.projectOverview }}</div>
            </div>
          </div>
          <div>
            <el-button @click="qitxiangq" class="timage qtxq">其他详情</el-button>
            <!-- bus.emit('checkProjectFX', { project: XmList.value[val], date: dateRain.value }); -->
            <el-button type="success" @click="checkDX" class="timage qtxq">查看效果</el-button>
          </div>
        </div>
        <div class="right_content">
          <el-carousel trigger="click" height="247px" v-if="srcList.length > 0">
            <el-carousel-item v-for="item in srcList" :key="item">
              <el-image
                preview-teleported
                class="img_age"
                :src="item"
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                :preview-src-list="srcList"
                :initial-index="4"
              />
            </el-carousel-item>
          </el-carousel>
          <el-empty :image-size="30" v-else />

          <div class="text_x image_e" style="height: auto">完成照片</div>
        </div>
      </div>
    </div>
  </Transition>
  <!-- 海绵项目具体详情 -->
  <el-dialog class="pmpSitNewDialog" v-model="daLigoShow" :title="allDate.projectName" :align-center="true" width="1200px" draggable>
    <el-tabs v-model="editableTabsValue" :stretch="true" @tab-click="TabsChange">
      <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name"> </el-tab-pane>
      <keep-alive>
        <component :is="componentId"></component>
      </keep-alive>
    </el-tabs>
  </el-dialog>
</template>
<script setup name="gongChengPingJia">
import { ref, reactive, toRefs, onMounted } from 'vue';
import XiangXiXinXi from './XiangXiXinXi.vue';
import jianseduibi from './jianseduibi.vue';
import xmsgt from './xmsgt.vue';
import modalSJ from './modalSJ.vue';
import bus from '@/bus';
import { projectInfoNewById } from '@/api/project/projectInformationNew';
import { selectProjectImageList } from '@/api/sponeScreen/gcpjApi';

const emnits = defineEmits();
const allDate = ref({});
const dateRain = ref('');
const BoxList = ref([]);
const daLigoShow = ref(false);
const editableTabsValue = ref('xxxx');
const componentId = ref(XiangXiXinXi);
const srcList = ref([]);
const editableTabs = ref([
  { name: 'xxxx', title: '详细信息' },
  { name: 'xmsgt', title: '项目施工图' },
  { name: 'jsdb', title: '项目成果展示' },
  { name: 'modalSJ', title: '实景图' },
]);

const props = defineProps({
  fullScreen: {
    type: Boolean,
    default: false,
  },
  allDateList: {
    type: Object,
  },
});
function dclosed() {
  editableTabsValue.value = 'xxxx';
  emnits('closed', false);
}
function qitxiangq() {
  daLigoShow.value = true;
  projectInfoNew(allDate.value.id);
}
function checkDX() {
  bus.emit('checkProjectFX', { project: BoxList.value });
}

// 获取项目详情
async function projectInfoNew(p) {
  let { data } = await projectInfoNewById(p);
  bus.emit('getProjectDate', data);
}
// 点击切换
function TabsChange({ props: { name } }) {
  projectInfoNew(allDate.value.id);
  switch (name) {
    case 'xxxx':
      componentId.value = XiangXiXinXi;
      break;
    case 'jsdb':
      componentId.value = jianseduibi;
      break;
    case 'xmsgt':
      componentId.value = xmsgt;
      break;
    case 'modalSJ':
      componentId.value = modalSJ;
      break;
  }
}
const allImages = ref({});
async function selectProjectImage(p) {
  let { data } = await selectProjectImageList(p);
  // console.log(data, 'datadatadata');
  BoxList.value = data[0];
  allImages.value = data[0];
  data[0]?.postConstructionFileList.forEach(i => {
    srcList.value.push(i.url);
  });
}

onMounted(() => {
  if (props?.allDateList) {
    allDate.value = props.allDateList;
    selectProjectImage({ projectNo: props.allDateList.projectNo });
  }

  bus.on('mapClick', row => {
    allDate.value = row;
    setTimeout(() => {
      selectProjectImage({ projectNo: row.projectNo });
      if (!allDate.value.constructionPurpose) {
        daLigoShow.value = true;
        projectInfoNew(allDate.value.id);
      }
    }, 200);
  });
});
onBeforeUnmount(() => {
  bus.off('mapClick');
});
</script>
<style lang="scss">
.pmpSitNewDialogw {
  width: 550px;
  height: 330px;
  position: absolute;
  top: 10px;
  left: 485px;
  z-index: 1012;
  opacity: 9;
  border-radius: 14px;

  .title {
    width: 100%;
    height: 40px;
    background: url('@/assets/newImgs/HMScreen/qipaotankuan.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    display: flex;
    border-radius: 8px;
    align-items: center;

    .icon_clas {
      position: absolute;
      right: 6px;
      top: 10px;
    }

    .text {
      font-size: 17px;
      font-weight: bold;
      color: #fff;
      display: inline-block;
      margin-left: 20px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 93%;
    }

    .image {
      text-align: center;
    }
  }

  .content {
    padding: 10px;
    display: flex;
    background: #003b6d;
    margin-top: -3px;

    div {
      flex: 1;
    }

    .left_content {
      > div {
        margin-bottom: 15px;

        &:last-of-type {
          margin-bottom: 0;
        }
      }
    }

    .timage {
      background: linear-gradient(90deg, #005cba 0%, rgba(0, 92, 186, 0) 100%);
      height: 96px;
      color: #fff;
      font-size: 17px;
      font-weight: bold;
      padding: 0 10px;
    }

    .qtxq {
      height: 36px;
    }

    .text_x {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #ffffff;
      overflow-y: scroll;
      height: 70px;
      cursor: pointer;
    }

    .image_e {
      text-align: center;
    }
  }
}
.pmpSitNewDialog {
  height: 680px;
  .el-dialog__header {
    width: 100%;
    height: 45px;
    background: url('@/assets/newImgs/HMScreen/qipaotankuan.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    display: flex;
    border-radius: 8px;
    align-items: center;
    padding-left: 40px;

    .icon_clas {
      position: absolute;
      right: 6px;
      top: 10px;
    }

    .el-dialog__headerbtn {
      position: absolute;
      top: -6px;
    }

    .el-dialog__title {
      color: #fff;
      margin-left: 10px;
      margin-top: -9px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      width: 93%;
    }
  }
  .el-tabs__item {
    font-size: 16px !important;
  }
}

.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

.img_age {
  width: 300px;
  height: 227px;
}
</style>