<template>
  <div class="edit-add-detail">
    <!-- <div class="crumbs">
        <Breadcrumb
            :breadcrumbOpt="breadcrumbOpt"
            svg-name="#icon-zuhuguanli"
            @breadcrumb-click="handleClose"
        />
    </div> -->
    <div class="form-content">
      <el-form ref="formInfo" :model="parameter" label-width="100px" :rules="rules" label-position="top">
        <div class="rows">
          <div class="rows-left">
            <div class="rows-hr"></div>
          </div>
          <div class="rows-title">
            <div class="text-overflow">基本信息</div>
          </div>
        </div>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="交易对象" prop="name">
              <el-input clearable v-model="parameter.name" placeholder="请输入交易对象"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="交易方式" prop="dealType">
              <el-input clearable v-model="parameter.dealType" placeholder="请输入交易方式"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="所属公司" prop="belongsOrgId">
              <el-cascader ref="cascader" v-model="orgValue" style="width: 100%" placeholder="请选择所属公司" filterable
                           :options="orgTree" :show-all-levels="false" @change="handelCascader" :props="{
                                    label: 'name',
                                    value: 'id',
                                    expandTrigger: 'hover',
                                    checkStrictly: true,
                                }"></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="交易机构" prop="dealOrg">
              <el-input clearable v-model="parameter.dealOrg" placeholder="请输入交易机构"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="合同金额" prop="contractMoney">
              <el-input clearable v-model="parameter.contractMoney" placeholder="请输入合同金额"
                        oninput="value=value.replace(/^\D*(\d*(?:\.\d*)?).*$/g,'$1')">
                <template slot="append">万元</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="年收益率" prop="yearEarningsRate">
              <el-input clearable v-model="parameter.yearEarningsRate" placeholder="请输入年收益率"
                        oninput="value=value.replace(/^\D*(\d*(?:\.\d*)?).*$/g,'$1')">
                <template slot="append">%</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="还本付息方式" prop="returnType">
              <dict-select dictCode="hbfxfs" :hasDefaultOption="true" clearable v-model="parameter.returnType"
                           style="width: 100%" placeholder="请选择还本付息方式" />
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="期限" prop="dateLimit">
              <el-input clearable v-model="parameter.dateLimit" placeholder="请输入期限">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="起始日期" prop="startDate">
              <el-date-picker v-model="parameter.startDate" type="date" placeholder="请选择起始日期"
                              value-format="yyyy-MM-dd" style="width: 100%">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="到期日期" prop="endDate">
              <el-date-picker v-model="parameter.endDate" type="date" placeholder="请选择到期日期"
                              value-format="yyyy-MM-dd" style="width: 100%">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="风控措施" prop="riskMeasures">
              <el-input clearable v-model="parameter.riskMeasures" placeholder="请输入风控措施">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="8">
            <el-form-item label="债权状态" prop="loanStatus">
              <dict-select dictCode="zqzt" :hasDefaultOption="true" clearable v-model="parameter.loanStatus"
                           style="width: 100%" placeholder="请选择债权状态" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input type="textarea" :rows="2" placeholder="请输入备注" v-model="parameter.remark">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="rows">
          <div class="rows-left">
            <div class="rows-hr"></div>
          </div>
          <div class="rows-title">
            <div class="text-overflow">债权归还信息</div>
          </div>
        </div>
        <el-table :data="parameter.loanInterest" style="width: 100%" border class="more-list-table">
          <el-table-column type="index" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="receivableMoney">
            <template slot="header" slot-scope="scope">
              <span style="color: #f56c6c">*</span> 应收利息
            </template>
            <template v-slot="{ row, $index }">
              <el-form-item :prop="`loanInterest[${$index}].receivableMoney`"
                            :rules="rules.loanInterest.receivableMoney" :inline-message="true">
                <el-input clearable v-model="parameter.loanInterest[$index]
                                        .receivableMoney
                                    " placeholder="请输入应收利息"
                          oninput="value=value.replace(/^\D*(\d*(?:\.\d*)?).*$/g,'$1')">
                  <template slot="append">万元</template>
                </el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="actualMoney">
            <template slot="header" slot-scope="scope">
              <span style="color: #f56c6c">*</span> 实收利息
            </template>
            <template v-slot="{ row, $index }">
              <el-form-item :prop="`loanInterest[${$index}].actualMoney`"
                            :rules="rules.loanInterest.actualMoney" :inline-message="true">
                <el-input clearable v-model="parameter.loanInterest[$index]
                                        .actualMoney
                                    " placeholder="请输入实收利息"
                          oninput="value=value.replace(/^\D*(\d*(?:\.\d*)?).*$/g,'$1')">
                  <template slot="append">万元</template>
                </el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="addUpMoney">
            <template slot="header" slot-scope="scope">
              <span style="color: #f56c6c">*</span> 累计收到利息
            </template>
            <template v-slot="{ row, $index }">
              <el-form-item :prop="`loanInterest[${$index}].addUpMoney`"
                            :rules="rules.loanInterest.addUpMoney" :inline-message="true">
                <el-input clearable v-model="parameter.loanInterest[$index]
                                        .addUpMoney
                                    " placeholder="请输入累计收到利息"
                          oninput="value=value.replace(/^\D*(\d*(?:\.\d*)?).*$/g,'$1')">
                  <template slot="append">万元</template>
                </el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="willReturnDate">
            <template slot="header" slot-scope="scope">
              <span style="color: #f56c6c">*</span> 应归还日期
            </template>
            <template v-slot="{ row, $index }">
              <el-form-item :prop="`loanInterest[${$index}].willReturnDate`"
                            :rules="rules.loanInterest.willReturnDate" :inline-message="true">
                <el-date-picker v-model="parameter.loanInterest[$index]
                                        .willReturnDate
                                    " type="date" placeholder="请选择应归还日期" value-format="yyyy-MM-dd"
                                style="width: 100%">
                </el-date-picker>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="returnDate">
            <template slot="header" slot-scope="scope">
              <span style="color: #f56c6c">*</span> 归还日期
            </template>
            <template v-slot="{ row, $index }">
              <el-form-item :prop="`loanInterest[${$index}].returnDate`"
                            :rules="rules.loanInterest.returnDate" :inline-message="true">
                <el-date-picker v-model="parameter.loanInterest[$index]
                                        .returnDate
                                    " type="date" placeholder="请选择归还日期" value-format="yyyy-MM-dd"
                                style="width: 100%">
                </el-date-picker>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="isOverdue">
            <template slot="header" slot-scope="scope">
              <span style="color: #f56c6c">*</span> 是否逾期归还
            </template>
            <template v-slot="{ row, $index }">
              <el-form-item :prop="`loanInterest[${$index}].isOverdue`" :rules="rules.loanInterest.isOverdue"
                            :inline-message="true">
                <dict-select dictCode="zqzt" :hasDefaultOption="true" clearable v-model="parameter.loanInterest[$index].isOverdue
                                    " style="width: 100%" placeholder="请选择债权状态" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column prop="remark">
            <template slot="header" slot-scope="scope">
              备注
            </template>
            <template v-slot="{ row, $index }">
              <el-form-item>
                <el-input clearable v-model="parameter.loanInterest[$index].remark
                                    " placeholder="请输入备注">
                </el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="70">
            <template v-slot="{ row, $index }">
              <el-link :underline="false" title="删除此条信息" icon="el-icon-close" type="danger"
                       @click="delEquity($index)">删除
              </el-link>
            </template>
          </el-table-column>
        </el-table>
        <div class="add-row" title="新增一条信息" @click="addEquity">
          +
        </div>
      </el-form>
    </div>
    <div slot="footer" class="footer">
      <el-button type="primary" @click="handleSave(0)">提交</el-button>
      <el-button type="info" @click="handleSave(-1)">保存</el-button>
      <el-button @click="handleClose">{{
        $t('domestic.cancel')
        }}
      </el-button>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb/index.vue'
import utils from '@/utils/utils.js'
import api from '@/api/BondAssets/BondAssetsEnter/CreditorRightsRegistered.js'
import pubSub from 'pubsub-js'

export default {
  name: 'domesticDialog',
  components: {Breadcrumb},
  data() {
    return {
      breadcrumbOpt: [
        {breadcrumbName: '债权登记入库'},
        {breadcrumbName: '添加'}
      ],
      cardTypeData: [],
      rules: {
        name: [
          {
            required: true,
            message: '请输入交易对象',
            trigger: 'blur'
          }
        ],
        dealType: [
          {
            required: true,
            message: '请输入交易方式',
            trigger: 'blur'
          }
        ],
        returnType: [
          {
            required: true,
            message: '请选还本付息方式',
            trigger: 'blur'
          }
        ],
        loanStatus: [
          {
            required: true,
            message: '请选择债权状态',
            trigger: 'blur'
          }
        ],
        belongsOrgId: [
          {
            required: true,
            message: '请选择归属单位',
            trigger: 'blur'
          }
        ],
        loanInterest: {
          receivableMoney: [
            {
              required: true,
              message: '请输入应收利息',
              trigger: 'blur'
            }
          ],
          actualMoney: [
            {
              required: true,
              message: '请输入实收利息',
              trigger: 'blur'
            }
          ],
          returnDate: [
            {
              required: true,
              message: '请选择归还日期',
              trigger: 'blur'
            }
          ],
          willReturnDate: [
            {
              required: true,
              message: '请选择应归还日期',
              trigger: 'blur'
            }
          ],
          addUpMoney: [
            {
              required: true,
              message: '请输入累计收到利息',
              trigger: 'blur'
            }
          ],
          isOverdue: [
            {
              required: true,
              message: '请选择是否逾期归还',
              trigger: 'blur'
            }
          ]
        }
      },
      orgValue: [],
      orgTree: [], //组织树
      parameter: {
        loanInterest: [],
        returnType: '0',
        loanStatus: '0'
      },
      orgId: '' //组织id
    }
  },
  created() {
    let curUserDetail = this.$store.state.user.currentUserDetail
    this.orgId = curUserDetail.org[0].orgId
    this.getUserOrgTree()
  },
  mounted() {
  },
  methods: {
    //编辑
    addModifyBtn(val) {
      this.$set(this.parameter)
      if (val) {
        this.breadcrumbOpt[1].breadcrumbName = '编辑'
        this.modifychoData(val)
      } else {
        this.breadcrumbOpt[1].breadcrumbName = '添加'
        this.orgValue = utils.getAllParentArr(
          this.orgTree,
          this.orgId,
          'id',
          'children'
        )
        // this.$set(this.orgValue)
        this.$nextTick(() => {
          this.handelCascader()
        })
      }
    },
    //获取组织树
    getUserOrgTree() {
      api.getUserOrgTree(this.orgId, (res) => {
        if (res) {
          this.orgTree = res
        }
      })
    },
    //获取修改回显数据
    modifychoData(val) {
      api.detailsData(val.id, (res) => {
        if (res) {
          this.parameter = res
          if (res.belongsOrgFullId) {
            let orgId = utils
              .trimSpace(res.belongsOrgFullId.split('.'))
              .pop()
            this.orgValue = utils.getAllParentArr(
              this.orgTree,
              orgId,
              'id',
              'children'
            )
          }
        }
      })
    },
    //绑定归属单位
    handelCascader() {
      let data = this.$refs['cascader'].getCheckedNodes()[0].data
      this.parameter.belongsOrgFullId = data.path
      this.parameter.belongsOrgId = data.id
      this.parameter.belongsOrgName = data.name
    },
    // 关闭//面包屑点击
    handleClose() {
      pubSub.publish('go-back')
      this.$emit('closeComponent')
      // this.orgValue = []
      this.parameter = {
        loanInterest: [],
        returnType: '0',
        loanStatus: '0'
      }
      this.$refs.formInfo.clearValidate()
    },
    // 保存
    handleSave(val) {
      this.$refs.formInfo.validate((valid) => {
        if (valid || val === -1) {
          if (this.breadcrumbOpt[1].breadcrumbName === '添加') {
            this.parameter.assetAudit = val
            api.addData(this.parameter, (res) => {
              if (res.state) {
                this.$message.success('保存成功')
                this.handleClose()
              }
            })
          } else if (
            this.breadcrumbOpt[1].breadcrumbName === '编辑'
          ) {
            this.parameter.assetAudit = val

            api.editData(this.parameter, (res) => {
              if (res.state) {
                this.$message.success('编辑成功')
                this.handleClose()
              }
            })
          }
        }
      })
    },
    // 删除债权归还信息
    delEquity(ind) {
      this.parameter.loanInterest.splice(ind, 1)
    },
    // 增加债权归还信息
    addEquity() {
      this.parameter.loanInterest.push({
        receivableMoney: null,
        actualMoney: null,
        addUpMoney: null,
        returnDate: null,
        isOverdue: '0',
        willReturnDate: null,
        remark: null
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.edit-add-detail {
  display: flex;
  flex-direction: column;

  // .crumbs {
  // }
  .form-content {
    flex: 1;
    // height: 80%;
    background-color: white;
    padding: 10px 20px;
    // margin-top: 20px;
    border-radius: 10px;
    overflow-y: scroll;
  }

  .form-content::-webkit-scrollbar {
    display: none;
    /* Chrome Safari */
  }

  .footer {
    height: 100px;
    background-color: white;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.rows {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 16px;
  padding: 10px 0;

  .rows-left {
    margin-right: 10px;

    .rows-hr {
      width: 3px;
      height: 18px;
      background-color: #0e6eff;
      border-radius: 2px;
    }
  }

  .rows-title {
    .text-overflow {
      width: 100%;
      font-size: 16px;
    }
  }
}

.add-btn {
  margin: 56px 0 0 0;

  .el-icon-circle-plus {
    color: #519dfe;
    cursor: pointer;
    font-size: 24px;
  }

  .el-icon-error {
    color: #f48888;
    cursor: pointer;
    font-size: 24px;
  }
}

::v-deep .more-list-table {
  .el-form-item {
    margin-bottom: 0;
  }

  .el-table__header {
    .cell {
      font-size: 14px !important;
    }
  }

  .el-table__cell {
    border-right: 1px solid #ebeef5 !important;
  }

  .el-input-group__append {
    padding: 0 8px;
  }
}

.add-row {
  height: 30px;
  width: calc(100% - 2px);
  border: 1px dashed rgb(174, 173, 173);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  color: rgb(174, 173, 173);

  &:hover {
    border-color: #616161;
    color: #616161;
  }
}

::v-deep .el-input__inner {
  font-size: 14px;
}
</style>
