<template>
  <div class="app-container container-box">
    <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="请选择年度" @change="querySubmit">
              <el-option v-for="(item, index) in yearOptions" :key="index" :label="item.name" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item prop="area">
            <el-select v-model="queryParams.area" filterable class="form-content-width" placeholder="请选择地区" @change="querySubmit">
              <el-option v-for="(item, index) in areaOptions" :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_vs.png">地区经济对比</span>
        <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"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="序号" width="60" align="left">
          <template slot-scope="scope">{{ pageIndex * pageSize - pageSize + scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column label="地区" min-width="70" align="left">
          <template slot-scope="scope">
            <router-link to="" tag="a" class="a-link">{{ scope.row.address || '广东省' }}</router-link>
          </template>
        </el-table-column>
        <el-table-column label="年度明细" prop="dataId" width="100" align="left">
          <template slot-scope="scope">
            <img src="@/assets/images/icon_detailed.png" class="icon-detailed" @click="handleDetail(scope.row)">
          </template>
        </el-table-column>
        <el-table-column label="GDP（元）" prop="dataId" sortable min-width="120" align="right" />
        <el-table-column label="GDP增速" prop="cgrdm" min-width="90" align="right" />
        <el-table-column label="人均GDP（元）" prop="cgrssqy" min-width="130" align="right" />
        <el-table-column label="固定资产投资（亿元）" prop="cgrzyhy" min-width="130" align="right" />
        <el-table-column label="金融机构存款余额-本外币（亿元）" prop="cgzzxs" min-width="160" align="right" />
        <el-table-column label="一般公共预算收入 (亿元)" prop="cgfs" width="130" align="left" />
        <el-table-column label="一般公共预算收入增速" width="140" align="left">
          <template slot-scope="scope">
            <router-link to="/purchaserDetail" target="_blank" tag="a" class="a-link">{{ scope.row.zbwj }}</router-link>
          </template>
        </el-table-column>
        <el-table-column label="一般公共预算收入：税收收入" prop="cgfs" width="150" align="left" />
        <el-table-column label="一般公共预算收入：税收收入" prop="cgfs" width="150" align="left" />
        <el-table-column label="一般公共预算收入：税收收入" prop="cgfs" width="150" align="left" />
        <el-table-column label="一般公共预算收入：税收收入" prop="cgfs" width="150" align="left" />
        <el-table-column label="一般公共预算收入：税收收入" prop="cgfs" width="150" align="left" />
      </el-table>
    </div>
    <div class="pagination-box">
      <el-pagination background :current-page="pageIndex" :page-size="pageSize" :total="tableDataTotal" layout="prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
    </div>
    <economies-detail ref="economiesDetail" />
  </div>
</template>

<script>
import { browsedIndexPage } from '@/api/nationalEconomies'
import economiesDetail from './component/economies-detail'

export default {
  name: 'NationalEconomies',
  components: {
    economiesDetail
  },
  data() {
    return {
      queryParams: {
        year: '',
        area: ''
      },
      yearOptions: [
        { name: '2022年', value: '0' },
        { name: '2023年', value: '1' }
      ],
      areaOptions: [
        { name: '重庆', value: '0' },
        { name: '四川', value: '1' }
      ],
      tableData: [],
      tableLoading: false,
      pageIndex: 1,
      pageSize: 10,
      tableDataTotal: 0
    }
  },
  created() {
    this.querySubmit()
  },
  methods: {
    // 查询提交
    async querySubmit() {
      this.tableLoading = true
      const params = { pageIndex: this.pageIndex, pageSize: this.pageSize, browsedType: 1 }
      browsedIndexPage(params).then(res => {
        this.tableData = res.data.list
        this.tableDataTotal = res.data.totalCount
      })
      // 延迟关闭加载效果
      setTimeout(() => {
        this.tableLoading = false
      }, 200)
    },
    // 明细
    handleDetail(row) {
      this.$refs.economiesDetail.open(row)
    },
    // 重置页数
    handleSizeChange(val) {
      this.pageIndex = 1
      this.pageSize = val
      this.querySubmit()
    },
    // 跳转指定页数
    handleCurrentChange(val) {
      this.pageIndex = val
      this.querySubmit()
    }
  }
}
</script>

<style lang="scss" scoped>
  .query-box{
    margin: -8px 0 8px 0;
    .query-params{
      .el-form{
        margin-left: 24px;
      }
    }
  }
  .icon-detailed{
    width: 16px;
    height: 16px;
    cursor: pointer;
  }
</style>
