<template>
  <view class="userManage" :style="{ height: contentHeight }">
    <view style="padding: 10px 0; background: #fff">
      <u-tabs
        :list="AuditStatusList"
        :is-scroll="false"
        :current="current"
        name="Name"
        @change="change"
        :active-color="mainColor"
        bg-color="#FFF"
        height="80"
        bar-width="100"
      ></u-tabs>
    </view>
    <view
      style="height: calc(100vh - 50px); background: #fff"
      v-if="dataList.length == 0"
    >
      <u-empty text="暂无相关数据" mode="order"></u-empty>
    </view>
    <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_Header">
              <img style="width: 100%; height: 100%" :src="item.Photo" alt="" />
            </view>
            <view>
              <view class="userName">{{ item.UserName }}</view>
              <view class="tixianLevel">提现金额：{{ item.AppliedMoney }}</view>
              <view class="tixianLevel">手续费：{{ item.Fee }}</view>
              <view class="tixianLevel">打款金额：{{ item.RemitMoney }}</view>
            </view>
          </view>
          <view
            style="display: flex; justify-content: flex-end; margin-top: 20rpx"
          >
            <u-button
              size="mini"
              class="ucustomStyle"
              shape="circle"
              @click="getTixianWay(item)"
              >提现详情
            </u-button>
            <u-button
              size="mini"
              v-if="item.AuditStatus == 1 || item.AuditStatus == 2"
              class="ucustomStyle"
              shape="circle"
              @click="openReason(item, 3)"
              >拒绝
            </u-button>
            <u-button
              size="mini"
              v-if="item.AuditStatus == 1"
              shape="circle"
              @click="openReason(item, 1)"
              >通过</u-button
            >
            <u-button
              size="mini"
              v-if="item.AuditStatus == 2"
              shape="circle"
              @click="openReason(item, 2)"
              >打款</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>
    <u-modal
      v-model="isShowTixianWay"
      :show-cancel-button="false"
      title="提现方式"
      contentSlot
      @confirm="SaveTixian"
    >
      <view style="margin: 40rpx; font-size: 28rpx"
        >提现方式：{{ tixianWay }}</view
      >
    </u-modal>
    <u-modal
      v-model="isShowAgree"
      :show-cancel-button="true"
      :title="commonTitle"
      contentSlot
      @confirm="SaveAgree"
    >
      <textarea
        style="height: 120px"
        class="replayRemark"
        v-model="addMsg.Remark"
      />
    </u-modal>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      pageTitle: "提现申请",
      current: 0,
      contentHeight: 0,
      mainColor: "",
      page_count: 1,
      dataList: [],
      u: {},
      msg: {
        pageIndex: 1,
        pageSize: 15,
        AuditStatus: 0,
        UserId: 0,
      },

      status: "loadmore",
      loadText: {
        loadmore: "轻轻上拉，加载更多",
        loading: "努力加载中",
        nomore: "没有更多了",
      },
      AuditStatusList: [], //流程list
      isShowTixianWay: false,
      tixianWay: "",
      addMsg: {
        RemitId: 0,
        Type: 1,
        Remark: "",
        ErpEmpId: 0,
      },
      isShowAgree: false,
      commonTitle: "", //申请标题
    };
  },
  created() {
    this.contentHeight = this.$utils.calcContentHeight(-40) + "px";
    this.mainColor = this.$uiConfig.mainColor;
  },
  mounted() {
    uni.setNavigationBarTitle({
      title: this.pageTitle,
    });
  },
  onLoad: function (option) {
    this.GetAuditStatus();
    this.getList();
  },
  methods: {
    change(index) {
      this.current = index;
      this.dataList = [];
      this.msg.AuditStatus = index;
      this.msg.pageIndex = 1;
      this.getList();
    },
    getList(type) {
      uni.showLoading({
        title: "加载中",
      });
      this.requestAdmin(
        "/api/user/GetDistributorRemitPageList",
        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.getList();
      } else {
        this.status = "nomore";
      }
    },
    //获取顶部条件
    GetAuditStatus() {
      this.requestAdmin(
        "/api/user/GetDistributorRemitAuditStatusEnumList",
        {},
        (res) => {
          if (res.resultCode == 1) {
            this.AuditStatusList = res.data;
            let obj = {
              Name: "全部",
              Id: 0,
            };
            this.AuditStatusList.unshift(obj);
          }
        }
      );
    },
    //弹出提现详情
    getTixianWay(item) {
      this.isShowTixianWay = true;
      this.tixianWay = item.WithdrawalWayName;
    },
    SaveTixian() {
      this.isShowTixianWay = false;
    },
    openReason(item, type) {
      this.isShowAgree = true;
      this.addMsg.Remark = "";
      this.addMsg.Type = type;
      this.addMsg.RemitId = item.Id;
      if (type == 1) {
        this.commonTitle = "通过申请";
      } else if (type == 3) {
        this.commonTitle = "拒绝申请";
      } else {
        this.commonTitle = "打款申请";
      }
    },
    //保存同意拒绝
    SaveAgree() {
      this.requestAdmin(
        "/api/user/SetDistributorRemitAudit",
        this.addMsg,
        (res) => {
          if (res.resultCode == 1) {
            uni.showToast({
              title: "操作成功",
              icon: "none",
            });
            this.getList();
            this.isShowAgree = false;
          } else {
            uni.showToast({
              title: res.message,
              icon: "none",
            });
          }
        }
      );
    },
  },
};
</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;
}

.userName {
  font-size: 30rpx;
  color: #000;
}

.tixianLevel {
  font-size: 26rpx;
  color: #999999;
  margin-top: 10rpx;
}

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

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

.ucustomStyle {
  margin-right: 20rpx;
}
.replayRemark {
  border: 1px solid #d1d1d1;
  margin: 40rpx 0 40rpx 28rpx;
  padding: 20rpx;
  width: 500rpx;
  border-radius: 10rpx;
  font-size: 28rpx
}
.u-model {
  border-radius: 20rpx;
}
</style>
