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

<script lang="ts" setup name="traceabilityInquiryManage">
import TableTools from "@/components/Tools/table_tools.vue";
import {
  getBlockChainPageList,
  getBlockChainDetail
} from "@/api/modules/dataSmartContract";
import { commonPageConfig } from "@/components/PageNav";
import { TableColumnWidth } from "@/utils/enum";

const { proxy } = getCurrentInstance() as any;

const blockTableSearchItemList = ref([{
  type: "input",
  label: "",
  field: "keyWord",
  default: "",
  placeholder: "编码/名称",
  maxlength: 50,
  clearable: true,
}]);

const blockPage = ref({
  ...commonPageConfig,
  keyWord: ''
});

const toBlockTableSearch = (val: any, clear: boolean = false) => {
  if (clear) {
    blockTableSearchItemList.value.map((item) => (item.default = ""));
    blockPage.value.keyWord = '';
  } else {
    blockPage.value.keyWord = val.keyWord;
  }
  getBlockTableData();
};

const processTableInfo = ref({
  id: "process-table",
  rowKey: 'guid',
  fields: [
    //  { label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center" },
    { label: "编码", field: "code", width: 355 },
    { label: "名称", field: "name", width: 160 },
    { label: "类型", field: "type", width: 120 },
    { label: "提交日期", field: "submitTime", width: 170 },
    { label: "所属主体", field: "tenantName", minWidth: 200 }
  ],
  data: [],
  showPage: true,
  page: {
    type: "normal",
    rows: 0,
    ...blockPage.value,
  },
  loading: false,
});

const getBlockTableData = () => {
  processTableInfo.value.loading = true
  getBlockChainPageList({
    pageIndex: blockPage.value.curr,
    pageSize: blockPage.value.limit,
    keyWord: blockPage.value.keyWord
  }).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) => {
  blockPage.value.curr = Number(info.curr);
  blockPage.value.limit = Number(info.limit);
  processTableInfo.value.page.curr = blockPage.value.curr;
  processTableInfo.value.page.limit = blockPage.value.limit;
  getBlockTableData();
};

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

const activities: any = ref([]);

const detailLoading = ref(false);

const handleTableExpandChange = (row: any, expandedRows: any[]) => {
  let expand = expandedRows.includes(row);
  if (!expand) {
    return;
  }
  detailLoading.value = true;
  getBlockChainDetail({
    pageIndex: 1,
    pageSize: -1,
    type: row.type,
    code: row.code
  }).then((res: any) => {
    detailLoading.value = false;
    if (res?.code == proxy.$passCode) {
      const data = res.data?.records || []
      activities.value = [];
      for (const d of data) {
        activities.value.push({
          timestamp: d.updateTIme,
          type: 'primary',
          hollow: true,
          info: d
        })
      }
    } else {
      activities.value = [];
      res?.msg && proxy.$ElMessage.error(res?.msg)
    }
  })
}

</script>

<template>
  <div class="container_wrap">
    <div class="table_tool_wrap">
      <TableTools :searchItems="blockTableSearchItemList" :init="false" searchId="block-table-search"
        @search="toBlockTableSearch" />
    </div>
    <div class="table_panel_wrap">
      <el-table v-loading="processTableInfo.loading" ref="tableRef" :data="processTableInfo.data"
        @expand-change="handleTableExpandChange" :highlight-current-row="true" stripe border height="100%"
        tooltip-effect="light" row-key="guid" class="expand-table"
        :style="{ width: '100%', height: 'calc(100% - 8px)', display: 'inline-block', }">
        <el-table-column type="expand">
          <template #default="scope">
            <el-timeline style="width: 100%;min-height: 150px;" v-loading="detailLoading">
              <el-timeline-item v-for="(activity, index) in activities" :key="index" :timestamp="activity.timestamp"
                :hollow="activity.hollow" :type="activity.type" placement="top">
                <div class="list_panel">
                  <template v-if="activity.info?.bizType == '合约'">
                    <div class="list_item">
                      <span class="item_label">合约发起方：</span>
                      <span class="item_value"><ellipsis-tooltip :content="activity.info?.contractSubmitName || '--'"
                          class-name="w100f mr8-i"
                          :refName="'tooltipOver' + 'contractSubmitName'"></ellipsis-tooltip></span>
                    </div>
                    <div class="list_item">
                      <span class="item_label">数据提供方：</span>
                      <span class="item_value"><ellipsis-tooltip :content="activity.info?.contractProviderName || '--'"
                          class-name="w100f mr8-i"
                          :refName="'tooltipOver' + 'contractProviderName'"></ellipsis-tooltip></span>
                    </div>
                    <div class="list_item">
                      <span class="item_label">数据使用方：</span>
                      <span class="item_value"><ellipsis-tooltip :content="activity.info?.contractUseName || '--'"
                          class-name="w100f mr8-i"
                          :refName="'tooltipOver' + 'contractUseName'"></ellipsis-tooltip></span>
                    </div>
                  </template>
                  <template v-else-if="activity.info?.bizType == '连接器'">
                    <div class="list_item">
                      <span class="item_label">连接器名称：</span>
                      <span class="item_value"><ellipsis-tooltip :content="activity.info?.bizName || '--'"
                          class-name="w100f mr8-i" :refName="'tooltipOver' + 'bizName'"></ellipsis-tooltip></span>
                    </div>
                    <div class="list_item">
                      <span class="item_label">提交方：</span>
                      <span class="item_value"><ellipsis-tooltip :content="activity.info?.submitter || '--'"
                          class-name="w100f mr8-i" :refName="'tooltipOver' + 'submitter1'"></ellipsis-tooltip></span>
                    </div>
                    <div class="list_item">
                      <span class="item_label">提交时间：</span>
                      <span class="item_value">{{ activity.info?.updateTime || '--' }}</span>
                    </div>
                  </template>
                  <template v-else>
                    <div class="list_item">
                      <span class="item_label">数据产品名称：</span>
                      <span class="item_value"><ellipsis-tooltip :content="activity.info?.bizName || '--'"
                          class-name="w100f mr8-i" :refName="'tooltipOver' + 'bizName'"></ellipsis-tooltip></span>
                    </div>
                    <div class="list_item">
                      <span class="item_label">数据产品类型：</span>
                      <span class="item_value">{{ activity.info?.bizType || '--' }}</span>
                    </div>
                    <div class="list_item">
                      <span class="item_label">提交方：</span>
                      <span class="item_value"><ellipsis-tooltip :content="activity.info?.submitter || '--'"
                          class-name="w100f mr8-i" :refName="'tooltipOver' + 'submitter'"></ellipsis-tooltip></span>
                    </div>
                  </template>
                  <div class="list_item" style="width: 66.66%;">
                    <span class="item_label">区块链ID：</span>
                    <span class="item_value"><ellipsis-tooltip :content="activity.info?.blockchainTx || '--'"
                        class-name="w100f mr8-i" :refName="'tooltipOver' + 'blockchainTx'"></ellipsis-tooltip></span>
                  </div>
                  <div class="list_item">
                    <span class="item_label">区块链时间：</span>
                    <span class="item_value">{{ activity.info?.blockchainTime || '--' }}</span>
                  </div>
                  <div class="list_item is_block" :style="{ width: activity.info?.bizType == '合约' ? '66.66%' : '100%' }">
                    <span class="item_label">hash值：</span>
                    <span class="item_value"><ellipsis-tooltip :content="activity?.info?.logHash || '--'"
                        class-name="w100f mr8-i" :refName="'tooltipOver' + 'logHash'"></ellipsis-tooltip></span>
                  </div>
                   <div class="list_item" v-if="activity.info?.bizType == '合约'">
                      <span class="item_label">提交方：</span>
                      <span class="item_value"><ellipsis-tooltip :content="activity.info?.submitter || '--'"
                          class-name="w100f mr8-i" :refName="'tooltipOver' + 'submitter'"></ellipsis-tooltip></span>
                    </div>
                  <div v-show="index < activities.length - 1" class="split-line"></div>
                </div>
              </el-timeline-item>
            </el-timeline>
          </template>
        </el-table-column>
        <el-table-column label="序号" type="index" width="56px" align="center" show-overflow-tooltip>
          <template #default="scope">
            <span>{{
              blockPage.curr !== undefined
                ? (blockPage.curr - 1) * blockPage.limit + scope.$index + 1
                : scope.$index + 1
            }}</span>
          </template>
        </el-table-column>
        <el-table-column v-for="field in processTableInfo.fields" :prop="field.field" :label="field.label"
          :width="field.width" :minWidth="field.minWidth" :align="field.align" show-overflow-tooltip>
          <template #default="scope">
            <span>{{ scope.row[field.field || ''] || '--' }}</span>
          </template>
        </el-table-column>
      </el-table>
      <PageNav :pageInfo="blockPage" @pageChange="processTablePageChange" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-table.expand-table) {
  .el-table__expanded-cell.el-table__cell {
    background: #fff !important;
    padding-top: 14px;
    padding-bottom: 14px;
    padding-left: 8px;
    padding-right: 14px;
  }
}

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

  .list_item {
    width: 33.33%;
    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;
      flex: 1;
      text-align: justify;
      min-width: 0;

      &.link {
        color: var(--el-color-primary);
        cursor: pointer;
      }

      &.row {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: row;

        :deep(.custom) {
          width: auto;
          max-width: calc(100% - 75px);
        }
      }
    }

    &.is_block {
      width: 100%;

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

:deep(.el-timeline) {
  margin-left: -8px;

  .el-timeline-item__tail {
    height: calc(100% - 18px);
    top: 14px;
  }

  .el-timeline-item {
    padding-bottom: 8px;
  }

  .el-timeline-item__timestamp {
    color: #212121;
    font-size: 14px;
    font-weight: 600;
  }

  .time-title {
    color: #212121;
  }

  .row-per {
    display: flex;
    flex-direction: row;
    align-items: center;

    .desc {
      color: #999;

      .main {
        color: var(--el-color-primary);
        cursor: pointer;
      }
    }

  }
}

.split-line {
  border-top: 1px solid #d9d9d9;
  height: 1px;
  width: 100%;
  margin-top: 4px;
}
</style>