<template>
  <div class="flow-select-main">
    <div style="font-size:12px;margin:20px 0;">统计年月：{{ tableData['current_date']['y'] }}年 当年累计：{{total}}</div>
    <el-select v-model="timeVal" class="m-2" style="margin-bottom: 20px;" placeholder="Select" @change="selectChang">
      <el-option
          v-for="item in [{value:'0',label:'当前年'},{value:'-1',label:'前一年'},{value:'-2',label:'前两年'}]"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      />
    </el-select>

    <el-table :data="tableData['select']" :header-cell-style="{'background':'#f6f8fb!important',
    'color':'#495060'}"
              :cell-style="{'padding':'20px 0 !important','font-size':'12px'}">
      <el-table-column label="日期" prop="flow_Date" width="180"/>
      <el-table-column label="访问量" prop="number"/>
      <el-table-column label="比例" prop="percentage">
        <template #default="scope">
          <div> <el-progress :text-inside="true" :stroke-width="26" :percentage="scope.row.percentage" /></div>
          <div class="percentage-txt">{{  scope.row.percentage  }} %</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import {getFlowMonthCount} from "~/service/flow.js"
import {reactive, ref, watchEffect} from "vue";
let tableData = ref({'current_date':{y:'',m:''}})
let total = ref(0);
let timeVal = ref('当前年')
let i = 0
function  getList(param) {
  getFlowMonthCount(param || {current_year:0}).then((res) => {
    if (res.code == 0) {
      tableData.value = res.data
      total.value = res.count
      console.log(res,'s')
    }
  })
}
getList()

const selectChang = function (val){
  getList({current_year:val})
}

</script>

<style scoped>
.percentage-txt{
  font-size: 13px!important;

}

</style>