<template>
  <div>
    <div class="c-left alight-box">
      <div>
        <span class="box-title1">三资统计</span>
        <span class="box-title2">全区资产统计</span>
      </div>
      <div class="cl-b1">
        <div class="c-sort">
          <el-select v-model="sort_qqzc.year" @change="getMonthArr" placeholder="请选择年" class="select-default" popper-class="select-default-popper">
            <el-option v-for="item in yearArr" :key="item" :label="item+'年'" :value="item"></el-option>
          </el-select>
          <el-select v-model="sort_qqzc.month" placeholder="请选择月" class="select-default" popper-class="select-default-popper">
            <el-option v-for="item in monthArr" :key="item" :label="item+'月份'" :value="item"></el-option>
          </el-select>
        </div>
        <ul class="l1-list">
          <li></li>

        </ul>
      </div>
      <span class="box-title2">全区资产概况</span>
    </div>
    <!-- <div class="cl-sub alight-box"></div> -->
    <div class="c-right alight-box">
      <div>
        <span class="box-title1">预警分析</span>
        <span class="box-title2">报表未更新预警</span>
      </div>
      <span class="box-title2">超支预警</span>
      <span class="box-title2">合同到期预警</span>
    </div>
  </div>
</template>

<script>

export default {
  name: 'ZnfxSzjg',
  data() {
    return {
      sort_qqzc: {
        year: '',
        month: ''
      },
      yearArr: [],
      monthArr: [],
      data_zctj: {
        all: [],
        town: []
      }
    }
  },
  mounted() {
    this.getRecentYears()
    this.sort_qqzc.year = new Date().getFullYear()
    this.getMonthArr()
    this.sort_qqzc.month = new Date().getMonth()+1
  },
  methods: {
    getRecentYears() {
      let thisYear = new Date().getFullYear()
      for(let i=0; i>-5; i--) {
        this.yearArr.push(thisYear+i)
      }
    },
    getMonthArr() {
      this.sort_qqzc.month = ''
      this.monthArr = []
      const d = new Date()
      const maxMonth = d.getFullYear()===this.sort_qqzc.year? d.getMonth()+1: 12
      for(let i=1; i<=maxMonth; i++) {
        this.monthArr.push(i)
      }
    },
    // getZctj(town='all') {
    //   let example
    //   if(town==='all') {
    //     example = {}
    //   }
    // }
  }
}
</script>

<style lang="scss" scoped>
.c-left {
  left: 260px;
  z-index: 2;
}
.cl-sub {
  position: absolute;
  width: 810px;
  height: calc(100vh - 285px);
  top: 220px;
  left: 1070px;
  bottom: 65px;
  border: 1px solid #7FFFEA;
  background: rgba(0,58,64,0.8);
  box-sizing: border-box;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  z-index: 1;
}

.cl-b1 {
  .c-sort {
    display: flex;
    justify-content: space-between;
    margin: 0 0 24px;
    .el-select {
      width: 48%;
    }
  }
  .l1-list {

  }
}
</style>