<route lang="yaml">
    name: dataUsageLog
  </route>

<script lang="ts" setup name="dataUsageLog">
import TableTools from "@/components/Tools/table_tools.vue";
import { commonPageConfig, TableColumnWidth } from "@/utils/enum";
import {
  getContractProcessLog,
  getContractProcessLogDetail
} from "@/api/modules/dataSmartContract";
import useUserStore from "@/store/modules/user";
const { proxy } = getCurrentInstance() as any;
const route = useRoute();
const router = useRouter();
const fullPath = route.fullPath;
const userStore = useUserStore();
const userData = JSON.parse(userStore.userData)

/** 过程记录筛选框 */
const processTableSearchItemList = ref([{
  type: 'date-time',
  label: '',
  field: 'operatorTime',
  default: [],
  defaultStartTime: new Date(2000, 1, 1, 0, 0, 0),
  defaultEndTime: new Date(2000, 1, 1, 23, 59, 59),
  startPlaceholder: '执行开始时间',
  endPlaceholder: '执行结束时间',
  clearable: true
}, {
  type: 'select',
  label: '',
  field: 'executionProcess',
  default: '',
  placeholder: '执行环节',
  props: {
    value: 'value',
    label: 'label'
  },
  options: [{
    value: '策略解析',
  }, {
    value: '行为校验',
  }, {
    value: '操作执行',
  }],
  filterable: true,
  clearable: true
}, {
  type: "input",
  label: "",
  field: "executionEntityName",
  default: "",
  placeholder: "执行节点名称",
  maxlength: 50,
  clearable: true,
},]);

const currTableData: any = ref({});

/** ------------------ 过程记录 ----------------------- */
const processPage = ref({
  ...commonPageConfig,
  executionEntityName: '',
  operatorTime: [],
  executionProcess: ''
});

const processTableInfo = ref({
  id: "process-table",
  rowKey: 'guid',
  fields: [
    { label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center" },
    { label: "执行编号", field: "operationId", width: 140 },
    { label: "执行时间", field: "operationTime", width: 170 },
    { label: "执行节点名称", field: "executionEntityName", width: 220 },
    { label: "执行节点标识", field: "executionEntityId", width: 175 },
    { label: "执行合约名称", field: "contractName", width: 160 },
    { label: "执行环节", field: "executionProcess", width: 120 },
  ],
  data: [],
  showPage: true,
  page: {
    type: "normal",
    rows: 0,
    ...processPage.value,
  },
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 80,
    btns: [{
      value: 'view', label: '查看', click: (scope) => {
        currTableData.value = scope.row;
        processDetailDialogInfo.value.visible = true;
        processDetailDialogInfo.value.contentLoading = true;
        getContractProcessLogDetail(scope.row.guid).then((res: any) => {
          processDetailDialogInfo.value.contentLoading = false;
          if (res?.code == proxy.$passCode) {
            processDetailInfo.value = res.data || {};
            execContractTableInfo.value.data = processDetailInfo.value.policys || [];
          } else {
            res?.msg && proxy.$ElMessage.error(res?.msg)
          }
        })
      }
    }]
  },
  loading: false
});

const toProcessTableSearch = (val: any, clear: boolean = false) => {
  if (clear) {
    processTableSearchItemList.value.map((item) => (item.default = ""));
    processPage.value.executionEntityName = '';
    processPage.value.executionProcess = '';
    processPage.value.operatorTime = [];
  } else {
    processPage.value.executionEntityName = val.executionEntityName;
    processPage.value.executionProcess = val.executionProcess;
    processPage.value.operatorTime = val.operatorTime;
  }
  getProcessTableData();
};

const getProcessTableData = () => {
  processTableInfo.value.loading = true
  getContractProcessLog({
    pageIndex: processPage.value.curr,
    pageSize: processPage.value.limit,
    executionEntityName: processPage.value.executionEntityName,
    executionProcess: processPage.value.executionProcess,
    operationTimeStart: processPage.value.operatorTime?.[0],
    operationTimeEnd: processPage.value.operatorTime?.[1],
    contractGuid: route.query.contractGuid
  }).then((res: any) => {
    processTableInfo.value.data = [];
    if (res?.code == proxy.$passCode) {
      const data = res.data || {};
      processTableInfo.value.loading = false
      processTableInfo.value.data = data.records || []
      processTableInfo.value.page.limit = data.pageSize
      processTableInfo.value.page.curr = data.pageIndex
      processTableInfo.value.page.rows = data.totalRows
    } else {
      res?.msg && proxy.$ElMessage.error(res?.msg)
      processTableInfo.value.loading = false
    }
  }).catch(() => {
    processTableInfo.value.loading = false
  })
}

const processTablePageChange = (info) => {
  processPage.value.curr = Number(info.curr);
  processPage.value.limit = Number(info.limit);
  processTableInfo.value.page.curr = processPage.value.curr;
  processTableInfo.value.page.limit = processPage.value.limit;
  getProcessTableData();
};

onBeforeMount(() => {
  toProcessTableSearch({});
})

onActivated(() => {
  if (fullPath === route.fullPath) {
    document.title = `使用日志-${route.query.contractName}`;
    let tab: any = userStore.tabbar.find((tab: any) => tab.fullPath === fullPath);
    if (tab) {
      tab.meta.title = `使用日志-${route.query.contractName}`;
    }
  }
})


/** 过程记录详情对话框 */
const processDetailDialogInfo = ref({
  visible: false,
  size: 855,
  direction: "column",
  header: {
    title: "查看过程记录",
  },
  type: '',
  contents: [],
  footer: {
    show: false
  },
  contentLoading: false,
});

/** 查看过程记录详情 */
const processDetailInfo: any = ref({});

const handleProcessDialogBtnClick = (btn) => {
  if (btn.value == 'cancel') {
    processDetailDialogInfo.value.visible = false;
  }
}

const execContractTableInfo = ref({
  id: "exec-contract-table",
  height: '214px',
  fields: <any[]>[
    { label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center" },
    { label: "策略id", field: "strategyId", width: 260 },
    { label: "操作行为", field: "action", width: 120 },
    { label: "操作行为英文名称", field: "actionEnName", width: 140 },
    { label: "约束条件", field: "constraintName", width: 120 },
    { label: "约束条件英文名称", field: "constraintEnName", width: 140 },
    { label: "约束条件运算符", field: "constraintOperatorName", width: 140 },
    { label: "约束条件值", field: "constraintValue", width: 150 },
    { label: "执行结果", field: "result", width: 130 },
    // { label: "上报时间", field: "reportingTime", width: 170 },
  ],
  data: [],
  showPage: false,
  actionInfo: {
    show: false
  },
  loading: false
});

</script>

<template>
  <div class="container_wrap">
    <div class="table_tool_wrap">
      <TableTools :searchItems="processTableSearchItemList" :init="false" searchId="process-table-search"
        @search="toProcessTableSearch" />
    </div>
    <div class="table_panel_wrap">
      <Table :tableInfo="processTableInfo" @tablePageChange="processTablePageChange" />
    </div>
    <Dialog ref="processDialogRef" :dialogInfo="processDetailDialogInfo" class="log-process-detail"
      @btnClick="handleProcessDialogBtnClick">
      <template #extra-content>
        <div class="main-content" v-loading="processDetailDialogInfo.contentLoading">
          <div class="list_panel">
            <div class="list_item">
              <span class="item_label">执行时间：</span>
              <span class="item_value">{{ processDetailInfo?.operationTime || '--' }}</span>
            </div>
            <div class="list_item">
              <span class="item_label">执行结果：</span>
              <span class="item_value"><ellipsis-tooltip :content="processDetailInfo?.executionResult || '--'"
                  class-name="w100f mr8-i" :refName="'tooltipOver' + 'executionResult'"></ellipsis-tooltip></span>
            </div>
            <div class="list_item">
              <span class="item_label">执行环节：</span>
              <span class="item_value"><ellipsis-tooltip :content="processDetailInfo?.executionProcess || '--'"
                  class-name="w100f mr8-i" :refName="'tooltipOver' + 'executionProcess'"></ellipsis-tooltip></span>
            </div>
            <div class="list_item">
              <span class="item_label">合约名称：</span>
              <span class="item_value"><ellipsis-tooltip :content="processDetailInfo?.contractName || '--'"
                  class-name="w100f mr8-i" :refName="'tooltipOver' + 'contractName'"></ellipsis-tooltip></span>
            </div>
            <div class="list_item">
              <span class="item_label">执行节点标识：</span>
              <span class="item_value"><ellipsis-tooltip :content="processDetailInfo?.executionEntityId || '--'"
                  class-name="w100f mr8-i" :refName="'tooltipOver' + 'executionEntityId'"></ellipsis-tooltip></span>
            </div>
            <div class="list_item">
              <span class="item_label">执行节点名称：</span>
              <span class="item_value"><ellipsis-tooltip :content="processDetailInfo?.executionEntityName || '--'"
                  class-name="w100f mr8-i" :refName="'tooltipOver' + 'executionEntityName'"></ellipsis-tooltip></span>
            </div>
            <div class="h-title">策略信息</div>
            <Table :table-info="execContractTableInfo"></Table>
          </div>
        </div>
      </template>
    </Dialog>
  </div>
</template>

<style lang="scss" scoped>
.table_panel_wrap {
  height: calc(100% - 44px);
}

.main-content {
  margin: 20px;
}

.list_panel {
  display: flex;
  flex-wrap: wrap;
  display: flex;
  align-items: flex-start;

  &.main {
    .list_item {
      width: 25%;
    }
  }

  .list_item {
    width: 50%;
    line-height: 32px;
    font-size: 14px;
    color: var(--el-text-color-regular);
    display: flex;
    justify-content: space-between;
    min-width: 120px;

    .item_label {
      text-align: left;
    }

    .item_value {
      color: var(--el-color-regular);
      padding: 0 4px 0 0;
      flex: 1;
      text-align: justify;
      min-width: 0;

      .link {
        color: var(--el-color-primary);
        cursor: pointer;
        margin-left: 4px;
      }

    }

    &.is_block {
      width: 100%;

      .item_value {
        white-space: pre-wrap;
      }
    }

  }
}

:deep(.policy-table-detail) {
  .dialog_content {
    padding: 0px 20px 20px;
  }
}

.h-title {
  font-size: 14px;
  color: #212121;
  font-weight: 600;
  margin-right: 8px;
  margin-bottom: 8px;
}
</style>