<template>
  <div class="app-container app-edit">
    <el-form class="small-space" :model="form" :rules="rules" ref="form" label-position="right">
      <el-form-item>
        <el-button style="float: right;margin-top: -25px;" @click="handleCancel">返回</el-button>
      </el-form-item>

      <el-card class="box-card">
        <el-row>
          <el-col :span="8">
            <el-col :span="8" class="span-fost">用户昵称:</el-col>
            <span v-text="form.nickname" @click="handleEdit(form.memberId)" style="cursor:pointer;color: blue;"></span>
          </el-col>
          <el-col :span="8">
            <el-col :span="8" class="span-fost">场馆类型: </el-col>
            <span v-if="form.veneuType === 1">篮球馆</span>
            <span v-if="form.veneuType === 2">健身馆</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-col :span="8" class="span-fost">支付状态: </el-col>
            <span v-if="form.payStatus === -1">已取消</span>
            <span v-if="form.payStatus === 0">未支付</span>
            <span v-if="form.payStatus === 1">已支付</span>
          </el-col>
          <el-col :span="8">
            <el-col :span="8" class="span-fost">订单号: </el-col>
            <span v-text="form.orderSn"></span>
          </el-col>
        </el-row>
        <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-text="form.price"></span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-col :span="8" class="span-fost">下单时间: </el-col>
            <span>{{form.createdTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
          </el-col>
          <el-col :span="8">
            <el-col :span="8" class="span-fost">外部订单号: </el-col>
            <span v-text="form.tradeSn"></span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-col :span="8" class="span-fost">入场支付方式: </el-col>
            <span v-if="form.payType === 1">微信支付</span>
            <span v-if="form.payType === 2">会员卡</span>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
  </div>
</template>

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

<script>
import { find, save } from '@/api//member/enter/veneu/log'

export default {
  data() {
    return {
      form: {
        id: undefined,
        veneuType: '',
        orderSn: '',
        nickname: '',
        payStatus: '',
        name: '',
        price: '',
        createdTime: '',
        tradeSn: '',
        payType: ''
      },

      onSubmit: false,

      // 表单验证规则
      rules: {
//        mobile: [
//          { required: true, message: '请输入手机号码', trigger: 'blur' }
//        ],
//        username: [
//          { required: true, message: '请输入姓名', trigger: 'blur' },
//          { max: 15, message: '姓名长度不能超过15个字符', trigger: 'blur' }
//        ],
//        email: [
//          { required: true, message: '请输入邮箱', trigger: 'blur' },
//          { type: 'email', message: '您输入的邮箱格式不正确', trigger: 'blur' }
//        ],
//        password: [
//          { required: true, message: '请输入密码', trigger: 'blur' },
//          { min: 6, message: '密码长度不能少于6个字符', trigger: 'blur' }
//        ]
      }
    }
  },
  created() {
    if (this.$route.query.id) {
      this.form.id = this.$route.query.id
      this.findById(this.form.id)
    }
  },
  methods: {
    /**
     * 查询篮球进场订单
     */
    findById(id) {
      find(id).then(response => {
        this.form.memberId = response.memberEnterVeneuLog.memberId
        this.form.veneuType = response.memberEnterVeneuLog.veneuType
        this.form.venueId = response.memberEnterVeneuLog.venueId
        this.form.orderSn = response.memberEnterVeneuLog.orderSn
        this.form.orderSn = response.memberEnterVeneuLog.orderSn
        this.form.payType = response.memberEnterVeneuLog.payType
        this.form.nickname = response.memberEnterVeneuLog.nickname
        this.form.payStatus = response.memberEnterVeneuLog.payStatus
        this.form.name = response.memberEnterVeneuLog.name
        this.form.price = response.memberEnterVeneuLog.price
        this.form.createdTime = response.memberEnterVeneuLog.createdTime
        this.form.tradeSn = response.memberEnterVeneuLog.tradeSn
      })
    },

    /**
     * 保存篮球进场订单
     */
    handleSave() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return false
        }

        this.onSubmit = true
        save(this.form).then(response => {
          this.$router.go(-1)
        }).finally(() => {
          this.onSubmit = false
        })
      })
    },

    /**
     * 跳到用户详情
     */
    handleEdit(id) {
      this.$router.push({ path: '/member/edit', query: { id: id }})
    },

    /**
     * 取消
     */
    handleCancel() {
      this.$router.go(-1)
    }
  }
}
</script>
