<template>
  <div id="RI_com">
    <n-data-table
      :data="modalData"
      :columns="modalColumns"
      :single-line="false"
    />
  </div>
</template>
<script>
import { ref, h, reactive, toRefs, onMounted } from "vue";
import { NImage } from "naive-ui";
export default {
  name: "RI_com",
  setup() {
    const allData = reactive({
      modalColumns: [
        {
          title: "问题描述",
          key: "problemDes",
        },
        {
          title: "建议修改措施",
          key: "proposal",
        },
        {
          title: "现场图片",
          key: "imgList",
          render(row) {
            const img = row.imgList.map((item, index) => {
              return h(NImage, {
                width: 48,
                src: item,
                style: {
                  margin: "5px",
                },
              });
            });
            return img;
          },
        },
      ],
      modalData: [
        {
          problemDes: "COD故障",
          proposal: "检查监测仪表，联系生产厂家",
          imgList: [
            "src/assets/Imgs/weixiufenxi1.png",
            "src/assets/Imgs/weixiufenxi2.png",
            "src/assets/Imgs/weixiufenxi3.png",
          ],
        },
        {
          problemDes: "4-6精细格栅数据传输不正常",
          proposal: "检查监测仪表，联系生产厂家",
          imgList: ["src/assets/Imgs/weixiufenxi1.png"],
        },
      ],
    });
    onMounted(() => {});
    return { ...toRefs(allData) };
  },
  computed: {},
  methods: {},
};
</script>
<style lang="less" scoped>
#RI_com {
  width: 100%;
  height: 100%;
}
</style>