<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">{{ userpoint }}</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"
          :rowKey="(record) => record.index"
          :locale="tablenodata"
          :loading="{
            spinning: isspinning,
            tip: '加载中',
            wrapperClassName: 'spinstyle',
          }"
        >
          <!-- <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"
              :style="{ 'background-Color': '#f6f6f6' }"
            />页
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getPointDetailApi } from "../../../../api/userinfo";
import { formatDateYMD } from "../../../../utils/commonUtil";
export default {
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {
    userpoint: {
      require: true,
    },
  },
  // 组件状态值
  data() {
    return {
      tablenodata: {
        // 空状态文本内容
        emptyText: () => (
          <div>
            <div>
              <img
                src="https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png"
                style="width:105px;height:90px;marginTop:20px"
              />
            </div>
            <div style="marginBottom:20px">暂无数据</div>
          </div>
        ),
      },
      columns: [
        {
          title: "序号",
          dataIndex: "index",
          key: "index",
          scopedSlots: { customRender: "index" },
          width: 60,
        },
        {
          title: "兑换物品",
          dataIndex: "goodsName",
          key: "goodsName",
          width: 120,
        },
        {
          title: "物品数量",
          dataIndex: "goodsNum",
          key: "goodsNum",
          width: 90,
          // ellipsis: true,
        },
        {
          title: "扣除积分",
          dataIndex: "point",
          key: "point",
          // ellipsis: true,
          width: 140,
        },
        {
          title: "状态",
          dataIndex: "state1",
          key: "state1",
          // ellipsis: true,
          // width: 90,
        },
        {
          title: "更新时间",
          dataIndex: "updateTime",
          key: "updateTime",
          width: 160,
        },
      ],
      data: [],
      pagination: {
        pageNum: 1,
        pageSize: 1,
        total: null, //分页配置
      },
      showbalance: true,
      isspinning: false,
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.getPointDetail();
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {
    onChange(e) {
      console.log(1);
      console.log(e);
      this.pagination.pageNum = e;
    },
    inputpageChange(e) {
      const pagenumcount = this.pagination.total / this.pagination.pageSize;
      console.log(pagenumcount);
      if (e.target.value) {
        if (e.target.value > pagenumcount) {
          this.pagination.pageNum = Math.ceil(pagenumcount);
        } else {
          this.pagination.pageNum = e.target.value;
        }
      } else {
        this.pagination.pageNum = 1;
      }
      // this.getJobList();
      this.getPointDetail();
      console.log(e);
    },
    async getPointDetail() {
      try {
        this.isspinning = true;
        const { data } = await getPointDetailApi(this.pagination);
        console.log(data);
        if (data.status === 200) {
          // console.log();
          this.data = data.data.recordList;
          this.data.forEach((item, index) => {
            console.log(item);
            item.updateTime = formatDateYMD(item.updateTime);
            if (item.state === 0) {
              item.state1 = "初始";
            } else if (item.state === 10) {
              item.state1 = "审核中";
            } else if (item.state === 20) {
              item.state1 = "已完成";
            } else if (item.state === 90) {
              item.state1 = "提现失败";
            }
            item.index = index + 1;
          });

          console.log(true);
          this.pagination.total = data.data.recordCount;
        }
      } catch (error) {
        console.log(error);
      }
      this.isspinning = false;
    },
  },
};
</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/bgintegral.png") no-repeat center;
  background-size: 100% 100%;
  overflow: hidden;
  > div {
    color: #fff;
    margin-left: 72px;
    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>
