<template>
  <!-- 问题详情查看 -->
  <div class="evaluationDetailPage">
    <div class="part">
      <div class="title">问题描述：</div>
      <div class="content">{{ dataDetail.questDesc }}</div>
    </div>
    <div class="part">
      <div class="title">问题发现时间：</div>
      <div class="content">{{ dataDetail.reportTime }}</div>
    </div>
    <div class="part">
      <div class="title">问题状态：</div>
      <div class="content">{{ dataDetail.status }}</div>
    </div>
    <div class="part">
      <div class="title">处理前图片：</div>
      <div class="content">
        <n-image :src="item.fileCloudStorageKey"
                 v-for="item in dataDetail.fileList"
                 height="100"
                 width="100"
                 :key="item.id"></n-image>
      </div>
    </div>
    <div class="part">
      <div class="title">处理后图片：</div>
      <div class="content">
        <n-image :src="item.fileCloudStorageKey"
                 v-for="item in dataDetail.afterList"
                 :key="item.id"></n-image>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted } from 'vue';
import { KaopingGetProblemInfo } from '@/services';

export default {
  name: 'evaluationDetailPage',
  components: [],
  props: {
    quesDetailId: String,
  },
  setup(props) {
    const allData = reactive({
      dataDetail: {
        questDesc: '',
        reportTime: '',
        status: '',
        afterList: [],
        fileList: [],
      },
    });

    // 获取考核子项列表
    async function getDetail() {
      let params = {
        id: props.quesDetailId,
      };
      let res = await KaopingGetProblemInfo(params);
      console.log(res.data)
      if (res && res.code == 200) {
        allData.dataDetail = res.data || {};
        if (res.data.status == 0) {
          allData.dataDetail.status = "待整改";
        } else if (res.data.status == 1) {
          allData.dataDetail.status = "已整改";
        } else {
          allData.dataDetail.status = "已核销";
        }
      }
    }
    onMounted(() => {
      getDetail();
    });
    onBeforeMount(() => { });
    return {
      ...toRefs(allData),
    };
  },
};
</script>
<style lang="less">
.evaluationDetailPage {
  .part {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    .title {
      width: 110px;
      color: #669db4;
      font-weight: bold;
    }
    .content {
      flex: 1;
      .n-image {
        margin-right: 10px;
        width: 100px;
        height: 100px;
      }
    }
  }
}
</style>