<template>
  <div>
    <el-form label-width="80px" min-width="820px"
    label-position="right"
    :inline="true"
    :model="buyForm" status-icon :rules="rules" ref="elForm" v-if="canpay">
    <el-row>
      <el-col :lg="12" class="pl20 pr20">
        <el-form-item lable="报考岗位" prop="courseName">
          <label slot="label">报考岗位</label>
          <el-input v-model="buyForm.courseName" type="text" placeholder="报考岗位" style="width: 220px;"></el-input>
        </el-form-item>

      </el-col>

      <el-col :lg="12" class="pl20 pr20">
        <el-form-item lable="证书编号" prop="rzCode">
          <label slot="label">证书编号</label>
          <el-input v-model="buyForm.rzCode" type="text" placeholder="证书编号" style="width: 220px;"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <span style="color: red;padding:10px"> 请认真核实报考岗位与证书编号，本课程不支持退款</span>
    </el-row>
    <el-row>
      <el-col :lg="12" class="pl20 pr20">
        <el-form-item lable="邮箱地址" prop="email">
          <label slot="label">邮箱地址</label>
          <el-input v-model="buyForm.email" type="textarea" placeholder="邮箱地址" style="width: 220px;"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12" class="pl20 pr20">
        <el-form-item lable="订单号" prop="payNo">
          <label slot="label">订单编号</label>
          <el-input v-model="buyForm.payNo" placeholder="输入订单编号后6位" style="width: 220px;" :minlength="6" :maxlength="6" show-word-limit ></el-input>
        </el-form-item>
      </el-col>
    </el-row>

     <el-row>
       <el-col :span="12" class="pl20 pr20">
         <el-form-item lable="工作单位" prop="company">
           <label slot="label">工作单位</label>
           <el-input v-model="buyForm.company" type="textarea" placeholder="工作单位" style="width: 220px;"></el-input>
         </el-form-item>
       </el-col>
      <el-col :span="12" class="pl20 pr20">
        <el-form-item lable="备注信息" prop="marks">
          <label slot="label">备注信息</label>
          <el-input v-model="buyForm.marks" type="textarea" placeholder="姓名+工种名称，例：张三+土建施工员" style="width: 220px;"></el-input>
        </el-form-item>
      </el-col>

    </el-row>
    <el-row>
      <h2 class="tc"> 本课程费用: <strong style="color: red;"> {{buyForm.fee/100}} 元 </strong> </h2>
      <div style="width: 300px; margin: 0px auto;">
        <img src="/static/images/wxpay.jpg"   width="300px" @click="showImg(buyForm.buyImg)">
      </div>
    </el-row>

    <el-row>
      <el-button @click="this.$emit('finish')">取 消</el-button>
      <el-button @click="buyCourse" type="primary">确 定</el-button>
    </el-row>
  </el-form>
   <div v-else> 暂未开放支付。。。。。。 </div>
  </div>
</template>

<script>
  import {httpServer } from "@/components/httpServer/httpServer.js";
  import exampleImg from '@/assets/template.png'
  export default {
    name: "Index",
    props:['courseId'],
    data() {
      return {
        exampleImg: exampleImg,
        canpay: false,
        buyForm:{
          marks:'',
          payNo:'',
          courseId: 0,
          courseName:'',
          rzCode:'',
          name:'',
          email:''
        },
        rules: {
          rzCode: [{
            required: true,
            message: '请输入证书编号'
          }],
          payNo:[
            {
              required: true,
              message: '请输入订单编号后六位'
            }
          ],
          marks:[
            {
              required: true,
              message: '请输入备注信息'
            }
          ],
          email: [{
              required: true,
              message: '请输入有效邮箱'
            },
            {
              type: 'string',
              message: '邮箱格式不正确',
              trigger: 'blur',
              transform(value) {
                if (!/^\w+((-\w+)|(\.\w+))*@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(value)) {
                  return true
                } else {}
              }
            }
          ],
          company: [{
            required: true,
            message: '请输入所在企业'
          }],
          courseName: [{
            required: true,
            message: '请输入报考岗位'
          }]
        },
      };
    },
    watch:{
      courseId(){
        this.loadPayInfo();
      }
    },
    created(){
      this.loadPayInfo();
    },
    methods:{
      loadPayInfo(){
        let courseId = this.courseId||0;
        if( !courseId) {
          this.$message.errorMsg("还未选择课程")
          return;
        }
        // this.canpay = true;
        httpServer("weixin.docheckpay", {courseId}).then((res) => {
          if (res.code == 200) {
            Object.assign( this.buyForm, res.data||{});
            this.canpay = true;
          }else{
            this.$emit('finish');
          }
        });
      },
      buyCourse() {
        this.$refs["elForm"].validate((valid) => {
          if (!valid) return;
          let { marks, company, payNo, courseId, courseName, rzCode, name,  email} = this.buyForm;
          if (courseName != name) {
            this.$message.errorMsg("报考岗位有误", 1)
            return;
          }
          let param = { marks,payNo, company,courseId: course_id, courseName,rzCode,email }
          httpServer("course.buyCourse", param).then((res) => {
            if (res.code == 200) {
              this.$message.successMsg("申请购买成功", 1);
              this.buyForm.temp.marks = this.buyForm.marks
              this.buyForm.temp.is_pay = 0
              this.buyForm.temp.courseName = this.buyForm.courseName;
              this.buyForm.temp.rzCode = this.buyForm.rzCode
              this.$emit('finish');
              this.$refs["elForm"].resetFields();
            }
          });
        })
      },
    }
  }
</script>

<style>
</style>
