<template>
  <div class="regionalEconomy">
    <skeleton v-if="isSkeleton" style="padding: 16px"></skeleton>
    <div v-if="!isSkeleton" 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="请选择" @change="changeSelect">
                <el-option v-for="(item, index) in yearOptions" :key="index" :label="item.year" :value="item.year" />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="flex-box query-ability">
          <!--<span class="flex-box" @click="handleMessage"><img src="@/assets/images/ability_excel.png">导出EXCEL</span>-->
        </div>
      </div>
      <div class="table-item">
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          border
          v-horizontal-scroll="tableData.total > 15 ? 'hover' : 'false'"
          highlight-current-row
          @sort-change="sortChange"
          :default-sort = "{prop: 'gdp', order: 'descending'}"
        >
          <el-table-column prop="province" label="下辖区" width="100" :formatter="formatStatus" fixed>
            <!--<template slot-scope="scope">-->
              <!--{{ scope.row.province}}{{scope.row.city ? '-': ''}}{{ scope.row.city}}{{scope.row.area ? '-': ''}}{{ scope.row.area}}-->
            <!--</template>-->
            <template slot-scope="scope">
              <span @click="childMethod(scope.row)" class="a-link" style="cursor: pointer;">{{scope.row.area ? scope.row.area: scope.row.city ? scope.row.city : scope.row.province}}</span>
            </template>

          </el-table-column>
          <el-table-column prop="gdp" label="GDP（亿元）" sortable="custom" width="120" :formatter="formatStatus"/>
          <el-table-column prop="gdpGrowth" label="GDP增速（%）" sortable="custom" width="130" :formatter="formatStatus"/>
          <el-table-column prop="gdpPerCapita" label="人均GDP（元）" sortable="custom" width="130" :formatter="formatStatus"/>
          <el-table-column prop="population" label="人口（万人）" sortable="custom" width="120" :formatter="formatStatus"/>
          <el-table-column prop="fixedInvestment" label="固定资产投资 （亿元） " sortable="custom" width="200" :formatter="formatStatus"/>
          <el-table-column prop="gbr" label="一般公共预算收入（亿元）" sortable="custom"  width="200" :formatter="formatStatus"/>
          <el-table-column prop="gbe" label="一般公共预算支出（亿元）" sortable="custom" width="200" :formatter="formatStatus"/>
          <el-table-column prop="govFundIncome" label="政府性基金收入（亿元）" sortable="custom" width="200" :formatter="formatStatus"/>
          <el-table-column prop="govDebtBalance" label="地方政府债务余额（亿元）" sortable="custom" width="200" :formatter="formatStatus"/>
          <el-table-column prop="uipInterestBearingDebt" label="城投平台有息债务（亿元）" sortable="custom" width="200" :formatter="formatStatus"/>
          <el-table-column prop="fiscalSelfSufficiencyRate" label="财政自给率（%）" sortable="custom" width="150" :formatter="formatStatus"/>
          <el-table-column prop="govDebtRateWild" label="债务率-宽口径（%）" sortable="custom" width="170" :formatter="formatStatus"/>
        </el-table>
      </div>
      <div class="pagination-box" v-if="show_page && tableDataTotal>pageSize">
        <el-pagination background :current-page="pageIndex" :page-size="pageSize" :total="tableDataTotal" layout="prev, pager, next, jumper" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
      </div>
    </div>
  </div>
</template>

<script>
  import { nationalPage,getYears } from '@/api/macro/macro'
  import skeleton from '../../component/skeleton'
export default {
  name: 'localEconomy',
  props:['dataQuery','provinceId'],
  components: {
    skeleton
  },
  data() {
    return {
      queryParams: {
        year: '',
        address: ''
      },
      yearOptions: [],
      tableData:[],
      tableLoading: false,
      pageIndex: 1,
      pageSize: 50,
      tableDataTotal: 0,
      show_page:true,
      MaxPage:500,
      isSkeleton:true
    }
  },
  watch: {
    dataQuery: {
      handler(newValue, oldValue) {
      },
      deep: true
    },
    provinceId(newValue, oldValue){
      this.getData()
    }
  },
  created() {
    this.getData();
    getYears({}).then(res => {
      this.yearOptions=res.data.reverse();
    })
  },
  methods: {
    getData(){
      const params = { pageNum: this.pageIndex, pageSize: this.pageSize, year: this.queryParams.year,type:2 }
      if(this.queryParams.field){
        params.field=this.queryParams.field
      }
      if(this.queryParams.order){
        params.order=this.queryParams.order
      }
      if(this.provinceId.length > 0){
        params.provinceIds=[this.provinceId[0]]
      }
      if(this.provinceId.length > 1){
        params.cityIds=[this.provinceId[1]]
      }
      if(this.provinceId.length > 2){
        params.areaIds=[this.provinceId[2]]
      }
      // params.provinceIds=[this.dataQuery.provinceId]
      // this.isSkeleton = true
      nationalPage(params).then(res => {
        this.isSkeleton = false
        this.tableData = res.data.list
        this.tableDataTotal = res.data.totalCount
      })
    },
    changeSelect(){
      this.pageIndex=1
      this.getData()
    },
    // 重置页数
    handleSizeChange(val) {
      this.pageIndex = 1
      this.pageSize = val
      this.getData()
    },
    // 跳转指定页数
    handleCurrentChange(val) {
      if(this.MaxPage<val){
        this.show_page = false
        this.$nextTick(() => {
          this.pageIndex = 1
          this.$message.warning(`对不起，最多只能访问${this.MaxPage}页`)
          this.show_page = true
        })
      }else {
        this.pageIndex = val
        this.getData()
      }
    },
    formatStatus: function(row, column, cellValue) {
      return cellValue? cellValue : '-'
    },
    sortChange({ column, prop, order }){
      this.queryParams.field = prop
      if(column.order === "ascending"){
        this.queryParams.order = 'asc'
      }else if(column.order === "descending"){
        this.queryParams.order = 'desc'
      }else {
        this.queryParams.order=''
        this.queryParams.field=''
      }
      this.pageIndex = 1;
      this.getData()
    },
    handleMessage(){
      this.$message({
        message: '功能正在开发中',
        type: 'warning'
      });
    },
    childMethod(item) {
      let data={}
      data.provinceId=item.provinceId;
      data.cityId=item.cityId;
      data.areaId=item.areaId;
      if(item.cityId){
        data.province=[item.province,item.city];
        if(item.areaId){
          data.province=[item.province,item.city,item.area];
        }
      }else {
        data.province=[item.province];
      }
      this.$parent.handleClick('first',data);
    }
  }
}
</script>

<style lang="scss" scoped>
  .regionalEconomy{
    .el-form{
      margin-left: 16px;
      .el-form-item{
        margin: 0 !important;
        .form-content-width{
          width: 80px;
        }
        ::v-deep .el-input{
          .el-input__inner{
            border: 0;
          }
        }
        ::v-deep .is-focus{
          .el-input__inner{
            background: #F4F6F9;
          }
        }
      }
    }
    .content{
      width: 100%;
      background: #ffffff;
      padding: 16px;
      margin-top: 12px;
      border-radius: 4px;
    }
    .table-item{
      margin-top: 16px;
      ::v-deep .el-table{
        overflow:visible;
        .el-table__header-wrapper{
          position: sticky;
          top:56px;
          z-index: 9;
        }
        .el-table__fixed-header-wrapper{
          position: sticky;
          z-index: 9;
          top: 56px;
        }
        .el-table__fixed{
          overflow-x: clip;
          overflow-y: clip;
        }
        th{
          font-weight: 400 !important;
        }
        .el-table__fixed-header-wrapper th{
          background: #F0F3FA;
        }
        td.el-table__cell{
          border-bottom: 0;
        }
        .caret-wrapper{
          width: 10px;
        }
      }
    }
  }

</style>
