<template>
  <view class="container">
    <!-- 搜索栏（按姓名/头衔搜索） -->
    <view class="search my2">
      <div class="flex flex-center">
        <input 
          type="text" 
          v-model="searchKey" 
          placeholder="请输入姓名/头衔搜索"
          class="flex1 px2 py1"
          @confirm="getList"
        />
        <button class="btn man ml2" @click="getList">搜索</button>
      </div>
    </view>

    <!-- 新增按钮 -->
    <button class="btn succ my2" @click="goToEdit">新增成员</button>

    <!-- 成员列表 -->
    <div class="table bg1 rounded">
      <!-- 表头 -->
      <div class="flex bg5 txt6 py2 px2">
        <div class="col-3 txt-center">头像</div>
        <div class="col-4 txt-center">姓名</div>
        <div class="col-4 txt-center">手机号</div>
        <div class="col-4 txt-center">头衔</div>
        <div class="col-4 txt-center">状态</div>
        <div class="col-3 txt-center">性别</div>
        <div class="col-3 txt-center">学历</div>
        <div class="col-3 txt-center">操作</div>
      </div>

      <!-- 列表内容 -->
      <div class="list" v-if="list.length > 0">
        <div 
          class="flex py2 px2 border-b border-bg6"
          v-for="item in list" 
          :key="item.id"
        >
          <div class="col-3 txt-center">
            <image :src="item.avatar" mode="aspectFill" class="w-10 h-10 rounded-full"></image>
          </div>
          <div class="col-4 txt-center">{{ item.name }}</div>
          <div class="col-4 txt-center">{{ item.mobile }}</div>
          <div class="col-4 txt-center">{{ getTitleText(item.usertitle) }}</div>
          <div class="col-4 txt-center">
            <span :class="getStatusTagClass(item.stpstatus)">{{ getStatusText(item.stpstatus) }}</span>
          </div>
          <div class="col-3 txt-center">{{ getSexText(item.sex) }}</div>
          <div class="col-3 txt-center">{{ getEducationText(item.education) }}</div>
          <div class="col-3 txt-center flex flex-center justify-center gap2">
            <button class="btn def sm" @click.stop="goToEdit(item.id)">编辑</button>
            <button class="btn dag sm" @click.stop="delMember(item.id)">删除</button>
            <button 
              class="btn sm" 
              :class="item.stpstatus === 30 ? 'warn' : 'succ'"
              @click.stop="auditMember(item.id, item.stpstatus === 30 ? 40 : 30)"
            >
              {{ item.stpstatus === 30 ? '设为历史' : '设为在册' }}
            </button>
          </div>
        </div>
      </div>

      <!-- 空数据提示 -->
      <div class="txt-center py10 txt3" v-if="list.length === 0">
        暂无成员数据
      </div>
    </div>

    <!-- 分页 -->
    <div class="table page flex justify-end mt2" v-if="total > pageSize">
      <button 
        class="btn def sm mr1"
        @click="page--; getList()"
        :disabled="page <= 1"
      >上一页</button>
      <span class="px2">{{ page }} / {{ Math.ceil(total / pageSize) }}</span>
      <button 
        class="btn def sm ml1"
        @click="page++; getList()"
        :disabled="page >= Math.ceil(total / pageSize)"
      >下一页</button>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [], // 成员列表
      searchKey: '', // 搜索关键词（姓名/头衔）
      page: 1, // 当前页码
      pageSize: 15, // 每页条数
      total: 0, // 总条数

      // 字典映射（严格匹配后台字典）
      sexMap: {
        10: '男',
        20: '女',
        90: '其他'
      },
      titleMap: {
        10: '主任',
        20: '副主任',
        30: '顾问',
        40: '名誉主任',
        50: '教授',
        60: '副教授',
        70: '讲师',
        80: '研究员'
      },
      statusMap: {
        10: '负责人',
        20: '科研秘书',
        30: '在册成员',
        40: '历史成员',
        50: '外部成员'
      },
      educationMap: {
        50: '本科',
        60: '硕士',
        70: '博士'
      }
    };
  },
  onLoad() {
    this.getList();
  },
  methods: {
    // 获取成员列表（按姓名/头衔搜索）
    async getList() {
      try {
        const res = await uni.request({
          url: '/web/ambap/member.php',
          method: 'POST',
          data: {
            act: 'member.list',
            page: this.page,
            pageSize: this.pageSize,
            searchKey: this.searchKey, // 后台接收该参数，同时匹配姓名/头衔
            searchType: 'name,title' // 明确搜索类型：姓名+头衔
          }
        });

        if (res.data.code === 1) {
          this.list = res.data.list;
          this.total = res.data.total;
        } else {
          uni.showToast({
            title: res.data.errmsg || '获取列表失败',
            icon: 'none'
          });
        }
      } catch (err) {
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        });
        console.error('获取列表失败：', err);
      }
    },

    // 跳转到编辑页
    goToEdit(id) {
      uni.navigateTo({
        url: `/pages/lab/useredit?id=${id || ''}`
      });
    },

    // 删除成员
    async delMember(id) {
      const confirm = await uni.showModal({
        title: '提示',
        content: '确定要删除该成员吗？'
      });

      if (!confirm.confirm) return;

      try {
        const res = await uni.request({
          url: '/web/ambap/member.php',
          method: 'POST',
          data: {
            act: 'member.del',
            id: id
          }
        });

        if (res.data.code === 1) {
          uni.showToast({
            title: '删除成功',
            icon: 'success'
          });
          this.getList();
        } else {
          uni.showToast({
            title: res.data.errmsg || '删除失败',
            icon: 'none'
          });
        }
      } catch (err) {
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        });
        console.error('删除失败：', err);
      }
    },

    // 切换成员状态
    async auditMember(id, status) {
      try {
        const res = await uni.request({
          url: '/web/ambap/member.php',
          method: 'POST',
          data: {
            act: 'member.audit',
            id: id,
            status: status
          }
        });

        if (res.data.code === 1) {
          uni.showToast({
            title: '操作成功',
            icon: 'success'
          });
          this.getList();
        } else {
          uni.showToast({
            title: res.data.errmsg || '操作失败',
            icon: 'none'
          });
        }
      } catch (err) {
        uni.showToast({
          title: '网络错误',
          icon: 'none'
        });
        console.error('状态切换失败：', err);
      }
    },

    // 性别文本转换
    getSexText(sex) {
      return this.sexMap[sex] || '未知';
    },

    // 头衔文本转换
    getTitleText(title) {
      return this.titleMap[title] || '未知头衔';
    },

    // 状态文本转换
    getStatusText(status) {
      return this.statusMap[status] || '未知状态';
    },

    // 状态标签样式
    getStatusTagClass(status) {
      switch(status) {
        case 10: return 'cata_man'; // 负责人-主色
        case 20: return 'cata_warn'; // 科研秘书-警示色
        case 30: return 'cata_succ'; // 在册成员-成功色
        case 40: return 'cata_def';  // 历史成员-默认色
        case 50: return 'cata_dag';  // 外部成员-失败色
        default: return 'cata_def';
      }
    },

    // 学历文本转换
    getEducationText(edu) {
      return this.educationMap[edu] || '未知学历';
    }
  }
};
</script>