<template>
  <div class="saga-report">
    <section class="saga-report-section">
      <el-row :gutter="20"  v-for="(item,index) in errorReport" :key="item.id" style="margin-bottom: 10px">
          <el-col :span="12">
            <h3>{{index +1}}.{{item.name}}</h3>
            <div class="problem-description">{{item.note}}</div>
            <h5>问题创建人：{{item.author}}</h5>
          </el-col>
          <el-col :span="12" v-show="item.pic" v-for="pic in item.pic" :key="pic.key">
            <h4 style="font-size: 14px">现场照片</h4>
            <el-image
              :src="`/image-service/common/image_get?systemId=dataPlatform&key=${pic.key}`"
              style="width:100%;height: 300px" :alt="item.name"
              :fit="fill"></el-image>
          </el-col>
      </el-row>
    </section>
  </div>
</template>

<script>
  import { mapState, mapGetters } from "vuex";

  export default {
    name: "report",
    data() {
      return {
        fill:'cover'
      }
    },
    computed: {
        ...mapGetters('layout', ['projectId']),
        ...mapState('layout', ['errorReport'])

    },
    created() {
      console.log("lisa gagagg",this.errorReport)
    },
    watch: {
        projectId() {
            this.$router.push({path: '/floor/abnormalprop'})
        }
    }
  }
</script>

<style scoped lang="less">
  .saga-report {
    width: 1000px;
    height: 710px;
    background: #fff;
    margin: 0 auto;
    overflow-y: auto;

    .saga-report-section {
      padding: 20px;

      .problem-description {
        width: 400px;
        height: 240px;
        background: #eeeeee;
        border-radius: 5px;
        padding: 10px;
      }
    }
  }
</style>
