<template>
  <div class="tenant">
    <byTable
      :source="sourceList.data"
      :pagination="sourceList.pagination"
      :config="config"
      :loading="loading"
      :selectConfig="selectConfig"
      highlight-current-row
      :table-events="{
        select: selectRow,
        // 'select-all': selectRow,
      }"
      :action-list="[
        {
          text: '合并付款',
          disabled: selectData.length === 0,
          action: () => start(),
        },
      ]"
      @get-list="getList">
      <template #amount="{ item }">
        <div style="width: 100%">
          <span style="padding-right: 4px">{{ item.currency }}</span>
          <span>{{ moneyFormat(item.amount, 2) }}</span>
        </div>
      </template>
      <template #arrivalAmount="{ item }">
        <div style="width: 100%">
          <span style="padding-right: 4px">{{ item.currency }}</span>
          <span>{{ moneyFormat(item.arrivalAmount, 2) }}</span>
        </div>
      </template>
      <template #paidAmount="{ item }">
        <div style="width: 100%">
          <span style="padding-right: 4px">{{ item.currency }}</span>
          <span>{{ moneyFormat(item.paidAmount, 2) }}</span>
        </div>
      </template>
      <template #invoiceAmount="{ item }">
        <div style="width: 100%">
          <span style="padding-right: 4px">{{ item.currency }}</span>
          <span>{{ moneyFormat(item.invoiceAmount, 2) }}</span>
        </div>
      </template>
    </byTable>
  </div>
</template>

<script setup>
import byTable from "@/components/byTable/index";
import { computed, ref } from "vue";
import { ElMessage } from "element-plus";

const { proxy } = getCurrentInstance();
const loading = ref(false);
const supplierList = ref([]);
const payStatus = ref([
  {
    label: "未付款",
    value: 0,
  },
  {
    label: "部分付款",
    value: 10,
  },
  {
    label: "已付款",
    value: 20,
  },
]);
const sourceList = ref({
  data: [],
  pagination: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
    keyword: "",
    supplyId: "",
    payStatus: "",
  },
});
const selectConfig = computed(() => {
  return [
    {
      label: "供应商",
      prop: "supplyId",
      data: supplierList.value,
    },
    {
      label: "付款状态",
      prop: "type",
      data: payStatus.value,
    },
  ];
});
const config = computed(() => {
  return [
    {
      type: "selection",
      attrs: {
        checkAtt: "isCheck",
      },
    },
    {
      attrs: {
        label: "采购合同号",
        prop: "code",
        width: 200,
      },
    },
    {
      attrs: {
        label: "供应商名称",
        prop: "supplyName",
        "min-width": 200,
      },
    },
    {
      attrs: {
        label: "合同金额",
        slot: "amount",
        width: 140,
      },
    },
    {
      attrs: {
        label: "到货金额",
        slot: "arrivalAmount",
        width: 140,
      },
    },
    {
      attrs: {
        label: "已付款",
        slot: "paidAmount",
        width: 140,
      },
    },
    {
      attrs: {
        label: "已收发票",
        slot: "invoiceAmount",
        width: 140,
      },
    },
    {
      attrs: {
        label: "付款状态",
        prop: "payStatus",
        width: 120,
      },
      render(type) {
        return proxy.dictValueLabel(type, payStatus.value);
      },
    },
    {
      attrs: {
        label: "操作",
        width: 120,
        align: "center",
        fixed: "right",
      },
      renderHTML(row) {
        return [
          {
            attrs: {
              label: "申请付款",
              type: "primary",
              text: true,
            },
            el: "button",
            click() {
              selectData.value = [row];
              start();
            },
          },
        ];
      },
    },
  ];
});
const getDict = () => {
  proxy.post("/supplierInfo/page", { pageNum: 1, pageSize: 999 }).then((res) => {
    if (res.rows && res.rows.length > 0) {
      supplierList.value = res.rows.map((item) => {
        return {
          label: item.name,
          value: item.id,
        };
      });
    }
  });
};
const getList = async (req) => {
  sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  loading.value = true;
  proxy.post("/purchase/paymentBill", sourceList.value.pagination).then((message) => {
    message.rows.forEach((x) => {
      x.isCheck = true;
    });
    sourceList.value.data = message.rows;
    sourceList.value.pagination.total = message.total;
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
};
getDict();
getList();
const selectData = ref([]);
const selectRow = (data) => {
  selectData.value = data;
};
const start = () => {
  if (selectData.value.length > 0) {
    let ids = selectData.value.map((x) => x.id).join();
    proxy.$router.replace({
      path: "/platform_manage/process/processApproval",
      query: {
        flowKey: "pay_flow",
        flowName: "采购付款申请",
        supplyId: selectData.value[0].supplyId,
        ids,
        random: proxy.random(),
      },
    });
  } else {
    return ElMessage({
      message: "请勾选数据！",
      type: "info",
    });
  }
};

watch(selectData, (newVal) => {
  if (newVal.length == 0) {
    sourceList.value.data.forEach((x) => {
      x.isCheck = true;
    });
  } else if (newVal.length == 1) {
    const current = newVal[0];
    sourceList.value.data.forEach((x) => {
      if (x.supplyId !== current.supplyId) {
        x.isCheck = false;
      }
    });
  }
});
</script>

<style lang="scss" scoped>
.tenant {
  margin: 20px;
}
::v-deep(.el-input-number .el-input__inner) {
  text-align: left;
}
:deep(.el-table__header-wrapper .el-checkbox) {
  display: none;
}
</style>
