import Pannel from '@/components/pannel/index.vue';
import ScrollTable from '@/components/scroll-table/index.vue';
import PannelTabs from '@/components/pannel-tabs/index.vue';
import { debtChangeRanking } from '../../../../api/index.js';
import { mapGetters } from 'vuex';
export default {
  components: {
    PannelTabs,
    ScrollTable,
    Pannel
  },
  computed: {
    ...mapGetters(['year', 'deptId', 'deptLength'])
  },
  watch: {
    year: {
      handler () {
        this.getData();
      },
      immediate: true, // 立即执行
    },
    deptId: {
      handler () {
        this.getData();
      },
      immediate: true, // 立即执行
    }
  },
  data () {
    return {
      type: '1',
      pannelData: [
        {
          id: '1',
          name: '减少'
        },
        {
          id: '2',
          name: '增加'
        },
      ],
      isLoad: false,
      headers: ['部门名称', '债务金额', '排名'],
      data: [['部门名称', '债务金额', '1']]
    };
  },
  created () {
  },
  mounted () {
  },
  methods: {
    getData () {
      if (this.year, this.deptId) {
        this.isLoad = false;
        debtChangeRanking(this.deptId, this.year, this.type).then(res => {
          if (this.deptLength == 3){
            this.headers = ['摘要', '金额'];
            this.data = res.rows.map(item => {
              return [item.name, item.value]
            })
          }else{
            this.headers = ['部门名称', '债务金额', '排名']
            this.data = res.rows.map(item => {
              return [item.name, item.value, item.index]
            })
          }
          this.isLoad = true;
        })
      }
    },
    tabChange (info) {
      // console.log('indo', info);
      this.type = info.id;
      this.getData()
    }
  }
};