<template>
  <div>
    <div class="right-block-bd">
      <div class="mb20 tc mt20">
        <div class="fr p10">
          <el-button type="primary"  @click="showPrevNotice=true" >报考须知</el-button>

          <el-select  placeholder="请选择科目" clearable style="width: 140px;" v-model="courseId">
            <el-option v-for="item in courses"
            v-if="item.applyId<1"
            :label="item.courseName"
            :value="item.courseId"
            :key="item.courseId">
            </el-option>
          </el-select>
          <el-button type="primary" @click="doApplyCourse"   >报考科目</el-button>

        </div>

        <span class="p-ico2 worm-ico-o"></span>
        注：<span class="txt-o"></span>审核通过后，请前往推荐课程处购买对应课程学习
      </div>

      <div  class="ng-scope">
        <el-table v-loading="listLoading" :data="list" border fit highlight-current-row>

          <el-table-column label="申请序号" align="center" prop="applyId" width="100">

          </el-table-column>

          <el-table-column label="报考科目" align="center" prop="courseName" width="210">
            <template slot-scope="{row, $index}">
              <div v-if="row._edit">
                <el-select v-model="row.courseId"
                  style="width: 150px;"
                  @change="changeCourse(row)" >
                       <el-option v-for="item in courses"
                       v-if="item.applyId<1 || item.courseId == row.courseId"
                       :label="item.courseName"
                       :value="item.courseId"
                       :key="item.courseId">
                       </el-option>
                     </el-select>
                  <el-button type="text" icon="el-icon-close" @click="row._edit=false"></el-button>
              </div>
              <div v-else>
                <span>{{row.courseName}}</span>
                <el-button type="text" icon="el-icon-edit" @click="row._edit=true" v-if="row.isSubmit !=1 && row.confirm!=1" ></el-button>
              </div>

            </template>
          </el-table-column>


          <el-table-column label="考试类型" align="center" width="180">
            <template slot-scope="{row, $index}">
              <span>施工现场专业人员</span>
            </template>
          </el-table-column>

          <el-table-column label="申请时间" align="center" prop="createAt" width="160">
          </el-table-column>

          <el-table-column label="审核结果" align="center" prop="confirm" width="110" >
            <template slot-scope="{row}">
              <span v-if="row.confirm==1">通过</span>
              <span v-else-if="row.isSubmit==1">待审核</span>
              <span v-else-if="row.isSubmit==2">退回修改</span>
              <span v-else>未提交</span>
            </template>
          </el-table-column>

          <el-table-column label="操作" fixed="right" align="center" width="160">
            <template slot-scope="{row, $index}" >
              <el-button @click="gotoDetail( row )" type="text" size="small" v-if="canEdit(row)">
                维护信息
              </el-button>
              <el-popover :ref="`popover-${$index}`" v-if="canEdit(row)">
                <p style="height: 20px;">次动作不可逆，是否确认删除？</p>
                <div align="center">
                  <el-button size="mini" type="text" @click="_self.$refs[`popover-${$index}`].doClose()">取消</el-button>
                  <el-button type="primary" size="mini" @click="delApplyInfo(row.applyId, $index)">确定</el-button>
                </div>
                <el-button  type="text" style="color: red;margin-left: 20px;" slot="reference">删除</el-button>
              </el-popover>

            </template>
          </el-table-column>
        </el-table>

        <el-pagination
            @current-change="handleCurrentChange"
            :current-page="page"
           :page-size="size"
           :style="{float:'center',padding:'20px'}"
           layout="total, prev,pager, next"
           :total="list.length">
        </el-pagination>

      </div>
    </div>


    <el-dialog
      title="报考须知"
      class="tl tc"
      :visible.sync="showPrevNotice"
      width="1024px"
      :append-to-body="true"
      @close="showPrevNotice= false"
    >
       <div id="tinymce" class="mce-content-body panel-body tl"
        data-id="vue-tinymce-1632292014191647"
        contenteditable="true" spellcheck="false"><p class="cjk"><span style="font-family: 宋体;"><span style="font-size: large;">凡年满</span></span><span style="font-family: Calibri, serif;"><span lang="en-US"><span style="font-family: 宋体, serif;"><span style="font-size: large;">20</span></span></span></span><span style="font-family: 宋体;"><span style="font-size: large;">周岁，且男性不超过</span></span><span style="font-family: Calibri, serif;"><span lang="en-US"><span style="font-family: 宋体, serif;"><span style="font-size: large;">60</span></span></span></span><span style="font-family: 宋体;"><span style="font-size: large;">周岁、女性不超过</span></span><span style="font-family: Calibri, serif;"><span lang="en-US"><span style="font-family: 宋体, serif;"><span style="font-size: large;">55</span></span></span></span><span style="font-family: 宋体;"><span style="font-size: large;">周岁，身体健康，并具备下列条件之一的企业在岗人员，均可自愿报名参加。</span></span><span style="color: #0070c0;"><span style="font-family: 宋体;"><span style="font-size: large;">各职业岗位土建类本专业、相关专业对应详见附件</span></span><span style="font-family: Calibri, serif;"><span lang="en-US"><span style="font-family: 宋体, serif;"><span style="font-size: large;">D</span></span></span></span><span style="font-family: 宋体;"><span style="font-size: large;">（学历专业对应）。</span></span></span></p><p class="cjk"><span style="font-family: Calibri, serif;"><span lang="en-US"><span style="font-family: 宋体, serif;"><span style="font-size: large;">1</span></span></span></span><span style="font-family: 宋体;"><span style="font-size: large;">．具有土建类本专业专科及以上学历，</span></span><span style="font-family: Calibri, serif;"><span lang="en-US"><span style="font-family: 宋体, serif;"><span style="font-size: large;">1</span></span></span></span><span style="font-family: 宋体;"><span style="font-size: large;">年以上从事与本岗位相关工作经历；</span></span></p><p class="cjk"><span style="font-family: Calibri, serif;"><span lang="en-US"><span style="font-family: 宋体, serif;"><span style="font-size: large;">2</span></span></span></span><span style="font-family: 宋体;"><span style="font-size: large;">．具有土建类相关专业专科及以上学历，</span></span><span style="font-family: Calibri, serif;"><span lang="en-US"><span style="font-family: 宋体, serif;"><span style="font-size: large;">2</span></span></span></span><span style="font-family: 宋体;"><span style="font-size: large;">年以上从事与本岗位相关工作经历；</span></span></p><p class="cjk"><span style="font-family: Calibri, serif;"><span lang="en-US"><span style="font-family: 宋体, serif;"><span style="font-size: large;">3</span></span></span></span><span style="font-family: 宋体;"><span style="font-size: large;">．具有土建类本专业中职学历，</span></span><span style="font-family: Calibri, serif;"><span lang="en-US"><span style="font-family: 宋体, serif;"><span style="font-size: large;">3</span></span></span></span><span style="font-family: 宋体;"><span style="font-size: large;">年以上从事与本岗位相关工作经历；</span></span></p><p class="cjk"><span style="font-family: Calibri, serif;"><span lang="en-US"><span style="font-family: 宋体, serif;"><span style="font-size: large;">4</span></span></span></span><span style="font-family: 宋体;"><span style="font-size: large;">．具有土建类相关专业中职学历，</span></span><span style="font-family: Calibri, serif;"><span lang="en-US"><span style="font-family: 宋体, serif;"><span style="font-size: large;">4</span></span></span></span><span style="font-family: 宋体;"><span style="font-size: large;">年以上从事与本岗位相关工作经历；</span></span></p><p class="cjk"><span style="font-family: Calibri, serif;"><span lang="en-US"><span style="font-family: 宋体, serif;"><span style="font-size: large;">5</span></span></span></span><span style="font-family: 宋体;"><span style="font-size: large;">．具有非土建类中职及以上学历，</span></span><span style="font-family: Calibri, serif;"><span lang="en-US"><span style="font-family: 宋体, serif;"><span style="font-size: large;">4</span></span></span></span><span style="font-family: 宋体;"><span style="font-size: large;">年以上从事与本岗位相关工作经历</span></span><span style="color: #0070c0;"><span style="font-family: 宋体;"><span style="font-size: large;">（此条件限报考：材料员、劳务员、资料员）</span></span></span><span style="font-family: 宋体;"><span style="font-size: large;">。</span></span></p><p class="cjk" align="center"><br></p><p class="cjk"><br></p><p class="cjk"><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: large;">附录</span></span><span style="font-family: Calibri, serif;"><span lang="en-US"><span style="font-family: 宋体, serif;"><span style="font-size: large;">D</span></span></span></span></span></p><p class="cjk" align="center"><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: xx-large;"><strong>各职业岗位土建类本专业、相关专业对应表</strong></span></span></span></p><table border="1" width="950px"><colgroup><col width="42"> <col width="140"> <col width="319"> <col width="422"> </colgroup><tbody><tr><td width="42" height="63"><p align="center"><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: medium;"><strong>序号</strong></span></span></span></p></td><td width="140"><p align="center"><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: medium;"><strong>学历层次</strong></span></span></span></p></td><td width="319"><p align="center"><span style="color: #000000;"> <span style="font-family: 宋体;"><span style="font-size: medium;"><strong>施工员、质量员、</strong></span></span></span></p><p align="center"><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: medium;"><strong>标准员、机械员</strong></span></span></span></p></td><td width="422"><p align="center"><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: medium;"><strong>材料员、劳务员、资料员</strong></span></span></span></p></td></tr><tr><td width="42" height="69"><p align="center"><span style="color: #000000;"><span style="font-family: 宋体, serif;"><span style="font-size: medium;"><span lang="en-US">1</span></span></span></span></p></td><td width="140"><p align="center"><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: medium;">土建类研究生本专业</span></span></span></p></td><td width="319"><p><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: medium;">土木工程（一级学科）、建筑与土木工程（工程硕士）</span></span></span></p></td><td width="422"><p><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: medium;">土木工程（一级学科）、管理科学与工程、建筑与土木工程（工程硕士）</span></span></span></p></td></tr><tr><td width="42" height="70"><p align="center"><span style="color: #000000;"><span style="font-family: 宋体, serif;"><span style="font-size: medium;"><span lang="en-US">2</span></span></span></span></p></td><td width="140"><p align="center"><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: medium;">土建类本科</span></span></span></p><p align="center"><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: medium;">本专业</span></span></span></p></td><td width="319"><p><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: medium;">土木工程、建筑环境与设备工程、给水排水工程、工程管理</span></span></span></p></td><td width="422"><p><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: medium;">土木工程、建筑环境与设备工程、给水排水工程、工程管理</span></span></span></p></td></tr><tr><td width="42" height="69"><p align="center"><span style="color: #000000;"><span style="font-family: 宋体, serif;"><span style="font-size: medium;"><span lang="en-US">3</span></span></span></span></p></td><td width="140"><p align="center"><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: medium;">土建类专科</span></span></span></p><p align="center"><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: medium;">本专业</span></span></span></p></td><td width="319"><p><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: medium;">建筑设计类、土建施工类、建筑设备类、工程管理类、市政工程类</span></span></span></p></td><td width="422"><p><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: medium;">建筑设计类、土建施工类、建筑设备类、工程管理类、市政工程类、房地产类</span></span></span></p></td></tr><tr><td width="42" height="57"><p align="center"><span style="color: #000000;"><span style="font-family: 宋体, serif;"><span style="font-size: medium;"><span lang="en-US">4</span></span></span></span></p></td><td width="140"><p align="center"><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: medium;">土建类研究生相关专业</span></span></span></p></td><td width="319"><p><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: medium;">建筑学（一级学科）、管理科学与工程</span></span></span></p></td><td width="422"><p><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: medium;">建筑学（一级学科）</span></span></span></p></td></tr><tr><td width="42" height="33"><p align="center"><span style="color: #000000;"><span style="font-family: 宋体, serif;"><span style="font-size: medium;"><span lang="en-US">5</span></span></span></span></p></td><td width="140"><p align="center"><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: medium;">土建类本科</span></span></span></p><p align="center"><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: medium;">相关专业</span></span></span></p></td><td width="319"><p><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: medium;">建筑学、城市规划</span></span></span></p></td><td width="422"><p><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: medium;">建筑学、城市规划、电气工程及其自动化</span></span></span></p></td></tr><tr><td width="42" height="185"><p align="center"><span style="color: #000000;"><span style="font-family: 宋体, serif;"><span style="font-size: medium;"><span lang="en-US">6</span></span></span></span></p></td><td width="140"><p align="center"><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: medium;">土建类专科相关专业</span></span></span></p></td><td width="319"><p><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: medium;">城镇规划与管理类、房地产类、公路监理、道路桥梁工程技术、高速铁道技术、电气化铁道技术、铁道工程技术、城市轨道交通工程技术、　港口工程技术、管道工程技术、管道工程施工、水利工程与管理类</span></span></span></p></td><td width="422"><p><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: medium;">城镇规划与管理类、房地产类、公路监理、道路桥梁工程技术、高速铁道技术、电气化铁道技术、铁道工程技术、城市轨道交通工程技术、港口工程技术、管道工程技术、管道工程施工、水利工程与管理类</span></span></span></p></td></tr><tr><td width="42" height="153"><p align="center"><span style="color: #000000;"><span style="font-family: 宋体, serif;"><span style="font-size: medium;"><span lang="en-US">7</span></span></span></span></p></td><td width="140"><p align="center"><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: medium;">土建类中职本专业</span></span></span></p></td><td width="319"><p><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: medium;">建筑工程施工、建筑装饰、古建筑修缮与仿建、土建工程检测、建筑设备安装、供热通风与空调施工运行、给排水工程施工与运行、楼宇智能化设备安装与运行</span></span></span></p></td><td width="422"><p><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: medium;">建筑工程施工、建筑装饰、城镇建设、工程造价、古建筑修缮与仿建、土建工程检测、建筑设备安装、供热通风与空调施工运行、给排水工程施工与运行、工程施工机械运用与维修</span></span></span></p></td></tr><tr><td width="42" height="99"><p align="center"><span style="color: #000000;"><span style="font-family: 宋体, serif;"><span style="font-size: medium;"><span lang="en-US">8</span></span></span></span></p></td><td width="140"><p align="center"><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: medium;">土建类中职相关专业</span></span></span></p></td><td width="319"><p><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: medium;">城镇建设、道路与桥梁工程施工、市政工程施工、铁道施工与养护、水电工程建筑施工</span></span></span></p></td><td width="422"><p><span style="color: #000000;"><span style="font-family: 宋体;"><span style="font-size: medium;">道路与桥梁工程施工、铁道施工与养护、水电工程建筑施工、市政工程施工、物业管理、房地产营销与管理</span></span></span></p></td></tr></tbody></table><p class="cjk"><span style="color: #000000;"><span style="font-family: 宋体;">备注：根据行业标准《建筑与市政工程施工现场专业人员职业标准》（</span></span><span style="font-family: Calibri, serif;"><span lang="en-US"><span style="color: #000000;"><span style="font-family: 宋体, serif;">JGJ/T250-2011</span></span></span></span><span style="color: #000000;"><span style="font-family: 宋体;">）</span></span></p>

       </div>

    </el-dialog>

  </div>
</template>

<script>
  import {httpServer} from "@/components/httpServer/httpServer.js";
  export default {
    name: "Index",
    data() {
      return {
        page:1,
        size:10,
        total: 20,
        list: [],
        joinTrainPlanDialog: false,
        showPrevNotice:false,
        courses:[],
        courseId:'',
        listLoading: false
      };
    },
    beforeMount() {
      this.getData()
    },
    created(){
      this.loadTrainCourse()
    },
    methods: {
      canEdit(row){
        if( row.confirm == 1) return false;
        if( row.isSubmit == 1) return false;
        return true;
      },
      getData() {
        this.listLoading = true
        httpServer('User.GetUserApplyList', {}).then( res=>{
            if( res.code == 200){
              this.list =  res.data.map( v=>{
                v._edit= false;
                return v
              })
            }
            this.listLoading = false
        })
      },
      delApplyInfo( applyId, index ){
        httpServer("User.DelUserApply", {applyId}).then(res => {
          if (res.code == 200) {
            this.$message.successMsg("删除成功", 2)
            this.list.splice( index, 1)
          }
        })
      },
      gotoDetail( row  ){
        this.$emit("select", row);
      },
      changeCourse( row ){
        let {courseId, applyId} = row;
        httpServer('User.ChangeUserApplyCourse', {applyId, courseId}).then( res=>{
            if( res.code == 200){
              row._edit = false
              for( let i in this.courses){
                if( this.courses[i].courseId == courseId){
                  row.courseName = this.courses[i].courseName
                }
              }
              this.$message.successMsg("更改岗位成功", 2)
            }
        })
      },
      doApplyCourse(){
        let courseId = this.courseId;
        if( !this.courseId){
          this.$message.errorMsg("还未选择报考科目", 2)
          return
        }
        httpServer('User.UserApplyCourse', {courseId}).then( res=>{
            if( res.code == 200){
              this.$message.successMsg("选择成功，请根据报考岗位要求，提交相关材料", 2)
              this.joinTrainPlanDialog = false
              this.getData()
            }
        })
      },
      doJoinTrainPlan( row ){
        let courseId = row.courseId;
        httpServer('User.UserApplyCourse', {courseId}).then( res=>{
            if( res.code == 200){
              this.$message.successMsg("选择成功，请根据报考岗位要求，提交相关材料", 2)
              this.joinTrainPlanDialog = false
              this.getData()
            }
        })

      },
      loadTrainCourse(){
        if( this.courses.length >0){
          return;
        }
        httpServer('Train.GetUserTrainMarket', {}).then( res=>{
            if( res.code == 200){
              this.courses = res.data.sort( (i,j)=>{
                return i.applyId-j.applyId
              })
            }
        })
      },
      handleCurrentChange: function(page) {
        this.page = page
        this.getData()
      }
    }
  }
</script>

<style>
</style>
