
<template>
  <BasicModal v-bind="$attrs" @register="register" width="1570px" :closable="false">
    <template #title>
      <div style="color: #ffffff; font-size: 16px; font-weight: normal;"><FileTextOutlined /> {{title}}</div>
    </template>
    <template #footer>
      <div style="padding-right: 30px;">
        <a-button :icon="h(FileExcelOutlined)" @click="handleExport">导出结果(Excel)</a-button>
        <a-button :icon="h(CloseOutlined)" @click="closeModal">关闭</a-button>
      </div>
    </template>
    <BasicTable @register="registerTable">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'status'">
          <CheckOutlined :style="{ color: '#00ff00' }" v-if="record.status === 'good'" />
          <CloseOutlined :style="{ color: '#ff0000' }" v-if="record.status === 'error'" />
        </template>
      </template>
    </BasicTable>
  </BasicModal>
</template>

<script setup lang="ts">
import { BasicModal, useModalInner } from "@/components/Modal";
import {defineEmits, ref, h} from "vue";
import {BasicTable, useTable,} from "@/components/Table";
import { CheckOutlined, CloseOutlined, FileExcelOutlined, FileTextOutlined } from "@ant-design/icons-vue";
import ExcelJS from 'exceljs';
import { saveAs } from 'file-saver';


// #        '预埋件编号': item['code'],
// # '预埋件类型': item['type'],
// # '中心x': item['x'],
// # '中心y': item['y'],
// # '中心点标高': item['center'],
// # '宽度': item['best_cal_width'],
// # '高度': item['best_cal_height'],
// # '大概偏差': item['average_deviation'],
// # '人工测量x': item['m_x'],
// # '人工测量标高': item['m_z'],
// # '水平位置偏差': item['x_deviation'],
// # '垂直位置偏差': item['y_deviation'],
// # '偏差基准值': item['base'],
// # '是否需要调整': item['status'],  # good or bad

// layout.addWidget(self.add_param_item("编号", 180, True), row, 0)
// layout.addWidget(self.add_param_item("类型", -1, True), row, 1)
// layout.addWidget(self.add_param_item("X", 65, True), row, 2)
// layout.addWidget(self.add_param_item("Y", 65, True), row, 3)
// layout.addWidget(self.add_param_item("中心标高", 100, True), row, 4)
// layout.addWidget(self.add_param_item("宽度", 65, True), row, 5)
// layout.addWidget(self.add_param_item("高度", 65, True), row, 6)
// layout.addWidget(self.add_param_item("大概偏差", 100, True), row, 7)
// layout.addWidget(self.add_param_item("人工测量X", 100, True), row, 8)
// layout.addWidget(self.add_param_item("人工测量标高", 140, True), row, 9)
// layout.addWidget(self.add_param_item("水平位置偏差", 140, True), row, 10)
// layout.addWidget(self.add_param_item("垂直位置偏差", 140, True), row, 11)
// layout.addWidget(self.add_param_item("偏差基准值", 140, True), row, 12)
// layout.addWidget(self.add_param_item("是否需要调整", 140, True), row, 13)

const columns = [
  {
    title: '序号',
    dataIndex: 'sn',
    key: 'sn',
    width: '60px',
  },
  {
    title: '预埋件编号',
    dataIndex: 'code',
    key: 'code',
  },
  {
    title: '预埋件类型',
    dataIndex: 'type',
    key: 'type',
  },
  {
    title: '中心x',
    dataIndex: 'x',
    key: 'x',
    width: '80px',
  },
  {
    title: '中心y',
    dataIndex: 'y',
    key: 'y',
    width: '80px',
  },
  {
    title: '中心标高',
    dataIndex: 'center',
    key: 'center',
    width: '110px',
  },
  {
    title: '宽度',
    dataIndex: 'w',
    key: 'w',
    width: '80px',
  },
  {
    title: '高度',
    dataIndex: 'h',
    key: 'h',
    width: '80px',
  },
  {
    title: '大概偏差',
    dataIndex: 'average_deviation',
    key: 'average_deviation',
    width: '80px',
  },
  {
    title: '人工测量X',
    dataIndex: 'm_x',
    key: 'm_x',
    width: '100px',
  },
  {
    title: '人工测量标高',
    dataIndex: 'm_y',
    key: 'm_y',
    width: '100px',
  },
  {
    title: '水平位置偏差',
    dataIndex: 'x_deviation',
    key: 'x_deviation',
    width: '100px',
  },
  {
    title: '垂直位置偏差',
    dataIndex: 'y_deviation',
    key: 'y_deviation',
    width: '100px',
  },
  {
    title: '偏差基准值',
    dataIndex: 'base',
    key: 'base',
    width: '90px',
  },
  {
    title: '是否需要调整',
    dataIndex: 'status',
    key: 'status',
  },
];

const paramData = ref<any>([]);

const entity = ref();
const title = ref("");
const emit = defineEmits(['success', 'register']);

const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
  setModalProps({ confirmLoading: false });
  entity.value = data?.record;
  title.value = data?.record.name + " - 任务结果详情";
  paramData.value = [];
  const items = JSON.parse(entity.value.reportJson);
  items.forEach((d: any, index: number) => {
    paramData.value.push({ index, ...d });
  });
});

const [registerTable] = useTable({
  title: '',
  columns,
  dataSource: paramData,
  useSearchForm: false,
  showTableSetting: false,
  bordered: true,
  showIndexColumn: false,
  canResize: false,
  pagination: false,
  rowKey: (record: any) => record.code,
});

const handleExport = async () => {
  const workbook = new ExcelJS.Workbook();
  const worksheet = workbook.addWorksheet('Sheet1');
  // 设置表头数据
  worksheet.addRow(columns.map((d: any) => (d["title"] || d["key"])));
  // 设置表头样式
  const headerRow = worksheet.getRow(1);
  setCellStyle(headerRow, true);
  // 添加数据
  paramData.value.forEach((param: any, index: number) => {
    let data: any = [];
    columns.forEach((d: any) => {
      let v = !param[d["key"]] ? "" : param[d["key"]];
      if (!!v && v === "good") {
        v = "✔"
      }
      if (!!v && v === "error") {
        v = "×"
      }
      data.push(v);
    });
    worksheet.addRow(data);
    setCellStyle(worksheet.getRow(index + 2));
  });
  // 导出文件
  const buffer = await workbook.xlsx.writeBuffer();
  const blob = new Blob([buffer], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
  saveAs(blob, title.value.replaceAll(" ", "") + '.xlsx');
};

const setCellStyle = (row: any, isHeader: boolean = false) => {
  row.eachCell((cell: any) => {
    cell.fill = {
      type: 'pattern',
      pattern: 'solid',
      fgColor: isHeader ? {argb: 'FFD3D3D3'} : {argb: 'FFFFFFFF'}
    };
    cell.font = {
      bold: isHeader,
      color: isHeader ? {argb: 'FF000000'} : {argb: 'ff333333'}
    };
    cell.alignment = {vertical: 'middle', horizontal: 'center'};
    cell.border = {
      bottom: {style: 'thin', color: {argb: 'ff000000'}},
      right: {style: 'thin', color: {argb: 'ff000000'}},
    };
  });
}
</script>
<style lang="scss" scoped>
@use '@/assets/custom.scss';
</style>
