
<template>
  <BasicModal v-bind="$attrs" @register="register" :closable="false" :showCancelBtn="false" okText="关闭" showFooter title="任务结果详情" width="1450px" @ok="closeModal">
    <BasicTable @register="registerTable">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'result'">
          <CheckOutlined :style="{ color: '#00ff00' }" v-if="record.result === 'OK'" />
          <CloseOutlined :style="{ color: '#ff0000' }" v-if="record.result === 'NG'" />
        </template>
      </template>
    </BasicTable>
  </BasicModal>
</template>

<script setup lang="ts">
import { BasicModal, useModalInner } from "@/components/Modal";
import {defineEmits, ref} from "vue";
import {BasicTable, useTable,} from "@/components/Table";
import { CheckOutlined, CloseOutlined } from "@ant-design/icons-vue";

const columns = [
  {
    title: '预埋件编号',
    dataIndex: 'code',
    key: 'code',
  },
  {
    title: '类型',
    dataIndex: 'type',
    key: 'type',
  },
  {
    title: 'X(mm)',
    dataIndex: 'x',
    key: 'x',
    width: '80px',
  },
  {
    title: 'Y(mm)',
    dataIndex: 'y',
    key: 'y',
    width: '80px',
  },
  {
    title: 'w(mm)',
    dataIndex: 'w',
    key: 'w',
    width: '80px',
  },
  {
    title: 'h(mm)',
    dataIndex: 'h',
    key: 'h',
    width: '80px',
  },
  {
    title: '边长1(mm)',
    dataIndex: 'l1',
    key: 'l1',
    width: '90px',
  },
  {
    title: '边长2(mm)',
    dataIndex: 'l2',
    key: 'l2',
    width: '90px',
  },
  {
    title: '边长3(mm)',
    dataIndex: 'l3',
    key: 'l3',
    width: '90px',
  },
  {
    title: '边长4(mm)',
    dataIndex: 'l4',
    key: 'l4',
    width: '90px',
  },
  {
    title: '检测中心(mm)',
    dataIndex: 'c',
    key: 'c',
    width: '110px',
  },
  {
    title: '结果',
    dataIndex: 'result',
    key: 'result',
    width: '80px',
  },
];

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

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

const [register, { closeModal, setModalProps }] = useModalInner(async (data) => {
  setModalProps({ confirmLoading: false });
  entity.value = data?.record;
  paramData.value = [];
  const items = entity.value && entity.value.resultJson ? JSON.parse(entity.value.resultJson) : [];
  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,
});

</script>
<style lang="scss" scoped>
@use '@/assets/custom.scss';
</style>
