<template>
  <div class="XiangMuXunCa">
    <div class="list">
      <div class="imageBox" v-for="item in list">
        <el-image
          class="img"
          :src="item.sysFileList?.[0]?.url || prjectadd"
          :zoom-rate="1"
          :initial-index="4"
          :preview-src-list="item.sysFileList.map(it => it.url)"
        >
        </el-image>
        <div class="xiangxinfo">
          <div class="xiangxinfoIn">
            <div v-for="i in xmxxList" :key="i.props" class="label_xnmx">
              <div class="label_xnmx_foot">
                <span class="label">{{ i.label }}</span>
                <span class="value ellipsis" :title="item[i.props]">
                  <template v-if="i.props === 'status'">
                    {{ item[i.props] === '0' ? '是' : '否' }}
                  </template>
                  <template v-else>
                    {{ item[i.props] }}
                  </template>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="XiangMuXunCa">
import { ref, onMounted, inject } from 'vue';
import prjectadd from '@/assets/images/gcpjimg/1697446901050.png';
import { getProjectPatrolProblemHomeList } from '@/api/sponeScreen/gcpjApi';
const getProjectInfo = sessionStorage.getItem('getProjectInfo')

const list = ref([]);
const xmxxList = ref([
  { label: '巡查时间', props: 'patrolTime' },
  { label: '巡查问题', props: 'problemType' },
  { label: '巡查项目', props: 'projectName' },
  { label: '是否整改', props: 'status' },
]);
async function getList() {
  if (!getProjectInfo) return;
  let res = await getProjectPatrolProblemHomeList({
    projectNo:getProjectInfo,
  });
  if (res?.code !== 200) return;
  list.value = res?.data || [];
  console.log(list);
}
onMounted(() => {
  getList();
});
</script>
<style lang="scss" scoped>
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
  text-align: center;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.carousel {
  display: flex;
  flex-wrap: wrap;
  div {
    flex: 0 0 20%;
    height: 240px;
    margin: 10px 30px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.list {
  display: flex;
  flex-wrap: wrap;
  .imageBox {
    width: calc(20% - 10px);
    height: 300px;
    border: 2px solid #3cbdff;
    margin-right: 10px;
    position: relative;
    &:nth-type-of(4) {
      margin-right: 0;
    }
    .img {
      width: 100%;
      height: 100%;
      position: relative;
    }
    .xiangxinfo {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: rgba(0, 4, 10, 0.5);
      display: flex;
      justify-content: center;
      overflow: hidden;
      .xiangxinfoIn {
        width: 100%;
        .label_xnmx {
          .label_xnmx_foot {
            display: flex;
            align-items: center;
            width: 100%;
            height: 100%;
            line-height: 26px;
            position: relative;
            padding: 0 15px;
          }
          .label {
            flex-shrink: 0;
            margin-right: 15px;
            text-align: center;
            color: #a4bfd9;
          }
          .value {
            flex: 1;
            overflow: hidden;
            color: #3cbdff;
          }
        }
      }
    }
  }
}
.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>