<template>
  <my-layout>
    <layout-item class="bg-white">
      <div class="p-15px flex items-center" @keyup.enter="search()">
        <input-filter v-model="name" label="名称" placeholder="搜索名称、编码" :width="200" />
        <el-button type="primary" @click="search">查询</el-button>
        <div class="flex-grow"></div>
        <el-button type="primary" @click="showModal()">新增</el-button>
      </div>
    </layout-item>
    <layout-main :scroll="false">
      <el-table v-loading="loading" border ref="tableRef" height="100%" :data="list">
        <el-common-column prop="name" label="名称" :width="160" />
        <el-common-column prop="code" label="编码" :width="160" />
        <el-common-column prop="fee" label="金额" :width="160" />
        <el-table-column fixed="right" type="action" label="操作" :width="100">
          <template #default="{ row }">
            <el-text type="primary" class="cursor-pointer mr-10px" @click="showModal(row)">编辑</el-text>
            <el-text type="danger" class="cursor-pointer" @click="remove(row)">删除</el-text>
          </template>
        </el-table-column>
      </el-table>
    </layout-main>
    <layout-item>
      <pagination :totalRow="total" :pageSize="pageSize" :currentPage="page" @handle-size-change="changeSize"
        @handle-current-change="changePage" />
    </layout-item>
  </my-layout>
  <chargeItemModal :data="chargeItem" :visible="visible" :width="width" @change="search()" @close="close" />
</template>
<script setup>
import { onMounted, ref } from "vue";
import { storeToRefs } from "pinia";
import { ElMessage, ElMessageBox } from "element-plus";
import { useHlw } from "@/api/hlw";
import useModal from "@/hooks/useModal";
import useElPagination from "@/hooks/useElPagination";
import { memberStore } from "@/store/member";

import { InputFilter } from "@/components/filter-bar";
import MyLayout, { LayoutMain, LayoutItem } from "@/components/layout";
import pagination from "@/components/pagination/pagination.vue";
import elCommonColumn from "@/components/el-common-column/el-common-column.vue";
import chargeItemModal from './charge-item-modal.vue';

const { list, page, pageSize, total, changePage, changeSize } = useElPagination(getList);
const { memberInfo } = storeToRefs(memberStore());

const name = ref('');
const chargeItem = ref({});
const params = ref({});
const loading = ref(false);
const { close, show, visible, width } = useModal(560);
const { close: closeResModal, show: showResModal, visible: visibleResModal, width: widthResModal } = useModal(1200);

function editDrug(row = {}) {
  drug.value = { ...row };
  showDrawer.value = true;
}

function search() {
  params.value = { name: name.value.trim() };
  page.value = 1;
  getList();
}

function showModal(data = {}) {
  chargeItem.value = { ...data };
  show()
}

function handleSelectionChange(val) {
  selections.value = val.map((i) => i._id);
}

function showDetail(row) {
  drug.value = { ...row };
  detailVisible.value = true;
}

function showInfo(row) {
  info.value = row;
  visible.value = true;
}

function showImportRes(e) {
  excelList.value = e;
  showResModal();
}

async function getList() {
  loading.value = true;
  const { data, success, message } = await useHlw({ type: 'getChargeList', page: page.value, pageSize: pageSize.value, ...params.value });
  list.value = data && Array.isArray(data.data) ? data.data : [];
  total.value = data && data.total >= 0 ? data.total : 0;
  loading.value = false;
}

async function remove(row) {
  await ElMessageBox.confirm("确认删除吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  });
  const res = await useHlw({ type: 'deleteHlwChargeItem', id: row._id, code: row.code });
  if (res.success) {
    ElMessage.success(res.message || '删除成功');
    getList()
  } else {
    ElMessageBox.alert(res.message, "提示", { confirmButtonText: '知道了', center: true });
  }

}

onMounted(() => {
  getList()
});

</script>