<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/gcpjApi'
const getProjectInfo = sessionStorage.getItem('getProjectInfo')
// const getProjectInfo = inject('getProjectInfo')
// const projectInfo = getProjectInfo()
const list = ref([])
const xmxxList = ref([
  {label:'巡查时间',props:'patrolTime'},
  {label:'巡查问题',props:'problemType'},
  {label:'巡查项目',props:'projectName'},
  {label:'是否整改',props:'status'}
])
async function getList(p) {
  if(!p) return
  let res = await getProjectPatrolProblemHomeList(p)
  if(res?.code !== 200) return
  list.value= res?.data || []
  console.log(list)
}
onMounted(() => {
  getList(getProjectInfo)
})
</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, .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>