<template>
  <div>
    <div v-for="item in recorpayList" style="margin-bottom: 10px">
      <div>
        <div style="margin-bottom: 10px; font-weight: bold">
          <div>
            <el-divider direction="vertical"></el-divider>
            <span>{{ item.accType == 1 ? '已付' : '已收' }}：</span>
            <span>{{ item.code }}</span>
            <el-divider direction="vertical"></el-divider>
            <!-- <span>计价方式：</span>
            <span> {{ item.pricingWay == 1 ? '按数量计费' : '按重量计费' }}</span> -->
            <!-- <el-divider direction="vertical"></el-divider> -->
            <span>总金额：</span>
            <span>{{ item.totalAmount }}</span>
          </div>
        </div>
        <ele-pro-table
          ref="table"
          row-key="id"
          :needPage="false"
          :columns="getColumns()"
          max-height="500px"
          style="margin-bottom: 10px"
          :toolkit="[]"
          :datasource="getObj(item)"
          cache-key="systemRoleTable17-11121"
          class="time-form"
        >
        </ele-pro-table>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    components: {},
    props: ['recorpayList', 'dialogType', 'dataForm'],
    computed: {
      getObj(){
        return (j) => {
          return this.recorpayList.filter(item=>item.code==j.code)
        }
      },
      getColumns() {
        return (j) => {
          let basicFields = [
            {
              width: 60,
              label: '序号',
              type: 'index',
              columnKey: 'index',
              align: 'center'
            },
            {
              minWidth: 130,
              prop: 'contactName',
              label:'单位名称',
              align: 'center',
              showOverflowTooltip: true
            },
            {
              minWidth: 120,
              prop: 'sourceType',
              label: '来源类型',
              formatter(_row, _column, cellValue) {
                return cellValue == 2 ? '合同' : cellValue == 3? '订单' : '';
      
              },
              align: 'center',
              showOverflowTooltip: true
            },
            {
              minWidth: 140,
              prop: 'sourceName',
              label: '来源名称',
              align: 'center',
              showOverflowTooltip: true
            },
            {
              minWidth: 140,
              prop: 'sourceCode',
              label: '来源编码',
              align: 'center',
              showOverflowTooltip: true
            },
            {
              minWidth: 140,
              prop: 'invoiceCode’',
              label: '发票编码',
              align: 'center',
              showOverflowTooltip: true,

            },

            {
              minWidth: 100,
              prop: 'execDate',
              label: '费用发生日期',
              align: 'center',
              showOverflowTooltip: true
            },

            {
              minWidth: 120,
              prop: 'totalAmount',
              label: '合计金额',
              align: 'center',
            },
            {
              minWidth: 120,
              prop: 'remark',
              label: '备注',
              slot: 'totalPrice',
              align: 'center',
            },
          ];
      

          return basicFields;
        };
      },

    },
    data() {
      return {
        rules: {},
        form: {},

      };
    },
    methods: {
     

    }
  };
</script>
<style lang="scss" scoped>
  .headbox {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .amount {
      font-size: 14px;
      font-weight: bold;
      padding-right: 30px;
    }
  }

  .time-form .el-form-item {
    margin-bottom: 0 !important;
  }

  ::v-deep .period {
    display: flex;

    .borderleftnone {
      .el-input--medium .el-input__inner {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
    }

    .borderrightnone {
      .el-input--medium .el-input__inner {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
  }

  ::v-deep .time-form tbody > tr:hover > td {
    background-color: transparent !important;
  }

  ::v-deep .time-form .el-table tr {
    background-color: #ffffff;
  }

  .pricebox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-weight: bold;
  }

  ::v-deep.el-divider {
    margin: 10px;
    font-weight: bold;
  }
</style>
