<template>
  <el-dialog v-model="dialog" title="取模板" width="60%" @close="emit('close')">
    <el-container>
      <el-aside style="width: 210px">
        <el-input v-model="queryName" placeholder="模板名称" style="width: 120px"></el-input>
        <el-button @click="dianJiaChaXunMuBan(0)">查询</el-button>
        <el-table :data="muBanShuJu.muBan" :height="windowSize.h / 2.1" @row-click="dianJiChaKanMuBanXiangQing">
          <el-table-column label="名称" prop="patternName"></el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button circle icon="Delete" type="danger"
                         @click="dianJiShanChuMuBan(scope.row, scope.$index)"></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            :pager-count="5"
            small
            :total="muBanShuJu.total"
            layout="prev, pager, next"
            :current-page="muBanShuJu.currentPage"
            :page-size="muBanShuJu.pageSize"
            @current-change="handleCurrentChange"/>
      </el-aside>
      <el-main>
        <el-button :disabled="muBanShuJu.xuanZhongShuJu.length === 0"
                   @click="emit('xuanZhongShuJu', muBanShuJu.xuanZhongShuJu)">确定
        </el-button>
        <el-table :data="muBanShuJu.muBanXiangQing" :height="windowSize.h / 2.1"
                  @selection-change="huoQuMuBanXuanZhongShuJu">
          <el-table-column type="selection"></el-table-column>
          <el-table-column label="编码" prop="chargeCode"></el-table-column>
          <el-table-column label="名称" prop="chargeCodeName"></el-table-column>
          <el-table-column label="规格" prop="specification"></el-table-column>
          <el-table-column label="数量" prop="quantity"></el-table-column>
          <el-table-column label="单价" prop="retprice"></el-table-column>
          <el-table-column label="药房" prop="groupNo"></el-table-column>
          <el-table-column label="包装大小" prop="serial">
            <template #default="scope">
              <span v-if="scope.row.serial === '01'">小包装</span>
              <span v-else-if="scope.row.serial === '99'">大包装</span>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>
  </el-dialog>
</template>

<script>
import {computed, onMounted, ref} from 'vue'
import store from '@/store'
import {huoQuMuBan, muBanXiangQing, shanChuMuBan} from '@/api/zhu-yuan-yi-sheng/cao-yao-yi-zhu'
import {ElMessageBox} from 'element-plus'
import {huanZheXinXi} from "@/views/hospitalization/zhu-yuan-yi-sheng/public-js/zhu-yuan-yi-sheng";
import XcTable from "@/components/xiao-chan/xc-table/XcTable";

export default {
  name: 'CaoYaoMuBan',
  components: {XcTable},
  emits: ['close', 'xuanZhongShuJu'],
  setup(props, {emit}) {
    const windowSize = computed(() => {
      return store.state.app.windowSize
    })
    const queryName = ref('')
    const muBanShuJu = ref({
      muBan: [],
      queryName: '',
      muBanXiangQing: [],
      xuanZhongShuJu: [],
      currentPage: 1,
      pageSize: 30,
      total: 0,
    })
    const dianJiaChaXunMuBan = (val) => {
      huoQuMuBan(queryName.value, store.state.user.info.deptCode, muBanShuJu.value.currentPage, muBanShuJu.value.pageSize, muBanShuJu.value.total).then((res) => {
        muBanShuJu.value.muBan = res.records
        if (val === 0) {
          muBanShuJu.value.total = res.total
        }
      })
    }
    const dianJiShanChuMuBan = (row, index) => {
      ElMessageBox.confirm(`您确定删除<span style="color: teal">【${row.patternName}】</span>吗？`, '温馨提示', {
        type: 'warning',
        dangerouslyUseHTMLString: true,
      })
          .then(() => {
            shanChuMuBan(row.patternName, store.state.user.info.deptCode).then(() => {
              muBanShuJu.value.muBan.splice(index, 1)
              muBanShuJu.value.muBanXiangQing = []
            })
          })
          .catch(() => {
          })
    }

    const handleCurrentChange = (val) => {
      muBanShuJu.value.currentPage = val
      dianJiaChaXunMuBan(muBanShuJu.value.total)
    }

    const dianJiChaKanMuBanXiangQing = ({patternName, deptCode}) => {
      muBanXiangQing(patternName, deptCode).then((res) => {
        muBanShuJu.value.muBanXiangQing = res
      })
    }
    const huoQuMuBanXuanZhongShuJu = (val) => {
      muBanShuJu.value.xuanZhongShuJu = val
    }

    onMounted(() => {
      dianJiaChaXunMuBan(0)
    })
    return {
      windowSize,
      dialog: true,
      queryName,
      dianJiaChaXunMuBan,
      dianJiShanChuMuBan,
      muBanShuJu,
      dianJiChaKanMuBanXiangQing,
      huoQuMuBanXuanZhongShuJu,
      emit,
      handleCurrentChange
    }
  },
}
</script>

<style scoped></style>
