<template>
  <el-container>
    <el-main>
      <el-button type="danger" @click="xiangMuTuiFeiClick" icon="Delete">退费</el-button>
      <el-button type="primary" @click="weiGuiTuiFeiFenXiDialogOpen(true)">违规费用分析</el-button>
      <el-button type="primary" @click="exportExecl" icon="Download">导出 Excel</el-button>
      <el-table :data="cptTableDataHuanZheFeiYong" :height="windowHeigth / 1.35"
                @selection-change="handleSelectionChange" highlight-current-row stripe>
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="流水号" prop="detailSn" width="70px"></el-table-column>
        <el-table-column label="医嘱号" prop="orderNo" width="70px"></el-table-column>
        <el-table-column prop="chargeDate" label="录入日期" width="80px"></el-table-column>
        <el-table-column prop="chargeCodeMx" label="项目编码"></el-table-column>
        <el-table-column prop="chargeName" label="项目名称"></el-table-column>
        <el-table-column prop="drugname" label="药品名称" v-if="patient.feiYongLeiXingCode === 1"></el-table-column>
        <el-table-column prop="genTime" label="执行时间" width="80px"></el-table-column>
        <el-table-column prop="execDept" label="执行科室"></el-table-column>
        <el-table-column prop="deptCode" label="申请科室"></el-table-column>
        <el-table-column prop="chargeFee" label="金额"></el-table-column>
        <el-table-column label="数量" prop="chargeAmount"></el-table-column>
        <el-table-column label="状态" prop="chargeStatus">
          <template #default="scope">
            {{ costState(scope.row.chargeStatus) }}
          </template>
        </el-table-column>
        <el-table-column label="录入人" prop="opName"></el-table-column>
        <el-table-column label="账单码" prop="billItemName"></el-table-column>
        <el-table-column label="是否退费" prop="tuiFeiFlag">
          <template #default="scope">
            <span v-if="scope.row.oriDetailSn === -1" style="color: red">已退费 <br/> </span>
            <span v-if="scope.row.oriDetailSn > 0"
            ><span style="color: #e6a23c">退费数据</span> <br/>
              <span style="color: teal">
                原流水号为 <br/>
                【 {{ scope.row.oriDetailSn }} 】
              </span>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="fenYe.currentPage"
          :page-sizes="[20, 30, 40, 50, 100]"
          :page-size="fenYe.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="fenYe.total"
          style="margin-top: 5px"
      ></el-pagination>
    </el-main>
    <el-dialog v-model="weiGuiTuiFeiFenXiDialog" title="违规费用分析" :fullscreen="true">
      <wei-gui-fei-yong-fen-xi :init="weiGuiTuiFeiInit" @open="weiGuiTuiFeiOpenDialog"
                               :patient="weiGuiJiBenXinXi"></wei-gui-fei-yong-fen-xi>
    </el-dialog>
  </el-container>
</template>

<script>
import {ref, watch} from 'vue'
import {costState} from '../../utils/computed'
import store from '@/store'
import {getChargeCode, xiangMuTuiFei} from '@/api/inpatient/xiang-mu-lu-ru'
import WeiGuiFeiYongFenXi from '@/components/inpatient/WeiGuiFeiYongFenXi.vue'
import {ElMessage, ElMessageBox} from 'element-plus'

export default {
  components: {WeiGuiFeiYongFenXi},
  name: 'huanZheFeiYong',
  props: {
    init: {
      type: Object,
    },
    patient: {
      type: Object,
    },
  },
  setup(props, ctx) {
    const windowSize = store.state.app.windowSize
    const windowHeigth = windowSize.h
    const cptTableDataHuanZheFeiYong = ref([])
    const fenYe = ref({
      pageSize: 30,
      currentPage: 1,
      total: 0,
    })

    watch(
        () => props.init,
        () => {
          cptTableDataHuanZheFeiYong.value = props.init.records
          fenYe.value.total = typeof props.init.total === 'undefined' ? 0 : props.init.total
        }
    )

    // 分页
    const handleSizeChange = (val) => {
      fenYe.value.pageSize = val
      fenYe.value.currentPage = 1
      ctx.emit('size', {val})
    }

    const handleCurrentChange = (val) => {
      fenYe.value.currentPage = val
      ctx.emit('current', {val})
    }

    /**
     * 获取的项目名称保存的位置
     */
    const chargeCodeNameData = ref([])

    /**
     * 远程搜索
     */
    const remoteMethodChargeCode = (val) => {
      if (val.length >= 2) {
        getChargeCode(val).then((res) => {
          chargeCodeNameData.value = res
        })
      }
    }

    // 获取选择到的项目
    const handleSelectionChange = (val) => {
      props.patient.list = val
    }

    const xiangMuTuiFeiClick = () => {
      props.patient.deptCode = store.state.user.info.deptCode
      try {
        let chargeFee = 0
        let chargeAmount = 0
        for (let i = 0; i < props.patient.list.length; i++) {
          chargeFee += props.patient.list[i].chargeFee
          chargeAmount += props.patient.list[i].chargeAmount
        }
        ElMessageBox.confirm(
            `退费数量为：<span style='color:red'>【${chargeAmount}】</span> ，总价格为：<span style='color:#E6A23C'>【${chargeFee.toFixed(2)}】</span>`,
            '请认真核对',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              dangerouslyUseHTMLString: true,
            }
        )
            .then(() => {
              xiangMuTuiFei(props.patient).then((res) => {
                ctx.emit('query-fei-yong')
              })
            })
            .catch(() => {
            })
      } catch (e) {
        ElMessage.error({
          message: '请选择退费数据',
          showClose: true,
        })
      }
    }

    ///////////////////////////////////////////// 违规退费分析 /////////////////////////////////////////////////////////////////////////
    const weiGuiTuiFeiInit = ref(0)
    const weiGuiTuiFeiFenXiDialog = ref(true)

    const weiGuiJiBenXinXi = ref({})

    const weiGuiTuiFeiFenXiDialogOpen = (val) => {
      // 014912
      weiGuiTuiFeiInit.value += 1
      weiGuiJiBenXinXi.value.openDialog = val
      weiGuiJiBenXinXi.value.deptCode = store.state.user.info.deptCode
      weiGuiJiBenXinXi.value.inpatientNo = typeof props.patient.inpatientNo === 'undefined' ? '' : props.patient.inpatientNo
    }

    const weiGuiTuiFeiOpenDialog = (val) => {
      weiGuiTuiFeiFenXiDialog.value = val
    }

    const exportExecl = () => {
      ctx.emit('execl')
    }

    return {
      cptTableDataHuanZheFeiYong,
      costState,
      fenYe,
      windowHeigth,
      handleSizeChange,
      handleCurrentChange,
      remoteMethodChargeCode,
      chargeCodeNameData,
      xiangMuTuiFeiClick,
      handleSelectionChange,
      weiGuiTuiFeiFenXiDialogOpen,
      weiGuiTuiFeiFenXiDialog,
      weiGuiJiBenXinXi,
      weiGuiTuiFeiInit,
      weiGuiTuiFeiOpenDialog,
      exportExecl,
    }
  },
}
</script>

<style></style>
