<template>
  <div class="table-box">
    <div class="block-title">
      {{ agencyName() }}：{{ info.travelAgency }}
    </div>
    <el-table
      border
      stripe
      :data="tableData">
      <el-table-column
        prop="key"
        label="票种"></el-table-column>
      <el-table-column
        prop="value"
        label="数量"></el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  props: {
    info: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      visible: false,
      tableData: []
    }
  },
  watch: {
    visible (val) {
      if (val && this.info) {
        let tableData = []
        Object.keys(this.info).forEach(key => {
          if (key !== 'travelAgency' && key !== '总计') {
            tableData.push({
              key: key,
              value: this.info[key]
            })
          }
        })
        tableData.push({
          key: '总计',
          value: this.info['总计']
        })
        this.tableData = tableData
      }
    }
  }
}
</script>
