<template>
  <div class="users_list">
    <div class="apass_breadcrumb">
      <el-breadcrumb separator="/" slot="breadcrumb">
        <el-breadcrumb-item to="/authority">权限管理</el-breadcrumb-item>
        <el-breadcrumb-item to="/authority/users">用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>充值</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="out_title">
      <div class="title_text">
        <span></span><span>充值</span>
        <el-tooltip
          class="tool_item"
          effect="dark"
          content="充值后，金币将直接充值到普通用户账户余额中，用于在平台内进行消费。"
          placement="top-start"
          offset="5"
        >
          <img src="../../../assets/imgs/tool_ic_tips.png" alt="" />
        </el-tooltip>
      </div>
      <div class="give_form">
        <span>充值金币</span
        ><el-input
          v-model="money_num"
          placeholder="请输入充值金币数"
        ></el-input>
        <div class="give_money" @click="give_money">充值</div>
      </div>
    </div>

    <div class="out_title" style="margin-top:10px;margin-bottom:20px;min-height:calc(100% - 230px);display: flex;flex-direction: column;justify-content: flex-start;">
      <div class="title_text">
        <span></span><span>充值记录</span>
        <el-date-picker
          v-model="search_date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="change_date"
        >
        </el-date-picker>
      </div>
      <div class="money_table">
        <apass-table
          class="apa_table"
          ref="outtreetable"
          style="min-height:calc(100% - 50px);flex-grow: 1;"
          :data="tableData"
          :header="table_header"
        ></apass-table>
        <list-pagination
          :total="total_list"
          :page-sizes="[50, 20, 10]"
          :page-size="currentlimit"
          :current-page="currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        ></list-pagination>
      </div>
    </div>

    <apass-dialog
      ref="dialog"
      width="570px"
      title="充值确认"
      @cancel="cancelAction"
      @submit="submitAction"
    >
        <div class="log_content" slot="content">
            <p>即将充值 <span>{{money_num}}</span> 金币到以下账号：</p>
            <div class="give_money_content">
                <p>用户账号：<span>{{user_info1.user_id}}</span> </p>
                <p>业务系统：<span>{{user_info1.system_name}}</span></p>
                <p>所属机构：<span>{{user_info1.department}}</span></p>
            </div>
            <p><span>确定进行</span> 本次充值吗？充值后金币不可退回。</p>
        </div>
    </apass-dialog>
  </div>
</template>

<script>
import apassDialog from "@/components/apass-dialog";
import apassTable from "@/components/apass-table";
import listPagination from "@/components/comments-pagination";
import helper from "@/services/helper.js";
export default {
  props: [],
  components: {
    apassDialog,
    apassTable,
    listPagination,
  },
  data() {
    return {
      money_num: "",
      search_date: "",
      tableData: [],
      table_header: [],
      total_list: 0,
      currentPage: 1,
      currentlimit: 10,
      user_info1:{},
    };
  },
  watch: {},
  computed: {},
  created() {
      this.user_info()
  },
  mounted() {
    this.table_header = [
      {
        prop: "serial_number",
        label: "充值流水ID",
        align: "center",
      },
      {
        prop: "amount",
        label: "充值金额（金币/个）",
        align: "center",
      },
      {
        prop: "user_name",
        label: "操作人",
        align: "center",
      },
      {
        prop: "created",
        label: "充值时间",
        align: "center",
        type: "html",
        getHtml: (str) => {
          return `<span>${helper.dateStringTransform(str.created)}</span>`;
        },
      },
    ];
  },
  methods: {
    give_money(){
        if(this.money_num){
            var reg = /^\d{1,}$/
            if(reg.test(this.money_num)){
                this.$refs.dialog.show();
            }else{
                this.$message.error('请填入正整数')
            }
            
        }else{
            this.$message.error('请填入充值金额')
        }
    },
    cancelAction() {
      this.$refs.dialog.hide();
    },
    submitAction() {
        this.post_money()
    },
    handleSizeChange(val) {
      this.currentPage = 1
      this.currentlimit = val;
      this.refreshData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.refreshData();
    },
    change_date(){
        this.currentPage = 1
        this.refreshData();
    },
    post_money(){
        this.$http
        .post(
          `/apaas/backmgt/user/recharge`,{
              "user_id":this.user_info1.user_id,
              "num":this.money_num+''
          }
        ).then((res)=>{
          if(res.data.success){
            this.$refs.dialog.hide();
            this.$message.success('充值成功')
            this.change_date()
          }else{
            this.$message.error(res.data.errMsg)
          }
        })
    },
    refreshData(){
        this.$http
        .get(
          `/apaas/backmgt/user/rechargeRecords?user_id=${this.user_info1.user_id}&start=${this.search_date[0]||''}&end=${this.search_date[1]||''}&limit=${this.currentlimit}&page=${this.currentPage}`
        ).then((res)=>{
          if(res.data.success){
            console.log(res.data.data);
            this.tableData = res.data.data
            this.total_list = res.data.total
          }
        })
    },
    user_info(){
        this.$http
        .get(
          `/apaas/backmgt/user/detail/${this.$route.params.id}`
        ).then((res)=>{
          if(res.data.success){
            console.log(res.data.data);
            this.user_info1 = res.data.data;
            this.refreshData()
          }
        })
    },
  },
};
</script>

<style scoped>
.users_list {
  height: calc(100% - 20px);
  padding: 0px 20px;
}
.out_title {
  width: 100%;
  background-color: #ffffff;
  box-shadow: 0px 3px 6px 0px #f4f7fc;
  border-radius: 12px;
}
.title_text {
  width: 100%;
  height: 63px;
  border-bottom: 1px solid #edf0ff;
  line-height: 63px;
  font-size: 16px;
  font-weight: 600;
  padding: 0 20px;
  box-sizing: border-box;
  color: #1d1e20;
}
.title_text span {
  margin-right: 10px;
}
.title_text span:nth-of-type(1) {
  display: inline-block;
  width: 4px;
  height: 16px;
  background-color: #515fe7;
  border-radius: 2px;
}
.title_text span:nth-of-type(2) {
  vertical-align: 2px;
}
.give_form {
  height: 104px;
  line-height: 104px;
  padding: 0 40px;
  box-sizing: border-box;
}
.give_form span {
  font-size: 14px;
  font-weight: 600;
  color: #242c43;
  margin-right: 10px;
}
.give_form .give_money {
  width: 124px;
  height: 44px;
  line-height: 44px;
  text-align: center;
  display: inline-block;
  background-color: #e56600;
  border-radius: 8px;
  font-size: 16px;
  color: #fcefd6;
  margin-left: 10px;
  cursor: pointer;
}
.give_form .el-input {
  display: inline-block;
  width: 360px;
}
.title_text .el-range-editor {
  float: right;
  margin-top: 12px;
}
.money_table{
    flex-grow: 1;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    padding: 0 20px;
}
.log_content p{
    font-size: 14px;
	color: #242c43;
    line-height: 40px;
    text-align: left;
    padding-left: 15px;
}
.log_content p span{
    color: #e56600;
}
.give_money_content{
    background-color: #f8f9fd;
	border-radius: 8px;
    padding: 10px 0;
}
.give_money_content p{
    color: #8890a7;
    line-height: 30px;
}
.give_money_content p span{
    color: #242c43;
}
</style>

<style>
.give_form .el-input__inner {
  width: 360px;
  height: 44px;
  line-height: 44px;
}
.title_text .el-date-editor.el-input,
.title_text .el-date-editor.el-input__inner {
  width: 245px;
}
.title_text .el-date-editor .el-range-separator {
  line-height: 32px;
}
</style>
