<template>
  <div class="money-allocation">
    <div class="table-box allocation-box">
      <el-table
        :key="key"
        v-loading="loading"
        :data="amountTableData"
        :header-cell-class-name="cellClass"
        height="60vh"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="index" label="序号" width="50" />
        <el-table-column prop="firstLevelProject" label="项目名称" show-overflow-tooltip />
        <el-table-column prop="amountMoney" label="入账金额" show-overflow-tooltip />
        <el-table-column v-if="allocationDialogStatus === 'submit'" prop="billDate" label="日期" show-overflow-tooltip />
        <el-table-column
          v-if="allocationDialogStatus === 'submit'"
          prop="flushSurplusAmount"
          label="剩余可分配金额"
          show-overflow-tooltip
        />
        <el-table-column v-if="allocationDialogStatus === 'submit'" prop="amountAllocated" class="rule-required" label="本次分配金额">
          <template slot-scope="{ row }">
            <cy-amount-input v-model="row.amountAllocated" placeholder="请输入本次分配金额" show-overflow-tooltip />
          </template>
        </el-table-column>
        <el-table-column
          v-if="allocationDialogStatus === 'cancel' || allocationDialogStatus === 'see'"
          prop="dateTime"
          label="入账日期"
          show-overflow-tooltip
        />
        <el-table-column
          v-if="allocationDialogStatus === 'cancel' || allocationDialogStatus === 'see'"
          prop="allocatedAmount"
          :label="allocationDialogStatus === 'see' ? '本次分配金额' : '已分配金额'"
          show-overflow-tooltip
        />
        <el-table-column v-if="allocationDialogStatus === 'submit'" label="还款形式">
          <template slot-scope="{ row }">
            <el-select
              v-model="row.payBackForm"

              placeholder="请选择金额类型"
              :disabled="disabled"
              style="width: 100%"
            >
              <el-option
                v-for="item in constant.payBackForm"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="businessNumber" label="附件" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <span v-if="row.fileText != undefined && row.fileText != ''" style="color: #5AC4FC; cursor: pointer;" @click="viewAssignFile(row)">查看</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="allocationDialogStatus === 'submit' || allocationDialogStatus === 'cancel'"
          type="selection"
          :selectable="selectable"
          width="90"
          align="center"
        />
      </el-table>
      <div v-if="allocationDialogStatus !== 'see'" class="submit-btn">
        <el-button type="primary" style="width: 100px;" @click="allocationSubmit('submit')">确定</el-button>
        <el-button style="width: 100px;" @click="() => { $emit('close-dialog', 'cancel') }">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    allocationDialogStatus: {
      type: String,
      default: ''
    },
    amountAllocationRow: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      loading: false,
      multipleSelection: [],
      amountTableData: [],
      disabled: false,
      key: 0
    }
  },
  computed: {
    ...mapGetters(['constant'])
  },
  created() {
    this.multipleSelection = []
    this.$store.dispatch('getConstant', ['payBackForm'])
  },
  methods: {
    getAmountAllocation(row) {
      this.multipleSelection = []
      this.key += 1
      this.loading = true
      this.addHeader()
      this.$api.customManage.collectionLoanManage.getAmountAllocationNotTrade({ currencyId: row.currencyType.id }).then((data) => {
        this.loading = false
        const payBackForm = this.$utils.codeChangeName(this.constant.payBackForm, 'payBackForm_ZCHK', 'code', 'id')
        this.amountTableData = data.data.map(item => {
          item.amountMoney = item.currency.code + this.$utils.formatMoney(item.amountMoney)
          item.flushSurplusAmount = item.currency.code + this.$utils.formatMoney(item.flushSurplusAmount)
          item.amountAllocated = ''
          item.payBackForm = payBackForm
          return item
        })
      })
    },
    getAmountAllocationCancleList(row) {
      this.multipleSelection = []
      this.key += 1
      this.loading = true
      this.addHeader()
      this.$api.customManage.collectionLoanManage.getAmountAllocationCancleList({ planFactoringId: row.id }).then((data) => {
        this.loading = false
        const payBackForm = this.$utils.codeChangeName(this.constant.payBackForm, 'payBackForm_ZCHK', 'code', 'id')
        this.amountTableData = data.data.map(item => {
          item.firstLevelProject = item.projectName
          item.amountMoney = item.currency.code + this.$utils.formatMoney(item.amountMoney)
          item.flushSurplusAmount = item.currency.code + this.$utils.formatMoney(item.flushSurplusAmount)
          item.allocatedAmount = item.currency.code + this.$utils.formatMoney(item.allocatedAmount)
          item.fileText = item.fileText
          item.payBackForm = payBackForm
          item.dateTime = this.$utils.parseTime(item.dateTime, 'y-m-d')
          return item
        })
      })
    },
    amountAllocationCancelSee(row) {
      this.multipleSelection = []
      this.loading = true
      this.$api.customManage.collectionLoanManage.amountAllocationCancelSee({ planFactoringId: row.id }).then((data) => {
        this.loading = false
        const payBackForm = this.$utils.codeChangeName(this.constant.payBackForm, 'payBackForm_ZCHK', 'code', 'id')
        this.amountTableData = data.data.map(item => {
          item.firstLevelProject = item.projectName
          item.amountMoney = item.currency.code + this.$utils.formatMoney(item.amountMoney)
          item.flushSurplusAmount = item.currency.code + this.$utils.formatMoney(item.flushSurplusAmount)
          item.allocatedAmount = item.currency.code + this.$utils.formatMoney(item.allocatedAmount)
          item.fileText = item.fileText
          item.payBackForm = payBackForm
          item.dateTime = this.$utils.parseTime(item.dateTime, 'y-m-d')
          return item
        })
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    cellClass(row) {
      if (row.columnIndex == row.row.length - 1) {
        return 'selectionHeader'
      }
    },
    addHeader() {
      this.$nextTick(() => {
        const headerDom = document.getElementsByClassName('selectionHeader')
        const needDom = headerDom[0].firstChild
        const checkboxDom = document.getElementsByClassName(`el-checkbox`)[0]
        const spanDom = document.createElement('span')
        spanDom.innerText = '选择'
        needDom.insertBefore(spanDom, checkboxDom)
      })
    },
    viewAssignFile(row) {
      window.localStorage.setItem('assignFileTextartaText', row.fileText)
      window.open('/paycoll/factoring/viewFileText?viewAssignMoneyFile=1&assignFileTextartaText=' + row.fileText)
    },
    allocationSubmit() {
      if (this.allocationDialogStatus === 'submit') {
        if (!this.multipleSelection.length) {
          this.$message.warning('请选择一条数据')
          return
        } else {
          for (let i = 0; i < this.multipleSelection.length; i++) {
            const { amountAllocated } = this.multipleSelection[i]
            if (!amountAllocated) {
              this.$message.warning('请输入所选择的本次分配金额')
              return
            }
          }
        }
        const amountAllocationList = this.multipleSelection.map(item => {
          const obj = {
            actualAmount: item.amountAllocated,
            actualDate: item.billDate,
            currencyType: {
              id: item.currency.id
            },
            payBackForm: {
              id: item.payBackForm
            },
            factoringBusinessAccountId: item.id
          }
          return obj
        })
        this.$api.customManage.collectionLoanManage.amountAllocationSubmit({ Loading: true, id: this.amountAllocationRow.id, amountAllocationList }).then(() => {
          this.$emit('close-dialog', 'submit')
        })
      } else if (this.allocationDialogStatus === 'cancel') {
        if (!this.multipleSelection.length) {
          this.$message.warning('请选择一条数据')
          return
        }
        const amountAllocationList = this.multipleSelection.map(item => {
          return { id: item.amountAllocationId }
        })
        this.$api.customManage.collectionLoanManage.amountAllocationCancelSubmit({ Loading: true, id: this.amountAllocationRow.id, amountAllocationList }).then(() => {
          this.$emit('close-dialog', 'submit')
        })
      }
    },
    selectable(row, index) {
      if (this.allocationDialogStatus === 'cancel') {
        return row.assignFlag
      } else {
        return true
      }
    }
  }
}
</script>

<style scoped>
.allocation-box .el-checkbox__inner {
  margin-top: 2px;
  margin-left: 10px;
}
</style>
