<template>
  <div class="container_wrap full" v-loading="fullscreenLoading">
    <div class="content_main">
      <ContentWrap id="id-baseInfo" title="数据申请信息" description="" :isExpand="baseInfoExpand" :expand-swicth="true"
        class="mb16" @expand="(v) => baseInfoExpand = v">
        <div class="list_panel">
          <div class="list_item">
            <span class="item_label">产品名称：</span>
            <span class="item_value link" @click="viewProductDetail">
              <ellipsis-tooltip :content="detailInfo.damName || '--'" class-name="w100f mr8-i"
                :refName="'tooltipOver' + 'damName'"></ellipsis-tooltip>
            </span>
          </div>
          <div class="list_item">
            <span class="item_label">产品编号：</span>
            <span class="item_value">{{ detailInfo.productCode || '--' }}</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.damTypeName || '--' }}</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.productPublisherName || '--' }}</span>
          </div>
            <div class="list_item is_block">
            <span class="item_label">数据粒度说明：</span>
            <span class="item_value">{{ detailInfo.description || '--' }}</span>
          </div>
           <div class="list_item is_block">
            <span class="item_label">使用场景描述：</span>
            <span class="item_value">{{ detailInfo.description || '--' }}</span>
          </div>
        </div>
      </ContentWrap>
      <ContentWrap id="id-approveInfo" title="流程审批" expandSwicth style="margin-top: 15px" :isExpand="expandApprove"
        @expand="(v) => expandApprove = v">
        <ApprovalProcess ref="approvalProcessRef" v-if="deploymentId" :deploymentId="deploymentId"
          :processInstanceId="processInstanceId">
        </ApprovalProcess>
      </ContentWrap>
    </div>
    <div class="tool_btns">
      <div class="btns">
        <el-button v-for="btn in toolBtns" :type="btn.type" :plain="btn.plain" @click="btnClick(btn)">{{ btn.label
          }}</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="productApplicationEdit">
import useUserStore from "@/store/modules/user";

const { proxy } = getCurrentInstance() as any;
const userStore = useUserStore();
const route = useRoute();
const router = useRouter();
const fullPath = route.fullPath;

const fullscreenLoading = ref(false);
const baseInfoExpand = ref(true);
const expandApprove = ref(true);

const deploymentId = ref('');
const processInstanceId = ref('');

const detailInfo: any = ref({});

const viewProductDetail = () => {
   // TODO
}


const toolBtns: any = computed(() => {
  let btnsArr: any = [{
    label: "关闭", value: "cancel", plain: true
  }];
  // TODO,资产运营平台TODO
  return btnsArr;
});

const btnClick = (btn: any) => {
  switch (btn.value) {
    case 'cancel':
      cancel();
      break;
    default:
      break;
  }
}

const cancel = () => {
  userStore.setTabbar(userStore.tabbar.filter((tab: any) => tab.fullPath !== fullPath));
  router.push({
    name: 'productApplicationManage'
  });
}

onBeforeMount(() => {
  
})

</script>

<style lang="scss" scoped>

.content_main {
  height: calc(100% - 44px);
  padding: 16px;
  overflow: hidden auto;
  position: sticky;
}

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

  .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;
      }
    }

    &.is_block {
      width: 100%;

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

.tool_btns {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  border-top: 1px solid #d9d9d9;
}
</style>