<template>
  <div class="component-box-wrapper__fullscreen">
    <div style="font-size: 18px !important; margin-bottom: 20px">医保费用明细</div>
    <div style="position: fixed; top: 12px; right: 20px; width: 100%; text-align: right">
      <el-button circle icon="Close" title="关闭" type="danger" @click="close"></el-button>
    </div>
    <el-container>
      <el-aside width="360px">
        <div style="display: flex; height: 36px; align-items: center; font-weight: 600; padding: 0 12px">
          <div style="width: 20%">费用类别</div>
          <div style="width: 20%">总金额</div>
          <div style="width: 20%">甲类</div>
          <div style="width: 20%">乙类</div>
          <div style="width: 20%">丙类</div>
        </div>
        <div v-for="(val, key) in analyse" :key="key" :style="currentStyle(key)" class="fee-type" @click="handleClickChrgtype(key)">
          <div>
            <div style="width: 20%">{{ val[0] }}</div>
            <div style="width: 20%" class="fee-by-lv" @click.stop="handleClickChrgLv(key, '00')">{{ val[1] }}</div>
            <div style="width: 20%" class="fee-by-lv" @click.stop="handleClickChrgLv(key, '01')">{{ val[2] }}</div>
            <div style="width: 20%" class="fee-by-lv" @click.stop="handleClickChrgLv(key, '02')">{{ val[3] }}</div>
            <div style="width: 20%" class="fee-by-lv" @click.stop="handleClickChrgLv(key, '03')">{{ val[4] }}</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)" :height="tableHeight" stripe>
          <el-table-column label="流水号" prop="feedetlSn" width="60"></el-table-column>
          <el-table-column label="费用发生时间" prop="feeOcurTime"></el-table-column>
          <el-table-column label="院内码" prop="medinsListCodg"></el-table-column>
          <el-table-column label="收费名称" prop="medinsListName"></el-table-column>
          <el-table-column label="国家编码" prop="medListCodg"></el-table-column>
          <el-table-column label="国家名称" prop="medListName"></el-table-column>
          <el-table-column label="数量" prop="cnt" width="80"></el-table-column>
          <el-table-column label="单价" prop="pric" width="80"></el-table-column>
          <el-table-column label="金额" prop="detItemFeeSumamt" width="80"></el-table-column>
          <el-table-column label="全自费金额" prop="fulamtOwnpayAmt" sortable width="80"></el-table-column>
          <el-table-column label="超限价金额" prop="overlmtAmt" sortable width="80"></el-table-column>
          <el-table-column label="先行自付金额" prop="preselfpayAmt" sortable width="80"></el-table-column>
          <el-table-column label="符合政策范围金额" prop="inscpScpAmt" sortable width="80"></el-table-column>
          <el-table-column label="收费项目等级" prop="chrgitmLvName" width="80"></el-table-column>
          <el-table-column label="科室" prop="bilgDeptName"></el-table-column>
          <el-table-column label="医生" prop="bilgDrName"></el-table-column>
        </el-table>
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[10, 30, 50, 100]"
          :total="cptFeedtle.length"
          layout="total, sizes, prev, pager, next, jumper"
          style="margin-top: 5px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { queryFeeDetails } from '@/api/medical-insurance/si-query'
import { computed, onMounted, ref } from 'vue'
import { useStore } from 'vuex'

export default {
  props: {
    type: {
      type: String,
      default: 'settled',
    },
    mdtrtId: {
      type: String,
      required: true,
    },
  },
  emits: ['close'],
  setup(props, ctx) {
    const store = useStore()
    const windowSize = store.state.app.windowSize
    const tableHeight = windowSize.h - 70
    const psninfo = ref({})
    const feedtle = ref([])
    const analyse = ref({})
    const currentChargeType = ref('zhj')
    const currentChargeLv = ref('00')
    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 (currentChargeType.value === 'zhj') {
          return currentChargeLv.value === '00' ? true : itm.chrgitmLv === currentChargeLv.value
        }
        return currentChargeLv.value === '00' ? itm.medChrgitmType === currentChargeType.value :
            (itm.medChrgitmType === currentChargeType.value && itm.chrgitmLv === currentChargeLv.value)
      })
    })

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

    const handleClickChrgtype = (key) => {
      currentChargeType.value = key
      currentChargeLv.value = '00'
      currentPage.value = 1
    }

    const handleClickChrgLv = (key, level) => {
      currentChargeType.value = key
      currentChargeLv.value = level
    }

    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
      })
    }

    const close = () => {
      ctx.emit('close')
    }

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

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

<style scoped>
* {
  font-size: 12px !important;
}

.fee-type {
  width: 360px;
  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;
}

.fee-by-lv:hover {
  text-decoration: underline;
  color: darkred;
}
</style>
