<template>
  <div>
    <!-- 推荐的方案 -->
    <div class="pre-title flex-vertical-between">
      <div class="flex-vertical-center-l title-container">
        <span></span>
        <div>推荐的方案</div>
      </div>
    </div>
    <div class="recommend flex-center" v-if="displayRecommendations && displayRecommendations.length">
      <div class="banner">
        <div class="r-banner-body">
          <div
            class="r-body-item flex-vertical-between"
            v-for="(item, index) in displayRecommendations"
            :key="'suit-r' + index"
          >
            <!-- 适宜技术推荐：只取 schemes(businesstype=7) 的 pres，渲染 pres.name；点击弹详情窗 -->
            <div
              class="med-name med-name-bg"
              :class="{ active: activeId && (activeId == item.pid || activeId == item.preid || activeId == item.acupreid) }"
              @click="openRecommendDetail(item)"
            >
              <span>{{ item.name }}</span>
            </div>
            <!-- 原始渲染（保留备查，不再启用）：showType 分支 + 直接 $emit('select') 载入
            <div class="med-name med-name-bg" :class="{ active: activeId && (activeId == item.preid || activeId == item.pid || activeId == item.acupreid) }" v-if="item.showType == 0" @click.stop="$emit('select', item)">
              <span v-if="item.prename">{{ item.prename }}</span>
              <span v-else>{{ item.acupretype == 1 ? '针灸' : item.acupretype == 2 ? '艾灸' : item.acupretype == 3 ? '推拿' : '' }}</span>
            </div>
            <div class="med-name med-name-bg" :class="{ active: activeId && (activeId == item.preid || activeId == item.pid) }" v-else @click="$emit('select', item)">
              <span>{{ item.name }}({{ item.experttitle }})</span>
            </div>
            -->
          </div>
        </div>
      </div>
    </div>
    <!-- 安全合理检测：标题常驻；内容仅在 visibleSafetyItems 有数据时展示 -->
    <div class="pre-title mr-t10">
      <div class="flex-vertical-center-l title-container">
        <span></span>
        <div>安全合理检测</div>
      </div>
      <div class="patiens-msg reasonable-safe-medicines-wrapper" v-if="visibleSafetyItems.length">
        <div
          class="safety-project"
          v-for="(item, index) in visibleSafetyItems"
          :key="'safety-' + index"
        >
          <div class="safety-project-name">
            {{ item.itemName || "项目" + (index + 1) }}
          </div>
          <div
            class="safety-field"
            v-for="field in safetyFields"
            v-if="item[field.key]"
            :key="field.key"
          >
            <span class="safety-label">{{ field.label }}：</span>
            <span class="safety-value">{{ item[field.key] }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 推荐方案详情弹窗（与左侧协定方共用 SuitTechAgreementDetail，mode=recommend） -->
    <SuitTechAgreementDetail
      :show.sync="showDetail"
      :detail="detail"
      :loading="detailLoading"
      title="方案详情"
      mode="recommend"
      :showBackBtn="true"
      @turn="onDetailTurn"
    />
  </div>
</template>

<script>
import { getLocalSuitableTechInfo } from "@/api/technology.js";
import SuitTechAgreementDetail from "./SuitTechAgreementDetail.vue";

export default {
  name: "SuitTechSidePanel",
  components: { SuitTechAgreementDetail },
  props: {
    recommendations: { type: Array, default: () => [] },
    activeId: { type: [String, Number], default: "" },
    // 适宜技术每个项目的「安全合理检测」字段
    safetyItems: { type: Array, default: () => [] },
  },
  data() {
    return {
      safetyFields: [
        { key: "connotation", label: "内涵" },
        { key: "excludedContent", label: "除外内容" },
         { key: "remark", label: "备注" },
        { key: "limitPayScope", label: "限定支付范围" },
      ],
      // 推荐方案详情弹窗
      showDetail: false,
      detailLoading: false,
      detail: {},
      currentItem: null,
    };
  },
  computed: {
    visibleSafetyItems() {
      return (this.safetyItems || []).filter((item) =>
        this.safetyFields.some((f) => item && item[f.key])
      );
    },
    // 适宜技术推荐
    displayRecommendations() {
      return (this.recommendations || []).filter((item) => item.showType == 0);
    },
  },
  methods: {
    // 点击推荐
    async openRecommendDetail(item) {
      const pid = item.pid || item.preid || item.acupreid;
      if (!pid) return;
      this.currentItem = item;
      this.detailLoading = true;
      this.showDetail = true;
      try {
        const res = await getLocalSuitableTechInfo(pid);
        if (res.ResultCode === 0) {
          this.detail = res.Data || {};
        }
      } catch (e) {
        console.error("获取本地专家适宜技术详情失败", e);
      } finally {
        this.detailLoading = false;
      }
    },
    // 详情窗「转方」
    onDetailTurn() {
      if (!this.currentItem) return;
      this.$emit("select", this.currentItem, this.detail);
      this.showDetail = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.pre-title {
  margin-bottom: 10px;

  .title-container {
    span {
      width: 3px;
      height: 14px;
      background: #5386f6;
      border-radius: 1px;
      display: inline-block;
    }

    div {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #5386f6;
      margin-left: 9px;
    }
  }

  .patiens-msg {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #333333;
  }
}

// 推荐方剂
.recommend {
  cursor: pointer;

  .banner {
    flex: 1;
    height: 80px;
    margin: 0 0px;
    overflow-y: auto;

    .r-banner-body {
      cursor: pointer;

      .r-body-item {
        margin-bottom: 10px;

        .med-name {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #333333;

          span {
            cursor: pointer;
          }
        }

        .med-name:hover {
          background: #d8d8d8;
        }
      }
    }
  }

  .active {
    color: #5386f6 !important;
  }
}

// 安全合理检测
.reasonable-safe-medicines-wrapper {
  .safety-project {
    padding: 10px 0;
    border-bottom: 1px dashed #dcdcdc;

    &:last-child {
      border-bottom: none;
    }

    .safety-project-name {
      font-size: 15px;
      font-weight: 700;
      color: #5386f6;
      margin-bottom: 6px;
    }

    .safety-field {
      font-size: 14px;
      font-family: PingFang SC;
      line-height: 1.75;
      color: #333333;
      margin-bottom: 3px;

      .safety-label {
        color: black;
      }
    }
  }
}
</style>
