<template>
  <div class="mr-t10 agreement">
    <div class="agree-tab flex-vertical-between">
      <div class="flex-center agree-active">协定方</div>
    </div>
    <div class="collapse">
      <el-collapse v-model="activeNames" accordion>
        <el-collapse-item
          v-for="group in groupList"
          :key="group.key"
          :title="group.name"
          :name="group.key"
        >
          <div class="collapse-body">
            <div
              class="collapse-item flex-vertical-between"
              v-for="(item, idx) in group.list"
              :key="item.pid + idx"
            >
              <div class="med-name" @click="openDetail(item.pid)">{{ item.name }}</div>
            </div>
            <div class="collapse-more flex-center" @click="loadMore(group)">
              <img src="../../../assets/point3.png" alt />
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>

    <!-- 详情弹窗（独立组件） -->
    <SuitTechAgreementDetail
      :show.sync="showDetail"
      :detail="detail"
      :loading="detailLoading"
      @turn="onDetailTurn"
    />
  </div>
</template>

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

export default {
  name: "SuitTechAgreement",
  components: { SuitTechAgreementDetail },
  data() {
    return {
      activeNames: "personal",
      groups: {
        personal: { showType: 0, list: [], loadMore: true },
        department: { showType: 1, list: [], loadMore: true },
        institution: { showType: 2, list: [], loadMore: true },
      },
      pageNum: 1,
      pageSize: 10,
      loading: false,
      showDetail: false,
      detailLoading: false,
      detail: {},
      currentPid: "",
    };
  },
  computed: {
    groupList() {
      return [
        { key: "personal", name: "个人", ...this.groups.personal },
        { key: "department", name: "科室", ...this.groups.department },
        { key: "institution", name: "机构", ...this.groups.institution },
      ];
    },
  },
  mounted() {
    this.fetchList(true);
  },
  methods: {
    async fetchList(reset = false) {
      if (this.loading) return;
      this.loading = true;
      if (reset) {
        this.pageNum = 1;
        Object.keys(this.groups).forEach((k) => {
          this.groups[k].list = [];
          this.groups[k].loadMore = true;
        });
      }
      try {
        const res = await getSuitableTechGroupedList({
          pageNum: this.pageNum,
          limitPerGroup: this.pageSize,
        });
        if (res.ResultCode === 0 && res.Data) {
          const d = res.Data;
          this.groups.personal.list = this.groups.personal.list.concat(d.personal || []);
          this.groups.department.list = this.groups.department.list.concat(d.department || []);
          this.groups.institution.list = this.groups.institution.list.concat(d.institution || []);
          // 用后端返回的各分组总数判断是否还有更多
          this.updateLoadMore(d);
        }
      } catch (e) {
        console.error("获取适宜技术协定方列表失败", e);
      } finally {
        this.loading = false;
      }
    },
    updateLoadMore(d) {
      this.groups.personal.loadMore = this.groups.personal.list.length < d.personalTotal;
      this.groups.department.loadMore = this.groups.department.list.length < d.departmentTotal;
      this.groups.institution.loadMore = this.groups.institution.list.length < d.institutionTotal;
    },
    loadMore(group) {
      if (this.loading) return;
      if (!group.loadMore) {
        this.$message({
          showClose: false,
          message: "没有更多数据了",
          type: "warning",
        });
        return;
      }
      this.pageNum += 1;
      this.fetchList();
    },
    async openDetail(pid) {
      this.currentPid = pid;
      this.detailLoading = true;
      this.showDetail = true;
      try {
        const res = await getSuitableTechInfo(pid);
        if (res.ResultCode === 0) {
          this.detail = res.Data || {};
        }
      } catch (e) {
        console.error("获取协定方详情失败", e);
      } finally {
        this.detailLoading = false;
      }
    },
    onDetailTurn() {
      if (!this.currentPid) return;
      this.$emit("turn", this.currentPid, this.detail);
      this.showDetail = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.agreement {
  .agree-tab {
    div {
      width: 100%;
      height: 30px;
      background: rgba($color: #5386f6, $alpha: 0.1);
      font-size: 13px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
      cursor: pointer;
    }
    .agree-active {
      background: #5386f6;
      color: #fff;
    }
  }

  .collapse {
    border: 1px solid #ebeef5;
  }

  .collapse-item {
    padding: 13px;
    border-bottom: 1px dashed #ebeef5;

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

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

  .collapse-more {
    img {
      width: 26px;
    }
  }
}

.collapse::v-deep .el-collapse-item__header {
  padding: 0 0 0 10px;
  border-bottom: 1px dashed #ebeef5;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
}

.collapse ::v-deep .el-collapse-item__content {
  padding-bottom: 5px;
}
</style>
