<template>
  <div>
    <div class="mrg-b">
      <div class="money-wrap">
        <span class="money-item">应收费用合计：{{tableTotal.receiveTotal}}</span>
        <span class="money-item">应收应付费用合计：{{tableTotal.payTotal}}</span>
        <span class="money-item">利润：{{tableTotal.profit}}</span>
      </div>
      <!--<drop-filter-->
        <!--:columns="wholeLabels"-->
        <!--:storeKey="storeKey"-->
        <!--:storeLabels="storeLables"-->
        <!--@doFilter="labels => storeLables = labels"-->
      <!--&gt;</drop-filter>-->
      <el-table
        ref="table"
        stripe
        border
        :max-height="tableMaxHeight"
        :data="tableData"
        :filteredLabels="storeLables"
        @selection-change="handleSelectChange"
      >
        <table-column type="selection" fixed align="center"></table-column>
        <table-column label="费用ID" prop="feeId">
          <template slot-scope="scope">
            <span class="blue" @click.stop="handleOpenDetail(scope.row.feeId)">{{scope.row.feeId}}</span>
          </template>
        </table-column>
        <table-column label="费用名称" prop="feeName"></table-column>
        <table-column label="状态" prop="status">
          <template
            slot-scope="scope"
          >{{ $utils.keyMatcher(scope.row.status, $keys.charging.status).name }}</template>
        </table-column>
        <table-column label="费用种类" prop="feeCategory">
          <template
            slot-scope="scope"
          >{{ $utils.keyMatcher(scope.row.feeCategory, $keys.charging.feeCategory).name }}</template>
        </table-column>
        <table-column label="作业环节" prop="tranType">
          <template
            slot-scope="scope"
          >{{ $utils.keyMatcher(scope.row.tranType, $keys.charging.tranType).name }}</template>
        </table-column>
        <table-column label="收支类型" prop="receivePay">
          <template
            slot-scope="scope"
          >{{ $utils.keyMatcher(scope.row.receivePay, $keys.charging.receivePay).name }}</template>
        </table-column>
        <table-column label="业务量" prop="quantity"></table-column>
        <table-column label="计费基准" prop="chargeBase">
          <template
            slot-scope="scope"
          >{{ $utils.keyMatcher(scope.row.chargeBase, $keys.charging.chargeBase).name }}</template>
        </table-column>
        <table-column label="单价" prop="price"></table-column>
        <table-column label="实际金额" prop="actAmout"></table-column>
        <table-column label="税后金额" prop="noTaxAmount"></table-column>
        <table-column label="币别" prop="currency"></table-column>
        <table-column label="费用时间" prop="feeDate"></table-column>
        <table-column label="操作" width="100" fixed="right">
          <template slot-scope="scope">
            <el-tooltip content="编辑" placement="top">
              <el-button
                size="mini"
                type="primary"
                icon="el-icon-edit"
                plain
                circle
                @click="handleEdit(scope.$index, scope.row)"
              ></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button
                size="mini"
                type="danger"
                icon="el-icon-delete"
                plain
                circle
                @click="handleDelete(scope.$index, scope.row)"
              ></el-button>
            </el-tooltip>
          </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>
export default {
  data () {
    return {

      removeIds: [],
      storeKey: 'maintain'
    }
  },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    total: Number,
    tableTotal: {
      type: Object,
      default: () => ({})
    },
    pageSize: Number,
    currentPage: Number,
  },
  methods: {

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

    // 当前页码
    handleCurrentChange (currentPage) {
      const query = { 'page.limitCount': this.pageSize, 'page.currentPage': currentPage }
      this.$emit('getList', query)
    },

    getData (url, param) {
      return this.$https.post(url, param)
    },

    // 编辑行
    handleEdit (index, row) {
      if (row.status !== '00') return this.$message.warning('不是创建状态不能编辑')
      this.$emit('handleOpenForm', 'edit', row)
    },

    // 详情
    handleOpenDetail (id) {
      const headUrl = this.$API.charging.maintain.getDetailHead
      const param = { feeId: id }
      this.$https.all([this.getData(headUrl, param)]).then(res => {
        const head = res[0].rows[0]
        this.$emit('handleOpenForm', 'detail', head)
      })
    },

    // 删除行
    handleDelete (index, row) {
      const url = this.$API.charging.maintain.delList
      this.removeIds.push(row.feeId)
      const param = { feeIds: JSON.stringify(this.removeIds) }

      this.$confirm('是否删除此条数据？', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$https.post(url, param).then(res => {
          this.$emit('getList')
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    // checkbox勾选
    handleSelectChange (selection) {
      const selectIds = selection.map(item => item.feeId)
      this.$emit('handleSelectChange', selectIds, selection)
    }
  }
}
</script>
<style lang="scss" scoped>
.mrg-b {
  margin-bottom: 20px;
}
.mrg-l {
  margin-left: 10px;
}
.blue {
  cursor: pointer;
  color: #0682ea;
}
.money-item {
  display: inline-block;
  width: 200px;
}
.money-wrap {
  position: absolute;
  right: 0;
}
</style>
