<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="280" />
        <radio-filter v-model="category" label="常用诊断" :list="diseases" :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="pinyin" label="诊断拼音码" :width="160" />
        <el-common-column prop="category" label="常用诊断名" :width="160">
          <template #default="{row}"> {{ row.category || '-' }}</template>
        </el-common-column>
        <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>
  <diseaseModal :data="diseaseItem" :diseases="diseases" :visible="visible" :width="width" @change="search()" @reloadDiseases="getCommonDisease"
    @close="close" />
</template>
<script setup>
import { onMounted, ref, watch } 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 { getCustomCorpInfo } from "@/api/corp";

import { InputFilter, RadioFilter } 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 diseaseModal from './disease-modal.vue';

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

const name = ref('');
const category = ref('');

const diseaseItem = ref({});
const diseases = 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 = {}
  if (name.value.trim()) {
    params.value.keyword = name.value.trim()
  }
  if (category.value.trim()) {
    params.value.category = category.value.trim()
  }
  page.value = 1;
  getList();
}

function showModal(data = {}) {
  diseaseItem.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: 'getDiagnosisList', 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: 'deleteHlwDiagnosis', id: row._id });
  if (res.success) {
    ElMessage.success(res.message || '删除成功');
    getList()
  } else {
    ElMessageBox.alert(res.message, "", { confirmButtonText: '知道了', center: true });
  }
}

async function getCommonDisease() {
  const { success, data } = await getCustomCorpInfo({ corpId: memberInfo.value.corpId, fields: ['diseases'] });
  diseases.value = data && data.data && Array.isArray(data.data.diseases) ? data.data.diseases.map(i => ({
    label: i,
    value: i
  })) : []
}

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

watch(() => memberInfo.value.corpId, n => {
  if (n) {
    getCommonDisease()
  }
}, { immediate: true })

</script>