<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="10" style="">
            <el-col  :span="5" style="" >用户昵称: </el-col>
            <span v-text="form.nickname" @click="handleEdit(form.memberId)" style="cursor:pointer;color: blue;"></span>
          </el-col>
          <el-col :span="5">
            <el-col  :span="10" >　&nbsp;　&nbsp;价 格: </el-col>
            <span v-text="form.price"></span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-col  :span="5" >支付状态: </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="10">
            <el-col  :span="5" >　&nbsp;　&nbsp;场 馆: </el-col>
            <span v-text="form.name"></span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-col  :span="5" >场馆类型: </el-col>
             <span v-if="form.veneuType === 1">篮球馆</span>
            <span v-if="form.veneuType === 2">健身馆</span>
          </el-col>
          <el-col :span="10">
            <el-col  :span="5" >　&nbsp;&nbsp; 订单号: </el-col>
            <span v-text="form.orderSn"></span>
          </el-col>
        </el-row>
        <el-row>
          
          <el-col :span="10">
            <el-col  :span="5" >支付时间: </el-col>
            <span>{{form.payTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
          </el-col>
          
          <el-col :span="10">
            <el-col  :span="5" >会员卡类型: </el-col>
             <span v-text="form.cardType"></span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-col  :span="5" >下单时间: </el-col>
              <span>{{form.createdTime | parseTime('{y}-{m}-{d} {h}:{i}')}}</span>
          </el-col>
          <el-col :span="10">
            <el-col  :span="5" >外部订单号: </el-col>
            <span v-text="form.tradeSn"></span>
          </el-col>
        </el-row>
      </el-card>
    </el-form>
  </div>
</template>

<style>
.el-row {
  margin-bottom: 15px;
}
</style>

<script>
import { find, save } from '@/api//member/card/order'

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

      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.payStatus = response.memberCardOrder.payStatus
        this.form.memberId = response.memberCardOrder.memberId
        this.form.cardType = response.memberCardOrder.cardType
        this.form.veneuType = response.memberCardOrder.veneuType
        this.form.venueId = response.memberCardOrder.venueId
        this.form.orderSn = response.memberCardOrder.orderSn
        this.form.platformId = response.memberCardOrder.platformId
        this.form.name = response.memberCardOrder.name
        this.form.nickname = response.memberCardOrder.nickname
        this.form.tradeSn = response.memberCardOrder.tradeSn
        this.form.price = response.memberCardOrder.price
        this.form.createdTime = response.memberCardOrder.createdTime
        this.form.payTime = response.memberCardOrder.payTime
      })
    },

    /**
     * 保存会员卡订单
     */
    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>
