<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="card-title">{{ $t("银行实收明细详情") }}</div>
      <el-form ref="addForm" :data="addForm" label-width="250px">
        <el-form-item :label="$t('收款单号')">{{
          form.receiptNo
        }}</el-form-item>
        <el-form-item :label="$t('剩余应收金额')">
          <template v-if="surplusData.length == 0"> 0</template>
          <div v-if="surplusData.length > 0">
            <div v-for="(amount, currency) in surplusData" :key="currency">
              <span v-if="amount">
                {{ amount }}{{ getCurrencyLabel(currency) }}</span
              >
            </div>
          </div>
        </el-form-item>
        <el-form-item :label="$t('收款账户')" prop="accountNo">
          <span
            >{{ addForm.accountNo }}{{ "(" + addForm.accountName + ")" }}</span
          >
        </el-form-item>
        <el-form-item :label="$t('实收日期')" prop="amountDate">
          <span>{{ addForm.amountDate }}</span>
        </el-form-item>
        <div style="display: flex">
          <el-form-item :label="$t('实收')" prop="amount">
            <span>{{ addForm.amount }}</span>
          </el-form-item>
          <el-form-item label-width="0px" prop="currencyId">
            <span>（{{ getCurrencyLabel(addForm.currencyId) }}）</span>
          </el-form-item>
        </div>
        <el-form-item v-if="showCurrencyId != addForm.currencyId" prop="rate">
          <template slot="label">
            <span
              :title="
                $t(
                  '实收币种与核销基准币种一样时，无需填写汇率，不一样需要填写汇率'
                )
              "
              >{{ $t("兑核销基准币种汇率") }}（{{
                getCurrencyLabel(showCurrencyId)
              }}）</span
            >
          </template>
          <span>{{ addForm.rate }}</span>
        </el-form-item>
        <el-form-item v-if="showCurrencyId != addForm.currencyId">
          <template slot="label">
            {{ $t("兑核销基准币种金额") }}（{{
              getCurrencyLabel(showCurrencyId)
            }}）
          </template>
          <span>{{
            addForm.writeOffAmount
              ? parseFloat(addForm.writeOffAmount).toFixed(2)
              : ""
          }}</span>
        </el-form-item>
        <el-form-item :label="$t('水单附件')" prop="attr">
          <div>
            <div v-for="(v, i) in addForm.attr" :key="i">
              <el-link :href="v.url" type="primary" target="_blank">{{
                v.name
              }}</el-link>
            </div>
          </div>
        </el-form-item>
        <el-form-item :label="$t('水单号')" prop="billNo">
          <span>{{ addForm.billNo }}</span>
        </el-form-item>
      </el-form>
    </el-card>
    <div slot="header" class="bpm-title">{{ $t("审核流程") }}</div>
    <work-flow xmlkey="merge_order" v-model="selectedUsers"></work-flow>

    <div slot="footer" style="margin: 20px 0">
      <el-button type="primary" @click="submitForm(0)">{{
        $t("提交审核")
      }}</el-button>
      <el-button
        type="primary"
        @click="$store.dispatch('tagsView/delCurrentView')"
        >{{ $t("关闭") }}</el-button
      >
    </div>
  </div>
</template>

<script>
import {
  getReceivableItem,
  getInvoicingItem,
  getReceiptAccountList,
  getReceiptInfoByIds,
  financeReceiptItemWriteOff,
} from "@/api/ecw/financial";
import { getCurrencyPage } from "@/api/ecw/currency";
import WorkFlow from "@/components/WorkFlow/";
import NP from "number-precision";

export default {
  components: {
    WorkFlow,
  },
  data() {
    return {
      addForm: {},
      id: 0,
      detailed: [],
      currencyList: [],
      surplusData: [],
      receiptAccountList: [],
      selectedUsers: [],
      list: [],
      params: {
        page: 1,
        rows: 20,
      },
      bankId: 0,
      form: {},
    };
  },
  async created() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
    }
    if (this.$route.query.bankId) {
      this.bankId = this.$route.query.bankId;
    }
    await getInvoicingItem({ id: this.id }).then((res) => {
      this.list = [...res.data];
    });
    await getReceiptAccountList({ id: this.id }).then((res) => {
      this.receiptAccountList = [...res.data];
    });
    await getCurrencyPage(this.params).then(
      (res) => (this.currencyList = res.data.list)
    );
    await this.getList();
    await getReceiptInfoByIds({ id: this.id }).then((res) => {
      this.form = res.data;
    });
  },
  methods: {
    getList() {
      getReceivableItem({ id: this.id }).then((res) => {
        this.detailed = res.data.map((v) => ({
          ...v,
          amountDate: this.parseTime(v.amountDate, "{y}-{m}-{d}"),
          rate: parseFloat(v.rate).toFixed(2),
          attr: v.attr
            ? v.attr
                .split(",")
                .map((t) => ({ name: t.slice(t.lastIndexOf("/") + 1), url: t }))
            : [],
        }));
        console.log(this.detailed);
        this.addForm = this.detailed.find((itt) => itt.id == this.bankId);
        console.log(this.addForm);
        this.handleAddReceiptItem();
      });
    },
    getCurrencyLabel(id) {
      var label = this.currencyList.filter((item) => item.id == id);
      if (label.length > 0)
        return this.$i18n.locale == "zh_CN"
          ? label[0].titleZh
          : label[0].titleEn;
      return "";
    },
    submitForm() {
      this.$modal
        .confirm(this.$t("您确认要提交审核吗" + "?"))
        .then(() => {
          financeReceiptItemWriteOff({
            receiptId: this.id,
            receiptNo: this.form.receiptNo,
            receiptItemId: this.bankId,
          }).then((res) => {
            this.$message.success(this.$t("提交成功"));
            this.$store.dispatch("tagsView/delCurrentView");
          });
        })
        .catch(() => {});
    },
    handleAddReceiptItem() {
      this.surplusData = [];

      // 已收
      let recepted = [];
      this.detailed.forEach((item) => {
        if (!recepted[item.currencyId]) {
          recepted[item.currencyId] = item.amount;
        } else
          recepted[item.currencyId] = NP.plus(
            recepted[item.currencyId],
            item.amount
          );
      });
      console.log("rece", recepted);

      // 应收
      let collom = [];
      // 从期望收费金额中提取应收币种和金额

      this.currencyList.forEach((item, index) => {
        var nairaListByList = this.list.filter((v) => v.currencyId === item.id);
        if (nairaListByList.length > 0) {
          var discountNaira = nairaListByList.reduce(
            (total, currentValue) =>
              NP.plus(total, currentValue.discountTotal || 0),
            0
          );
        }
        var dollarList = this.receiptAccountList.filter(
          (v) => v.collectionCurrencyId == item.id
        );
        if (dollarList.length > 0) {
          var dollar = dollarList
            .reduce(
              (total, currentValue) =>
                NP.plus(total, currentValue.collectionAmount),
              0
            )
            .toFixed(2);
          if (dollar) {
            collom[item.id] = dollar;
          } else {
            collom.push(0);
          }
        }
      });
      console.log("collom", collom);
      recepted.forEach((amount, currency) => {
        if (amount) {
          if (collom[currency]) {
            if (collom[currency] - amount != 0)
              this.surplusData[currency] = +parseFloat(
                (collom[currency] - amount).toPrecision(12)
              );
          } else {
            this.surplusData[currency] = -amount;
          }
        }
      });
      collom.forEach((amount, currency) => {
        if (amount) {
          if (!this.surplusData[currency]) {
            if (recepted[currency]) {
              if (amount - recepted[currency] != 0)
                this.surplusData[currency] = +parseFloat(
                  (amount - recepted[currency]).toPrecision(12)
                );
            } else {
              this.surplusData[currency] = amount;
            }
          }
        }
      });
    },
  },
  computed: {
    showCurrencyId() {
      let fieldList = [];
      let groupList = [];
      this.list.map((element) => {
        if (fieldList.indexOf(element["currencyId"]) === -1) {
          fieldList.push(element["currencyId"]);
        }
      });
      for (let i = 0; i < fieldList.length; i++) {
        let arr = this.list.filter((element) => {
          return element["currencyId"] === fieldList[i];
        });
        groupList.push({
          currencyId: arr[0].currencyId,
          list: arr,
        });
      }
      if (groupList.length === 1) return groupList[0].currencyId;
      else return 1;
    },
  },
};
</script>

<style>
.card {
  margin-top: 20px;
}
.dialog-footer {
  text-align: left;
}
.card-title {
  font-size: 18px;
  font-weight: bold;
}
.bpm-title {
  font-size: 20px;
  font-weight: bold;
  color: #666;
  margin: 20px 0;
}
</style>