<template>
  <div style="padding-bottom:20px;">


            <el-table  :data="tableStagesList" border fit highlight-current-row style="width: 100%;" :row-style="rowStyle" :cell-style="cellStyle" class="elTable table-fixed">


                      <el-table-column label="本期期数" min-width="110px" align="center">
                        <template slot-scope="scope">
                          <span>{{ scope.row.stages }}期</span>
                        </template>
                      </el-table-column>

                      <el-table-column label="应收款项" min-width="110px" align="center">
                        <template slot-scope="scope">
                          <span>{{ scope.row.planCost }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="回款金额" min-width="110px" align="center">
                        <template slot-scope="scope">
                          <span>{{ scope.row.actualCost }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="收款人" min-width="110px" align="center">
                        <template slot-scope="scope">
                          <span>{{ scope.row.employeeName }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="收款时间" min-width="110px" align="center">
                        <template slot-scope="scope">
                          <span>{{ scope.row.collectionDate  }}</span>
                        </template>
                      </el-table-column>
                      <el-table-column label="备注" min-width="110px" align="center">
                        <template slot-scope="scope">
                          <span>{{ scope.row.remark }}</span>
                        </template>
                      </el-table-column>

                    </el-table>


  </div>
  </template>
  <script>


import { GetDataByName, PostDataByName, failproccess, ExecDataByConfig, GetDataByNames, checkButtons, calculativeWidth } from '@/api/common'
import Cookies from 'js-cookie'
import { parseTime } from '@/utils/index.js'
import Pagination from '@/components/Pagination'
import { MessageBox } from 'element-ui'
import { getToken } from '@/utils/auth'

  export default {

    name: 'ContractReturnMoney',
    props: {
      resturnmData: {
        type: Object,
        required: true
      }
    },


    data() {
      return {
        htmlContent: null,

         //款项期数表格
        tableStagesList:[],
        rowStyle: { maxHeight: 50 + 'px', height: 45 + 'px' },
      cellStyle: { padding: 0 + 'px' }


      }
    },
   watch: {
    resturnmData: {
        deep: true,
        handler: function (item) {
          console.log("resturnmData父组件：", item)

          this.getMoneyTableList()

        }
      },

    },
    mounted() {

    },


    created() {

       this.getMoneyTableList()


    },
    beforeDestroy() {

    },
    methods: {


       // 款项信息表格
      getMoneyTableList() {
          console.log(1111111)
        var send_data = {
            name: 'getContractCostDetailById',
            parammaps: {
              contractId:this.resturnmData.id,
            }
         }
        GetDataByName(send_data).then(response => {
          if (response.data.list !== null) {
            this.tableStagesList   = response.data.list
            console.log('回款信息表格数据', response.data.list)
          } else {
            this.tableStagesList = []
          }
        })
      },


    }
  }
  </script>
