<template>
  <div class="detail">
    <Card dis-hover :padding="30">
      <p slot="title">基础信息</p>
      <Row>
        <Col span="8">用户ID：{{ row.user_uuid }}</Col>
        <Col span="8">头像：<Avatar :src="row.default_avatar"/></Col>
        <Col span="8">姓名：{{ row.nick_name }}</Col>
      </Row>
      <Row style="margin-top: 40px;">
        <Col span="8">手机号：{{ row.phone }}</Col>
        <Col span="8">真我币：{{ row.sign_in_score }}</Col>
        <Col span="8"
          >打卡次数：{{row.user_sign_in_vo&& row.user_sign_in_vo.cumulative_sign_in }}</Col
        >
      </Row>
    </Card>
    <div class="pc-main">
      <Tabs v-model="tab">
        <TabPane label="早起活动" name="1"></TabPane>
        <TabPane label="优惠卷" name="2"></TabPane>
      </Tabs>
      <Table
        v-if="tab === '1'"
        :loading="$store.state.app.isLoading"
        border
        ref="selection"
        :columns="columns"
        :data="data"
      >
        <template slot-scope="{ row }" slot="apply_date">
          <span>{{ row.apply_date | format }}</span>
        </template>
        <template slot-scope="{ row }" slot="apply_time">
          <span>{{ row.apply_time | format }}</span>
        </template>
        <template slot-scope="{ row }" slot="clock_time">
          <span>{{ row.clock_time | format }}</span>
        </template>
        <template slot-scope="{ row }" slot="status">
          {{row.status===0?'未开始':row.status===1?'进行中':row.status===2?'结算中':'已结束'}}
        </template>
        <template slot-scope="{ row }" slot="action">
          <a @click="goDetail(row)">详情</a>
        </template>
      </Table>
      <Table
        v-else
        :loading="$store.state.app.isLoading"
        border
        ref="selection"
        :columns="yhqcolumns"
        :data="data"
      >
        <template slot-scope="{ row }" slot="action">
          <a @click="edit(row)">编辑</a>
        </template>
      </Table>
      <Pager
        class="margin-top-10"
        :config="config"
        @on-change="handlePager"
      ></Pager>
    </div>
    <div class="btn">
      <Button type="primary" @click="$router.go(-1)">返回</Button>
    </div>
  </div>
</template>

<script>
import { activityClockRecords,activityawardrecord } 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",
      config: { total: 0, size: 10, current: 1 },
      pageIndex: 1,
      pageSize: 10,
      row: this.$route.query.row,
      data: [],
      yhqcolumns: [
        {
          title: "优惠卷名称",
          key: "award_name"
        },
        {
          title: "获奖时间",
          slot: "create_time"
        }
      ],
      columns: [
        {
          title: "活动日期",
          slot: "apply_date"
        },
        {
          title: "打卡状态",
          slot: "status"
        },
        {
          title: "支付金额(真我币)",
          key: "pay_amount"
        },
        {
          title: "报名时间",
          slot: "apply_time"
        },
        {
          title: "打卡时间",
          slot: "clock_time"
        },
        {
          title: "本场瓜分(真我币)",
          key: "expense_amount"
        },
        {
          title: "操作",
          slot: "action"
        }
      ]
    };
  },
    watch: {
    tab: {
      handler: function(val) {
        if (val === "2") {
          this.getyhq()
        } else {
            this.search()
        }
      },
      immediate: true
    }
  },
  methods: {
    handlePager(pager) {
      this.pageIndex = pager.current;
      this.pageSize = pager.size;
      this.search();
    },
    getyhq(){
       let params = {
        activity_type:1,
        award_type:1,
        user_uuid:this.row.user_uuid,
        page_index: this.pageIndex,
        page_size: this.pageSize
      };
      activityawardrecord(params).then(res => {
        this.config.total = res.total;
        this.data = res.data;
      });
    },
      goDetail(row) {
      this.$router.push({ path: "/clockEarly/detailZaoqi", query: { uuid: row.uuid } });
    },
    search() {
      let params = {
        uuid:this.row.user_uuid,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      };
      activityClockRecords(params).then(res => {
        this.config.total = res.total;
        this.data = res.data;
      });
    }
  },
  mounted() {
      this.search()
  }
};
</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>
