<template>
  <div style="margin-top: -20px">
    <div style="margin-bottom:10px;text-align: right">
      <el-button icon="Download" @click="exportReport">导出报告</el-button>
    </div>
    <el-table :data="reportData" style="width: 100%;" border :span-method="spanMethod">
      <el-table-column prop="className" label="分类" width="180" align="center"/>
      <el-table-column prop="checkName" label="巡检项"/>
      <el-table-column label="巡检结果" width="160" align="center" prop="resultL" />
      <el-table-column prop="remark" label="备注" align="center" width="160">
        <template #default="{row}">
        <span :style="`color:${row.resultR === '正常'?'#1ab43f':'#e43'}`">
          {{ row.resultR || "-" }}
        </span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup lang="ts">
import {chkcResult} from "@/api/check/chkc"
import axios from "axios";
import {onMounted} from "vue";
import { getToken } from '@/utils/auth'
const props = defineProps({
  crId: {
    type: Number,
    default: 0
  },
  spanMethod:{
    type:Function
  }
})
const reportData = ref([])

const exportReport=async ()=>{
  const response = await axios({
    url: import.meta.env.VITE_APP_BASE_API+'/check/chkc/export/' + props.crId,
    method: 'GET',
    responseType: 'blob',
    headers: { 'Authorization': 'Bearer ' + getToken() }
  });
  const url = window.URL.createObjectURL(new Blob([response.data]));
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', 'report.docx');
  document.body.appendChild(link);
  link.click();
  link.parentNode.removeChild(link);
}

const getReport = async () => {
  const res = await chkcResult(props.crId)
  reportData.value = res.data.detailList
}

onMounted(()=>{
  getReport()
})

</script>
<style scoped lang="scss">
</style>
