<template>
  <div class="detail">
    <Card dis-hover :padding="30">
      <p slot="title">基础信息</p>
      <Row>
        <Col span="8">头像：<Avatar :src="row.default_avatar"/></Col>
        <Col span="8">姓名：{{ row.user_name }}</Col>
        <Col span="8">打卡时间：{{ row.sign_in_num }}</Col>
      </Row>
      <Row style="margin-top:10px">
        <Col span="8"
          >获得收益(真我币)：<Avatar :src="row.default_avatar"
        /></Col>
        <Col span="8">图片：<Avatar :src="row.default_avatar"/></Col>
        <Col span="8">点赞人数：{{ row.sign_in_num }}</Col>
      </Row>
      <Row style="margin-top:10px">
        <Col span="8">审核账号：<Avatar :src="row.default_avatar"/></Col>
        <Col span="8">打赏金额：{{ row.expense_amount }}</Col>
        <Col span="8">评论：{{ row.sign_in_num }}</Col>
      </Row>
    </Card>

    <div class="pc-main">
      <Card dis-hover :padding="30">
        <p slot="title">点赞用户</p>
        <Table
          :loading="$store.state.app.isLoading"
          border
          ref="selection"
          :columns="columns"
          :data="data"
        >
         <template slot-scope="{ row }" slot="create_time">
           {{row.create_time | format}}
          </template>
          <template slot-scope="{ row }" slot="action">
            <a @click="edit(row)">编辑</a>
          </template>
        </Table>
        <Pager
          class="margin-top-10"
          :config="config"
          @on-change="handlePager"
        ></Pager>
      </Card>
    </div>
    <div class="btn">
      <Button type="primary" @click="$router.go(-1)">返回</Button>
    </div>
  </div>
</template>

<script>
import { userDe, queryLikeList } from "@/api/clock/activityClocks";
import { formatDate } from "@/libs/util";
import Pager from "@/view/common/Pager.vue";
export default {
  name: "categories",
  components: {
    Pager
  },
  filters: {
    format(value) {
      return formatDate(value);
    }
  },
  data() {
    return {
      tab: "1",
      pageIndex: 1,
      pageSize: 10,
      row: {},
      data: [],
      columns: [
        {
          title: "用户名称",
          key: "nick_name"
        },
        {
          title: "点赞类型",
          key: "like_text"
        },
        {
          title: "点赞时间",
          slot: "create_time"
        }
      ]
    };
  },
  methods: {
    handlePager(pager) {
      this.pageIndex = pager.current;
      this.pageSize = pager.size;
      this.search();
    },
    search() {
      queryLikeList({
        objectType: 1,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        uuid: this.$route.query.uuid
      }).then(res => {
        this.data = res.data;
      });
    }
  },
  mounted() {
    this.search();
    userDe(this.$route.query.uuid).then(res => {
      this.row = res.data;
    });
  }
};
</script>

<style lang="less" scoped>
.pc-main {
  padding: 20px;
  margin-top: 20px;
  background-color: #fff;
}
.btn {
  text-align: right;
  width: 80%;
  position: fixed;
  background-color: #fff;
  bottom: 10px;
  padding: 10px 30px;
}
</style>
