<template>
<div class="app-container calendar-list-container">
  <!-- 筛选条件 -->
  <div class="filter-container">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="进场记录" name="1">
        <!-- 筛选条件 -->
        <div class="filter-container" v-show="false">
          <el-input @keyup.enter.native="handleSearch" class="filter-item" placeholder="" v-model="params.memberId"></el-input>
          <el-input @keyup.enter.native="handleSearch" class="filter-item" placeholder="" v-model="params.search_eq_memberId"></el-input>

          <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleSearch">搜索</el-button>
          <el-button class="filter-item pull-right" type="success" icon="edit" @click="handleCreate">添加</el-button>
        </div>
        <!-- 列表数据 -->
        <Pagination uri="/member/enter/veneu/logs" :request-params="params" ref="pagination">

            <!-- 用户ID -->
            <el-table-column align="center" label="用户昵称">
              <template scope="scope">
                <span>{{scope.row.nickname}}</span>
              </template>
            </el-table-column>

            <!-- 场馆ID -->
            <el-table-column align="center" label="场馆">
              <template scope="scope">
                <span>{{scope.row.name}}</span>
              </template>
            </el-table-column>

            <!-- 支付状态 -->
            <el-table-column align="center" label="支付状态">
              <template scope="scope">
                <span v-if="scope.row.payStatus === -1">已取消</span>
                <span v-if="scope.row.payStatus === 0">未支付</span>
                <span v-if="scope.row.payStatus === 1">已支付</span>
              </template>
            </el-table-column>

            <!-- 入场支付订单 -->
            <el-table-column align="center" label="订单">
              <template scope="scope">
                <span>{{scope.row.orderSn}}</span>
              </template>
            </el-table-column>

            <!-- 入场支付方式 -->
            <el-table-column align="center" label="支付方式">
              <template scope="scope">
                <span v-if="scope.row.payType === 1">微信支付</span>
                <span v-if="scope.row.payType === 2">会员卡</span>
              </template>
            </el-table-column>

            <!-- 价格 -->
            <el-table-column align="center" label="价格">
              <template scope="scope">
                <span>{{scope.row.price}}</span>
              </template>
            </el-table-column>

            <!-- 进场时间 -->
            <el-table-column align="center" label="进场时间">
              <template scope="scope">
                <span>{{scope.row.createdTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
              </template>
            </el-table-column>

          <el-table-column label="操作" align="center" width="150">
            <template scope="scope">
              <el-button size="small" type="text" @click="handleEdit(scope.row.id)">查看</el-button>
            </template>
          </el-table-column>
        </Pagination>
      </el-tab-pane>
      <el-tab-pane label="金额记录" name="2">

        <!-- 列表数据 -->
        <Pagination uri="/member/money/logs" :request-params="params" ref="pagination">

            <!-- 类型 -->
            <el-table-column align="center" label="类型">
              <template scope="scope">
                <span v-if="scope.row.type === 1">进场</span>
                <span v-if="scope.row.type === 2">购买会员卡</span>
                <span v-if="scope.row.type === 3">购买课程</span>
                <span v-if="scope.row.type === 4">充值</span>
                <span v-if="scope.row.type === 5">退款</span>
                <span v-if="scope.row.type === 6">提现申请</span>
                <span v-if="scope.row.type === 7">提现失败</span>
                <span v-if="scope.row.type === 8">提现审核通过</span>
                <span v-if="scope.row.type === 9">单次扣款</span>
              </template>
            </el-table-column>

            <!-- 金额 -->
            <el-table-column align="center" label="金额">
              <template scope="scope">
                <span>{{scope.row.money}}</span>
              </template>
            </el-table-column>

            <!-- 用户ID -->
            <el-table-column align="center" label="用户昵称">
              <template scope="scope">
                <span>{{scope.row.nickname}}</span>
              </template>
            </el-table-column>

            <!-- 记录时间 -->
            <el-table-column align="center" label="记录时间">
              <template scope="scope">
                <span>{{scope.row.createdTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
              </template>
            </el-table-column>
        </Pagination>
      </el-tab-pane>
      <el-tab-pane label="用户会员卡" name="3">
        <!-- 列表数据 -->
        <Pagination uri="/member/cards" :request-params="params" ref="pagination">

            <!-- 用户ID -->
            <el-table-column align="center" label="用户昵称">
              <template scope="scope">
                <span>{{scope.row.nickname}}</span>
              </template>
            </el-table-column>

            <!-- 会员卡类型 -->
            <el-table-column align="center" label="会员卡类型">
              <template scope="scope">
                <span>{{scope.row.cardType}}</span>
              </template>
            </el-table-column>

            <!-- 场馆类型 -->
            <el-table-column align="center" label="场馆类型">
              <template scope="scope">
                <span v-if="scope.row.veneuType === 1">篮球馆</span>
                <span v-if="scope.row.veneuType === 2">健身馆</span>
                <span v-if="scope.row.veneuType === 2">足球场</span>
              </template>
            </el-table-column>

            <!-- 场馆名称 -->
            <el-table-column align="center" label="场馆名称">
              <template scope="scope">
                <span>{{scope.row.name}}</span>
              </template>
            </el-table-column>

            <!-- 有效开始时间 -->
            <el-table-column align="center" label="有效开始时间">
              <template scope="scope">
                <span>{{scope.row.startTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
              </template>
            </el-table-column>

            <!-- 有效结束时间 -->
            <el-table-column align="center" label="有效结束时间">
              <template scope="scope">
                <span>{{scope.row.endTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
              </template>
            </el-table-column>

            <!-- 创建时间 -->
            <el-table-column align="center" label="创建时间">
              <template scope="scope">
                <span>{{scope.row.createdTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
              </template>
            </el-table-column>
        </Pagination>
      </el-tab-pane>
      <el-tab-pane label="用户信息" name="4">

        <div class="app-container app-edit">
          <el-form class="small-space" :model="form" :rules="rules" ref="form" label-position="right">

            <el-card class="box-card">
              <el-row>
                <el-col :span="8">
                  <el-col :span="8" class="span-fost">用户姓名: </el-col>
                  <span v-text="form.name"></span>
                </el-col>
                <el-col :span="8">
                  <el-col :span="8" class="span-fost">性别: </el-col>
                  <span v-if="form.sex === 1">女</span>
                  <span v-if="form.sex === 0">男</span>
                  <span v-if="form.sex === 2">未知</span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-col :span="8" class="span-fost">用户昵称:</el-col>
                  <span v-text="form.nickname"></span>
                </el-col>
                <el-col :span="8">
                  <el-col :span="8" class="span-fost">余额: </el-col>
                  <span v-text="form.money"></span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-col :span="8" class="span-fost">手机号: </el-col>
                  <span v-text="form.mobile"></span>
                </el-col>
                <el-col :span="8">
                  <el-col :span="8" class="span-fost">年龄: </el-col>
                  <span v-text="form.age"></span>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-col :span="8" class="span-fost">居住地: </el-col>
                  <span v-text="form.address"></span>
                </el-col>
                <el-col :span="8">
                  <el-col :span="8" class="span-fost">状态: </el-col>
                  <span v-if="form.status === 0">正常</span>
                  <span v-if="form.status === 1">禁用</span>
                </el-col>
              </el-row>
              <el-row style="margin-top:20px;">
                <el-col :span="8">
                  <el-col :span="8" class="span-fost">人脸识别采集照片: </el-col>
                  <img v-if="form.faceUrl" :src="form.faceUrl" style="width:80px;height:80px;margin-left:25px;margin-top:20px;cursor:pointer;" @click="showimg"/>
                  <span v-if="!form.faceUrl">暂无照片</span>
                </el-col>
              </el-row>
            </el-card>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>

  <el-dialog :visible.sync="dialogFormVisible" style=" margin-top:0">
    <el-form :model="form" ref="form" style="text-align: center;">
      <img :src="form.faceUrl" style="width:30%;height:30%;"/>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">关  闭</el-button>
    </div>
  </el-dialog>
</div>
</template>

<style>
.el-row{
  margin-bottom : 10px;
}
.span-fost{
  text-align: right;
  margin-right: 20px;
}
</style>

<script>
import { remove } from '@/api//member/enter/veneu/log'
import { } from '@/api//member/money/log'
import waves from '@/directive/waves.js'// 水波纹指令
import Pagination from '@/components/Pagination'
import Status from '@/components/Status'
import { } from '@/api//member/card'
import { find } from '@/api//member'

export default {
  name: 'memberEnterVeneuLog_list',
  components: { Pagination, Status },
  directives: {
    waves
  },
  data() {
    return {
      dialogFormVisible: false,
      activeName: '1',
      params: {
        memberId: undefined,
        orderSn: '',
        starTime: '',
        endTime: '',
        search_eq_memberId: undefined
      },
      form: {
        id: undefined,
        name: '',
        nickname: '',
        sex: '',
        money: '',
        mobile: '',
        age: '',
        address: '',
        avatar: '',
        faceUrl: '',
        status: ''
      },
      rules: { }
    }
  },
  created() {
    if (this.$route.query.id) {
      this.params.memberId = this.$route.query.id
    }
  },
  methods: {

    /**
     * 查询篮球进场订单
     */
    findByIds(id) {
      find(id).then(response => {
        this.form.name = response.member.name
        this.form.nickname = response.member.nickname
        this.form.sex = response.member.sex
        this.form.money = response.member.money
        this.form.mobile = response.member.mobile
        this.form.age = response.member.age
        this.form.address = response.member.address
        this.form.status = response.member.status
        this.form.avatar = response.member.avatar
        this.form.faceUrl = response.member.faceUrl
      })
    },

    showimg() {
      this.dialogFormVisible = true
    },

    /**
     * 搜索篮球进场订单
     */
    handleSearch() {
      this.$refs.pagination.handleSearch()
    },

    handleClick(tab, event) {
      if (tab.index === '0') {
        this.params.payStatus = undefined
        this.$refs.pagination.pageRequest()
      }
      if (tab.index === '1') {
        this.params.payStatus = undefined
        this.params.search_eq_memberId = this.$route.query.id
        this.$refs.pagination.pageRequest()
      }
      if (tab.index === '2') {
        this.params.payStatus = undefined
        this.params.search_eq_memberId = this.$route.query.id
        this.$refs.pagination.pageRequest()
      }
      if (tab.index === '3') {
        this.form.id = this.$route.query.id
        this.findByIds(this.form.id)
      }
    },

    /**
     * 编辑篮球进场订单
     */
    handleEdit(id) {
      this.$router.push({ path: '/member/enter/veneu/log/edit', query: { id: id }})
    },

    /**
     * 创建篮球进场订单
     */
    handleCreate() {
      this.$router.push({ path: '/member/enter/veneu/log/edit' })
    },

    /**
     * 删除篮球进场订单
     */
    handleDelete(row) {
      this.$confirm('确认删除该篮球进场订单？').then(_ => {
        remove(row.id).then(response => {
          this.$refs.pagination.removeItem(row)
        })
      }).catch(_ => {})
    }
  }
}
</script>
