<template>
  请选择累计年月：
  <el-date-picker v-model="cumYm" type="month" format="YYYYMM" value-format="YYYYMM" style="width: 180px" placeholder="不填则查询所有年月"> </el-date-picker>
  <el-divider direction="vertical"></el-divider>
  <el-button type="primary" icon="Search" @click="executeGetCumulativeInfo">查询</el-button>
  <el-table :data="cumInfos.slice((currentPage - 1) * pageSize, currentPage * pageSize)" stripe height="300">
    <el-table-column prop="insutypeName" label="险种类型"></el-table-column>
    <el-table-column prop="year" label="年度"></el-table-column>
    <el-table-column prop="cumYm" label="累计年月"></el-table-column>
    <el-table-column prop="cumTypeCode" label="累计类别代码"></el-table-column>
    <el-table-column prop="cum" label="累计值"></el-table-column>
  </el-table>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 30, 50, 100]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="cumInfos.length"
    style="margin-top: 5px"
  ></el-pagination>
</template>

<script>
import { queryPersonnelCumulativeInfo } from '@/api/medical-insurance/si-query'
import { ref, watch } from 'vue'
export default {
  props: {
    psnNo: {
      type: String,
      require: true,
    },
    admdvs: {
      type: String,
    },
  },
  setup(props) {
    const cumYm = ref(null)
    const cumInfos = ref([])
    const pageSize = ref(10)
    const currentPage = ref(1)

    watch(
      () => props.psnNo,
      () => {
        cumYm.value = null
        cumInfos.value = []
        pageSize.value = 10
        currentPage.value = 1
      }
    )

    const handleSizeChange = (val) => {
      pageSize.value = val
    }
    const handleCurrentChange = (val) => {
      currentPage.value = val
    }
    const executeGetCumulativeInfo = () => {
      const param = {
        psnNo: props.psnNo,
        cumYm: cumYm.value,
        admdvs: props.admdvs,
      }
      queryPersonnelCumulativeInfo(param).then((res) => {
        cumInfos.value = res
      })
    }
    return {
      cumYm,
      cumInfos,
      pageSize,
      currentPage,
      handleSizeChange,
      handleCurrentChange,
      executeGetCumulativeInfo,
    }
  },
}
</script>
