<template>
  <div class="app-container container-box nationalEconomies">
    <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 multiple collapse-tags 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-cascader
              ref="address"
              :options="addressList"
              :props="props"
              v-model="queryParams.address"
              @change="querySubmit"
              placeholder="地区选择"
              collapse-tags
              clearable></el-cascader>
          </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="50" align="left" fixed>
          <template slot-scope="scope">{{ pageIndex * pageSize - pageSize + scope.$index + 1 }}</template>
        </el-table-column>
        <el-table-column label="地区" min-width="70" align="left" fixed>
          <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="90" align="left" fixed>
          <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="115" align="right" />
        <el-table-column label="GDP增速" prop="cgrdm" sortable min-width="100" align="right" />
        <el-table-column label="人均GDP（元）" prop="cgrssqy" sortable width="125" align="right" />
        <el-table-column label="人口（万人）" prop="cgrssqy" sortable width="120" align="right" />
        <el-table-column label="一般公共预算收入 (亿元)" prop="cgrzyhy" sortable width="170" align="right" />
        <el-table-column label="一般公共预算收入增速（%）" prop="cgzzxs" sortable min-width="140" align="right" />
        <el-table-column label="一般公共预算支出（亿元）" prop="cgfs" sortable width="140" align="left" />
        <el-table-column label="政府性基金收入（亿元）" width="140" sortable 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" sortable width="150" align="left" />
        <el-table-column label="政府性基金支出（亿元）" prop="cgfs" width="170" sortable align="left" />
        <el-table-column label="国有资产经营收入（亿元）" prop="cgfs" width="160" align="left" />
        <el-table-column label="国有资产经营支出（亿元）" prop="cgfs" width="160" align="left" />
        <el-table-column label="固定资产投资（亿元）" prop="cgfs" width="160" align="left" />
        <el-table-column label="财政自给率（%）" prop="cgfs" width="160" align="left" />
        <el-table-column label="地方政府债务余额（亿元）" prop="cgfs" width="160" align="left" />
        <el-table-column label="一般债余额（亿元）" prop="cgfs" width="160" align="left" />
        <el-table-column label="专项债余额（亿元）" prop="cgfs" width="160" align="left" />
        <el-table-column label="地方政府债务限额（亿元）" prop="cgfs" width="160" align="left" />
        <el-table-column label="城投平台有息债务？？（亿元）" prop="cgfs" width="160" align="left" >
          <template slot="header" slot-scope="scope">
            <span>城投平台有息债务（亿元）
              <el-tooltip popper-class="tips" effect="light" content="城投平台有息债务是该地区行政区划下所有的城投公司的短期债务与长期债务合计。其中，短期债务=短期借款+一年内到期的非流动负债+应付短期债券，长期债务=长期借款+应付长期债券。" placement="top">
                <i class="el-icon-warning-outline"></i>
              </el-tooltip>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="负债率（%）" prop="cgfs" width="160" align="left" />
        <el-table-column label="负债率（宽口径）（%）" prop="cgfs" width="160" align="left" />
        <el-table-column label="债务率（%）" prop="cgfs" width="160" align="left" />
        <el-table-column label="债务率（宽口径）（%）" prop="cgfs" width="160" align="left" />
        <el-table-column label="金融机构存款余额（本外币）（亿元）" prop="cgfs" width="160" align="left" />
        <el-table-column label="金融机构贷款余额（本外币）（亿元）" prop="cgfs" width="160" align="left" />
        <el-table-column label="第一产业增加值（亿元）" prop="cgfs" width="160" align="left" />
        <el-table-column label="第二产业增加值（亿元）" prop="cgfs" width="160" align="left" />
        <el-table-column label="第三产业增加值（亿元）" prop="cgfs" width="160" align="left" />
        <el-table-column label="工业增加值（亿元）" prop="cgfs" width="160" align="left" />
        <el-table-column label="工业总产值（亿元）" prop="cgfs" width="160" align="left" />
        <el-table-column label="进出口总额（亿美元）" prop="cgfs" width="160" align="left" />
        <el-table-column label="社会消费品零售总额（亿元）" prop="cgfs" width="160" align="left" />
        <el-table-column label="城镇居民人均可支配收入（元）" prop="cgfs" width="160" 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 dataRegion from '@/assets/json/dataRegion'
import economiesDetail from './component/economies-detail'
import axios from 'axios'
export default {
  name: 'NationalEconomies',
  components: {
    economiesDetail
  },
  data() {
    return {
      queryParams: {
        year: '',
        address: ''
      },
      yearOptions: [
        { name: '2023年', value: '2023' },
        { name: '2022年', value: '2022' },
        { name: '2021年', value: '2021' },
      ],
      props: {
        value: 'id',
        multiple: true,
      },
      addressList: [],
      tableData: [
        {
          dataId:'1',
          cgrssqy:'100',
          cgfs:'200'
        }
      ],
      tableLoading: false,
      pageIndex: 1,
      pageSize: 10,
      tableDataTotal: 0
    }
  },
  created() {
    this.querySubmit()
    this.dataRegion()
  },
  methods: {
    //地区
    async dataRegion() {
      // await axios.post("https://files.jiansheku.com/file/json/common/dataRegion.json", {}, {
      //   headers: {
      //     'Content-Type': 'application/json'
      //   }
      // }).then(res => {
      //   if (res.data.code == 200) {
      //     console.log(res.data.data)
      //   }
      // })
      var str = [];
      for (let x = 0; x < 3; x++) {
        for (let i = 0; i < dataRegion.length; i++) {
          if (dataRegion[i].regionLevel == x + 1 && x + 1 == 1) {
            str.push({
              'id': dataRegion[i].id,
              "label": dataRegion[i].regionName,
              "short": dataRegion[i].short,
              "value": dataRegion[i].parentId,
              "children": []
            });
          } else if (dataRegion[i].regionLevel == x + 1 && x + 1 == 2) {
            for (let j = 0; j < str.length; j++) {
              if (str[j].id == dataRegion[i].parentId) {
                str[j].children.push({
                  'id': dataRegion[i].id,
                  "label": dataRegion[i].regionName,
                  "short": dataRegion[i].short,
                  "value": dataRegion[i].parentId,
                  "children": []
                });
              }
            }
          } else if (dataRegion[i].regionLevel == x + 1 && x + 1 == 3) {
            for (let j = 0; j < str.length; j++) {
              for (let k = 0; k < str[j].children.length; k++) {
                if (str[j].children[k].id == dataRegion[i].parentId) {
                  str[j].children[k].children.push({
                    'id': dataRegion[i].id,
                    "label": dataRegion[i].regionName,
                    "short": dataRegion[i].short,
                    "value": dataRegion[i].parentId
                    // "children":[]
                  });
                }
              }
            }
          }
        }
      }
      this.addressList = str;
    },
    // 查询提交
    async querySubmit() {
      // this.tableLoading = true
      const params = { pageIndex: this.pageIndex, pageSize: this.pageSize, browsedType: 1 }

      if(this.queryParams.address){
        let arr = this.$refs.address.getCheckedNodes();
        let provinceCode = [],cityCode = [],countyCode = [];
        for (var i in arr) {
          if (arr[i].parent) {
            if (!arr[i].parent.checked) {
              arr[i].hasChildren && cityCode.push(arr[i].value);
              !arr[i].hasChildren && countyCode.push(arr[i].value);
            }
          } else {
            provinceCode.push(arr[i].value)
          }
        }
        if(provinceCode.length > 0){
          params.procinceId=provinceCode.join(',')
        }
        if(cityCode.length > 0){
          params.cityId=cityCode.join(',')
        }
        if(countyCode.length > 0){
          params.districtId=countyCode.join(',')
        }
      }
      console.log(params)

      // 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">
  .tips.is-light{
    padding: 12px;
    width: 318px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 20px;
    color: #333333;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.08);
    .popper__arrow {
      border-bottom-color: rgba(0, 0, 0, 0.08) !important;
      border-top-color: rgba(0, 0, 0, 0.08) !important;
    }
  }
</style>
<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;
  }

  .nationalEconomies{
    .table-item{
      ::v-deep .el-table{
        th{
          font-size: 12px !important;
          font-weight: 400 !important;
        }
        .el-table__fixed-header-wrapper th{
          background: #F0F3FA;
        }
        .cell{
          position: relative;
        }
        .caret-wrapper{
          width: 10px;
          /*<!--position: absolute;-->*/
          /*<!--right: 12px;-->*/
          /*<!--top: -3px;-->*/
        }
        /*.sort-caret{*/
          /*position: initial;*/
        /*}*/
        /*.ascending{*/
          /*margin-bottom: 3px;*/
        /*}*/
      }
    }
  }
</style>
