<template>
  <el-card style="margin-bottom: 20px;">
    <template #header>
      <div class="header">
        <div>{{props.isAdmin?"总":"个人"}}催收次数月统计</div>
        <div>
          <el-select v-model="localStore.obj.num3" @change="numChange">
            <el-option v-for="i in 12" :key="i" :label="(3+i)+'个月'" :value="3+i" />
          </el-select>
        </div>
      </div>
    </template>
    <div class="echart-content"><div ref="chartRef" style="width: 100%; height: 100%;  font-size: 2rem; text-shadow: none;"></div></div>
  </el-card>
</template>

<script setup>
import {onMounted,getCurrentInstance} from 'vue'
import {useLocalStore} from '@/store'
import {chartInit,chartChange} from './count3.js'

const {proxy} = getCurrentInstance();

const localStore = useLocalStore();
if(!localStore.obj.num3){
  localStore.obj.num3=6;
}


const props = defineProps({
  isAdmin: {
    type: Boolean,
    default: false
  }
});

onMounted(async () => {
  let chart = await chartInit(proxy.$refs.chartRef);
  chartChange(localStore.obj.num2);
  window.addEventListener("resize",()=>{
    chart.resize();
  });
});

const numChange = ()=>{
  chartChange(localStore.obj.num3);
}

</script>

<style  lang="scss" scoped>
.header {
  display: grid;
  grid-template-columns: 1fr 6rem;
}
.echart-content {
  overflow: hidden;
  width: 100%;
  height: 15em;
}
</style>