<template>
  <view class="userManage" :style="{ height: contentHeight }">
    <view style="padding: 10px 0; background: #fff">
      <u-tabs
        :list="list"
        :is-scroll="false"
        :current="current"
        name="Name"
        @change="change"
        :active-color="mainColor"
        bg-color="#FFF"
        height="80"
        bar-width="100"
      ></u-tabs>
    </view>
    <view class="Um_Search" v-if="current == 0">
      <u-search
        :show-action="false"
        @search="init(1)"
        style="background-color: #fff"
        height="70"
        shape="round"
        placeholder="请输入昵称"
        v-model="msg.Name"
      ></u-search>
    </view>
    <view class="Um_Search" v-if="current == 1">
      <u-search
        :show-action="false"
        @search="getDistriData(1)"
        style="background-color: #fff"
        height="70"
        shape="round"
        placeholder="请输入昵称"
        v-model="dsMsg.Name"
      ></u-search>
    </view>

    <view
      style="height: calc(100vh - 50px); background: #fff"
      v-if="dataList.length == 0"
    >
      <u-empty text="暂无相关数据" mode="order"></u-empty>
    </view>
    <template v-if="current == 0">
      <view
        v-if="dataList.length > 0"
        style="
          height: calc(100vh - 50px);
          width: calc(100vw);
          overflow: hidden;
          padding: 25rpx;
          background-color: #f7f7f7;
        "
      >
        <scroll-view
          :scroll-y="true"
          :enable-back-to-top="true"
          :enable-flex="true"
          @scrolltolower="lowerTwo"
          :style="{ height: '100%' }"
        >
          <view class="userList" v-for="(item, index) in dataList">
            <view class="user_Top">
              <view class="user_Header">
                <img
                  style="width: 100%; height: 100%"
                  :src="item.Photo"
                  alt=""
                />
              </view>
              <view style="width: 530rpx">
                <view style="line-height:50rpx">
                  <text class="userName">{{ item.Name }}</text>
                  <text class="userLevel">{{ item.MemberGradeName }}</text>
                </view>
                <view class="AliasName" v-if="item.AliasName">备注名：{{ item.AliasName }}</view>
              </view>
            </view>
            <view class="user_ScoreBwt">
              <view>
                <text class="user_ComBg">交易额</text>
                <text class="user_Number">￥0.00</text>
              </view>
              <view>
                <text class="user_ComBg">积分</text>
                <text class="user_Number">{{ item.Integral }}</text>
              </view>
            </view>
            <view class="user_ScoreBwt">
              <view>
                <text class="user_ComBg">订单数</text>
                <text class="user_Number">{{ item.OrderNum }}</text>
              </view>
              <view>
                <text class="user_ComBg">余额</text>
                <text class="user_Number">{{ item.Balance }}</text>
              </view>
            </view>
            <view v-if="item.Remark" style="display: flex; margin-top: 20rpx">
              <view style="flex-shrink: 0">备注：</view>
              <view>{{ item.Remark }}</view>
            </view>
            <view
              style="
                display: flex;
                justify-content: flex-end;
                margin-top: 20rpx;
              "
            >
              <u-button
                size="mini"
                class="ucustomStyle"
                shape="circle"
                @click="getItemInfo(item)"
                >修改备注
              </u-button>
              <u-button
                size="mini"
                class="ucustomStyle"
                shape="circle"
                @click="kouchuBtn(item, 2)"
                >扣除
              </u-button>
              <u-button size="mini" shape="circle" @click="kouchuBtn(item, 1)"
                >充值</u-button
              >
            </view>
          </view>
          <u-loadmore
            :status="status"
            :load-text="loadText"
            :font-size="24"
            :margin-top="20"
            :margin-bottom="20"
            bg-color="#f3f4f6"
          />
        </scroll-view>
      </view>
    </template>
    <template v-if="current == 1">
      <view
        v-if="dataList.length > 0"
        style="
          height: calc(100vh - 50px);
          width: calc(100vw);
          overflow: hidden;
          padding: 25rpx;
          background-color: #f7f7f7;
        "
      >
        <scroll-view
          :scroll-y="true"
          :enable-back-to-top="true"
          :enable-flex="true"
          @scrolltolower="lower"
          :style="{ height: '100%' }"
        >
          <view class="userList" v-for="(item, index) in dataList">
            <view class="user_Top">
              <view class="user_DisHeader" style="flex-shrink: 0">
                <img
                  style="width: 100%; height: 100%"
                  :src="item.Photo"
                  alt=""
                />
              </view>
              <view>
                <view>
                  <text class="userName">{{ item.NickName }}</text>
                </view>
                <view style="margin: 12rpx 0">
                  <text class="user_ComBg" style="font-size: 24rpx"
                    >累计金额</text
                  >
                  <text class="user_Number" style="font-size: 24rpx"
                    >￥{{ item.TotalCommission }}</text
                  >
                </view>
                <view>
                  <text class="user_ComBg" style="font-size: 24rpx"
                    >可体现金额</text
                  >
                  <text class="user_Number" style="font-size: 24rpx"
                    >￥{{ item.CommissionWithdrawal }}</text
                  >
                </view>
              </view>
            </view>
          </view>
          <u-loadmore
            :status="status"
            :load-text="loadText"
            :font-size="24"
            :margin-top="20"
            :margin-bottom="20"
            bg-color="#f3f4f6"
          />
        </scroll-view>
      </view>
    </template>
    <u-action-sheet :list="listTwo" v-model="showInfoModel"></u-action-sheet>
    <u-modal
      v-model="showRemarkBox"
      :show-cancel-button="true"
      title="修改备注"
      contentSlot
      @confirm="Save"
    >
      <textarea
        style="height: 120px"
        class="inputRemark"
        v-model="addMsg.Remark"
      />
    </u-modal>
    <!-- 扣除积分 -->
    <u-modal
      v-model="showKouchu"
      :show-title="false"
      :show-cancel-button="true"
      contentSlot
      @confirm="SaveScore"
    >
      <!-- 扣除 -->
      <template v-if="ScoreMsg.Type == 2">
        <u-tabs
          :list="listThree"
          :is-scroll="false"
          :current="currentScore"
          @change="changeScore"
          :active-color="mainColor"
          bg-color="#FFF"
          height="80"
          :show-bar="false"
        ></u-tabs>
        <view style="margin-top: 20rpx">
          <input
            v-if="currentScore == 0"
            class="uni-input userManInput"
            v-model="ScoreMsg.Integral"
            placeholder="请填写扣除积分"
          />
          <input
            v-if="currentScore == 1"
            class="uni-input userManInput"
            v-model="ScoreMsg.Balance"
            placeholder="请填写扣除金额"
          />
          <input
            class="uni-input userManInput"
            v-model="ScoreMsg.Description"
            placeholder="请输入备注信息"
          />
        </view>
      </template>
      <!-- 充值 -->
      <template v-if="ScoreMsg.Type == 1">
        <u-tabs
          :list="listFour"
          :is-scroll="false"
          :current="currentScore"
          @change="changeScore"
          :active-color="mainColor"
          bg-color="#FFF"
          height="80"
          :show-bar="false"
        ></u-tabs>
        <view style="margin-top: 20rpx">
          <input
            v-if="currentScore == 0"
            class="uni-input userManInput"
            v-model="ScoreMsg.Integral"
            placeholder="请填写充值积分"
          />
          <input
            v-if="currentScore == 1"
            class="uni-input userManInput"
            v-model="ScoreMsg.Balance"
            placeholder="请填写充值金额"
          />
          <input
            class="uni-input userManInput"
            v-model="ScoreMsg.Description"
            placeholder="请输入备注信息"
          />
        </view>
      </template>
    </u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pageTitle: "用户管理",
      current: 0,
      contentHeight: 0,
      mainColor: "",
      page_count: 1,
      dataList: [],
      u: {},
      msg: {
        pageIndex: 1,
        pageSize: 15,
        Name: "",
        Source: 0,
        MemberGrade: 0,
        Id: "",
        Moblie: "",
        StartTime: "",
        EndTime: "",
      },
      //分销商msg
      dsMsg: {
        pageIndex: 1,
        pageSize: 15,
        UserId: "",
        AuditStatus: 0,
        GradeId: -1,
        Name: "",
        Source: 0,
        NickName: "",
        Mobile: "",
      },
      list: [
        {
          name: "全部用户",
        },
        {
          name: "分销商",
        },
        // {
        //   name: "核销员",
        // },
      ],
      listTwo: [
        {
          text: "修改备注",
        },
        {
          text: "修改会员等级",
        },
      ],
      listThree: [
        {
          name: "扣积分",
        },
        {
          name: "扣金额",
        },
      ],
      listFour: [
        {
          name: "充积分",
        },
        {
          name: "充金额",
        },
      ],
      status: "loadmore",
      loadText: {
        loadmore: "轻轻上拉，加载更多",
        loading: "努力加载中",
        nomore: "没有更多了",
      },
      showInfoModel: false,
      addMsg: {
        Id: "",
        SuperiorId: "",
        MemberGrade: "",
        ContactWay: "",
        Remark: "",
        AliasName: "",
        PostId: 0, //职位
      },
      showRemarkBox: false,
      showKouchu: false,
      currentScore: 0,
      ScoreMsg: {
        MallBaseId: 0,
        Type: 1,
        UserId: 0,
        Integral: "",
        Image: "",
        Description: "",
        Balance: "",
      },
    };
  },
  created() {
    this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
    this.mainColor = this.$uiConfig.mainColor;
  },
  mounted() {
    uni.setNavigationBarTitle({
      title: this.pageTitle,
    });
  },
  onLoad: function (option) {
    //this.current = option.status || -1;
    this.init();
  },
  methods: {
    change(index) {
      this.current = index;
      this.dataList = [];
      if (index == 0) {
        this.msg.pageIndex = 1;
        this.init();
      }
      //分销商
      if (index == 1) {
        this.getDistriData();
      }
    },
    init(type) {
      if (type == 1) {
        this.dataList = [];
      }
      uni.showLoading({
        title: "加载中",
      });
      this.requestAdmin("/api/user/GetMemberUserPageList", this.msg, (res) => {
        uni.hideLoading();
        if (res.resultCode == 1) {
          this.dataList = this.dataList.concat(res.data.pageData);
          this.page_count = res.data.pageCount;
        }
      });
    },
    lower(e) {
      if (this.msg.pageIndex < this.page_count) {
        this.msg.pageIndex++;
        this.status = "loading";
        this.init();
      } else {
        this.status = "nomore";
      }
    },
    //加载分销商
    lowerTwo(e) {
      if (this.dsMsg.pageIndex < this.page_count) {
        this.dsMsg.pageIndex++;
        this.status = "loading";
        this.getDistriData();
      } else {
        this.status = "nomore";
      }
    },
    //获取分销商
    getDistriData(type) {
      if (type == 1) {
        this.dataList = [];
      }
      uni.showLoading({
        title: "加载中",
      });
      this.requestAdmin(
        "/api/user/GetDistributorInfoPageList",
        this.dsMsg,
        (res) => {
          uni.hideLoading();
          if (res.resultCode == 1) {
            this.dataList = this.dataList.concat(res.data.pageData);
            this.page_count = res.data.pageCount;
          }
        }
      );
    },
    //点击修改获取信息
    getItemInfo(obj) {
      this.addMsg.Id = obj.Id;
      this.addMsg.Remark = obj.Remark;
      this.showRemarkBox = true;
    },
    //保存修改信息
    Save() {
      this.requestAdmin(
        "/api/user/SetMemberUserInfoForHT",
        this.addMsg,
        (res) => {
          if (res.resultCode == 1) {
            this.init(1);
            this.showRemarkBox = false;
          } else {
            uni.showToast({
              title: res.data.message,
            });
          }
        }
      );
    },
    //点击扣除按钮
    kouchuBtn(item, type) {
      this.currentScore = 0;
      this.ScoreMsg.Balance = "";
      this.ScoreMsg.Integral = "";
      this.ScoreMsg.Description = "";
      this.ScoreMsg.Type = type;
      this.ScoreMsg.UserId = item.Id;
      this.ScoreMsg.MallBaseId = uni.getStorageSync("mall_UserInfo").MallBaseId;
      this.showKouchu = true;
    },
    //change
    changeScore(index) {
      this.currentScore = index;
    },
    //保存积分扣除充值
    SaveScore() {
      let cmd = "";
      if (this.currentScore == 0) {
        cmd = "/api/user/SetMemberIntegralInfo";
      } else {
        cmd = "/api/user/SetMemberBalanceInfo";
      }
      this.requestAdmin(
        cmd,
        this.ScoreMsg,
        (res) => {
          if (res.resultCode === 1) {
            this.init();
            this.showKouchu = false;
            uni.showToast({
              title: "保存成功",
              icon: "none",
            });
          } else {
            uni.showToast({
              title: res.data.message,
            });
          }
        },
        null
      );
    },
  },
};
</script>
<style>
.userManage {
  width: 100%;
  height: 100%;
  background: #f3f4f6;
}

.userManage .userList {
  width: 100%;
  background-color: #fff;
  padding: 20rpx;
  margin-bottom: 25rpx;
}

.user_Top {
  display: flex;
}

.orderList .listBox {
  background: #fff;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  width: 100%;
  margin-top: 30rpx;
}

.orderList .listBox .listBox_t {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  font-size: 28rpx;
  margin-bottom: 20px;
  color: #000;
}

.orderList .listBox .listBox_c {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.orderList .listBox .box_bottom {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
}

.orderList .handle {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  margin-top: 10rpx;
}

.orderList .handle_item {
  padding: 0 24rpx;
  border: 1px solid #c8c9cc;
  margin-left: 20rpx;
  height: 50rpx;
  border-radius: 25rpx;
  line-height: 50rpx;
}

.listBox_c .goodboxmore {
  margin-bottom: 20px;
  display: flex;
  width: 100%;
  align-items: center;
}

.listBox_c .goodboxmore .good-list {
  display: flex;
  flex: 1;
  overflow-x: auto;
}

.listBox_c .goodboxmore .good-list .item {
  width: 70px;
  height: 70px;
  border-radius: 5px;
  margin-right: 10px;
}

.listBox_c .goodboxmore .infos {
  margin-left: 15px;
}

.listBox_c .goodboxmore .infos .text {
  text-align: center;
  font-size: 12px;
  margin-top: 5px;
}

.listBox_c .left {
  flex: 1;
  color: #232323;
  font-size: 16px;
  flex: 1;
  font-family: "oswald";
}

.listBox_c .small {
  font-size: 13px;
}

.listBox_c .topic_cont_text {
  font-size: 30rpx;
  max-height: 90rpx;
  overflow: hidden;
  word-break: break-all;
  /* break-all(允许在单词内换行。) */
  text-overflow: ellipsis;
  /* 超出部分省略号 */
  display: -webkit-box;
  /** 对象作为伸缩盒子模型显示 **/
  -webkit-box-orient: vertical;
  /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: 2;
  /** 显示的行数 **/
}

.Um_Search {
  width: 100%;
  padding: 30rpx 40rpx;
  background-color: #efeff4;
}

.userManage .u-content {
  background-color: #fff !important;
}

.userName {
  font-size: 30rpx;
  color: #000;
}
.AliasName {
  font-size: 20rpx;
  line-height: 30rpx;
  color: #999999;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.userLevel {
  font-size: 26rpx;
  color: #999999;
  margin-left: 10rpx;
}

.user_Header {
  width: 100rpx;
  height: 100rpx;
  border-radius: 10rpx;
  overflow: hidden;
  margin-right: 20rpx;
}

.user_Header img {
  border-radius: 10rpx;
}

.user_ScoreBwt {
  display: flex;
  margin-top: 20rpx;
}

.user_ComBg {
  background-color: #efeff4;
  color: #999999;
  margin-right: 20rpx;
  padding: 3rpx 8rpx;
}

.user_Number {
  color: #999999;
}

.user_ScoreBwt > view {
  width: 50%;
}

.ucustomStyle {
  margin-right: 20rpx;
}

.user_DisHeader {
  width: 130rpx;
  height: 130rpx;
  border-radius: 10rpx;
  overflow: hidden;
  margin-right: 20rpx;
}

.inputRemark {
  border: 1px solid #d1d1d1;
  margin: 40rpx 0 40rpx 28rpx;
  padding: 20rpx;
  width: 500rpx;
}

.userManInput {
  height: 60rpx;
  border: 1px solid #f2f3f6;
  width: 90%;
  margin: auto;
  margin-bottom: 20rpx;
  background-color: #f7f7f7;
  box-sizing: border-box;
  font-size: 26rpx;
  padding: 0 20rpx;
  border-radius: 10rpx;
}
/deep/.u-model {
  border-radius: 20rpx;
}
</style>
