<template>
  <div class="my_qa">
    <el-breadcrumb separator="/" class="bread_crumb1 bread_left">
      <el-breadcrumb-item :to="{ path: '/user' }">{{
        $t("lang.personal_center")
      }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{
        $t("lang.my_coin")
      }}</el-breadcrumb-item>
    </el-breadcrumb>
    <BlockRadius class="info_block user_qa">
      <div class="left_user">
        <div class="img_head">
          <img :src="user_info.picture_path || head_pic" class="img_head_in" />
        </div>
        <div class="left_word">
          <p class="left_name">{{ user_info.user_name }}</p>
          <p class="left_role">{{ user_info.role }}</p>
        </div>
      </div>
      <div class="right_list">
        <div class="user_qa_card my_a">
          <img src="@/assets/imgs/wdjb_ic_zhye.png" />
          <div class="card_word">
            <p class="card_name">账户余额</p>
            <p>
              {{ user_info.account_balance }}
            </p>
          </div>
        </div>
        <div class="user_qa_card my_view">
          <img src="@/assets/imgs/wdjb_ic_czbs.png" />
          <div class="card_word">
            <p class="card_name">充值笔数</p>
            <p>
              {{ helper.numberFormat(user_info.recharge_count)
              }}<span v-if="user_info.recharge_count > 10000" class="card_wan">
                万
              </span>
            </p>
          </div>
        </div>
      </div>
    </BlockRadius>
    <BlockRadius ref="tableIn" class="block_down info_block">
      <div class="czjl">
        <div class="czjl_p">
          充值记录
          <el-tooltip
            class="tool_item"
            effect="dark"
            content="充值明细（如需进行充值，请线下联系平台超级管理员）"
            placement="top-start"
            offset="5"
          >
            <img class="tool_img" src="@/assets/imgs/tool_ic_tips.png" />
          </el-tooltip>
        </div>
        <el-date-picker
          v-model="date"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :clearable="false"
          @change="getCoinList"
        ></el-date-picker>
      </div>
      <div class="apa_table">
        <apass-table
          ref="outtreetable"
          :data="tableData"
          :header="table_header"
        ></apass-table>
      </div>
      <list-pagination
        :total="total_list"
        :page-sizes="[50, 20, 10]"
        :page-size="currentlimit"
        :current-page="currentPage"
        @size-change="changePageSize"
        @current-change="changeCurrentPage"
      ></list-pagination>
    </BlockRadius>
  </div>
</template>

<script>
import BlockRadius from "@/components/general/block-radius";
import apassTable from "@/components/apass-table";
import listPagination from "@/components/comments-pagination";
import helper from "@/services/helper.js";
export default {
  components: {
    BlockRadius,
    apassTable,
    listPagination,
  },
  data: () => ({
    helper,
    user_info: {
      user_name: "",
      role: "",
      account_balance: 0,
      recharge_count: 0,
      picture_path: "",
    },
    tableData: [],
    table_header: [],
    total_list: 0,
    currentPage: 1,
    currentlimit: 10,
    date: [],
    head_pic: require("@/assets/imgs/img_head.png"),
  }),
  watch: {},
  methods: {
    changePageSize(val) {
      this.currentlimit = val;
      this.currentPage = 1;
      this.getCoinList();
    },
    changeCurrentPage(val) {
      console.log(val);
      this.currentPage = val;
      this.getCoinList();
    },
    getUserCoins() {
      this.$api.user.getUserCoins().then((response) => {
        if (response.data.success == 1) {
          this.user_info = response.data.data;
          if (!this.user_info.recharge_count) {
            this.user_info.recharge_count = 0;
          }
        }
      });
    },
    selectnum({ select, rows }) {
      this.num = select.length;
      this.selected_date = select;
    },
    getCoinList() {
      let query = {
        start: this.date.length != 0 ? this.date[0] : "",
        end: this.date.length != 0 ? this.date[1] : "",
        limit: this.currentlimit,
        page: this.currentPage,
      };
      this.$api.user.getCoinList(query).then((response) => {
        if (response.data.success == 1) {
          if (response.data.data && response.data.data.length != 0) {
            this.tableData = response.data.data
          } else {
            this.tableData = [];
            this.currentPage = 1;
          }
          this.total_list = response.data.total;
        }
      });
    },
  },
  mounted() {
    this.getUserCoins();
    this.getCoinList();
    this.table_header = [
      {
        prop: "serial_number",
        label: "充值流水ID",
        align: "center",
        type: "html",
        getHtml: (str) => {
          return `<span style="color:#0f2683;font-weight:bold;width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" title="${str.serial_number}">${str.serial_number}</span>`;
        },
      },
      {
        prop: "amount",
        label: "充值金额（金币/个）",
        align: "center",
        type: "html",
        getHtml: (str) => {
          return `<span style="width: 100%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">${str.amount}</span>`;
        },
      },
      {
        prop: "balance",
        label: "账户余额（金币/个）",
        align: "center",
      },
      {
        prop: "created",
        label: "充值时间",
        align: "center",
        type: "html",
        getHtml: (str) => {
          return `<span>${helper.dateStringTransform(str.created)}</span>`;
        },
      },
    ];
  },
};
</script>

<style scoped>
.my_qa {
  /* height: calc(100% - 20px); */
  height: calc(100%);
  overflow: hidden;
}
.info_block {
  margin: 0 20px 20px;
  position: relative;
}
.block_down {
  height: calc(100% - 214px);
}
.czjl {
  height: 50px;
  position: relative;
  display: flex;
  justify-content: space-between;
  top: -6px;
}
.czjl::after {
  content: "";
  position: absolute;
  left: -20px;
  bottom: 0;
  width: calc(100% + 40px);
  height: 1px;
  background-color: #e6ebfe;
}
.czjl_p {
  font-weight: bold;
  padding-left: 20px;
  position: relative;
  font-size: 16px;
  top: 8px;
}
.czjl_p::after {
  position: absolute;
  content: "";
  width: 4px;
  height: 16px;
  background-color: #515fe7;
  border-radius: 2px;
  left: 8px;
  top: 3px;
}
.apa_table {
  height: calc(100% - 90px);
}
.user_qa {
  height: 120px;
  display: flex;
  justify-content: space-between;
}
.left_user {
  width: 300px;
  display: flex;
  justify-content: space-between;
}
.img_head {
  width: 76px;
  height: 76px;
  margin: 2px 10px;
  border-radius: 50%;
  overflow: hidden;
  border: solid 2px #e3e5ef;
}
.img_head_in {
  width: 100%;
  height: 100%;
}
.left_word {
  width: 200px;
  padding-top: 5px;
}
.left_name {
  color: #1d1e20;
  font-size: 22px;
  line-height: 44px;
}
.left_role {
  color: #8890a7;
  font-size: 14px;
}
.right_list {
  width: 40%;
  min-width: 550px;
  max-width: 700px;
  display: flex;
  justify-content: space-between;
}
.user_qa_card {
  width: 49%;
  height: 80px;
  border-radius: 10px 10px 10px 40px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 34px;
  font-family: Arial;
  font-weight: bold;
  text-align: right;
}
.my_q {
  background-color: #fcefd6;
  color: #ef9433;
}
.my_a {
  background-color: #e7fdfc;
  color: #25bdb1;
}
.my_view {
  background-color: #e5f4fe;
  color: #38aef9;
}
.card_word {
}
.card_name {
  color: #242c43;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: normal;
}
.card_wan {
  font-size: 14px;
}
</style>
<style scoped>
.com-pagination {
  margin-top: 20px;
  font-size: 14px;
  padding: 0 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.com_page_item {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.commodity_card {
}
.commodity_card_list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.commodity_card_item {
  margin: 10px 0;
}
.commodity_card_item_in {
  margin: 0 auto;
}
.tool_item {
}
.tool_img {
  width: 16px;
  height: 16px;
  position: relative;
  top: 2px;
  left: 2px;
}
</style>
<style>
.czjl .el-input__inner {
  background-color: #f7f8f9;
}
.czjl .el-date-editor.el-range-editor .el-range-input {
  background-color: #f7f8f9;
  width: 80px;
}
.czjl .el-date-editor.el-range-editor .el-range-separator {
  width: 40px;
  position: relative;
  top: 2px;
}
.czjl .el-date-editor.el-range-editor {
  width: 260px;
  padding: 3px 10px 3px 15px;
}
.czjl .el-date-editor .el-range__icon {
  margin-right: 8px;
}
.apa_table .apass_table {
  height: 100%;
}
.apa_table .apass_table .el-table {
  height: 100%;
}
.apa_table .apass_table .el-table .el-table__body-wrapper {
  max-height: calc(100% - 49px);
  overflow: auto;
}
</style>