<template>
  <div>
    <el-row
      :gutter="10"
      style="height: 40px"
      align="middle"
    >
      <el-col
        :span="1"
      >
        <el-text>数据统计</el-text>
      </el-col>
      <el-col
        :xs="24"
        :sm="4"
      >
        <el-date-picker
          v-model="monthData"
          type="month"
          placeholder="选择月份"
          value-format="YYYY-MM"
          clearable
          @clear="choiceMonth"
        />
      </el-col>
      <el-col
        :xs="24"
        :sm="4"
      >
        <el-date-picker
          v-model="yearData"
          type="year"
          placeholder="选择年份"
          value-format="YYYY"
          @clear="choiceYear"
        />
      </el-col>
      <el-col
        :xs="24"
        :sm="6"
      >
        <el-button
          icon="Search"
          type="primary"
          @click="querySum"
        >查询</el-button>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-col
        :xs="24"
        :sm="11"
      >
        <el-table
          :data="projectMonthFee"
          max-height="400px"
          height="400px"
          show-summary
          table-layout="auto"
        >
          <el-table-column
            prop="projectFeeGenre.name"
            label="费用类型"
            width="200"
            align="center"
          />
          <el-table-column
            prop="totalExpenditure"
            label="支出金额"
            align="center"
          />
          <el-table-column
            prop="totalDeposit"
            label="支入金额"
            align="center"
          />
        </el-table>
      </el-col>
      <el-col
        :span="10"
        :offset="1"
      >
        <charts ref="chartOut"/>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { codeOperate } from '@/pinia/code/code'
import { queryProjectMonthFee } from '@/api/cost'
import { ref, defineExpose, onMounted } from 'vue'
import { chartsList } from '@/pinia/chartsData/chartsData'
import Charts from './charts.vue'
defineOptions({
  name: 'CostSum'
})
const monthData = ref('')
const yearData = ref('')
const id = codeOperate()
const projectMonthFee = ref()
const chartsStorage = chartsList()
onMounted(() => {
  querySum()
})
const chartOut = ref()
const querySum = () => {
  queryProjectMonthFee(monthData.value, yearData.value, id.currentCode).then(res => {
    if (res.code === 0) {
      projectMonthFee.value = res.data
      const list = res.data
      const sumData = []
      list.forEach(item => {
        if (item.totalExpenditure !== 0) {
          const temporary = { name: item.projectFeeGenre.name, value: item.totalExpenditure }
          sumData.push(temporary)
        }
      })
      chartsStorage.changeCharts(sumData)
      chartOut.value.getServerData()
    }
  })
}
const choiceMonth = () => {
  monthData.value = ''
}
const choiceYear = () => {
  yearData.value = ''
}

defineExpose({
  querySum
})
</script>

<style scoped>

</style>
