<template>
  <el-container>
    <el-main>
      <el-row>
        <el-col>
          <el-descriptions title="患者信息" border>
            <template #extra>
              <el-button type="primary" @click="chaoZuoZhiNan = true" icon="Bell" size="small">操作指南</el-button>
              <el-button type="warning" @click="ziDongPiPeiTuiFei" icon="Refresh" size="small">自动匹配</el-button>
            </template>
            <el-descriptions-item label="姓名">{{ huanZheXinXi.name }}</el-descriptions-item>
            <el-descriptions-item label="住院号">
              <el-input size="small" style="width: 120px" v-model="huanZheXinXi.inpatientNo"
                        @keyup.enter="chaXunWeiGuiClick(true)"></el-input>
              <el-divider direction="vertical"></el-divider>
              <el-button @click="chaXunWeiGuiClick(true)">查询</el-button>
            </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-col>
      </el-row>
      <el-col>
        <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="orderNo"></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-col>
    </el-main>

    <el-drawer title="费用修正" v-model="feiYongXiuZhenDrawer" size="60%" :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="项目编码">{{ fuShuFeiYongXinXi.chargeCodeMx }}</el-descriptions-item>
          <el-descriptions-item label="操作" v-if="weiZhaoDaoDuiYingZhenShu"> 请检查执行科室是否一致</el-descriptions-item>
          <el-descriptions-item label="操作" v-else>
            <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' ? 'CaretBottom' : 'CaretTop'"
        >{{ 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" v-if="!weiZhaoDaoDuiYingZhenShu"></el-table-column>
          <el-table-column label="排序" type="index"></el-table-column>
          <el-table-column label="医嘱号" prop="orderNo"></el-table-column>
          <el-table-column label="流水号" prop="detailSn" width="70">
            <template #default="scope">
              <span v-if="weiZhaoDaoDuiYingZhenShu"
                    v-html="tuiFeiTiShi(scope.row.detailSn, scope.row.oriDetailSn)"></span>
              <span v-else>
                {{ scope.row.detailSn }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="时间" prop="chargeDate" width="70"></el-table-column>
          <el-table-column label="金额" prop="chargeFee" sortable></el-table-column>
          <el-table-column label="数量" prop="chargeAmount" sortable></el-table-column>
          <el-table-column label="执行科室" prop="execUnitName" v-if="weiZhaoDaoDuiYingZhenShu"></el-table-column>
          <el-table-column label="申请科室" prop="wardCode" v-if="weiZhaoDaoDuiYingZhenShu"></el-table-column>
          <el-table-column label="余额" prop="yiTuiFei" v-else>
            <template #default="scope">
              <span style="color: red">{{ scope.row.yiTuiFei }}</span>
            </template>
          </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/>
      三、匹配 <br/>
      1、自动匹配，系统随机挑选一条正数匹配。
    </el-dialog>
  </el-container>
</template>

<script>
import {ref, watch} from 'vue'
import store from '../../store'
import {huoQuZhenShuKePiPei, caiFenPiPei, yiZhuTuiFeiPiPei, weiGuiFeiYongFenXi} from '../../api/inpatient/xiang-mu-lu-ru'
import {ElMessage, ElMessageBox} from 'element-plus'
import {shortcuts} from '../../data/shortcuts'
import {getDateRangeFormatDate} from '../../utils/date'
import {stringIsBlank} from '../../utils/blank-utils'

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 = ref({
      inpatientNo: '',
      admissTimes: 0,
      name: '',
    })

    const feiYongXiuZhenDrawer = ref(false)

    const weiZhaoDaoDuiYingZhenShu = 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({
      chargeCodeName: '',
      chargeFee: 0,
      chargeAmount: 0,
      execUnitName: '',
      opIdCode: '',
      chargeCodeMX: '',
    })

    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
      keYiPiPeiDeZhenShu.value.currentPage = 1
      keYiPiPeiDeZhenShu.value.pageSize = 40
      if (stringIsBlank(val.execUnit)) {
        val.execUnit = ''
      }
      huoQuZhenShuKePiPei(val.inpatientNo, val.admissTimes, val.ledgerSn, val.chargeCodeMx, val.execUnit, val.orderNo, startTime, endTime, riQiPaiXu.value)
          .then((res) => {
            keYiPiPeiDeZhenShu.value.data = res
            feiYongXiuZhenDrawer.value = true
            weiZhaoDaoDuiYingZhenShu.value = false
          })
          .catch((e) => {
            keYiPiPeiDeZhenShu.value.data = e.data
            if (e.data.length === 0) {
              ElMessageBox.alert('请检查时间范围或该患者没有对应的费用', '提示', {
                type: 'warning',
              })
              return
            }
            feiYongXiuZhenDrawer.value = true
            weiZhaoDaoDuiYingZhenShu.value = true
          })
    }

    watch(
        () => feiYongXiuZhenDrawer.value,
        () => {
          if (!feiYongXiuZhenDrawer.value) {
            dateRange.value = []
          }
        }
    )

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

    ctx.emit('open', false)

    const genXingShuJu = () => {
      huanZheXinXi.value.deptCode = props.patient.deptCode
      huanZheXinXi.value.inpatientNo = props.patient.inpatientNo
      huanZheXinXi.value.openDialog = props.patient.openDialog
      if (huanZheXinXi.value.inpatientNo === '') {
        qingKong()
        ctx.emit('open', true)
        setTimeout(() => {
          ElMessage.warning({
            message: '请输入住院号',
          })
        }, 10)
      } else {
        chaXunWeiGuiClick(false)
      }
    }

    const chaoZuoZhiNan = ref(false)

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

    const chaXunWeiGuiClick = (val) => {
      let deptCode = ''
      if (val) {
        deptCode = store.state.user.info.deptCode
      } else {
        deptCode = huanZheXinXi.value.deptCode
      }
      weiGuiFeiYongFenXi(huanZheXinXi.value.inpatientNo, deptCode).then((res) => {
        huanZheXinXi.value.inpatientNo = res.inpatientNo
        huanZheXinXi.value.admissTimes = res.admissTimes
        huanZheXinXi.value.name = res.name
        // 违规的费用
        weiGuiFeiYong.value.currentPage = 1
        weiGuiFeiYong.value.pageSize = 40
        weiGuiFeiYong.value.data = res.weiXieDaiYuanLiuShui
        // 没有匹配
        weiPiPei.value.currentPage = 1
        weiPiPei.value.pageSize = 15
        weiPiPei.value.data = res.weiPiPei

        if (weiPiPei.value.data.length > 0 || weiGuiFeiYong.value.data.length > 0) {
          ctx.emit('open', true)
        } else {
          qingKong()
          ctx.emit('open', huanZheXinXi.value.openDialog)
          if (val) {
            ElMessage.success({
              message: '该患者没有违规的费用',
              showClose: true,
            })
          }
        }
        weiPiPei.value.data.length > weiGuiFeiYong.value.data.length ? (weiGuiTabs.value = '未匹配') : (weiGuiTabs.value = '违规退费')
      })
    }

    const qingKong = () => {
      huanZheXinXi.value.inpatientNo = ''
      huanZheXinXi.value.admissTimes = null
      huanZheXinXi.value.name = ''
      // 违规的费用
      weiGuiFeiYong.value.currentPage = 1
      weiGuiFeiYong.value.pageSize = 40
      weiGuiFeiYong.value.data = []
      // 没有匹配
      weiPiPei.value.currentPage = 1
      weiPiPei.value.pageSize = 15
      weiPiPei.value.data = []
    }

    return {
      weiPiPei,
      weiGuiFeiYong,
      huanZheXinXi,
      WinHeight,
      weiPiPeiCurrentPage,
      weiGuiFeiYongCurrentPage,
      zhenShuFeiYong,
      feiYongXiuZhenDrawer,
      keYiPiPeiDeZhenShu,
      keYiPiPeiDeZhenShuCurrentPage,
      fuShuFeiYongXinXi,
      PiPeiClick,
      handleSelectionChange,
      shiFouBaoCun,
      dateRange,
      riQiPaiXu,
      shortcuts,
      weiGuiTabs,
      chaoZuoZhiNan,
      keYiPiPeiDeZhenShuSizeChange,
      ziDongPiPeiTuiFei,
      chaXunWeiGuiClick,
      weiZhaoDaoDuiYingZhenShu,
      tuiFeiTiShi,
    }
  },
}

function tuiFeiTiShi(detailSn, oriDetailSn) {
  switch (oriDetailSn) {
    case -1:
      return `<span >${detailSn}</span><br><span style="background-color: red;color: white">【已退】</span>`
    default:
      return `<span >${detailSn}</span><br><span style="background-color: #0f5e0f;color: white">【未退】</span>`
  }
}
</script>

<style></style>
