<template>
  <el-container>
    <el-header height="30">
      <el-descriptions title="患者信息" border>
        <template #extra>
          <el-button type="primary" @click="chaoZuoZhiNan = true" size="small">操作指南</el-button>
          <el-button type="primary" @click="ziDongPiPeiTuiFei" size="small">自动匹配</el-button>
        </template>
        <el-descriptions-item label="姓名">{{ huanZheXinXi.name }}</el-descriptions-item>
        <el-descriptions-item label="住院号">{{ huanZheXinXi.inpatientNo }}</el-descriptions-item>
        <el-descriptions-item label="住院次数">{{ huanZheXinXi.admissTimes }}</el-descriptions-item>
        <el-descriptions-item label="未匹配">{{ weiPiPei.data.length }} 条</el-descriptions-item>
        <el-descriptions-item label="违规费用">{{ weiGuiFeiYong.data.length }} 条</el-descriptions-item>
      </el-descriptions>
    </el-header>
    <el-main>
      <el-tabs v-model="weiGuiTabs">
        <el-tab-pane label="未匹配" name="未匹配">
          <el-table
            :data="weiPiPei.data.slice((weiPiPei.currentPage - 1) * weiPiPei.pageSize, weiPiPei.pageSize * weiPiPei.currentPage)"
            :height="WinHeight / 1.39"
            highlight-current-row
            stripe
          >
            <el-table-column label="排序" type="index"></el-table-column>
            <el-table-column label="项目编码" prop="chargeCodeMx"></el-table-column>
            <el-table-column label="项目名称" prop="name"></el-table-column>
          </el-table>
          <el-pagination
            @current-change="weiPiPeiCurrentPage"
            :current-page="weiPiPei.currentPage"
            :page-size="weiPiPei.pageSize"
            :page-sizes="[40, 200, 300, 400]"
            layout=" prev, pager, next,total"
            :total="weiPiPei.data.length"
            style="margin-top: 5px"
            :pager-count="5"
            background
          ></el-pagination>
        </el-tab-pane>
        <el-tab-pane label="违规退费" name="违规退费">
          <el-table
            :data="weiGuiFeiYong.data.slice((weiGuiFeiYong.currentPage - 1) * weiGuiFeiYong.pageSize, weiGuiFeiYong.pageSize * weiGuiFeiYong.currentPage)"
            :height="WinHeight / 1.39"
            highlight-current-row
            stripe
            @cell-click="zhenShuFeiYong"
          >
            <el-table-column label="排序" type="index"></el-table-column>
            <el-table-column label="流水号" prop="detailSn"></el-table-column>
            <el-table-column label="项目编码" prop="chargeCodeMx"></el-table-column>
            <el-table-column label="收费时间" prop="chargeDate"></el-table-column>
            <el-table-column label="项目名称" prop="chargeCodeName"></el-table-column>
            <el-table-column label="金额" prop="chargeFee"></el-table-column>
            <el-table-column label="数量" prop="chargeAmount"></el-table-column>
            <el-table-column label="执行科室" prop="execUnitName"></el-table-column>
            <el-table-column label="录入人" prop="opIdCode"></el-table-column>
            <el-table-column label="费用类型" prop="chargeCode">
              <template #default="scope">
                <span>{{ scope.row.chargeCode === 'xm' ? '项目' : '药品' }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @current-change="weiGuiFeiYongCurrentPage"
            :current-page="weiGuiFeiYong.currentPage"
            :page-size="weiGuiFeiYong.pageSize"
            layout=" prev, pager, next,total"
            :total="weiGuiFeiYong.data.length"
            style="margin-top: 5px"
            background
          ></el-pagination>
        </el-tab-pane>
      </el-tabs>
    </el-main>
    <el-drawer title="费用修正" v-model="feiYongXiuZhenDrawer" size="50%" :before-close="shiFouBaoCun">
      <div style="margin: auto 20px auto 20px">
        <el-descriptions title="费用信息" border>
          <el-descriptions-item label="项目名称">{{ fuShuFeiYongXinXi.chargeCodeName }}</el-descriptions-item>
          <el-descriptions-item label="金额">{{ fuShuFeiYongXinXi.chargeFee }}</el-descriptions-item>
          <el-descriptions-item label="数量">{{ fuShuFeiYongXinXi.chargeAmount }}</el-descriptions-item>
          <el-descriptions-item label="执行科室">{{ fuShuFeiYongXinXi.execUnitName }}</el-descriptions-item>
          <el-descriptions-item label="录入人">{{ fuShuFeiYongXinXi.opIdCode }}</el-descriptions-item>
          <el-descriptions-item label="操作">
            <el-button size="small" type="success" @click="PiPeiClick">保存</el-button>
          </el-descriptions-item>
        </el-descriptions>
        <br />
        录入日期：<el-date-picker
          type="daterange"
          v-model="dateRange"
          placeholder="选择日期"
          style="width: 280px"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :shortcuts="shortcuts"
        ></el-date-picker>
        <el-button
          @click="riQiPaiXu === 'DESC' ? (riQiPaiXu = 'ASC') : (riQiPaiXu = 'DESC')"
          type="success"
          :icon="riQiPaiXu === 'DESC' ? 'el-icon-caret-bottom' : 'el-icon-caret-top'"
          >{{ riQiPaiXu === 'DESC' ? '日期降序' : '日期升序' }}</el-button
        >
        <el-button @click="zhenShuFeiYong(fuShuFeiYongXinXi)">查询</el-button>
        <el-table
          highlight-current-row
          stripe
          :data="keYiPiPeiDeZhenShu.data.slice((keYiPiPeiDeZhenShu.currentPage - 1) * keYiPiPeiDeZhenShu.pageSize, keYiPiPeiDeZhenShu.pageSize * keYiPiPeiDeZhenShu.currentPage)"
          :height="WinHeight / 1.39"
          @selection-change="handleSelectionChange"
          class="eltable"
        >
          <el-table-column type="selection"></el-table-column>
          <el-table-column label="排序" type="index"></el-table-column>
          <el-table-column label="流水号" prop="detailSn" width="70"></el-table-column>
          <el-table-column label="时间" prop="chargeDate" width="70"></el-table-column>
          <el-table-column label="项目编码" prop="chargeCodeMx"></el-table-column>
          <el-table-column label="金额" prop="chargeFee"></el-table-column>
          <el-table-column label="数量" prop="chargeAmount"></el-table-column>
        </el-table>
        <el-pagination
          @current-change="keYiPiPeiDeZhenShuCurrentPage"
          @size-change="keYiPiPeiDeZhenShuSizeChange"
          :current-page="keYiPiPeiDeZhenShu.currentPage"
          :page-size="keYiPiPeiDeZhenShu.pageSize"
          layout=" prev, pager, next,total,sizes"
          :total="keYiPiPeiDeZhenShu.data.length"
          style="margin-top: 5px"
          background
        ></el-pagination>
      </div>
    </el-drawer>
    <el-dialog v-model="chaoZuoZhiNan" title="操作指南">
      一、未匹配 <br />
      1、点击未匹配，可以查询到这个患者没有匹配到医保的医保码<br />
      二、违规退费<br />
      1、点击违规退费：会显示这个患者无法上传到医保的费用。<br />
      2、点击这个费用：会在右边弹出抽屉，上面会显示一些，费用的信息。<br />
      3、匹配：这条负数的数据退的是那一天(或那几天)的费用，点击弹出来的抽屉中的多选框然后点击保存即可<br />
      4、查询：查询这些正费用时，可以选择 日期，以及 排序。<br />
    </el-dialog>
  </el-container>
</template>

<script>
import { onMounted, ref, watch } from 'vue'
import store from '../../store'
import { huoQuZhenShuKePiPei, caiFenPiPei, yiZhuTuiFeiPiPei, weiGuiFeiYongFenXi } from '@/api/yibao/xiang-mu-lu-ru'
import { ElMessageBox } from 'element-plus'
import { shortcuts } from '@/data/shortcuts'
import { getDateRangeFormatDate } from '../../utils/date'
export default {
  props: {
    init: {
      type: Number,
      default: -1,
    },
    patient: {
      type: Object,
    },
  },
  setup(props, ctx) {
    const windowSize = store.state.app.windowSize
    const WinHeight = windowSize.h
    const huanZheXinXi = props.patient
    const feiYongXiuZhenDrawer = ref(false)

    const weiGuiTabs = ref('未匹配')

    const dateRange = ref([])
    const riQiPaiXu = ref('DESC')

    const weiPiPei = ref({
      pageSize: 1,
      currentPage: 15,
      data: [],
    })

    const weiGuiFeiYong = ref({
      pageSize: 1,
      currentPage: 40,
      data: [],
    })

    const keYiPiPeiDeZhenShu = ref({
      currentPage: 1,
      pageSize: 40,
      data: [],
    })

    const fuShuFeiYongXinXi = ref({})

    const weiPiPeiCurrentPage = (val) => {
      weiPiPei.value.currentPage = val
    }

    const weiGuiFeiYongCurrentPage = (val) => {
      weiGuiFeiYong.value.currentPage = val
    }

    const keYiPiPeiDeZhenShuCurrentPage = (val) => {
      keYiPiPeiDeZhenShu.value.currentPage = val
    }

    const keYiPiPeiDeZhenShuSizeChange = (val) => {
      keYiPiPeiDeZhenShu.value.pageSize = val
    }

    const zhenShuFeiYong = (val) => {
      let dateS = getDateRangeFormatDate(dateRange.value)
      let startTime = dateS.startTime
      let endTime = dateS.endTime
      fuShuFeiYongXinXi.value = val
      huoQuZhenShuKePiPei(val.inpatientNo, val.admissTimes, val.ledgerSn, val.chargeCodeMx, val.execUnit, startTime, endTime, riQiPaiXu.value).then((res) => {
        if (res.length === 0) {
          ElMessageBox.alert(
            `没有查询到对应的正数信息<br> 
                1、全部的正数（费用）可能已经全部都被匹配过了（被退了）。<br>
                2、根本就没有收对应的正数。`,
            '警告',
            {
              dangerouslyUseHTMLString: true,
              type: 'error',
            }
          )
        } else {
          keYiPiPeiDeZhenShu.value.data = res
          keYiPiPeiDeZhenShu.value.currentPage = 1
          keYiPiPeiDeZhenShu.value.pageSize = 40
          feiYongXiuZhenDrawer.value = true
        }
      })
    }

    const linShiDuoXuan = ref([])

    const handleSelectionChange = (val) => {
      linShiDuoXuan.value = val
    }

    const piPeiShiFouDianJi = ref(false)

    const PiPeiClick = () => {
      ElMessageBox.confirm('请仔细检查', '提示', {
        type: 'warning',
      })
        .then(() => {
          fuShuFeiYongXinXi.value.list = linShiDuoXuan.value
          fuShuFeiYongXinXi.value.deptCode = store.state.user.info.deptCode
          caiFenPiPei(fuShuFeiYongXinXi.value).then((res) => {
            piPeiShiFouDianJi.value = true
            let data = weiGuiFeiYong.value.data
            for (let i = 0; i < data.length; i++) {
              if (
                data[i].inpatientNo === fuShuFeiYongXinXi.value.inpatientNo &&
                data[i].admissTimes === fuShuFeiYongXinXi.value.admissTimes &&
                data[i].ledgerSn === fuShuFeiYongXinXi.value.ledgerSn &&
                data[i].detailSn === fuShuFeiYongXinXi.value.detailSn
              ) {
                weiGuiFeiYong.value.data.splice(i, 1)
              }
            }
            feiYongXiuZhenDrawer.value = false
          })
        })
        .catch(() => {})
    }

    const shiFouBaoCun = (done) => {
      if (linShiDuoXuan.value.length === 0 || piPeiShiFouDianJi.value) {
        done()
      } else {
        ElMessageBox.confirm('您还有未保存的数据', '提示', {
          type: 'warning',
          confirmButtonText: '保存',
          cancelButtonText: '放弃',
        })
          .then((res) => {
            PiPeiClick()
          })
          .catch(() => {
            done()
          })
      }
    }

    watch(
      () => props.init,
      () => {
        genXingShuJu()
      }
    )

    onMounted(() => {
      genXingShuJu()
      chaoZuoZhiNan.value = true
    })

    const genXingShuJu = () => {
      // 违规的费用
      weiGuiFeiYong.value.currentPage = 1
      weiGuiFeiYong.value.pageSize = 40
      weiGuiFeiYong.value.data = props.patient.weiXieDaiYuanLiuShui
      // 没有匹配
      weiPiPei.value.currentPage = 1
      weiPiPei.value.pageSize = 15
      weiPiPei.value.data = props.patient.weiPiPei

      if (props.patient.weiPiPei.length === 0 && props.patient.weiXieDaiYuanLiuShui.length > 0) {
        weiGuiTabs.value = '违规退费'
      } else {
        weiGuiTabs.value = '未匹配'
      }
    }

    const chaoZuoZhiNan = ref(false)

    const ziDongPiPeiTuiFei = () => {
      ElMessageBox.confirm('如果你想每天的报表都可以对得上，那么就人工匹配，系统自动匹配<span style="color:red"> 天知道 </span>，你这一条退的是哪一天的，<br>ヾ(ﾟ∀ﾟゞ)。', '提示', {
        type: 'warning',
        dangerouslyUseHTMLString: true,
      })
        .then(() => {
          yiZhuTuiFeiPiPei(props.patient.inpatientNo, props.patient.admissTimes).then((res) => {
            ctx.emit('shuaXin')
          })
        })
        .catch(() => {})
    }

    return {
      weiPiPei,
      weiGuiFeiYong,
      huanZheXinXi,
      WinHeight,
      weiPiPeiCurrentPage,
      weiGuiFeiYongCurrentPage,
      zhenShuFeiYong,
      feiYongXiuZhenDrawer,
      keYiPiPeiDeZhenShu,
      keYiPiPeiDeZhenShuCurrentPage,
      fuShuFeiYongXinXi,
      PiPeiClick,
      handleSelectionChange,
      shiFouBaoCun,
      dateRange,
      riQiPaiXu,
      shortcuts,
      weiGuiTabs,
      chaoZuoZhiNan,
      keYiPiPeiDeZhenShuSizeChange,
      ziDongPiPeiTuiFei,
    }
  },
}
</script>

<style></style>
