<template>
  <a-table
    :pagination="false"
    :dataSource="dataSource"
    :columns="columns"
    class="min-table"
    bordered
    size="middle"
    :scroll="{ y: 'calc(100vh - 300px)' }"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex == 'message'">
        <a-popover placement="left">
          <template #content>
            <div style="width: 400px">
              <vue-json-pretty :path="'res'" :data="record.message"> </vue-json-pretty>
            </div>
          </template>
          <a @click="copyClick(record.message)">{{ record.message }}</a>
        </a-popover>
      </template>
      <template v-if="column.dataIndex == 'variableJsonValue'">
        <a-popover placement="left">
          <template #content>
            <div style="width: 400px">
              <vue-json-pretty :path="'res'" :data="record.variableJsonValue"> </vue-json-pretty>
            </div>
          </template>
          <a @click="copyClick(record.variableJsonValue)">{{ record.variableJsonValue }}</a>
        </a-popover>
      </template>
      <template v-if="column.dataIndex == 'definitionName'">
        {{ record?.definitionIdWrapper?.definitionName ? record.definitionIdWrapper.definitionName : '' }}
      </template>
      <template v-if="column.dataIndex == 'definitionVersion'">
        {{ record?.definitionIdWrapper?.definitionVersion ? record.definitionIdWrapper.definitionVersion : '' }}
      </template>
      <template v-if="column.dataIndex == 'successFlag'">
        <span v-if="record.successFlag == 'Y'">成功</span>
        <span v-else>失败</span>
      </template>
    </template>
  </a-table>
</template>

<script setup name="RoamLog">
import { ref } from 'vue';
import VueJsonPretty from 'vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';
import useClipboard from 'vue-clipboard3';
import { message } from 'ant-design-vue/es';

const props = defineProps({
  // 表格数据
  dataSource: {
    type: Array,
    default: []
  }
});

// 表格配置
const columns = ref([
  {
    key: 'index',
    title: '序号',
    width: 60,
    hideInSetting: true,
    fixed: 'left',
    align: 'center',
    customRender: ({ index }) => index + 1
  },
  {
    title: '流程节点名称',
    width: 120,
    ellipsis: true,
    dataIndex: 'reNodeIdWrapper'
  },
  {
    title: '执行日志',
    ellipsis: true,
    dataIndex: 'message'
  },
  {
    title: '实时流程变量',
    ellipsis: true,
    dataIndex: 'variableJsonValue'
  },
  {
    title: '是否成功',
    width: 100,
    dataIndex: 'successFlag'
  },
  {
    title: '记录时间',
    width: 150,
    dataIndex: 'createTime'
  }
]);

//一键复制
const { toClipboard } = useClipboard();
const copyClick = async item => {
  try {
    await toClipboard(item);
    message.success('复制成功');
  } catch (e) {
    console.error(e);
  }
};
</script>

<style scoped lang="less">
:deep(.ant-table-body) {
  min-height: calc(100vh - 300px) !important;
}
.min-table {
  padding: 0 10px;
}
:deep(.vjs-value-string) {
  color: #000;
}
</style>
