<template>
  <div class="regionalEconomy">
    <div class="content">
      <div class="flex-box query-box">
        <div class="flex-box query-params">
          <span class="common-title">经济数据</span>
          <el-form ref="queryForm" :model="queryParams" :inline="true" size="small">
            <el-form-item prop="year">
              <el-select v-model="queryParams.year" filterable class="form-content-width" placeholder="请选择年度">
                <el-option v-for="(item, index) in yearOptions" :key="index" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="flex-box query-ability">
          <span class="flex-box"><img src="@/assets/images/ability_excel.png">导出EXCEL</span>
        </div>
      </div>
      <div class="table-item">
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          border
          highlight-current-row
        >
          <el-table-column prop="area" label="下辖区" width="100" />
          <el-table-column prop="tz" label="GDP（亿元）" sortable width="120" />
          <el-table-column prop="tz" label="GDP增速" sortable width="100" />
          <el-table-column prop="tz" label="人均GDP（元）" sortable width="130" />
          <el-table-column prop="tz" label="人口（万人）" sortable width="120" />
          <el-table-column prop="tz" label="固定资产投资 （亿元） " sortable width="170" />
          <el-table-column prop="tz" label="一般公共预算收入（亿元）" sortable  width="160" />
          <el-table-column prop="tz" label="一般公共预算支持（亿 元）" sortable width="160" />
          <el-table-column prop="tz" label="政府性基金收入（亿元）" sortable width="160" />
          <el-table-column prop="zxzzj" label="地方政府债务余额（亿元）" sortable width="160" />
          <el-table-column prop="zxzzj" label="城投平台有息债务（亿元）" sortable width="160" />
          <el-table-column prop="zxzzj" label="财政自给率" sortable width="120"/>
          <el-table-column prop="zxzzj" label="债务率-宽口径" sortable width="130"/>
        </el-table>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'localEconomy',
  data() {
    return {
      queryParams: {
        year: '',
        address: ''
      },
      yearOptions: [
        { name: '2023年', value: '2023' },
        { name: '2022年', value: '2022' },
        { name: '2021年', value: '2021' },
      ],
      tableData:[
        {
          dataId:'1',
          area:'重庆',
          tz:'100',
          zxzzj:'200'
        }
      ],
      tableLoading: false,
      pageIndex: 1,
      pageSize: 10,
      tableDataTotal: 0
    }
  },
  created() {
  },
  methods: {
    handleClick() {

    }
  }
}
</script>

<style lang="scss" scoped>
  .regionalEconomy{
    .el-form{
      margin-left: 24px;
      .el-form-item{
        margin: 0 !important;
        .form-content-width{
          width: 100px;
        }
      }
    }
    .content{
      width: 100%;
      background: #ffffff;
      padding: 16px;
      margin-top: 12px;
      border-radius: 4px;
    }
    .table-item{
      margin-top: 22px;
    }
  }

</style>
