<template>
  <div class="child-container">
    <el-drawer
      :visible.sync="dialogVisible"
      direction="rtl"
      size="50%"
    >
      <div slot="title" class="common-title">年度明细</div>
      <div class="table-item">
        <el-table
          :data="tableData"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
        >
          <el-table-column prop="date" label="指标" width="150" />
          <el-table-column prop="name" label="2022年" width="200" />
          <el-table-column prop="name" label="2021年" />
          <el-table-column prop="name" label="2020年" />
          <el-table-column prop="name" label="2019年" />
          <el-table-column prop="name" label="2018年" />
        </el-table>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: '',
  components: {
  },
  props: {
  },
  data() {
    return {
      dialogVisible: false,
      tableData: [{
        date: '2016-05-02',
        name: '大司空'
      }, {
        date: '2016-05-04',
        name: '大司空'
      }, {
        date: '2016-05-01',
        name: '大司空'
      }, {
        date: '2016-05-03',
        name: '大司空'
      }, {
        date: '2016-05-03',
        name: '大司空'
      }, {
        date: '2016-05-03',
        name: '大司空'
      }]
    }
  },
  created() {
  },
  methods: {
    open(row) {
      this.$nextTick(() => {
        this.getDetail(row)
      })
    },
    // 获取明细
    async getDetail(row) {
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
  .table-item{
    padding: 16px 10px 16px 16px;
  }
</style>
