<script setup lang="ts">
import { ref, reactive, provide } from 'vue'
import echartBar from '@/components/echart/echart-bar.vue'
import echartLine from '@/components/echart/echart-line.vue'

import Statistic from '@/components/echart/Statistic.vue'

import {Contract_Stat_Year } from '@/api/contractStat/index'

import { GlobalStore } from '@/stores/index'

import * as echarts from 'echarts'
provide('echart', echarts)

const globalStore = GlobalStore()



const data:any = reactive({
  //图表值
  tableData:{},
  SwitchValue:true
})

const initParam = reactive({
  User_tokey: globalStore.GET_User_tokey,
  T_type:2,
  T_year: ''
})

//函数
const ContractYearApi = async ()=>{
  const res: any = await Contract_Stat_Year(initParam)
  if (res.Code==200) {
    data.tableData = res.Data
  }
}    
ContractYearApi()

//函数
const disabledYear = (time:any)=>{
  return new Date().getFullYear() < time.getFullYear();
}
</script>

<template>
  <div class="contract">
    <el-card class="box-card box-card-item">
      <el-row :gutter="20" style="margin-bottom: 0">
        <el-col :xl="6" :lg="8" :md="10">
          <span class="inline-flex items-center">选择年份：</span>
          <el-date-picker v-model="initParam.T_year" style="width: 200px;margin-right: 20px;" value-format="YYYY"
            type="year" placeholder="请选择年" :disabled-date="disabledYear"/>
          <el-button type="primary" @click="ContractYearApi">搜索</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card box-card-item">
      <template #header>
        <div class="card-header">
          <h4>本年统计</h4>
        </div>
      </template>
      <Statistic :StatisticData="data.tableData"></Statistic>
    </el-card>
    <el-card class="box-card box-card-item">
      <template #header>
        <div class="card-header" style="display: flex;align-items: center;">
          <h4 style="margin-right: 20px;">月度/年度合同曲线图统计</h4>
          <el-switch v-model="data.SwitchValue" active-text="按月" inactive-text="按年" 
          inline-prompt style="--el-switch-on-color: #13ce66; --el-switch-off-color: #409eff"/>
        </div>
      </template>
      <el-row>
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12"> 
          <echartBar id="receptionTrend1" :barData="data.tableData" :switchData="data.SwitchValue"></echartBar>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12"> 
          <echartLine id="receptionTrend2" :lineData="data.tableData" :switchData="data.SwitchValue"></echartLine>
        </el-col>
      </el-row>
     
    </el-card>
  </div>
</template>

<style scoped lang="scss">

.box-card-item {
  margin-bottom: 0.75rem;
}
.contract{
  height: 100%;
  overflow-y: auto;
}
</style>
