<template>
  <div class="child-container ndmx-detail">
    <el-drawer
      :visible.sync="dialogVisible"
      direction="rtl"
      size="50%"
    >
      <div slot="title" class="ndmx-title"><img src="@/assets/images/economies/icon.png" class="icon">年度明细</div>
      <!--<div class="content">-->
        <!--<div class="main-title">-->
          <!--<span class="label-200">指标</span>-->
          <!--<span>2022年</span>-->
          <!--<span>2021年</span>-->
          <!--<span>2020年</span>-->
          <!--<span>2019年</span>-->
          <!--<span>2018年</span>-->
        <!--</div>-->
        <!--<div class="main-list">-->
          <!--<div class="item">-->
            <!--<h3></h3>-->
            <!--<div class="item-cont">-->
              <!--<span>指标</span>-->
              <!--<span>2022年</span>-->
              <!--<span>2021年</span>-->
              <!--<span>2020年</span>-->
              <!--<span>2019年</span>-->
              <!--<span>2018年</span>-->
            <!--</div>-->
          <!--</div>-->
        <!--</div>-->
      <!--</div>-->
      <div class="table-item">
        <el-table
          :data="getValues"
          :show-header="false"
          border
        >
          <el-table-column
            v-for="(item, index) in getHeaders"
            :key="index"
            :prop="item"
          >
          </el-table-column>
        </el-table>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: '',
  components: {
  },
  props: {
  },
  data() {
    return {
      dialogVisible: false,
      tableData: [
        {
          zb:"2022年",
          gdp:'129,118.58',
          gdpzs:'124,369.67',
          rjgdp:'134,369.67',
        },
        {
          zb:"2021年",
          gdp:'129,118.58',
          gdpzs:'124,369.67',
          rjgdp:'134,369.67',
        },
        {
          zb:"2020年",
          gdp:'129,118.58',
          gdpzs:'124,369.67',
          rjgdp:'134,369.67',
        },
      ],
      headers: [
        {
          prop: 'zb',
          label: '指标',
        },
        {
          prop: 'name',
          label: '国民经济核算',
        },
        {
          prop: 'gdp',
          label: 'GDP（亿元）',
        },
        {
          prop: 'gdpzs',
          label: 'GDP增速',
        },
        {
          prop: 'rjgdp',
          label: '人均GDP（元）',
        },
      ],
    }
  },
  created() {

  },
  computed: {
    getHeaders() {
      return this.tableData.reduce((pre, cur, index) => pre.concat(`value${index}`), ['title'])
    },
    getValues() {
      return this.headers.map(item => {
        return this.tableData.reduce((pre, cur, index) => Object.assign(pre, {['value' + index]: cur[item.prop]}), {'title': item.label,});
      });
    }
  },
  methods: {
    open(row) {
      this.$nextTick(() => {
        this.getDetail(row)
      })
    },
    // 获取明细
    async getDetail(row) {
      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
  .ndmx-detail{
    ::v-deep .el-drawer{
      .el-drawer__header{
        padding:0 0 0 13px;
        line-height: 48px;
      }
    }
    .content{
      height: 100%;
      padding: 0 12px;
    }
  }
  .ndmx-title{
    color: #232323;
    font-weight: bold;
    font-size: 16px;
    .icon{
      width: 17px;
      height: 17px;
      margin-right: 8px;
    }
  }
  .table-item{
    padding: 16px 10px 16px 16px;
  }
</style>
