<template>
  <div>
    <el-tabs
      v-model="activeName"
      class="demo-tabs"
      @tab-click="handleClick"
      @tab-change="handleChange"
      stretch
    >
      <el-tab-pane label="销售合同" name="first"></el-tab-pane>
      <el-tab-pane label="采购合同" name="second"></el-tab-pane>
      <el-tab-pane label="交易明细" name="third"></el-tab-pane>
    </el-tabs>
    <div class="content-box" v-if="activeName !== 'third'">
      <div class="left">
        <div
          v-for="i in leftList"
          :key="i.id"
          class="left-item"
          :style="{ color: currentItem.id === i.id ? '#409eff' : '' }"
          @click="handleItemClick(i)"
        >
          <div v-if="activeName === 'first'">v {{ i.version }}</div>
          <div v-if="activeName === 'second'">
            {{ i.code }}
          </div>
        </div>
      </div>
      <div class="right">
        <div v-if="leftList && leftList.length > 0">
          <div
            style="text-align: right; margin-bottom: 20px"
            v-if="activeName === 'first'"
          >
            <el-button type="primary" @click="pushProcessApproval(currentItem)"
              >查看详情</el-button
            >
          </div>
          <div v-if="activeName === 'first'">
            <!-- <ContractPDF :rowData="rowData"></ContractPDF> -->
            <ContractPDFOne :rowData="rowData"></ContractPDFOne>
          </div>
          <div v-if="activeName === 'second'">
            <PurchasePDF :rowData="rowDataOne"></PurchasePDF>
          </div>
        </div>
        <div v-else style="padding-left: 300px">暂无数据</div>
      </div>
    </div>
    <div v-if="activeName === 'third'">
      <byTable
        :hidePagination="true"
        :hideSearch="true"
        :source="tableData"
        :config="config"
        highlight-current-row
        :action-list="[]"
      >
        <template #amount="{ item }">
          <div>{{ item.currency }} {{ moneyFormat(item.amount, 2) }}</div>
        </template>
        <template #accountManagementName="{ item }">
          <div>
            {{ item.accountManagementName }} （{{
              item.accountManagementOpening
            }}）
          </div>
        </template>
      </byTable>
    </div>
  </div>
</template>

<script setup>
import PurchasePDF from "@/components/PDF/purchasePDF.vue";
import ContractPDF from "@/components/PDF/contractPDF.vue";
import ContractPDFOne from "@/components/PDF/contractPDFOne.vue";

import byTable from "@/components/byTable/index";
const { proxy } = getCurrentInstance();
const props = defineProps({
  contractId: String,
});
const activeName = ref("first");
const currentItem = ref({});
const rowData = ref({});
const rowDataOne = ref({});
const leftList = ref([]);
const contractDataList = ref([]);
const purchaseDataList = ref([]);
const tableData = ref([]);
const transactionType = ref([
  {
    label: "请款",
    value: "1",
  },
  {
    label: "采购付款",
    value: "20",
  },
  {
    label: "到账认领",
    value: "30",
  },
]);
const config = computed(() => {
  return [
    {
      attrs: {
        label: "交易时间",
        prop: "createTime",
        width: 155,
      },
    },
    {
      attrs: {
        label: "交易类型",
        prop: "type",
        width: 80,
      },
      render(type) {
        return proxy.dictValueLabel(type, transactionType.value);
      },
    },
    {
      attrs: {
        label: "交易金额",
        prop: "amount",
        slot: "amount",
        width: 130,
      },
    },
    {
      attrs: {
        label: "摘要",
        prop: "remarks",
      },
    },
    {
      attrs: {
        label: "资金账户",
        prop: "accountManagementName",
        slot: "accountManagementName",
      },
    },
    {
      attrs: {
        label: "对方账户",
        prop: "name",
        width: 120,
      },
    },
  ];
});
const handleClick = () => {};

const handleItemClick = (item) => {
  currentItem.value = item;
  if (activeName.value === "first") {
    rowData.value = {
      id: item.id,
    };
  } else if (activeName.value === "second") {
    rowDataOne.value = {
      id: item.id,
    };
  }
};

const pushProcessApproval = (row) => {
  proxy.$router.push({
    path: "/platform_manage/process/processApproval",
    query: {
      flowKey: "contract_flow",
      id: row.flowId,
      processType: 20,
      random: proxy.random(),
      flowName: "销售合同详情",
    },
  });
  return;
};
const handleChange = (val) => {
  if (val === "first") {
    leftList.value = contractDataList.value;
  }
  if (val === "second") {
    leftList.value = purchaseDataList.value;
  }
  if (leftList.value && leftList.value.length > 0) {
    handleItemClick(leftList.value[0]);
  }
};
const getDetailsData = () => {
  proxy
    .post("/contract/getVersionList", { id: props.contractId })
    .then((res) => {
      contractDataList.value = res;
      leftList.value = contractDataList.value;
      if (contractDataList.value && contractDataList.value.length > 0) {
        handleItemClick(contractDataList.value[0]);
      }
    });
  proxy
    .post("/contract/getPurchaseListByContractId", { id: props.contractId })
    .then((res) => {
      purchaseDataList.value = res;
    });

  proxy
    .post("/contract/getAccountRunningWaterByContractId", {
      id: props.contractId,
    })
    .then((res) => {
      tableData.value = res;
    });
};
getDetailsData();
</script>

<style lang="scss" scoped>
.content-box {
  display: flex;
  .left {
    width: 100px;
    // background: #ccc;
    .left-item {
      height: 36px;
      line-height: 36px;
      text-align: center;
      cursor: pointer;
    }
  }
  .right {
    width: calc(100% - 100px);
    padding-left: 10px;
  }
}
.baseRow {
  min-height: 24px;
  border-top: 1px solid black;
  border-left: 1px solid black;
}
.contentRow {
  border-right: 1px solid black;
  line-height: 24px;
  padding-left: 4px;
}
</style>