<template>
  <el-container>
    <el-aside width="320px">
      <div style="display: flex; height: 36px; align-items: center; font-weight: 600; padding: 0 12px">
        <div style="width: 31%">费用类别</div>
        <div style="width: 23%">总金额</div>
        <div style="width: 23%">政策范围内金额</div>
        <div style="width: 23%">政策范围外金额</div>
      </div>
      <div v-for="(val, key) in analyse" :key="key" class="fee-type" :style="currentStyle(key)" @click="handleClickChrgtype(val, key)">
        <div>
          <div style="width: 31%">{{ val[0] }}</div>
          <div style="width: 23%">{{ val[1] }}</div>
          <div style="width: 23%">{{ val[2] }}</div>
          <div style="width: 23%">{{ val[3] }}</div>
        </div>
      </div>
    </el-aside>
    <el-main>
      <el-descriptions :column="4" border>
        <el-descriptions-item>
          <template #label> 姓名 </template>
          {{ psninfo.psnName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label> 住院号 </template>
          {{ psninfo.patNo }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label> 住院次数 </template>
          {{ psninfo.times }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label> 账页号 </template>
          {{ psninfo.ledgerSn }}
        </el-descriptions-item>
      </el-descriptions>
      <el-table :data="cptFeedtle.slice(pageSize * (currentPage - 1), pageSize * currentPage)" stripe :height="tableHeight">
        <el-table-column prop="feedetlSn" label="流水号" width="60"></el-table-column>
        <el-table-column prop="feeOcurTime" label="费用发生时间"></el-table-column>
        <el-table-column prop="medinsListCodg" label="院内码"></el-table-column>
        <el-table-column prop="medinsListName" label="收费名称"></el-table-column>
        <el-table-column prop="cnt" label="数量" width="80"></el-table-column>
        <el-table-column prop="pric" label="单价" width="80"></el-table-column>
        <el-table-column prop="detItemFeeSumamt" label="金额" width="80"></el-table-column>
        <!-- <el-table-column prop="selfpayPropPercent" label="自付比例" width="80"></el-table-column> -->
        <el-table-column prop="fulamtOwnpayAmt" label="全自费金额" width="80" sortable></el-table-column>
        <el-table-column prop="overlmtAmt" label="超限价金额" width="80" sortable></el-table-column>
        <el-table-column prop="preselfpayAmt" label="先行自付金额" width="80" sortable></el-table-column>
        <el-table-column prop="inscpScpAmt" label="符合政策范围金额" width="80" sortable></el-table-column>
        <el-table-column prop="chrgitmLvName" label="收费项目等级" width="80"></el-table-column>
        <el-table-column prop="bilgDeptName" label="科室"></el-table-column>
        <el-table-column prop="bilgDrName" label="医生"></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 30, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="cptFeedtle.length"
        style="margin-top: 5px"
      ></el-pagination>
    </el-main>
  </el-container>
</template>

<script>
import { queryFeeDetails } from '@/api/medical-insurance/si-query'
import { watch, ref, onMounted, computed } from 'vue'
import { useStore } from 'vuex'
export default {
  props: {
    timestamp: {
      type: Number,
      required: true,
    },
    type: {
      type: String,
      default: 'settled',
    },
    mdtrtId: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    const store = useStore()
    const windowSize = store.state.app.windowSize
    const tableHeight = windowSize.h - 70
    const psninfo = ref({})
    const feedtle = ref([])
    const analyse = ref({})
    const current = ref('zhj')
    const pageSize = ref(30)
    const currentPage = ref(1)
    const handleSizeChange = (val) => {
      pageSize.value = val
    }
    const handleCurrentChange = (val) => {
      currentPage.value = val
    }
    const cptFeedtle = computed(() => {
      return feedtle.value.filter((itm) => {
        if (current.value === 'zhj') {
          return true
        }
        return itm.medChrgitmType === current.value
      })
    })

    const currentStyle = (chrgtype) => {
      return {
        background: current.value === chrgtype ? '#409EFF' : '',
        color: current.value === chrgtype ? 'white' : '',
      }
    }

    const handleClickChrgtype = (val, key) => {
      current.value = key
      currentPage.value = 1
    }

    const fetchFeedtle = () => {
      const param = {
        mdtrtId: props.mdtrtId,
        type: props.type,
      }
      queryFeeDetails(param).then((res) => {
        psninfo.value = res.psninfo
        feedtle.value = res.feedtle
        analyse.value = res.analyse
      })
    }

    watch(
      () => props.timestamp,
      () => {
        fetchFeedtle()
      }
    )

    onMounted(() => {
      fetchFeedtle()
    })

    return {
      tableHeight,
      psninfo,
      feedtle,
      analyse,
      current,
      cptFeedtle,
      pageSize,
      currentPage,
      handleSizeChange,
      handleCurrentChange,
      currentStyle,
      handleClickChrgtype,
    }
  },
}
</script>

<style scoped>
.fee-type {
  width: 320px;
  display: flex;
  height: 36px;
  align-items: center;
  border-bottom: 1px solid rgb(230, 222, 222);
}
.fee-type :hover {
  cursor: pointer;
  background: #409eff;
  color: white;
}
.fee-type > div {
  width: 100%;
  padding: 0 12px;
  display: flex;
  height: 36px;
  align-items: center;
}
</style>
