<route lang="yaml">
name: transactionDetail 数据产品交易信息详情
</route>

<script lang="ts" setup name="transactionDetail">
import { getDownFileSignByUrl, obsDownloadRequest, parseAndDecodeUrl } from "@/api/modules/obsService";
import { changeNum, download, getDownloadUrl } from "@/utils/common";
import { ElMessage } from "element-plus";
import { ref } from "vue";
import { getTransactionDetail } from "@/api/modules/dataAsset";

const { proxy } = getCurrentInstance() as any;
const router = useRouter();
const route = useRoute();
const detailLoading = ref(false);

const detailInfo: any = ref({});

onBeforeMount(() => {
  detailLoading.value = true;
  getTransactionDetail({ guid: route.query.guid }).then((res: any) => {
    detailLoading.value = false;
    if (res.code == proxy.$passCode) {
      detailInfo.value = res.data || {};
    } else {
      ElMessage.error(res.msg);
    }
  });
})

const onUploadFileDownload = async (params) => {
  const {name, url} = params;
  const refSignInfo: any = await getDownFileSignByUrl(parseAndDecodeUrl(url).fileName);
  if (!refSignInfo?.data) {
    refSignInfo?.msg && ElMessage.error(refSignInfo?.msg);
    return;
  }
  obsDownloadRequest(refSignInfo?.data).then((res: any) => {
    if (res && !res.msg) {
      var fileSuffix = name ? name.substring(name.lastIndexOf('.') + 1) : '';
      download(res, name, fileSuffix);
    } else {
      res?.msg && ElMessage.error(res?.msg);
    }
  })
}

const onUploadFilePreview = async (params) => {
  console.log(params, 'params');
  const {name, url} = params;
  // let f = formInline.value[item.field].find(i => i.name == file.name);
  // let url = f.url;
  let fileName: string = parseAndDecodeUrl(url).fileName;
  const refSignInfo: any = await getDownFileSignByUrl(fileName);
  if (!refSignInfo?.data) {
    refSignInfo?.msg && ElMessage.error(refSignInfo?.msg);
    return;
  }
  obsDownloadRequest(refSignInfo?.data).then((res: any) => {
    if (res && !res.msg) {
      var fileSuffix = name ? name.substring(name.lastIndexOf('.') + 1).toLowerCase() : '';
      if (fileSuffix === 'png' || fileSuffix === 'jpeg' || fileSuffix === 'jpg' || fileSuffix === 'pdf') { //浏览器可以支持图片和pdf预览
        let fileUrl = <string>getDownloadUrl(res, name, fileSuffix);
        let win = window.open(fileUrl, name);
        win && (win.document.title = name);
      } else {
        download(res, name, fileSuffix);
      }
    } else {
      res?.msg && ElMessage.error(res?.msg);
    }
  });
}

</script>

<template>
  <div class="container_wrap" v-loading="detailLoading">
    <ContentWrap id="id-detail" title="数据产品交易信息" description="" style="margin: 16px 16px 0px">
       
        <div class="panel_body">
          <div class="list_panel">
            <div class="list_item">
              <span class="item_label">数据产品名称:</span>
              <span class="item_value">{{ detailInfo.damName || '--' }}</span>
            </div>
            <div class="list_item">
              <span class="item_label">产品类型:</span>
              <span class="item_value">{{ detailInfo.damTypeName || '--' }}</span>
            </div>
            <div class="list_item">
              <span class="item_label">买方名称:</span>
              <span class="item_value">{{ detailInfo.buyerName || '--' }}</span>
            </div>
            <div class="list_item">
              <span class="item_label">卖方名称:</span>
              <span class="item_value">{{ detailInfo.sellerName || '--' }}</span>
            </div>
            <div class="list_item">
              <span class="item_label">交易币种:</span>
              <span class="item_value">{{ detailInfo.tradingCurrencyName || '--' }}</span>
            </div>
            <div class="list_item">
              <span class="item_label">原始交易金额:</span>
              <span class="item_value">{{ detailInfo.originalTradingAmount != null ? changeNum(detailInfo.originalTradingAmount, 2) : '--' }}</span>
            </div>
            <div class="list_item">
              <span class="item_label">交易金额(元):</span>
              <span class="item_value">{{ detailInfo.tradingAmount != null ? changeNum(detailInfo.tradingAmount, 2) : '--' }}</span>
            </div>
            <div class="list_item">
              <span class="item_label">交易方式:</span>
              <span class="item_value">{{ detailInfo.tradingWayName || '--'
                }}</span>
            </div>
            <div class="list_item" v-if="detailInfo.exchangeName">
              <span class="item_label">交易场所:</span>
              <span class="item_value">{{ detailInfo.exchangeName || '--' }}</span>
            </div>
            <div class="list_item">
              <span class="item_label">交易时间:</span>
              <span class="item_value">{{ detailInfo.tradingTime || '--'
                }}</span>
            </div>
            <div class="list_item">
              <span class="item_label">合同编号:</span>
              <span class="item_value">{{ detailInfo.contractCode || '--' }}</span>
            </div>
             <div class="list_item">
              <span class="item_label">合同名称:</span>
              <span class="item_value">{{ detailInfo.contractName || '--' }}</span>
            </div>

            <div class="list_item is_block">
              <div class="file_item" v-if="detailInfo.tradingProof?.length">
                <span class="item_label">合同附件:</span>
                <span class="item_value">
                   <div class="file-operate">
                <template
                  v-if="detailInfo.tradingProof?.[0]?.name.substring(detailInfo.tradingProof?.[0]?.name.lastIndexOf('.') + 1).toLowerCase() == 'xls' || detailInfo.tradingProof?.[0]?.name.substring(detailInfo.tradingProof?.[0]?.name.lastIndexOf('.') + 1).toLowerCase() == 'xlsx'">
                  <img class="file-img" src="../../assets/images/excel.png" />
                </template>
                <template
                  v-else-if="detailInfo.tradingProof?.[0]?.name.substring(detailInfo.tradingProof?.[0]?.name.lastIndexOf('.') + 1).toLowerCase() == 'doc' || detailInfo.tradingProof?.[0]?.name.substring(detailInfo.tradingProof?.[0]?.name.lastIndexOf('.') + 1).toLowerCase() == 'docx'">
                  <img class="file-img" src="../../assets/images/word.png" />
                </template>
                <template
                  v-else-if="detailInfo.tradingProof?.[0]?.name.substring(detailInfo.tradingProof?.[0]?.name.lastIndexOf('.') + 1).toLowerCase() == 'zip'">
                  <img class="file-img" src="../../assets/images/zip.png" />
                </template>
                <template
                  v-else-if="detailInfo.tradingProof?.[0]?.name.substring(detailInfo.tradingProof?.[0]?.name.lastIndexOf('.') + 1).toLowerCase() == 'rar'">
                  <img class="file-img" src="../../assets/images/RAR.png" />
                </template>
                <template
                  v-else-if="detailInfo.tradingProof?.[0]?.name.substring(detailInfo.tradingProof?.[0]?.name.lastIndexOf('.') + 1).toLowerCase() == 'pdf'">
                  <img class="file-img" src="../../assets/images/PDF.png" />
                </template>
                <template
                  v-else-if="detailInfo.tradingProof?.[0]?.name.substring(detailInfo.tradingProof?.[0]?.name.lastIndexOf('.') + 1).toLowerCase() == 'png'">
                  <img class="file-img" src="../../assets/images/png.png" />
                </template>
                <template
                  v-else-if="detailInfo.tradingProof?.[0]?.name.substring(detailInfo.tradingProof?.[0]?.name.lastIndexOf('.') + 1).toLowerCase() == 'jpg' || detailInfo.tradingProof?.[0]?.name.substring(detailInfo.tradingProof?.[0]?.name.lastIndexOf('.') + 1).toLowerCase() == 'jpeg'">
                  <img class="file-img" src="../../assets/images/jpg.png" />
                </template>
                <div class="file-name"><ellipsis-tooltip :content="detailInfo.tradingProof[0].name ?? ''"
                    class-name="w100f" refName="tooltipOver"></ellipsis-tooltip></div>
                <div :style="{ right: '36px' }" class="file-preview"
                  v-if="detailInfo.tradingProof?.[0]?.name.substring(detailInfo.tradingProof?.[0]?.name.lastIndexOf('.') + 1).toLowerCase() == 'pdf' || detailInfo.tradingProof?.[0]?.name.substring(detailInfo.tradingProof?.[0]?.name.lastIndexOf('.') + 1).toLowerCase() == 'png' || detailInfo.tradingProof?.[0]?.name.substring(detailInfo.tradingProof?.[0]?.name.lastIndexOf('.') + 1).toLowerCase() == 'jpg' || detailInfo.tradingProof?.[0]?.name.substring(detailInfo.tradingProof?.[0]?.name.lastIndexOf('.') + 1).toLowerCase() == 'jpeg'"
                  @click="onUploadFilePreview(detailInfo.tradingProof?.[0])">查看</div>
                <div :style="{ right: '0px' }" class="file-preview"
                  @click="onUploadFileDownload(detailInfo.tradingProof?.[0])">下载</div>
              </div>
                </span>
              </div>
            </div>
          </div>
        </div>
    </ContentWrap>
  </div>
</template>

<style lang="scss" scoped>
  .panel_body {
    padding: 8px 16px;
    box-shadow: 0 0 0 1px rgba(229, 229, 229, 1);
    border-top: none;
    margin-top: 1px;

    .list_panel {
      display: flex;
      flex-wrap: wrap;

      .list_item {
        width: 50%;
        line-height: 32px;
        font-size: 14px;
        color: #666666;
        display: flex;
        justify-content: space-between;

        .item_label {
          width: 100px;
          text-align: right;
          flex-shrink: 0;

          &.t_left {
            width: auto;
          }
        }

        .file_item {
          width: 50%;
          display: flex;
          justify-content: space-between;
        }

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

          .file-operate {
            display: flex;
            align-items: center;
            position: relative;

            .file-img {
              width: 24px;
              height: 24px;
            }

            &:hover {
              background-color: #f5f5f5;
            }

            .file-name {
              color: var(--el-color-regular);
              margin-left: 4px;
              width: calc(100% - 120px);
            }

            .file-preview {
              position: absolute;
              cursor: pointer;
              color: var(--el-color-primary);
              margin-right: 8px;
              white-space: nowrap;
            }
          }

          .area_text+.area_text {
            &::before {
              content: '、',
            }
          }
        }

        &.is_block {
          width: 100%;

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

      .list_item1 {
        width: 50%;
        line-height: 32px;
        font-size: 14px;
        color: #666666;
        display: flex;
        justify-content: space-between;

        .item_label {
          width: 100px;
          text-align: right;
          flex-shrink: 0;
        }

        .file_item {
          width: 100%;
          display: flex;
          justify-content: space-between;
        }

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

          .file-operate {
            display: flex;
            align-items: center;
            position: relative;

            .file-img {
              width: 24px;
              height: 24px;
            }

            &:hover {
              background-color: #f5f5f5;
            }

            .file-name {
              color: var(--el-color-regular);
              margin-left: 4px;
              width: calc(100% - 120px);
            }

            .file-preview {
              position: absolute;
              cursor: pointer;
              color: var(--el-color-primary);
              margin-right: 8px;
              white-space: nowrap;
            }
          }

          .area_text+.area_text {
            &::before {
              content: '、',
            }
          }
        }

        // &.is_block {
        //   width: 100%;

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

      :deep(.el-form) {
        width: 100%;
      }

      :deep(.panel_body) {
        box-shadow: none;
      }

      &.label_auto {
        .list_item {
          .item_label {
            width: auto;
          }

          .item_value {
            padding-left: 0;
          }
        }
      }
    }

    .table_panel_wrap {
      .table_panel {
        padding: 0;
        min-height: unset;
      }
    }

    .process_panel {
      height: 500px;

      .iframe-sty {
        width: 100%;
        height: 100%;
        border: none;
      }

      :deep(.property-panel) {
        height: calc(100% - 50px) !important;
      }
    }

    &.collapse {
      height: 0;
      padding: 0;
      overflow: hidden;
    }
  }
</style>