<template>
  <div>
    <div class="mrg-b">
      <el-table
        stripe
        border
        :data="tableData"
        row-key="ownerCode"
        :expand-row-keys="keys"
        @expand-change="expandChange">
        <table-column
            type="expand">
            <template slot-scope="scope">
              <list :tableData="scope.row.list"></list>
            </template>
        </table-column>
        <table-column
        label="货主">
          <template slot-scope="scope">
           <p>{{scope.row.ownerCode}}</p>
            <p>{{scope.row.ownerName}}</p>
          </template>
        </table-column>
        <table-column
        label="计算金额(收/付)">
          <template slot-scope="scope">
            {{scope.row.amountR}}/{{scope.row.amountP}}
          </template>
        </table-column>
        <table-column
        label="实际金额(收/付)">
          <template slot-scope="scope">
            {{scope.row.actAmoutR}}/{{scope.row.actAmoutP}}
          </template>
        </table-column>
        <table-column
        label="含税金额(收/付)">
          <template slot-scope="scope">
            {{scope.row.taxAmountR}}/{{scope.row.taxAmountP}}
          </template>
        </table-column>
        <table-column
        label="不含税金额(收/付)">
          <template slot-scope="scope">
            {{scope.row.noTaxAmountR}}/{{scope.row.noTaxAmountP}}
          </template>
        </table-column>
    </el-table>
  </div>
    <div>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
     </div>
  </div>
</template>
<script>
import List from './children/list'
export default {
  components: {
    List
  },
  data () {
    return {

      keys: [],
      bool: false,
    }
  },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    total: Number,
    pageSize: Number,
    currentPage: Number,
  },
  methods: {

    getList (row) {
      const url = this.$API.charging.customer.getChildrenList
      const param = { ownerCode: row.ownerCode }
      this.$https.post(url, param).then(res => {
        this.$set(row, 'list', res.rows)
      })
    },

    expandChange (row, rows) {
      this.keys = rows.map((item) => {
        return item.ownerCode
      })
      const bool = rows.some(item => {
        return item.ownerCode === row.ownerCode
      })
      if (bool) {
        if (row.list) return
        this.getList(row)
      }
    },

    // 每页显示条数
    handleSizeChange (pageSize) {
      const query = { 'page.currentPage': this.currentPage, 'page.limitCount': pageSize }
      this.$emit('getList', query)
    },

    // 当前页码
    handleCurrentChange (currentPage) {
      const query = { 'page.currentPage': currentPage, 'page.limitCount': this.pageSize }
      this.$emit('getList', query)
    },
  }
}
</script>
<style lang="scss" scoped>
    .mrg-b{
        margin-bottom: 20px;
    }
    .mrg-l{
        margin-left:10px;
    }
    .blue{
      cursor: pointer;
      color:#0682ea
    }
</style>
