<template>
  <Transition name="slide-fade">
    <!-- <div class="pmpSitNewDialogw"  v-if="allDate.constructionPurpose"> -->
      <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="allDate.constructionPurpose">{{ allDate.constructionPurpose }}</div>
            </div>
          </div>
          <div>
            <div class="timage">
              建设完成情况
              <div class="text_x" :title="allDate.constructionAchievements">{{ allDate.constructionAchievements }}</div>
            </div>
          </div>
          <div>
            <el-button @click="qitxiangq" class="timage qtxq">其他详情 </el-button>
          </div>
        </div>
        <div class="right_content">
          <el-image
            class="img_age"
            v-if="allImages?.postConstructionFileList?.length > 0"
            :zoom-rate="1.2"
            :max-scale="7"
            :preview-src-list="srcList"
            :min-scale="0.2"
            :src="allImages?.postConstructionFileList[0]?.url"
            alt=""
            :title="allDate.projectOverview"
          />

          <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="47.6%" 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 xianchangtup from '@/assets/images/Sponge_screen/xianchangtup.png';
import XiangXiXinXi from './XiangXiXinXi.vue';
import jianseduibi from './jianseduibi.vue';
import xmsgt from './xmsgt.vue';
import bus from '@/bus';
import { projectInfoNewById } from '@/api/project/projectInformationNew';
import { selectProjectImageList } from '@/api/sponeScreen/gcpjApi';

const emnits = defineEmits();
const allDate = ref({});
const daLigoShow = ref(false);
const editableTabsValue = ref('xxxx');
const componentId = ref(XiangXiXinXi);
const srcList = ref([]);
const editableTabs = ref([
  { name: 'xxxx', title: '详细信息' },
  { name: 'jsdb', title: '项目成果展示' },
  { name: 'xmsgt', 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);
}
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;
  }
}
const allImages = ref({});
async function selectProjectImage(p) {
  let { data } = await selectProjectImageList(p);
  allImages.value = data[0];
  srcList.value = [data[0]?.postConstructionFileList[0]?.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);
  });
});
</script>
<style lang="scss">
.pmpSitNewDialogw{
  width: 550px;
  height: 330px;
  position: absolute;
  top: 10px;
  left: 485px;
  z-index: 100;
  background: linear-gradient(0deg, #005CBA  0%,  #000F26  100%);
  opacity: 9;
  border-radius: 14px;
  .title {
    width: 100%;
    height: 40px;
    background: url('@/assets/images/Sponge_screen/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: 16px;
      font-weight: bold;
      color: #fff;
      display: inline-block;
      margin-left: 10px;
    }

    .image {
      text-align: center;
    }
  }
  .content {
    padding: 10px;
    display: flex;
    display: flex;
    div {
      flex: 1;
    }
    .left_content {
      // display: flex;
      // flex-direction: column;
      // height: 330px;
      > 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;
    }
  }
}
// ::-webkit-scrollbar {
//   width: 0;
//   //  height: 10px;
// }
.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: 100%;
  height: 247px;
}

</style>