<template>
  <div class="tenant">
    <div class="content">
      <byTable
        :source="sourceList.data"
        :pagination="sourceList.pagination"
        :config="config"
        :loading="loading"
        highlight-current-row
        :selectConfig="selectConfig"
        :action-list="[
          {
            text: '发起请款',
            action: () => openModal(),
          },
        ]"
        @get-list="getList"
      >
        <template #fileSlot="{ item }">
          <div
            style="cursor: pointer; color: #409eff"
            @click="handleClickFile(item)"
          >
            {{ item.fileName }}
          </div>
        </template>
      </byTable>
    </div>

    <el-dialog
      title="打印"
      v-if="openPrint"
      v-model="openPrint"
      width="680px"
      v-loading="loadingPrint"
    >
      <div id="pdfDom" style="width: 616px">
        <div
          style="
            margin: 16px 8px;
            border: 1px solid black;
            font-size: 12px !important;
            color: black;
          "
        >
          <div
            style="
              font-size: 16px;
              font-weight: 700;
              text-align: center;
              padding: 8px;
            "
          >
            <span>{{ printDetails.corporationName }}</span>
            <span style="margin-left: 16px"
              >{{ dictDataEcho(printDetails.type, fundsType) }}审批单</span
            >
          </div>
          <div class="baseRow"></div>
          <div class="baseRow" style="display: flex">
            <div class="contentRow" style="width: 80px">请款部门</div>
            <div class="contentRow" style="width: calc(50% - 80px)">
              {{ printDetails.deptName }}
            </div>
            <div class="contentRow" style="width: 80px">货币</div>
            <div class="contentRow" style="width: calc(50% - 80px)">
              {{ dictDataEcho(printDetails.currency, accountCurrency) }}
            </div>
          </div>
          <div class="baseRow" style="display: flex">
            <div class="contentRow" style="width: 80px">请款时间</div>
            <div class="contentRow" style="width: calc(50% - 80px)">
              {{ printDetails.createTime }}
            </div>
            <div class="contentRow" style="width: 80px">发票类型</div>
            <div class="contentRow" style="width: calc(50% - 80px)"></div>
          </div>
          <div
            class="baseRow"
            style="display: flex"
            v-if="printDetails.type == '2'"
          >
            <div class="contentRow" style="width: 80px">预支单</div>
            <div class="contentRow" style="width: calc(100% - 80px)"></div>
          </div>
          <div class="baseRow" style="display: flex">
            <div class="contentRow" style="width: 80px">请款说明</div>
            <div class="contentRow" style="width: calc(100% - 80px)">
              {{ printDetails.paymentRemarks }}
            </div>
          </div>
          <div class="baseRow" style="display: flex">
            <div class="contentRow" style="width: 80px">凭证</div>
            <div class="contentRow" style="width: calc(100% - 80px)"></div>
          </div>
          <div class="specialRow">
            <span>请款明细</span>
          </div>
          <div
            v-if="
              printDetails.accountRequestFundsDetailList &&
              printDetails.accountRequestFundsDetailList.length > 0
            "
          >
            <div
              v-for="item in printDetails.accountRequestFundsDetailList"
              :key="item.id"
            >
              <div class="baseRow" style="display: flex">
                <div class="contentRow" style="width: 25%">费用类型</div>
                <div class="contentRow" style="width: 25%">关联合同</div>
                <div class="contentRow" style="width: 25%">款项说明</div>
                <div class="contentRow" style="width: 25%">请款金额</div>
              </div>
              <div class="baseRow" style="display: flex">
                <div class="contentRow" style="width: 25%">
                  {{ dictDataEcho(item.costType, fundsCostType) }}
                </div>
                <div class="contentRow" style="width: 25%"></div>
                <div class="contentRow" style="width: 25%">
                  {{ item.remarks }}
                </div>
                <div class="contentRow" style="width: 25%">
                  {{ item.amount }}
                </div>
              </div>
            </div>
          </div>
          <div v-else>
            <div class="baseRow" style="display: flex">
              <div class="contentRow" style="width: 25%">费用类型</div>
              <div class="contentRow" style="width: 25%">关联合同</div>
              <div class="contentRow" style="width: 25%">款项说明</div>
              <div class="contentRow" style="width: 25%">请款金额</div>
            </div>
            <div class="baseRow" style="display: flex">
              <div class="contentRow" style="width: 25%"></div>
              <div class="contentRow" style="width: 25%"></div>
              <div class="contentRow" style="width: 25%"></div>
              <div class="contentRow" style="width: 25%"></div>
            </div>
          </div>
          <div class="baseRow" style="display: flex">
            <div class="contentRow" style="width: 80px">请款总额</div>
            <div class="contentRow" style="width: calc(50% - 80px)">
              {{ printDetails.total }}
            </div>
            <div class="contentRow" style="width: 80px">单证数量</div>
            <div class="contentRow" style="width: calc(50% - 80px)">
              {{ printDetails.quantity }}
            </div>
          </div>
          <!-- <div v-if="printDetails.type == '2'">
            <div class="baseRow" style="display: flex">
              <div class="contentRow" style="width: 17%">费用类型</div>
              <div class="contentRow" style="width: 17%">关联合同</div>
              <div class="contentRow" style="width: 17%">预支金额</div>
              <div class="contentRow" style="width: 32%">核销说明</div>
              <div class="contentRow" style="width: 17%">核销金额</div>
            </div>
            <div class="baseRow" style="display: flex">
              <div class="contentRow" style="width: 17%">AAA</div>
              <div class="contentRow" style="width: 17%">BBB</div>
              <div class="contentRow" style="width: 17%">CCC</div>
              <div class="contentRow" style="width: 32%">DDD</div>
              <div class="contentRow" style="width: 17%">EEE</div>
            </div>
            <div class="baseRow" style="display: flex">
              <div class="contentRow" style="width: 80px">预支金额</div>
              <div class="contentRow" style="width: calc(50% - 80px)">GGG</div>
              <div class="contentRow" style="width: 80px">核销总额</div>
              <div class="contentRow" style="width: calc(50% - 80px)">HHH</div>
            </div>
            <div class="baseRow" style="display: flex">
              <div class="contentRow" style="width: 80px">差额</div>
              <div class="contentRow" style="width: calc(50% - 80px)">GGG</div>
              <div class="contentRow" style="width: 80px">单证数量</div>
              <div class="contentRow" style="width: calc(50% - 80px)">HHH</div>
            </div>
          </div> -->
          <div class="specialRow">
            <span>付款明细</span>
          </div>
          <div class="baseRow" style="display: flex">
            <div class="contentRow" style="width: 80px">付款方式</div>
            <div class="contentRow" style="width: calc(50% - 80px)">
              {{ dictDataEcho(printDetails.paymentMethod, fundsPaymentMethod) }}
            </div>
            <div class="contentRow" style="width: 80px">付款账户</div>
            <div class="contentRow" style="width: calc(50% - 80px)">
              {{ printDetails.accountManagementName }}
            </div>
          </div>
          <div class="baseRow" style="display: flex">
            <div class="contentRow" style="width: 80px">户名</div>
            <div class="contentRow" style="width: calc(50% - 80px)">
              {{ printDetails.name }}
            </div>
            <div class="contentRow" style="width: 80px">开户银行</div>
            <div class="contentRow" style="width: calc(50% - 80px)">
              {{ printDetails.openingBank }}
            </div>
          </div>
          <div class="baseRow" style="display: flex">
            <div class="contentRow" style="width: 80px">账号</div>
            <div class="contentRow" style="width: calc(50% - 80px)">
              {{ printDetails.accountOpening }}
            </div>
            <div class="contentRow" style="width: 80px">联行号</div>
            <div class="contentRow" style="width: calc(50% - 80px)">
              {{ printDetails.interbankNumber }}
            </div>
          </div>
          <div class="specialRow">
            <span>审批记录</span>
          </div>
          <div class="baseRow" style="display: flex">
            <div class="contentRow" style="width: 80px">开始</div>
            <div class="contentRow" style="width: calc(100% - 240px)">AAA</div>
            <div class="contentRow" style="width: 160px">BBB</div>
          </div>
          <div class="baseRow" style="display: flex">
            <div class="contentRow" style="width: 80px">审核</div>
            <div class="contentRow" style="width: calc(100% - 240px)">AAA</div>
            <div class="contentRow" style="width: 160px">BBB</div>
          </div>
          <div class="baseRow" style="display: flex">
            <div class="contentRow" style="width: 80px">结束</div>
            <div class="contentRow" style="width: calc(100% - 240px)">AAA</div>
            <div class="contentRow" style="width: 160px">BBB</div>
          </div>
        </div>
      </div>
      <template #footer>
        <el-button @click="openPrint = false" size="large">取消</el-button>
        <el-button type="primary" @click="clickDownload()" size="large"
          >下载PDF</el-button
        >
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import byTable from "@/components/byTable/index";
import useUserStore from "@/store/modules/user";
import { ref } from "vue";

const loading = ref(false);
const sourceList = ref({
  data: [],
  pagination: {
    total: 3,
    pageNum: 1,
    pageSize: 10,
    status: "",
  },
});
const { proxy } = getCurrentInstance();
const selectConfig = reactive([
  {
    label: "类型",
    prop: "type",
    data: [],
  },
  {
    label: "审批状态",
    prop: "status",
    data: [
      {
        label: "审批中",
        value: "10",
      },
      {
        label: "驳回",
        value: "20",
      },
      {
        label: "已通过",
        value: "30",
      },
    ],
  },
  {
    label: "放款状态",
    prop: "paymentStatus",
    data: [],
  },
]);
const config = computed(() => {
  return [
    {
      attrs: {
        label: "归属公司",
        prop: "corporationName",
      },
    },
    {
      attrs: {
        label: "归属部门",
        prop: "deptName",
      },
    },
    {
      attrs: {
        label: "请款类型",
        prop: "type",
      },
      render(type) {
        return proxy.dictDataEcho(type, fundsType.value);
      },
    },
    {
      attrs: {
        label: "请款人",
        prop: "userName",
      },
    },
    {
      attrs: {
        label: "请款时间",
        prop: "paymentTime",
      },
    },
    {
      attrs: {
        label: "请款金额",
        prop: "total",
      },
    },
    {
      attrs: {
        label: "用款说明",
        prop: "paymentRemarks",
      },
    },
    {
      attrs: {
        label: "付款方式",
        prop: "paymentMethod",
      },
      render(paymentMethod) {
        return proxy.dictDataEcho(paymentMethod, fundsPaymentMethod.value);
      },
    },
    {
      attrs: {
        label: "付款账户",
        prop: "accountManagementName",
      },
    },
    {
      attrs: {
        label: "审批状态",
        prop: "status",
      },
      render(status) {
        return status == 10
          ? "审批中"
          : status == 20
          ? "驳回"
          : status == 30
          ? "已通过"
          : "";
      },
    },
    {
      attrs: {
        label: "放款状态",
        prop: "subscribeContent",
      },
      // render(subscribeContent) {
      //   return proxy.dictDataEcho(subscribeContent, fundsPaymentMethod.value);
      // },
    },
    {
      attrs: {
        label: "操作",
        width: "100",
        align: "right",
      },
      renderHTML(row) {
        return [
          {
            attrs: {
              label: "打印",
              type: "primary",
              text: true,
            },
            el: "button",
            click() {
              clickPrint(row);
            },
          },
        ];
      },
    },
  ];
});
const getList = async (req) => {
  sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  loading.value = true;
  proxy
    .post("/accountRequestFunds/page", sourceList.value.pagination)
    .then((message) => {
      sourceList.value.data = message.rows;
      sourceList.value.pagination.total = message.total;
      setTimeout(() => {
        loading.value = false;
      }, 200);
    });
};
const openModal = () => {
  const flowName = `${userInfo.nickName}的请款申请（发起）`;
  proxy.$router.replace({
    path: "/platform_manage/process/processApproval",
    query: {
      flowKey: "account_request_funds_flow",
      flowName,
    },
  });
};
const userInfo = useUserStore().user;
const tenantId = userInfo.tenantId;
const fundsType = ref([]);
const accountCurrency = ref([]);
const fundsCostType = ref([]);
const fundsPaymentMethod = ref([]);
const getDictData = () => {
  // 请款类型数据
  proxy
    .post("/dictTenantData/page", {
      pageNum: 1,
      pageSize: 999,
      tenantId: tenantId,
      dictCode: "founds_type",
    })
    .then((res) => {
      fundsType.value = res.rows;
      selectConfig[0].data = res.rows.map((x) => ({
        label: x.dictValue,
        value: x.dictKey,
      }));
    });
  // 请款付款方式数据
  proxy
    .post("/dictTenantData/page", {
      pageNum: 1,
      pageSize: 999,
      tenantId: tenantId,
      dictCode: "funds_payment_method",
    })
    .then((res) => {
      fundsPaymentMethod.value = res.rows;
    });
  // 货币
  proxy
    .post("/dictTenantData/page", {
      pageNum: 1,
      pageSize: 999,
      dictCode: "account_currency",
      tenantId: useUserStore().user.tenantId,
    })
    .then((res) => {
      accountCurrency.value = res.rows;
    });
  proxy
    .post("/dictTenantData/page", {
      pageNum: 1,
      pageSize: 999,
      dictCode: "funds_cost_type",
      tenantId: useUserStore().user.tenantId,
    })
    .then((res) => {
      fundsCostType.value = res.rows;
    });
};
getDictData();
getList();
const openPrint = ref(false);
const loadingPrint = ref(false);
const printDetails = ref({});
const clickPrint = (row) => {
  loadingPrint.value = true;
  openPrint.value = true;
  proxy.post("/accountRequestFunds/detail", { id: row.id }).then((res) => {
    printDetails.value = res;
  });
  // proxy.post("/flowExample/getApprovalRecord", { id: row.id }).then((res) => {
  //   console.log(res);
  // });
};
const clickDownload = () => {
  proxy.getPdf("请款PDF文件");
};
</script>

<style lang="scss" scoped>
.tenant {
  padding: 20px;
}
.baseRow {
  min-height: 24px;
  border-top: 1px solid black;
}
.contentRow {
  border-right: 1px solid black;
  line-height: 24px;
  padding-left: 4px;
}
.specialRow {
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  border-top: 1px solid black;
  height: 30px;
  line-height: 30px;
}
</style>
