<template>
  <el-container>
    <el-header style="height: 35px; margin-top: 10px">
      <el-date-picker v-model="setlConditon.month" type="month" style="width: 110px" placeholder="请选择" :clearable="false"></el-date-picker>
      <el-select v-model="setlConditon.insutype" placeholder="险种类型" filterable style="width: 200px">
        <el-option v-for="item in insutypes" :key="item.code" :value="item.code" :label="item.name"></el-option>
      </el-select>
      <el-select v-model="setlConditon.admdvs" placeholder="参保地" style="width: 120px">
        <el-option v-for="item in insuOptins" :key="item.code" :value="item.code" :label="item.name"></el-option>
      </el-select>
      <el-divider direction="vertical"></el-divider>
      <el-button type="success" icon="el-icon-search" @click="fetchSetlinfos">查询</el-button>
      <el-button type="primary" icon="el-icon-download" @click="exportExcel">导出Excel</el-button>
    </el-header>
    <el-main>
      <el-table :data="setlinfos" stripe :max-height="tableHeight" highlight-current-row border show-summary>
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="admdvsName" label="参保地名称"></el-table-column>
        <el-table-column prop="psnSumamt" label="人次"></el-table-column>
        <el-table-column prop="medfeeSumamt" label="医疗总费用"></el-table-column>
        <el-table-column prop="baseMedFundpaySumamt" label="基本医疗统筹金额"></el-table-column>
        <el-table-column prop="bigDssFundpaySumamt" label="大病基金"></el-table-column>
        <el-table-column prop="clvFundpaySumamt" label="公务员基金支付"></el-table-column>
        <el-table-column prop="othFundpaySumamt" label="其他基金"></el-table-column>
        <el-table-column prop="acctpaySumamt" label="个人账户基金"></el-table-column>
        <el-table-column prop="fundpaySumamt" label="全部基金"></el-table-column>
      </el-table>
    </el-main>
  </el-container>
</template>

<script>
import { onMounted, reactive, ref } from 'vue'
import { formatMonth } from '../../../utils/date'
import { getInsutypes } from '@/api/medical-insurance/si-dict'
import { useStore } from 'vuex'
import { selectSetlinfoStatistics } from '@/api/medical-insurance/si-query'
import { ElMessage } from 'element-plus'
import { Export } from '@/utils/ExportExcel'
import { clone } from '../../../utils/clone'
export default {
  setup() {
    const store = useStore()
    const windowSize = store.state.app.windowSize
    const tableHeight = windowSize.h - 55

    const setlConditon = reactive({
      month: formatMonth(new Date()),
      insutype: null,
      admdvs: null,
    })

    const insutypes = ref([])
    const insuOptins = initInsuOptions()
    const setlinfos = ref([])

    const fetchSetlinfos = () => {
      if (!setlConditon.month) {
        ElMessage({
          message: '请选择年月！',
          type: 'warning',
          duration: 2500,
          showClose: true,
        })
        return
      }
      if (!setlConditon.insutype) {
        ElMessage({
          message: '请选择险种类型！',
          type: 'warning',
          duration: 2500,
          showClose: true,
        })
        return
      }
      if (!setlConditon.admdvs) {
        ElMessage({
          message: '请选择参保地！',
          type: 'warning',
          duration: 2500,
          showClose: true,
        })
        return
      }
      setlConditon.month = formatMonth(setlConditon.month)
      selectSetlinfoStatistics(setlConditon)
        .then((res) => {
          setlinfos.value = res
        })
        .catch(() => {
          setlinfos.value = []
        })
    }

    const getSummaries = () => {
      let sums = {
        psnSumamt: 0,
        medfeeSumamt: 0,
        baseMedFundpaySumamt: 0,
        bigDssFundpaySumamt: 0,
        clvFundpaySumamt: 0,
        othFundpaySumamt: 0,
        acctpaySumamt: 0,
        fundpaySumamt: 0,
      }
      setlinfos.value.forEach((itm) => {
        for (let k in sums) {
          sums[k] = Number(sums[k]) + Number(itm[k])
        }
      })
      sums.admdvsName = '合计'
      return sums
    }

    const filterInsutypeName = () => {
      for (let i = 0; i < insutypes.value.length; i++) {
        if (insutypes.value[i].code === setlConditon.insutype) {
          return insutypes.value[i].name
        }
      }
      return ''
    }

    const filterAdmdvsName = () => {
      if (setlConditon.admdvs === 1) {
        return '省内异地'
      }
      return '省外异地'
    }

    const exportExcel = () => {
      if (setlinfos.value.length === 0) {
        ElMessage({
          message: '没有可以导出的数据！',
          type: 'warning',
          duration: 2500,
          showClose: true,
        })
      } else {
        const data = clone(setlinfos.value)
        data.push(getSummaries())
        const title = {
          admdvsName: '参保地名称',
          psnSumamt: '人次',
          medfeeSumamt: '医疗总费用',
          baseMedFundpaySumamt: '基本医疗统筹金额',
          bigDssFundpaySumamt: '大病基金',
          clvFundpaySumamt: '公务员基金支付',
          othFundpaySumamt: '其他基金',
          acctpaySumamt: '个人账户基金',
          fundpaySumamt: '全部基金',
        }
        const admdvsName = filterAdmdvsName()
        const insutypeName = filterInsutypeName()
        Export(data, title, `【${setlConditon.month}】【${admdvsName}】【${insutypeName}】`)
      }
    }

    onMounted(() => {
      getInsutypes().then((res) => {
        insutypes.value = res
      })
    })

    return {
      tableHeight,
      setlConditon,
      insutypes,
      insuOptins,
      setlinfos,
      fetchSetlinfos,
      exportExcel,
    }
  },
}

function initInsuOptions() {
  return [
    {
      code: 1,
      name: '省内异地',
    },
    {
      code: 2,
      name: '省外异地',
    },
  ]
}
</script>
