<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--药品目录-->
      <el-col :span="4" :xs="24">
        <div class="head-container">
          <div class="head-title">医保目录</div>
          <el-tree
            :data="medicationOptions"
            :props="{
              label: 'info',
              children: 'children',
            }"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="medicationTreeRef"
            node-key="value"
            highlight-current
            default-expand-all
            @node-click="handleNodeClick"
            current-node-key="1301"
            :default-expand-all="true"
          >
            <template #default="{ node, data }">
              <span :class="{ 'text-light-gray': !data.available }">
                {{ data.info }}
              </span>
            </template>
          </el-tree>
        </div>
      </el-col>
      <!--药品目录-->
      <el-col :span="20" :xs="24">
        <el-row :gutter="10" class="mb8" style="margin-bottom: 20px">
          <el-form
            :model="queryParams"
            ref="queryRef"
            :inline="true"
            v-show="showSearch"
            label-width="68px"
            style="display: flex; align-items: center; margin: 0"
          >
            <el-form-item
              label="搜索"
              prop="searchKey"
              label-width="40"
              style="margin: 0; margin-right: 10px"
            >
              <el-input
                v-model="queryParams.searchKey"
                :placeholder="searchPlaceholder"
                clearable
                style="width: 400px"
                @keyup.enter="handleQuery"
              />
            </el-form-item>

            <el-form-item
              label="版本号"
              prop="versionNumber"
              label-width="80"
              style="margin: 0; margin-right: 10px"
            >
              <el-input
                v-model="queryParams.v"
                placeholder="版本号"
                clearable
                style="width: 240px"
                @keyup.enter="handleQuery"
                disabled
              />
            </el-form-item>

            <el-form-item style="margin: 0 10px">
              <el-button type="primary" plain icon="Search" @click="getList">查询</el-button>
            </el-form-item>

            <el-form-item style="margin: 0 10px">
              <el-button type="primary" plain icon="Search" @click="handleUpdateCatalog"
                >更新目录</el-button
              >
            </el-form-item>
          </el-form>
        </el-row>

        <el-table v-loading="loading" :data="medicationList" style="width: 100%" height="70vh">
          <template v-for="(column, index) in currentColumns" :key="index">
            <el-table-column
              :prop="column.prop"
              :label="column.label"
              :min-width="calculateColumnWidth(column)"
              :show-overflow-tooltip="true"
              align="center"
            >
              <template #default="scope">
                <template v-if="column.type === 'tag'">
                  <el-tag v-if="scope.row[column.prop.split('_')[0]] == 2" type="success">
                    {{ scope.row[column.prop] }}
                  </el-tag>
                  <el-tag v-else type="error">{{ scope.row[column.prop] }}</el-tag>
                </template>
                <template v-else>
                  {{
                    scope.row[column.prop] === null ||
                    scope.row[column.prop] === '' ||
                    scope.row[column.prop] === undefined ||
                    scope.row[column.prop] === 'null'
                      ? '--'
                      : scope.row[column.prop]
                  }}
                </template>
              </template>
            </el-table-column>
          </template>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNo"
          v-model:limit="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          @pagination="getList"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Medication">
import { getYbCatalogResult, getYbCatalog } from './components/medicine';
//字段配置文件
import { catalogFieldConfigs } from './components/catalogFields';

const { proxy } = getCurrentInstance();

const medicationList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const total = ref(0);
const medicationOptions = ref(undefined);
const currentCategoryEnum = ref('1301'); // 默认选中1301
const medicationTreeRef = ref(null); // 医保目录树引用
const currentColumns = ref([]); // 表格列配置
const searchPlaceholder = ref('医疗目录编码/注册名称/批准文号/唯一记录号'); // 默认搜索提示
// 定义有数据的catalogType值
const availableCatalogTypes = ['1301', '1302', '1305', '1306', '1307', '1308', '1314', '1315'];

const data = reactive({
  form: {},
  queryParams: {
    pageNo: 1,
    pageSize: 20,
    searchKey: undefined, // 搜索关键词（医疗目录编码/注册名称/批准文号/唯一记录号）
    catalogType: '1301', // 默认使用有数据的目录类型1301
    v: '0', // 版本号
  },
});

const { queryParams } = toRefs(data);

/** 通过条件过滤节点  */
const filterNode = (value, data) => {
  if (!value) return true;
  return data.info.indexOf(value) !== -1;
};

/** 病种目录分类查询下拉树结构 - 使用前端写死的数据 */
function getMedicationCategoryList() {
  // 直接使用CatalogType枚举值，并为每个选项添加available属性
  const catalogTypeOptions = [
    { info: '西药中成药目录', value: '1301', available: true },
    { info: '中药饮片目录', value: '1302', available: true },
    { info: '医疗机构制剂目录', value: '1303', available: false },
    { info: '民族药品目录', value: '1304', available: false },
    { info: '医疗服务项目目录', value: '1305', available: true },
    { info: '医用耗材目录', value: '1306', available: true },
    { info: '疾病与诊断目录', value: '1307', available: true },
    { info: '手术操作目录', value: '1308', available: true },
    { info: '门诊慢特病种目录', value: '1309', available: false },
    { info: '按病种付费病种目录', value: '1310', available: false },
    { info: '日间手术治疗病种', value: '1311', available: false },
    { info: '医保目录信息查询', value: '1312', available: false },
    { info: '肿瘤形态学目录', value: '1313', available: false },
    { info: '中医疾病目录', value: '1314', available: true },
    { info: '中医证候目录', value: '1315', available: true },
    { info: '医疗目录与医保目录匹配信息', value: '1316', available: false },
    { info: '医药机构目录匹配信息', value: '1317', available: false },
    { info: '医保目录限价信息', value: '1318', available: false },
    { info: '医保目录先自付比例信息', value: '1319', available: false },
    { info: '中药配方颗粒目录', value: '1320', available: false },
    { info: '医疗服务项目（新）目录', value: '1321', available: false },
  ];

  medicationOptions.value = catalogTypeOptions;
  // 添加全部选项，但设为不可用
  medicationOptions.value.unshift({ info: '全部', value: '', available: false });

  // 确保默认选中1301
  setTimeout(() => {
    if (medicationTreeRef.value) {
      medicationTreeRef.value.setCurrentKey('1301');
    }
  }, 0);
}
/** 查询病种目录列表 */
function handleUpdateCatalog() {
  // proxy.$message.success('暂未实现目录更新功能');
  // loading.value = true;
  // 版本号默认传0
  getYbCatalog(queryParams.value.catalogType, '0').then((res) => {
    // loading.value = false;
    if (res && res.data) {
      proxy.$message.success('目录更新成功');
    }
  });
}

/** 查询病种目录列表  */
function getList() {
  loading.value = true;
  getYbCatalogResult(queryParams.value).then((res) => {
    loading.value = false;
    if (res && res.data.data && res.data.data.records) {
      medicationList.value = res.data.data.records;
      total.value = res.data.data.total || res.data.total || medicationList.value.length;
    }
    // 默认空数据
    else {
      medicationList.value = [];
      total.value = 0;
    }
  });
}

// 医保目录节点点击事件
function handleNodeClick(data) {
  if (data.available) {
    queryParams.value.catalogType = data.value;
    currentCategoryEnum.value = data.value;
    // 切换目录类型时清空搜索框的值
    queryParams.value.searchKey = undefined;
    // 动态设置表格列配置
    if (catalogFieldConfigs[data.value]) {
      console.log('catalogFieldConfigs[data.value]', catalogFieldConfigs[data.value]);
      currentColumns.value = catalogFieldConfigs[data.value].columns;
    } else {
      currentColumns.value = []; // 无配置时显示空列
    }
    // 根据当前目录类型设置搜索提示
    setSearchPlaceholder(data.value);

    handleQuery();
  }
}

/** 根据目录类型设置搜索提示 */
function setSearchPlaceholder(catalogType) {
  switch (catalogType) {
    case '1301': // 西药中成药目录
      searchPlaceholder.value = '医疗目录编码/注册名称/批准文号/唯一记录号';
      break;
    case '1302': // 中药饮片目录
      searchPlaceholder.value = '医疗服务名称/唯一记录号';
      break;
    case '1305': // 医疗服务目录
      searchPlaceholder.value = '医疗目录编码/医疗服务名称/唯一记录号';
      break;
    case '1306': // 医用耗材目录
      searchPlaceholder.value = '医疗目录编码/耗材名称/耗材类别/材质类型/规格';
      break;
    case '1307': // 疾病与诊断目录
      searchPlaceholder.value = '分类名称/子分类名称/章名称/节名称';
      break;
    case '1308': // 手术标准目录
      searchPlaceholder.value = '分类名称/子分类名称/项目名称/手术名称/手术代码';
      break;
    case '1314': // 中医疾病目录
      searchPlaceholder.value = '疾病分类名称/疾病分类代码/唯一记录号';
      break;
    case '1315': // 中医证候目录
      searchPlaceholder.value = '证候类型代码/证候类型名称/唯一记录号';
      break;
    default:
      searchPlaceholder.value = '请输入搜索关键词';
  }
}
// 初始化时设置默认列配置和搜索提示
function initColumns() {
  const defaultType = '1301'; // 默认目录类型
  if (catalogFieldConfigs[defaultType]) {
    currentColumns.value = catalogFieldConfigs[defaultType].columns;
  }
  // 设置默认搜索提示
  setSearchPlaceholder(defaultType);
}

// 计算列宽度函数
function calculateColumnWidth(column) {
  const baseWidth = 40; // 增加基础边距宽度
  const charWidth = 16; // 增加每个字符的平均宽度，确保中文能更好地显示
  const textLength = column.label ? column.label.length : 0;
  const calculatedWidth = baseWidth + textLength * charWidth;

  // 设置最小宽度，确保即使短文本也有良好的显示效果
  const minWidth = 120;

  return Math.max(calculatedWidth, minWidth);
}

// 在组件挂载时初始化
initColumns();

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNo = 1;
  getList();
}

getMedicationCategoryList();
getList();
</script>
<style scoped>
.el-form--inline .el-form-item {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 10px !important;
}
.el-select {
  width: 150px !important;
}

/* 确保表格内容完整显示 */
.el-table {
  overflow-x: auto;
}

/* 调整表格列样式，允许内容更好地显示 */
.el-table__cell {
  padding: 12px 8px;
}

/* 确保分页组件完整显示 */
.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 自定义样式：使不可用的目录类型文字颜色变浅 */
.text-light-gray {
  color: #c0c4cc !important;
}

/* 确保样式能正确应用到树节点 */
:deep(.el-tree-node__label) {
  transition: color 0.3s;
}
</style>
