<template>
  <ciy-header title="实验室成员管理" ref="header"></ciy-header>
    
  <view class="ciy-page">
    
    <view v-if="init.code != 1">
      <view class="px4 py4">
        <view style="height:2em;width:60%;" class="ciy-skeleton"></view>
        <view style="height:1em;width:40%;margin-left:1em;" class="ciy-skeleton"></view>
        <view style="height:1em;width:50%;" class="ciy-skeleton"></view>
        <view style="height:6em;width:100%;" class="ciy-skeleton"></view>
      </view>
    </view>
    
    <view v-else>
      <view class="sti" :style="{top: headerTotalHeight + 'px'}">
        <ciy-segment :lis="init.lis" all="全部" @change="segment_change"></ciy-segment>
        <ciy-query ref="query" :gdict="g" :qry="init.searchinput" @confirm="query_confirm">
          <template v-slot="{itm}">
            <ciy-input :name="itm.item.form" v-model="itm.data[itm.item.form]"></ciy-input>
          </template>
        </ciy-query>
      </view>
      <view class="ciy-list" :class="{del:item._del}" v-for="(item,index) in init.list" :key="item.id" @tap="showmenu(index)">
        <view class="member-item flex align-center">
          <ciy-svgimg :src="item.icon" ciystyle="border-radius:50%;width:3.5em;height:3.5em;margin-right:1em;"></ciy-svgimg>
          
          <view class="member-info">
            <view class="l0">No: {{item.id}}</view>
            <view class="rt">
              <view class="code b" :class="ccode(g.role, item.role,'clas')">{{ccode(g.role, item.role)}}</view>
            </view>
            <view class="l1 c">
              <view>{{item.name}}</view>
            </view>

            <view class="ciy-hr"></view>
            <view class="l2">编号：{{item.sn}}</view>
            <view class="l2">手机号：{{item.mobile || '未填写'}}</view>
            <view class="l2">头衔：{{ccode(g.usertitle, item.usertitle)}}</view>
          </view>
        </view>
      </view>
      
      <ciy-listend :page="pageno" :listlen="init.list.length" :nodataimg="file_stor('/img/mbnone.png')"></ciy-listend>
      <view class="ciy-add" @tap="goAdd()"></view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      init: {
        code: 0,
        list: [],
        lis: [] 
      },
      pageno: 0, 
      _loading: false, 
      _stopPullDown: false, 
      header_statusbar_height: 0, 
      header_title_height: 0, 
      pagepost: {
        pageno: 0,
        once: true,
        query: {},
        liid: 0 
      }
    };
  },
  computed: {
    headerTotalHeight() {
      return this.header_statusbar_height + this.header_title_height;
    }
  },
  onLoad() {
    this.$nextTick(() => {
      this.getrefs('header').then(ref => {
        this.header_statusbar_height = ref.statusbar_height;
        this.header_title_height = ref.title_height;
      });
    });
    
    this.getlist();
  },
  onReachBottom() {
    console.log('onReachBottom page', this.pageno);
    if (this.init.code != 1)
      return;
    this.getlist();
  },
  onPullDownRefresh() {
    console.log('onPullDownRefresh page');
    this.pageno = 0;
    this._stopPullDown = true;
    this.getlist();
  },
  methods: {
    async getlist() {
      if (this.pageno < 0)
        return;
      if (this._loading)
        return;
      
      this.pagepost.pageno = this.pageno + 1;
      this.pagepost.once = !this.init.once;
      this._loading = true;
      
      try {
        var retjson = await this.callfunc({
          func: 'adduser.list',
          data: this.pagepost
        });
        
        if (retjson.code != 1) {
          this.alert(retjson.errmsg);
          return;
        }
        
        this.pageno++;
        if (this.pageno == 1)
          this.init.list = [];
          
        this.init = this.objdeepmerge(this.init, retjson);
        
        if (retjson.once) {
    
          if (retjson.lis) {
             this.init.lis = retjson.lis; 
          }
        }
        this.getrefs('query').then(ref => {
          ref.setdata(retjson.where || {});
        });
        
        if (retjson.list && retjson.list.length < 10) 
          this.pageno = -1; 
          
      } catch (error) {
        console.error('获取列表失败:', error);
        this.alert('获取列表失败');
      } finally {
        this._loading = false;
        uni.stopPullDownRefresh(); 
      }
    },
    
    segment_change(e) {
      this.pagepost.liid = e.value.id;
      this.pageno = 0;
      this.getlist();
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 800
      });
    },
    
    query_confirm(dat) {
      this.pagepost.query = dat;
      this.pageno = 0;
      this.getlist();
      uni.pageScrollTo({
        scrollTop: 0,
        duration: 800
      });
    },
    
    edit(item) {
      item = item || {
        url: '',
        data: {
          id: 0,
          _idx: -1
        }
      };
      
    uni.navigateTo({
        url: `/pages/lab/useredit?id=${item.data.id}`
      });
    },
    goAdd() {
      uni.navigateTo({
        url: '/pages/lab/useradd'
      });
    },
    
    async del(item) {
      if (await this.askmsg('是否确定删除该成员？', '确认删除') != 'ok')
        return;
      
      var retjson = await this.callfunc({
        func: 'adduser.del',
        data: {
          id: item.data.id
        }
      });
      
      if (retjson.code != 1) {
        this.alert(retjson.errmsg);
        return;
      }
      this.init.list[item.data._idx]._del = true;
      setTimeout(() => {
        this.init.list.splice(item.data._idx, 1);
      }, 500);
    },
    
    showmenu(idx) {
      var dat = this.init.list[idx];
      dat._idx = idx;
      var items = [];
      
      items.push({
        func: 'edit',
        name: '编辑',
        data: dat
      });
      items.push({
        func: 'del',
        name: '删除',
        style: 'color:var(--dag5)',
        data: dat
      });
      
      this.popmenu({
        items
      });
    }
  }
};
</script>

<style scoped>

.sti {
  position: sticky; 
  z-index: 10;
  background: var(--bg1);
  padding: 0.5rem;
  border-bottom: 1px solid var(--bg6);
}

.member-item {
  padding: 0.5rem;
  display: flex;
  align-items: center;
}

.member-info {
  flex: 1; 
}
</style>