<template>
  <el-container>
    <el-header style="height: 35px; margin-top: 10px">
      <el-date-picker v-model="setlCondition.month" :clearable="false" placeholder="请选择" style="width: 110px"
                      type="month"></el-date-picker>
      <el-select v-model="setlCondition.setlType" style="width: 100px">
        <el-option label="住院" value="21"></el-option>
        <el-option label="门诊" value="11"></el-option>
      </el-select>
      <el-select v-model="setlCondition.admdvsType" placeholder="参保地归属" style="width: 120px">
        <el-option v-for="item in insuOptins" :key="item.code" :label="item.name" :value="item.code"></el-option>
      </el-select>
      <el-select v-model="setlCondition.insutype" clearable filterable placeholder="险种类型" style="width: 200px">
        <el-option v-for="item in insutypes" :key="item.code" :label="item.name" :value="item.code"></el-option>
      </el-select>
      <el-divider direction="vertical"></el-divider>
      <el-button icon="el-icon-search" type="success" @click="fetchSetlinfos">查询</el-button>
      <el-button icon="el-icon-download" type="primary" @click="exportSetlinfoExcel">导出Excel</el-button>
      <el-button :disabled="setlinfos.length === 0" @click="shangChuanShuJuDrawer = true">上传数据</el-button>
    </el-header>
    <el-main>
      <el-table
          :data="setlinfos"
          :max-height="tableHeight"
          :row-class-name="differChildrenRows"
          border
          highlight-current-row
          row-key="childKey"
          show-summary
          @row-dblclick="fetchSetldetails"
      >
        <el-table-column label="参保地" width="144">
          <template #default="scope">
            <div :style="admdvsNameStyle(scope.row.children, scope.row.isChildren)" :title="scope.row.admdvsName"
                 class="ellipsis-text">{{ scope.row.admdvsName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="险种类型" prop="insutypeName"></el-table-column>
        <el-table-column label="人次" prop="psnSumamt"></el-table-column>
        <el-table-column label="医疗总费用" prop="medfeeSumamt"></el-table-column>
        <el-table-column label="基本医疗统筹金额" prop="baseMedFundpaySumamt"></el-table-column>
        <el-table-column label="大病基金" prop="bigDssFundpaySumamt"></el-table-column>
        <el-table-column label="公务员基金支付" prop="clvFundpaySumamt"></el-table-column>
        <el-table-column label="其他基金" prop="othFundpaySumamt"></el-table-column>
        <el-table-column label="全部基金" prop="fundpaySumamt"></el-table-column>
      </el-table>
      <el-dialog v-model="showSetldetails" :close-on-click-modal="false" :close-on-press-escape="false"
                 :title="filterDialogTitle" width="70%">
        <div style="width: 130px; height: 36px; position: absolute; top: 16px; right: 60px">
          <el-button icon="el-icon-download" type="primary" @click="exportSetldetailExcel">导出Excel</el-button>
        </div>
        <el-table :data="setldetails.slice(pageSize * (currentPage - 1), pageSize * currentPage)" height="360"
                  highlight-current-row stripe @row-dblclick="openSetlinfoComponent">
          <el-table-column fixed label="序号" type="index" width="40"></el-table-column>
          <el-table-column fixed label="姓名" prop="psnName" width="60"></el-table-column>
          <el-table-column label="住院号" prop="patNo" width="70"></el-table-column>
          <el-table-column label="次数" prop="times" width="40"></el-table-column>
          <el-table-column label="性别" prop="gendName" width="50"></el-table-column>
          <el-table-column label="出生日期" prop="brdy"></el-table-column>
          <el-table-column label="身份证" prop="certno"></el-table-column>
          <el-table-column label="参保地区" prop="insuplcAdmdvsName"></el-table-column>
          <el-table-column label="险种类型" prop="insutypeName"></el-table-column>
          <el-table-column label="人员类别" prop="psnTypeName"></el-table-column>
          <el-table-column label="就诊ID" prop="mdtrtId"></el-table-column>
          <el-table-column label="结算ID" prop="setlId"></el-table-column>
          <el-table-column label="入院时间" prop="begntime"></el-table-column>
          <el-table-column label="出院时间" prop="endtime"></el-table-column>
          <el-table-column label="结算时间" prop="setlTime"></el-table-column>
          <el-table-column label="医疗类别" prop="medTypeName"></el-table-column>
          <el-table-column label="总费用" prop="medfeeSumamt"></el-table-column>
          <el-table-column label="报销金额" prop="fundPaySumamt"></el-table-column>
          <el-table-column label="医疗救助" prop="mafPay"></el-table-column>
          <el-table-column label="个人账户支出" prop="acctPay"></el-table-column>
          <el-table-column label="个人现金支出" prop="psnCashPay"></el-table-column>
          <el-table-column label="大病支出" prop="hifmiPay"></el-table-column>
        </el-table>
        <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="[15, 30, 45, 60]"
            :total="setldetails.length"
            layout="total, sizes, prev, pager, next, jumper"
            style="margin-top: 5px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        ></el-pagination>
      </el-dialog>
      <el-dialog v-model="showSetlinfoComponent" :close-on-click-modal="false" title="结算信息" width="70%">
        <Setlinfo :setlinfo="currentSetldetail"/>
      </el-dialog>
    </el-main>
    <el-drawer v-model="shangChuanShuJuDrawer" size="80%">
      <el-select v-model="shangChuanLeiXing" filterable size="mini" style="width: 80px; margin-left: 10px"
                 @change="jieSuanDanCurrentPage = 1">
        <el-option v-for="item in jieSuanDanLeiXingData" :key="item.code" :label="item.name" :value="item.code">
          <span style="color: #8492a6; font-size: 12px">{{ item.code }}</span>
          <el-divider direction="vertical"></el-divider>
          <span>{{ item.name }}</span></el-option
        >
      </el-select>
      <el-button icon="el-icon-download" style="margin-left: 20px" type="primary" @click="shangChuanDaoChu">导出Excel
      </el-button>
      <el-alert title="上传返回的流水如果没有，就代表该患者没有上传数据"></el-alert>
      <el-table :data="cptShangChuanJieSuanDanData.slice((jieSuanDanCurrentPage - 1) * 40, jieSuanDanCurrentPage * 40)"
                :height="tableHeight - 30" highlight-current-row>
        <el-table-column fixed label="姓名" prop="psnName" width="60"></el-table-column>
        <el-table-column label="住院号" prop="patNo" width="70"></el-table-column>
        <el-table-column label="次数" prop="times" width="40"></el-table-column>
        <el-table-column label="入院日期" prop="admissDate"></el-table-column>
        <el-table-column label="出院日期" prop="disDate"></el-table-column>
        <el-table-column label="身份证" prop="idCard"></el-table-column>
        <el-table-column label="参保地区" prop="insuplcAdmdvsName"></el-table-column>
        <el-table-column label="出院诊断" prop="disDiag"></el-table-column>
        <el-table-column label="出院诊断名称" prop="disDiagComment"></el-table-column>
        <el-table-column label="险种类型" prop="insutypeName"></el-table-column>
        <el-table-column label="医疗类别" prop="medTypeName"></el-table-column>
        <el-table-column label="结算日期" prop="setlTime"></el-table-column>
        <el-table-column label="现金支付" prop="psnCashPay"></el-table-column>
        <el-table-column label="统筹支付" prop="fundPaySumamt"></el-table-column>
        <el-table-column label="医疗费总额" prop="medfeeSumamt"></el-table-column>
        <el-table-column label="上传返回流水" prop="setlListId"></el-table-column>
        <el-table-column label="大病支出" prop="hifmiPay"></el-table-column>
        <el-table-column label="医疗救助" prop="mafPay"></el-table-column>
      </el-table>
      <el-pagination
          :current-page="jieSuanDanCurrentPage"
          :page-size="40"
          :total="cptShangChuanJieSuanDanData.length"
          layout="total,  prev, pager, next"
          @current-change="shangChuanCurrent"
      >
      </el-pagination>
    </el-drawer>
  </el-container>
</template>

<script>
import {computed, onMounted, reactive, ref} from 'vue'
import {formatMonth} from '../../../utils/date'
import {getInsutypes} from '@/api/medical-insurance/si-dict'
import {useStore} from 'vuex'
import {
  querySettlementInfo,
  selectSetldetailStatistics,
  selectSetlinfoStatistics
} from '@/api/medical-insurance/si-query'
import {ElMessage} from 'element-plus'
import {Export} from '@/utils/ExportExcel'
import {clone} from '../../../utils/clone'
import Setlinfo from '../../../components/medical-insurance/setlinfo/Index.vue'
import {ExcelName} from '../../../utils/ExportExcel'

export default {
  components: {
    Setlinfo,
  },
  setup() {
    const store = useStore()
    const windowSize = store.state.app.windowSize
    const tableHeight = windowSize.h - 55

    const setlCondition = reactive({
      month: formatMonth(new Date()),
      setlType: '21',
      insutype: null,
      admdvsType: null,
      insuplcAdmdvs: null,
    })

    const insutypes = ref([])
    const insuOptins = initInsuOptions()
    const setlinfos = ref([])
    const setldetails = ref([])
    const showSetldetails = ref(false)

    const admdvsNameStyle = (children, isChildren) => {
      return {
        position: 'absolute',
        top: '6px',
        left: children || isChildren ? '24px' : '10px',
        width: '110px',
      }
    }

    const differChildrenRows = ({row}) => {
      if (row.isChildren) {
        return 'children-row'
      }
    }

    const filterDialogTitle = computed(() => {
      return `【${setlCondition.month}】【${filterAdmdvsName()}】【${filterInsutypeName()}】结算明细`
    })

    const fetchSetlinfos = () => {
      if (!setlCondition.month) {
        ElMessage({
          message: '请选择年月！',
          type: 'warning',
          duration: 2500,
          showClose: true,
        })
        return
      }
      if (!setlCondition.admdvsType) {
        ElMessage({
          message: '请选择参保地归属！',
          type: 'warning',
          duration: 2500,
          showClose: true,
        })
        return
      }
      setlCondition.month = formatMonth(setlCondition.month)
      selectSetlinfoStatistics(setlCondition)
          .then((res) => {
            setlinfos.value = res
            shangChuanJieSuanDanData.value = setlinfos.value[0].shangChuanJieSuanDan
            console.log(shangChuanJieSuanDanData.value)
          })
          .catch(() => {
            setlinfos.value = []
          })
    }

    const getSummaries = () => {
      let sums = {
        psnSumamt: 0,
        medfeeSumamt: 0,
        baseMedFundpaySumamt: 0,
        bigDssFundpaySumamt: 0,
        clvFundpaySumamt: 0,
        othFundpaySumamt: 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 === setlCondition.insutype) {
          return insutypes.value[i].name
        }
      }
      return ''
    }

    const filterAdmdvsName = () => {
      for (let i = 0; i < insuOptins.length; i++) {
        if (insuOptins[i].code === setlCondition.admdvsType) {
          return insuOptins[i].name
        }
      }
      return ''
    }

    const exportSetlinfoExcel = () => {
      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: '其他基金',
          fundpaySumamt: '全部基金',
        }
        const admdvsName = filterAdmdvsName()
        const insutypeName = filterInsutypeName()
        Export(data, title, `【${setlCondition.month}】【${admdvsName}】【${insutypeName}】`)
      }
    }

    const pageSize = ref(30)
    const currentPage = ref(1)
    const handleSizeChange = (val) => {
      pageSize.value = val
    }
    const handleCurrentChange = (val) => {
      currentPage.value = val
    }

    const fetchSetldetails = (row) => {
      setlCondition.insuplcAdmdvs = row.insuplcAdmdvs
      setlCondition.insutype = row.insutype
      selectSetldetailStatistics(setlCondition)
          .then((res) => {
            setldetails.value = res
            showSetldetails.value = true
          })
          .catch(() => {
            setldetails.value = []
          })
    }

    const showSetlinfoComponent = ref(false)
    const currentSetldetail = ref({})
    const openSetlinfoComponent = (row) => {
      const param = {
        psnNo: row.psnNo,
        mdtrtId: row.mdtrtId,
      }
      querySettlementInfo(param).then((res) => {
        currentSetldetail.value = res
        showSetlinfoComponent.value = true
      })
    }

    const exportSetldetailExcel = () => {
      if (setldetails.value.length === 0) {
        ElMessage({
          message: '没有可以导出的数据！',
          type: 'warning',
          duration: 2500,
          showClose: true,
        })
      } else {
        const title = {
          patNo: '住院号',
          times: '住院次数',
          psnName: '姓名',
          gendName: '性别',
          brdy: '出生日期',
          certno: '身份证',
          insuplcAdmdvsName: '参保地名称',
          insutypeName: '险种类型',
          medTypeName: '医疗类别',
          psnTypeName: '人员类别',
          mdtrtId: '就诊ID',
          setlId: '结算ID',
          begntime: '入院时间',
          endtime: '出院时间',
          setlTime: '结算时间',
          medfeeSumamt: '医疗总费用',
          fundPaySumamt: '报销金额',
          mafPay: '医疗救助',
          acctPay: '个人账户支出',
          psnCashPay: '个人现金支出',
          hifmiPay: '大病支出',
        }
        Export(setldetails.value, title, filterDialogTitle.value)
      }
    }

    /// 结算单上传数据
    const shangChuanShuJuDrawer = ref(false)
    const shangChuanJieSuanDanData = ref([])
    const jieSuanDanCurrentPage = ref(1)

    const shangChuanLeiXing = ref(0)

    const cptShangChuanJieSuanDanData = computed(() => {
      return shangChuanJieSuanDanData.value.filter((item) => {
        if (shangChuanLeiXing.value === 0) {
          return item
        } else if (shangChuanLeiXing.value === 1) {
          return item.setlListId === null
        } else {
          return item.setlListId !== null
        }
      })
    })

    const shangChuanCurrent = (val) => {
      jieSuanDanCurrentPage.value = val
    }
    const shangChuanDaoChu = () => {
      let title = {
        psnName: '姓名',
        patNo: '住院号',
        times: '次数',
        admissDate: '入院日期',
        disDate: '出院日期',
        idCard: '身份证',
        insuplcAdmdvsName: '参保地区',
        disDiag: '出院诊断',
        disDiagComment: '出院诊断名称',
        insutypeName: '险种类型',
        medTypeName: '医疗类别',
        setlTime: '结算日期',
        psnCashPay: '现金支付',
        fundPaySumamt: '统筹支付',
        medfeeSumamt: '医疗费总额',
        setlListId: '上传返回流水',
        hifmiPay: '大病支出',
        mafPay: '医疗救助',
      }
      ExcelName(cptShangChuanJieSuanDanData.value, title)
    }

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

    return {
      tableHeight,
      setlCondition,
      insutypes,
      insuOptins,
      setlinfos,
      setldetails,
      showSetldetails,
      filterDialogTitle,
      pageSize,
      currentPage,
      showSetlinfoComponent,
      currentSetldetail,
      admdvsNameStyle,
      differChildrenRows,
      handleCurrentChange,
      handleSizeChange,
      fetchSetlinfos,
      exportSetlinfoExcel,
      fetchSetldetails,
      openSetlinfoComponent,
      exportSetldetailExcel,
      shangChuanShuJuDrawer,
      shangChuanJieSuanDanData,
      shangChuanLeiXing,
      cptShangChuanJieSuanDanData,
      jieSuanDanCurrentPage,
      shangChuanCurrent,
      shangChuanDaoChu,
      jieSuanDanLeiXingData: ref([
        {code: 0, name: '全部'},
        {code: 1, name: '未传'},
        {code: 2, name: '已传'},
      ]),
    }
  },
}

function initInsuOptions() {
  return [
    {
      code: 1,
      name: '省本级',
    },
    {
      code: 2,
      name: '市本级',
    },
    {
      code: 5,
      name: '长沙县',
    },
    {
      code: 6,
      name: '浏阳市',
    },
    {
      code: 3,
      name: '省内异地',
    },
    {
      code: 4,
      name: '省外异地',
    },
    {
      code: 99,
      name: '全部',
    },
  ]
}
</script>

<style scoped>
:deep(.el-table .children-row) {
  background: rgba(145, 247, 145, 0.5);
}

:deep(.el-table--border td:first-child .cell, .el-table--border th:first-child .cell) {
  padding-left: 4px;
}

:deep(.el-table) {
  --el-table-row-hover-background-color: #85dbfd7a;
}

:deep(.el-table__footer-wrapper tbody td) {
  background: #df4a25;
  color: white;
  font-weight: bold;
}
</style>
