<template>
  <el-container>
    <el-aside width="190px">
      <el-table :data="templateData.data" :height="windowSize.h - 170 + 20">
        <el-table-column label="模板名称" prop="name" width="120px">
          <!-- 店家激发弹出框 -->
          <template #default="scope">
            <el-popover :width="900" placement="right" trigger="click">
              <template #reference>
                <el-button text @click="getMuBanXinXiClick(scope.row)" type="primary" :title="scope.row.name">
                  {{ scope.row.name }}
                </el-button>
              </template>
              <!-- 这里是弹出框中的数据 -->
              <xc-table :data="muBanXiangQing" :height="170"
                        @selection-change="xuanZeXiangMuTable" :open-paging="false">
                <el-table-column type="selection"></el-table-column>
                <el-table-column label="项目名称" prop="chargeName"></el-table-column>
                <el-table-column label="国家编码" prop="nationalCode"></el-table-column>
                <el-table-column label="国家名称" prop="nationalName"></el-table-column>
                <el-table-column label="单价" prop="chargeAmount"></el-table-column>
                <el-table-column label="数量" prop="amount"></el-table-column>
                <el-table-column label="金额">
                  <template #default="scope">
                    {{ (scope.row.chargeAmount * scope.row.amount).toFixed(2) }}
                  </template>
                </el-table-column>
                <el-table-column label="编码" prop="chargeCodeMx"></el-table-column>
                <el-table-column label="规格" prop="descriptions"></el-table-column>
              </xc-table>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column>
          <template #default="scope">
            <el-popconfirm
                cancel-button-text="取消"
                confirm-button-text="确认"
                icon="Info"
                iconColor="red"
                title="是否删除该数据"
                @confirm="shanChuMuBanClick(scope.$index, scope.row)"
            >
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          :current-page="templateData.currentPage"
          :page-size="templateData.pageSize"
          :pager-count="5"
          :total="templateData.total"
          layout=" prev, pager, next"
          small
          style="margin-top: 5px"
          @current-change="templatePaging"
      ></el-pagination>
    </el-aside>
  </el-container>
</template>

<script name="HuoQuMuBan" setup>
import {onMounted, ref} from 'vue'
import {getMuBan, getMuBanXinXi, shanChuMuBan} from '@/api/inpatient/xiang-mu-lu-ru'
import store from '@/store'
import {ElMessageBox} from 'element-plus'
import XcTable from "@/components/xiao-chan/xc-table/XcTable.vue";

const emit = defineEmits(['selectionFeiYong'])

const windowSize = computed(() => {
  return store.state.app.windowSize
})

let templateData = $ref({
  data: [],
  currentPage: 1,
  pageSize: 10,
  total: 0,
})

const templatePaging = (val) => {
  templateData.currentPage = val
  getMuBan(store.state.user.info.deptCode, templateData.currentPage, templateData.pageSize, templateData.total).then((res) => {
    templateData.data = res.records
  })
}

// 获取模板信息
const getMuBanXinXiClick = (row) => {
  getMuBanXinXi(row.name, row.opIdCode).then((res) => {
    muBanXiangQing.value.data = res
    muBanXiangQing.value.total = res.length
  })
}

// 获取模板的详情
const muBanXiangQing = ref({
  data: [],
  currentPage: 1,
  pageSize: 30,
  total: 0
})

// 获取选择的数据
const xuanZeXiangMuTable = (val) => {
  emit('selectionFeiYong', {val})
}

const shanChuMuBanClick = (index, data) => {
  if (data.opIdCode !== store.state.user.info.code) {
    ElMessageBox.confirm('该模板非本人创建是否强制删除', '提示', {
      type: 'error',
    })
        .then(() => {
          shanChuMuBan(data.name, data.opIdCode).then((res) => {
            templateData.data.splice(index, 1)
          })
        })
        .catch(() => {
        })
  } else {
    shanChuMuBan(data.name, data.opIdCode).then((res) => {
      templateData.data.splice(index, 1)
    })
  }
}

onMounted(() => {
  getMuBan(store.state.user.info.deptCode, templateData.currentPage, templateData.pageSize, templateData.total).then((res) => {
    templateData.total = res.total
    templateData.data = res.records
    templateData.currentPage = 1
  })
})
</script>

<style></style>
