<template>
  <div class="detail">
    <Card dis-hover :padding='30'>
      <p slot="title">基础信息</p>
      <Row>
        <Col span="8">头像：<Avatar icon="ios-person"/></Col>
        <Col span="8">姓名：阿斯顿马丁</Col>
        <Col span="8">打卡时间：2020-12-23 9:00:00</Col>
      </Row>
      <Row style="margin-top: 40px;">
        <Col span="8">获得收益(真我币)：123</Col>
        <Col span="8">图片： <Avatar shape="square" icon="ios-person" size="large" /></Col>
        <Col span="8">见证数量：10000</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="name">
          <span>{{ row.details.name }}</span>
        </template>
        <template slot-scope="{ row }" slot="title">
          <span>{{ row.details.title }}</span>
        </template>
        <template slot-scope="{ row }" slot="created_at">
          <span>{{ row.created_at | format }}</span>
        </template>
        <template slot-scope="{ row }" slot="enable">
          <i-switch
            :value="row.is_enable === 1 ? true : false"
            @on-change="
              value => {
                change(value, row);
              }
            "
          />
        </template>
        <template slot-scope="{ row }" slot="action">
          <a @click="edit(row)">编辑</a>
        </template>
        <template slot-scope="{ row }" slot="edit">
          <a @click="goTheme(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>
    </div>
    <div class="btn">
      <Button type="primary" @click="$router.go(-1)">返回</Button>
    </div>
  </div>
</template>

<script>
import { getScenes, delScenes, editScenes } from '@/api/scenes'
export default {
  name: 'categories',
  components: {},
  data () {
    return {
      tab: '1',
      data: [],
      yhqcolumns: [
        {
          title: '用户名称',
          key: 'created_at'
        },
        {
          title: '获取积分',
          slot: 'name'
        },
        {
          title: '见证时间',
          slot: 'name'
        }
      ],
      columns: [
        {
          title: '用户名称',
          key: 'created_at'
        },
        {
          title: '评论',
          slot: 'name'
        },
        {
          title: '评论时间',
          slot: 'title'
        }
      ]
    }
  },
  methods: {},
  mounted () {}
}
</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>
