<!-- 用户管理 -->
<template>
  <view class="user-warp">
    <view class="user-header">

      <view class="header">
        <view class="inputnameorphone">
          <input class="usermsg" type="text" v-model="nameOrPhone" placeholder="请输入用户昵称或手机号" placeholder-style="font-size:12px"/>
          <image class="searchicon" @tap='searchUser' src="../../../static/images/search.png"></image>
        </view>
        <view class="header-btns">
          <image class="add" @tap="add" src="../../../static/images/addicon.png"></image>
          <image class="ref" @tap="refresh" src="../../../static/images/reficon.png"></image>
        </view>
      </view>

    </view>
    <view style="height: 110upx"></view>
    <view class="usermenage" @tap.stop='closeMore(-1)'>
      <view class="content">
        <view class="item" v-for="(item,index) in list" :key="index">
          <view class="top">
            <view class="expression">
              <text class="title">账号</text>:<text class="msg">{{ item.account }}</text>
            </view>
            <view class="expression">
              <text class="title">用户昵称</text>:<text class="msg">{{ item.name }}</text>
            </view>
            <view class="expression">
              <text class="title">手机</text>:<text class="msg">{{ item.phone }}</text>
            </view>
            <view class="expression">
              <text class="title">状态</text>:
              <text class="msg" :class="item.status === '0' ? 'green' : 'red'">{{ item.status === '0' ? '启用' : '禁用' }}</text>
            </view>
          </view>
          <view class="bottom">
            <view class="btns">
             
              <view class="btn" @tap.stop="freeze(item.id,item.name,item.status,index)">{{ item.status === '0' ? '禁用' : '启用' }}</view>
              <view class="btn edit" @tap.stop="add(item)">编辑</view>
              <view class="btn reds" @tap.stop='dele(item.id,item.name,index)'>删除</view>
              
            </view>
          </view>
        </view>
      </view>

      <uni-load-more :status="more"> </uni-load-more>
		  <rf-loading v-if="loading" :content="txt"></rf-loading>
    </view>
  </view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';

export default {
  name: 'rolemenage',
  components: {uniLoadMore},
  data () {
    //这里存放数据
    return {
      loading: false,
      txt: '',
      code: null,
     
      nameOrPhone:'',
      more: 'loading',

      params:{
        pageNum: 1,
        pageSize: 4,
        mid: uni.getStorageSync('scenicMessage').id,
        name: '',
        phone: ''
      },

      downStatus: 1,

      list:[]  // 状态 0启用 1禁用
    };
  },
  onShow () {
    this.code = -1
    this.more = 'loading'
    this.params.pageNum = 1
    uni.pageScrollTo({
      scrollTop: 0,
      duration: 0
    });
    this.getUserList(this.params)
  },
  // 下拉刷新
  onPullDownRefresh () {
    this.more = 'loading'
    this.nameOrPhone = ''
    this.params = {
      pageNum: 1,
      pageSize: 4,
      mid: uni.getStorageSync('scenicMessage').id,
      name: '',
      phone: ''
    },
    this.params.pageNum = 1
    this.getUserList(this.params)
  },
  // 上拉加载
  onReachBottom() {
    if ( this.downStatus === 1) {
      if (this.more === 'noMore') {
        return
      }
      this.getMoreUserList(this.params)
    }
  },
  //方法集合
  methods: {
    // 重置
    refresh () {
      this.nameOrPhone = ''
    },
    // 查询
    searchUser () {
      if (this.nameOrPhone) {
        this.loading = true
        this.txt = '查询中...'
        let pattern = /^(?:(?:\+|00)86)?1[3-9]\d$/
        this.params.pageNum = 1
        if (pattern.test(this.nameOrPhone)) {
          // 手机号查询
          console.log(1);
          this.params.phone = this.nameOrPhone
          this.params.name = ''
          this.getUserList(this.params)
        } else {
          // 用户昵称查询
          console.log(2);
          this.params.phone = ''
          this.params.name = this.nameOrPhone
          this.getUserList(this.params)
        }
      } else {
        this.$mHelper.toast('请输入用户昵称或者手机号！')
      }
     
    },
    // 打开更多选择
    showMore (num) {
      this.code = num 
    },
    closeMore (num) {
      this.code = num 
    },
    // 跳转新增
    add (data) {
      this.$mRouter.push({route:'/pages/index/userinfo/adduser',query:{userdata:JSON.stringify(data)}})
    },
    // 账户列表
    async getUserList (data) {
      this.downStatus = 1
      await this.$http.get('/user/userList',data).then(res=>{
        if (res.code === 200 && res.msg==='OK') {
          if (res.data.list.length > 0) {
            this.list = res.data.list
            if (res.data.nextPage === 0) {
              this.more = 'noMore'
            }
          } else {
            this.more = 'noMore'
          }
          this.loading = false
          uni.stopPullDownRefresh();
        }
      })
    },
    // 上拉加载
    async getMoreUserList (data) {
      this.params.pageNum ++
      await this.$http.get('/user/userList',data).then( res=> {
        if (res.data.list.length > 0) {
          this.list = this.list.concat(res.data.list)
          if (res.data.nextPage === 0) {
            this.more = 'noMore'
          }
        } else {
          this.more = 'noMore'
        }
      })
    },
    // 删除账号
    async dele(id,name,index) {
      let _self = this
      uni.showModal({
        content: `将删除用户昵称为${name}的账号，是否继续?`,
        success: confirmRes => {
          if (confirmRes.confirm) {
            _self.loading = true
            _self.$http.post('/user/delete/'+id).then( res=>{
              if (res.code === 200 && res.msg==='OK') {
                if (res.data === 1) {
                  _self.loading = false
                  _self.$mHelper.toast('删除成功')
                  _self.code = -1
                  _self.list.splice(index,1)
                }          
              }
            })
          }
        }
      })
    },

    // 状态改变
    freeze(id,name,status,index) {
      let _self = this
      uni.showModal({
        content:`是否${status === '0' ? '禁用' : '启用'}${name}`,
        success: confirmRes =>{
          if (confirmRes.confirm) {
            _self.loading = true
            let userstatus = status === '0' ? '1' :'0'
            _self.$http.post('/user/changeState/' + id + '/' + userstatus).then( res=>{
              if (res.code === 200 && res.msg==='OK') {
                if (res.data === 1) {
                  _self.loading = false
                  _self.$mHelper.toast(`已${status === '0' ? '禁用' : '启用'}用户${name}`)
                  _self.code = -1
                  _self.list[index].status = userstatus
                  // 局部刷新
                  // _self.setData({  // setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。
                  //   list: _self.list[index].status = userstatus
                  // })
                }
              }
            })
          }
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.user-header {
  width: 100vw;
  position: fixed;
  align-items: center;
  top: 0;
  left: 0;
  padding: 20upx 32upx;
  background-color: #fbfbfb;
  z-index: 11;
  .header {
    display: flex;
  }
  
  .inputnameorphone {
    display: flex;
    align-items: center;
    flex: 1;
    height: 72upx;
    background-color: #f7f7f7;
    margin-left: 15upx;
    padding-left: 23upx;
    border-radius: 8upx;
    .usermsg {
      flex: 1;
      margin-left: 15upx;
    }
    .searchicon {
      width: 38upx;
      height: 38upx;
      margin: 0 30upx;
    }
  }
  .header-btns {
    width: 110upx;
    display: flex;
    align-items: center;
    margin-left: 15upx;
    .add,
    .ref {
      width: 50upx;
      height: 50upx;
    }
    .ref{
      margin-left: 12upx;
    }
  }
}
.usermenage {
  padding: 24upx 32upx 200upx;
  .content {
    background-color: #f1f1f1;
    .item {
      padding: 24upx 24upx 0;
      background-color: #fbfbfb;
      border-radius: 8upx;
      margin-bottom: 35upx;
      &:last-child {
        margin-bottom: 0;
      }
      .top {
        border-bottom: 1px solid #e7e7e7;
        padding: 15upx 9upx 30upx;
        .expression {
          margin-top: 11upx;
          display: flex;
          .title {
            display: inline-block;
            width: 120upx;
            height: 32upx;
            color: #7a7c7c;
            text-align: justify;
            &::after {
              width: 100%;
              display: inline-block;
              content: '';
            }
          }
          .msg {
            margin-left: 15upx;
            color: #202020;
          }
          .green {
            color: #06d161;
          }
          .red {
            color: #ff6a5e;
          }
        }
      }
      .bottom {
        padding: 17upx 0;
        .btns {
          display: flex;
          justify-content: flex-end;
          .btn {
            width: 158upx;
            height: 58upx;
            border-radius: 6upx;
            font-size: 30upx;
            color: #7a7c7c;
            border: 1px solid #e7e7e7;
            text-align: center;
            line-height: 58upx;
            margin-left: 24upx;
          }
          .more {
            position: relative;
            width: auto;
            border: none;
            margin-left: 0;
            display: flex;
            align-items: center;
            .bar {
              position: absolute;
              top: 77upx;
              left: 0;
              width: 220upx;
              background-color: #fff;
              border-radius: 6upx;
              z-index: 10;
              padding: 0 20upx;
              .trigon {
                position: absolute;
                top: -16upx;
                left: 10upx;
                width: 38upx;
                height: 38upx;
                transform: rotate(45deg);
                background-color: #fff;
              }
              .item {
                padding: 17upx 0;
                color: #333;
                border-bottom: 1px solid #e0e0e0;
                text-align: center;
                background-color: #fff;
                border-radius: 0;
                margin-bottom: 0;
                &:last-child {
                  border: none;
                }
              }
            }
          }
          .edit {
            margin-left: 40upx;
          }
          .reds {
            background-color: #ff6a5e;
            color: #fff;
            border: none;
          }
        }
      }
    }
  }
}
</style>