<template>
  <div class="m-right-block">
    <div class="right-block-bd" ui-view="myStudyContent" style="position: relative;">
      <div class="text-xl leading-10 pb-4 text-blue">
        <p>推荐课程</p>
      </div>

      <!-- <el-tabs @tab-click="handleClick">
        <template  v-for="item in typeList" >
          <el-tab-pane v-if="item.isOpen" :key="item.id" :label="item.name"></el-tab-pane>
        </template>
      </el-tabs> -->

      <el-tabs @tab-click="handleClick">
        <template >
          <el-tab-pane  label="三明市建设机械设备行业协会特种作业操作人员岗位培训课程"></el-tab-pane>
        </template>
      </el-tabs>

      <!-- <ul class="pt-line mt20">
        <li :span="6" v-for="item in typeList" style="width: 25%;float: left;" :key="item.id" v-if="item.isOpen">
          <span :class="{active:item.name==type }" class="nav-btn w220" @click="type=item.name">{{item.name}} </span>
        </li>
      </ul> -->

      <el-row class="mt-4" :gutter="48" v-if="list && list.length > 0">
        <el-col :span="8" v-for="(item, index) in list" :key="item.course_id">
          <el-card class="mb-6">
            <div class="h-48 overflow-hidden relative">
              <img :src="item.tb" class="image object-cover">
              <el-tag class="absolute right-2 top-2" type="info" v-if="item.is_pay==0 && item.buyImg =='' && item.payNo == ''">还未购买</el-tag>
              <el-tag class="absolute right-2 top-2" type="warning" v-else-if="item.is_pay==0">等待审核</el-tag>
              <el-tag class="absolute right-2 top-2" type="danger" v-else-if="item.is_pay==2">申请驳回</el-tag>
              <el-tag class="absolute right-2 top-2" v-else-if="!item.is_pass">在学习中</el-tag>
              <el-tag class="absolute right-2 top-2" type="success" v-else>已经完成</el-tag>
            </div>
            <div class="flex py-4 px-4  items-center justify-between">
              <span>{{item.name}}</span>
              <span style="color: #409EFF;" @click="gotoPlay(item.course_id)" v-if="item.is_pay==1">进入学习</span>
              <span style="color: #409EFF;" @click="goPay(index)" v-else-if="item.is_pay==2 || !!item.buyImg">补充材料</span>
              <span style="color: #409EFF;" @click="goPay(index)" v-else>购买课程</span>
            </div>
            <div class="py-2 px-6 text-sm flex">
              <div class="w-1/2 text-left">学时: {{item.xs/10}}</div>
              <div class="w-1/2  text-right">年度: {{item.nd||'2022'}}</div>
            </div>
            <div class="py-2 px-6 text-sm flex">
            </div>
        <!--    <div class="py-2 px-6 text-sm flex">
              <div class="w-1/2">费用: ￥{{item.fee/100}}元</div>
              <div class="w-1/2">学时: {{item.xs/10}}</div>
            </div> -->
          </el-card>
        </el-col>
      </el-row>
      <div v-else class="flex w-auto h-72 justify-center items-center text-gray-300 text-lg">
        暂无信息
      </div>

      <el-pagination  v-if="total" class="m-pages" @current-change="handleCurrentChange" :current-page="page" :page-size="size"
        layout="total, prev, pager, next" :total="total">
      </el-pagination>

    </div>


    <el-dialog title="申请开通课程"  :visible.sync="buyCourseDialog" :append-to-body="true"
    width="800px" top="20px" align="center">
      <el-form label-width="80px" label-position="right" :inline="true" :model="buyForm" status-icon :rules="rules" ref="elForm">
        <el-row align="left">
          <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>
            <span style="color: red;padding:10px"> 请认真核实报考岗位与证书编号，本课程不支持退款</span>
          </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 class="tc fc">
          <el-form-item >
            <el-button @click="buyCourseDialog=false">取 消</el-button>
            <el-button @click="buyCourse" type="primary">确 定</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
  import {
    httpServer
  } from "@/components/httpServer/httpServer.js";

  import promise from "./promise.js";
  import {
    MessageBox
  } from "element-ui";
  import unLogin from "../../login/components/unLogin.vue";
  import {
    parseTime
  } from "@/utils";
  import DoUpload from '@/components/upload/index.vue'
  import exampleImg from '@/assets/template.png'


  import {
    mapGetters,
    mapActions
  } from "vuex";

  export default {
    name: "Index",
    data() {
      return {
        page: 1,
        size: 6,
        total: 0,
        stage: 0,
        isCompanyPay: 0,
        width: "",
        type: '',
        list: [],
        showData: [],
        isCommitment: "",
        buyCourseDialog: false,
        showExample: false,
        showImgDialog: false,
        buyForm: {
          marks: '',
          rzCode: '',
          payNo:'',
          email:'',
          company:'',
          courseName: ''
        },
        promise,
        imgUrl: '',
        qrcodeUrl: "",
        outTradeNo: "",
        courseFee: 0,
        title: '',
        timer: null,
        tickCount: 0,
        listLoading: false,
        loginDialog: false,
        isLoginOk: false,
        media: {},
        commitmentDialog: false,
        exampleImg: exampleImg,
        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: '请输入报考岗位'
          }]
        },
        errorImg: 'this.src="' + require('../../../assets/images/no-data_hash5abcd2ef62.png') + '"'
      };
    },
    computed: {
      ...mapGetters("user", ["typeList", "userInfo"])
    },
    components: {
      unLogin,
      DoUpload
    },
    filters: {
      dateFilter(val) {
        return parseTime(val, '{y}-{m}-{d}')
      }
    },
    watch: {
      type(val) {
        this.page = 1
        this.getData()
      },
      isCommitment(val) {
        console.log(val)
      }
    },
    beforeMount() {
      this.type = this.$route.query.type
      if (!this.type && this.typeList.length > 0) {
        for( let i in this.typeList){
          let item = this.typeList[i];
          if( item.isOpen ==1){
            this.type = item.name
            this.getData()
            return;
          }
        }
      }
    },
    beforeDestroy() {
      if (this.timer) window.clearInterval(this.timer);
    },
    methods: {
      handleClick(tab){
        // this.type = tab.label;
      },
      showImg(url) {
        if (!url) return;
        this.imgUrl = url;
        this.showImgDialog = true;
      },
      closeDialog() {
        if (this.timer) window.clearInterval(this.timer);
      },
      onLoad(e) {
        const img = e.target;
        let width = 0;
        if (img.fileSize > 0 || (img.width > 1 && img.height > 1)) {
          width = img.width + 40;
        }
        this.width = width + "px";
      },
      getData() {
        if (!this.type) return;
        let param = {
          size: this.size,
          type: this.type,
          from: (this.page - 1) * this.size
        }
        httpServer("course.getcoursemarket", param).then((res) => {
          if (res.code == 200) {
            this.list = res.data.list;
            this.total = res.data.total;
          }
        });
      },
      buyCourse() {
        this.$refs["elForm"].validate((valid) => {
          if (!valid) return;
          let { marks, company, payNo, course_id, 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.buyCourseDialog = false
            }
          });
        })
      },
      gotoDetail(courseId) {
        this.$router.push(`/main/course/${courseId}`);
      },
      uploadBuyImg(url) {
        this.buyForm.buyImg = url;
      },
      goPay(index) {
        let item = this.list[index];
        this.buyForm = Object.assign({}, item)
        this.buyForm.company = this.userInfo.company;
        this.buyForm.temp = item;
        httpServer("weixin.docheckpay", {
          courseId: item.course_id
        }).then((res) => {
          if (res.code == 200) {
            this.stage = 2;
            this.isCompanyPay = 0;
            Object.assign( this.buyForm, res.data);
            this.commitmentDialog = true;
          }
        });
      },
      gotoPlay(courseId) {
        this.$router.push(`/center/class/train`);
      },
      handleCurrentChange(page) {
        this.page = page;
        this.getData()
      },
      login(param) {
        httpServer("Auth.LoginStudy", param).then(res => {
          if (res.code == 200) {
            let {
              nickname,
              token,
              uid
            } = res.data;
            localStorage.nickname = nickname;
            localStorage.token = token;
            localStorage.uid = uid
            this.user = {
              nickname,
              token,
              uid
            };
            this.loginOk = true
            this.loginDialog = false
          }
        })
      }
    },
  };
</script>
<style>
  @import "../../../assets/css/content.css";
  @import "../../../assets/css/course.css";
  @import url("./index.css");

  .buyForm-title {
    width: 90px;
    padding: 2px;
    text-align: center;
  }

  .commitment-header {
    font-size: 16px;
    text-align: left;
  }

  .commitment {
    text-indent: 30px;
    margin-top: 20px;
    font-size: 16px;
    line-height: 200%;
  }

  .commitment-footer {
    margin-top: 30px;
    text-indent: 50px;
    font-size: 16px;
    text-align: left;
  }

  .commitment-content {
    font-size: 16px;
  }
</style>
<style lang="less" scoped>
.el-card{
  & /deep/ .el-card__body{
    padding: 0;
  }
}
</style>
