<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.status === 0">未签到</span>
            <span v-if="form.status === 1">已签到</span>
            <span v-if="form.status === 2">已取消</span>
            <span v-if="form.status === 3">已过期未签到</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.lessonname"></span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-col :span="8" class="span-fost">支付金额:</el-col>
            <span v-text="form.price"></span>
          </el-col>
          <el-col :span="8">
            <el-col :span="8" class="span-fost">场馆: </el-col>
            <span v-text="form.name"></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.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.cardType"></span>
          </el-col>
          <el-col :span="8">
            <el-col :span="8" class="span-fost">上课时间: </el-col>
            <span>{{form.venueLesson.date}} {{form.venueLesson.startTime}}-{{form.venueLesson.endTime}}</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-col :span="8">
            <el-col :span="8" class="span-fost">外部订单号: :</el-col>
            <span v-text="form.tradeSn"></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/lesson/ticket'

export default {
  data() {
    return {
      form: {
        id: undefined,
        nickname: '',
        veneuType: '',
        cardType: '',
        price: '',
        createdTime: '',
        lessonname: '',
        name: '',
        tradeSn: '',
        parentOrderId: '',
        ticketId: '',
        ticket: '',
        memberId: '',
        orderSn: '',
        payType: '',
        memberCardId: '',
        payStatus: '',
        status: 1,
        platformId: '',
        venueLesson: undefined
      },

      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.veneuType = response.memberLessonTicket.veneuType
        this.form.venueId = response.memberLessonTicket.venueId
        this.form.ticketId = response.memberLessonTicket.ticketId
        this.form.ticket = response.memberLessonTicket.ticket
        this.form.createdTime = response.memberLessonTicket.createdTime
        this.form.memberId = response.memberLessonTicket.memberId
        this.form.orderSn = response.memberLessonTicket.orderSn
        this.form.payType = response.memberLessonTicket.payType
        this.form.memberCardId = response.memberLessonTicket.memberCardId
        this.form.payStatus = response.memberLessonTicket.payStatus
        this.form.status = response.memberLessonTicket.status
        this.form.platformId = response.memberLessonTicket.platformId
        this.form.nickname = response.memberLessonTicket.nickname
        this.form.name = response.memberLessonTicket.name
        this.form.price = response.memberLessonTicket.price
        this.form.lessonname = response.memberLessonTicket.lessonname
        this.form.cardType = response.memberLessonTicket.cardType
        this.form.parentOrderId = response.memberLessonTicket.parentOrderId
        this.form.tradeSn = response.memberLessonTicket.tradeSn
        this.form.venueLesson = response.memberLessonTicket.venueLesson
      })
    },

    /**
     * 保存预约场馆课程订单
     */
    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>
