<template>
  <div class="myintegral-container">
    <div class="contenttitle">
      <span>我的积分</span>
    </div>
    <div class="balance">
      <div>
        <span
          >当前积分<i @click="showbalance = !showbalance"
            ><i class="iconfont icon-zhengyan" v-if="showbalance"></i
            ><i class="iconfont icon-biyan" v-else></i></i
        ></span>
        <p v-if="showbalance">999</p>
        <p v-else>***</p>
      </div>
    </div>
    <div class="tradingrecord">
      <div class="recordtitle">
        <span>积分兑换记录</span>
      </div>
      <div class="recordcontent">
        <a-table
          :columns="columns"
          :data-source="data"
          :pagination="false"
          @change="onChange"
        >
          <!-- <a slot="name" slot-scope="text">{{ text }}</a> -->
        </a-table>
        <div class="pagecontainer">
          <a-pagination
            :current="+pagination.pageNum"
            :default-current="1"
            :defaultPageSize="2"
            :total="pagination.total"
            @change="onChange"
          />
          <div class="ant-pagination-options-quick-jumper">
            跳至<input
              ref="pageinput"
              type="text"
              @keyup.enter="inputpageChange"
              @blur="inputpageChange"
            />页
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      columns: [
        {
          title: "序号",
          dataIndex: "index",
          key: "index",
          scopedSlots: { customRender: "index" },
          width: 60,
        },
        {
          title: "兑换物品",
          dataIndex: "money",
          key: "money",
          width: 120,
        },
        {
          title: "物品数量",
          dataIndex: "num",
          key: "num",
          width: 90,
          // ellipsis: true,
        },
        {
          title: "扣除积分",
          dataIndex: "deduct",
          key: "deduct",
          // ellipsis: true,
          width: 140,
        },
        {
          title: "状态",
          dataIndex: "state",
          key: "state",
          // ellipsis: true,
          // width: 90,
        },
        {
          title: "更新时间",
          dataIndex: "time",
          key: "time",
          width: 160,
        },
      ],
      data: [
        {
          index: "1",
          money: "现金20元",
          state: "交易成功",
          num: "12",
          deduct: "1000",
          time: "2021-09-13 15:41",
        },
        {
          index: "2",
          money: "水杯",
          state: "审核中",
          num: "123",
          deduct: "1430",
          time: "2021-09-13 15:41",
        },
        {
          index: "3",
          money: "枕头",
          state: "交易关闭",
          num: "12",
          deduct: "1100",
          time: "2021-09-13 15:41",
        },
        {
          index: "4",
          money: "现金10元",
          state: "交易关闭",
          num: "32",
          deduct: "1200",
          time: "2021-09-13 15:41",
        },
        {
          index: "5",
          money: "指甲剪",
          state: "交易关闭",
          num: "21",
          deduct: "3000",
          time: "2021-09-13 15:41",
        },
      ],
      pagination: {
        pageNum: 1,
        pageSize: 2,
        total: 8, //分页配置
      },
      showbalance: true,
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {
    onChange(e) {
      console.log(1);
      console.log(e);
      this.pagination.pageNum = e;
    },
    inputpageChange(e) {
      this.pagination.pageNum = e.target.value;
      // this.getJobList();
      console.log(e);
    },
  },
};
</script>

<style scoped lang="less">
.contenttitle,
.recordtitle {
  display: flex;
  padding-bottom: 16px;
  justify-content: space-between;
  border-bottom: 1px solid rgba(77, 87, 94, 0.1);
  margin-bottom: 16px;
  margin-top: 16px;
  span {
    font-size: 20px;
    color: #ff6a00;
  }
  div {
    button {
      width: 100px;
      height: 28px;
      font-size: 14px;
      border: 1px solid #cccccc;
      background-color: #fff;
    }
    button:first-child {
      border-radius: 4px 0px 0px 4px;
    }
    button:last-child {
      border-radius: 0px 4px 4px 0px;
    }
  }
}
.balance {
  height: 102px;
  background: url("../../../../assets/bgbalance.png") no-repeat center;
  background-size: 100% 100%;
  overflow: hidden;
  > div {
    color: #fff;
    margin-left: 88px;
    margin-top: 14px;
    > span {
      font-size: 16px;
      // line-height: 22px;
      i {
        margin-left: 4px;
        font-size: 12px;
      }
    }
    p {
      margin-top: 10px;
      font-size: 32px;
      line-height: 32px;
    }
  }
}
</style>
