<template>
  <d2-container class="page">
    <el-tabs value="first">
      <el-tab-pane label="转至外省" name="first">
        <div style="margin-bottom: 8px; border-left: 3px solid; color: rgb(230, 162, 60);">
          <div role="alert" class="el-alert el-alert--warning" v-if="timeLimit">
            <div class="el-alert__content">
              <span class="el-alert__title">外省转出转考在线申请时间：{{timeLimit.start_time}} 到 {{timeLimit.end_time}}</span>
             
            </div>
          </div>
        </div>
        <div v-if="timeLimit && timeLimit.in_time">
          <el-button type="primary" @click="goApply()">申请转至外省</el-button>
        </div>
        <el-table
          v-loading="loading"
          :data="applyList"
          style="width: 100%">
         <el-table-column
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            prop="out_ticket_no"
            label="转出准考证"
            width="120">
          </el-table-column>
          <el-table-column
            prop="major_code"
            label="专业代码"
            width="100">
          </el-table-column>
          <el-table-column
            prop="major_name"
            label="专业名称"
            width="200"
            >
          </el-table-column>
          <el-table-column
            prop="province_name"
            label="转至省份 "
            width="140"
            >
          </el-table-column>
          <el-table-column
            prop="in_ticket_no"
            label="转入准考证 "
            width="120">
          </el-table-column>
          <el-table-column
            prop="reject_advice"
            label="驳回意见 "
            width="150">
          </el-table-column>
          <el-table-column
            prop="status_text"
            label="状态"
            width="120">
          </el-table-column>
          <el-table-column
            prop="batch"
            label="批次"
            width="120">
          </el-table-column>
          <el-table-column
            prop="receive_status_text"
            label="外省接收回执"
            width="140">
          </el-table-column>
        </el-table>
        <el-dialog title="申请转至外省" width="1000px" :visible.sync="applyDialogVisible">
            <el-form ref="itemForm" :model="item" :rules="itemRules" label-width="160px">
              <el-row>
                <el-col :span="24">
                  <el-form-item label="选择专业(准考证)" prop="major_id">
                   <el-select size="medium" v-model="item.major_id" filterable clearable placeholder="请选择专业" @change="majorChange" >
                      <el-option v-for="item in ticketList" :key="item.major_id" :label="item.full_name" :value="item.major_id"></el-option>
                   </el-select>
                  </el-form-item>
                  <el-form-item label="转至省份" prop="in_prov_code">
                   <el-select size="medium" v-model="item.in_prov_code" filterable clearable placeholder="请选择专业">
                      <el-option v-for="item in provList" :key="item.province_id" :label="item.province_name" :value="item.province_id"></el-option>
                   </el-select>
                  </el-form-item>
                  <el-form-item label="外省准考证" prop="in_ticket_no">
                    <div style="width:200px">
                      <el-input size="medium" v-model="item.in_ticket_no" placeholder="请输入内容"></el-input>
                    </div>
                  </el-form-item>
                  <el-form-item label="附件" prop="file">
                     <div style="width:350px">
                        <el-upload
                          :http-request = "customUpload"
                          class="upload-demo"
                          action="https://jsonplaceholder.typicode.com/posts/"
                          ref="upload"
                          :on-preview="handlePreview"
                          :on-remove="handleRemove"
                          :before-remove="beforeRemove"
                          multiple
                          :limit="1"
                          :on-exceed="handleExceed"
                          :auto-upload="false"
                          list-type="picture"
                          :file-list="item.file">
                          <el-button size="small" type="primary">点击上传</el-button>
                          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                      </div>
                  </el-form-item>
                </el-col>
              </el-row>
            
            </el-form>
             <el-table
                v-loading="loading"
                :data="courseList"
                style="width: 100%">
                <el-table-column
                  prop="course_name"
                  label="课程名称"
                  width="150">
                </el-table-column>
                <el-table-column
                  prop="course_code"
                  label="课程代码"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="course_exam_type"
                  label="课程类型"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="course_score"
                  label="学分">
                </el-table-column>
                <el-table-column
                  prop="score"
                  label="考试成绩">
                </el-table-column>
              </el-table>
            <center>
              <el-button type="primary" @click="submit()">提交</el-button>
            </center>

        </el-dialog>

      </el-tab-pane>
    </el-tabs>
  </d2-container>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { json } from 'body-parser';

export default {
  computed: {
     ...mapState({
      stdReg: state => state.enrol.StdReg,
    })
  },

  data() {
    return {
      loading: false,
      applyDialogVisible: false,
      timeLimit:null,
      applyList: null,
      ticketList: null,
      provList: null,
      courseList: null,
      item:{
        major_id: '',
        in_prov_code:'',
        in_ticket_no:'',
        file:''
      },
      itemRules: {
        major_id: [
          { required: true, message: "请选择专业", trigger: "blur" }
        ],
        in_prov_code: [
          { required: true, message: "请选择转至省份", trigger: "blur" },
        ],
        in_ticket_no: [
          { required: true, message: "请输入外省准考证", trigger: "blur" }
        ],
        file: [
          { required: true, message: "请上传文件", trigger: "blur" }
        ]
      },
      // file: "",
      fileList: []
    };
  },

  async mounted () {
    this.loading = true;
    this.init();
    this.loading = false;

  },
  methods: {
    //初始化列表查询
    async init(){
      let res = await this.$http.post(
        "/by/byTurnOutApply/list.htm",
        {},
        this.$http.headers.FORM
      );
      this.timeLimit = res.data.map.timeLimit;
      this.applyList = res.data.map.applyList;
    },
    //跳转申请页面
    async goApply(){
      this.loading = true;
      let {data} = await this.$http.post("/by/byTurnOutApply/toAdd.htm", {},this.$http.headers.FORM);
      this.ticketList = data.map.ticketList;
      this.provList = data.map.provList;

      //默认选择第一个
      if(this.ticketList.length > 0){
        let major_id = this.ticketList[0].major_id;
        this.item.major_id = major_id;
        this.reqCourse(major_id);
      }
      this.loading = false;
      this.applyDialogVisible = true;
      
    },
    //专业下拉联动事件
    async majorChange(major_id){
      this.loading = true;
      this.reqCourse(major_id);
      this.loading = false;
    },

    //请求课程数据
    async reqCourse(major_id){
      let courseListResp = await this.$http.post("/by/byTurnOutApply/courseList.htm",
      this.Qs.stringify({
          std_major_id: major_id,
      }),this.$http.headers.FORM);
      this.courseList = courseListResp.data.array;
    },

    submit() {
      this.$refs["itemForm"].validate(valid => {
        if (valid) {
          // 上传-->customUpload-->fileUpload-->上传成功-->返回上传附件路径 调用saveDate保存数据
          this.$refs.upload.submit();
          return true;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    //保存
    async saveData(filePath){
      this.item['filePath'] = filePath;
      let {data} = await this.$http.post("/by/byTurnOutApply/add.htm",
      this.Qs.stringify(this.item),this.$http.headers.FORM);
      if(data.success){
        this.alert("提交成功");
        this.init();
        this.$nextTick(()=>{
          this.applyDialogVisible = false;
        })

      }
  },

  handleRemove(file, fileList) {
    console.log(file, fileList);
  },
  handlePreview(file) {
    console.log(file);
  },
  handleExceed(files, fileList) {
    this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
  },
  beforeRemove(file, fileList) {
    return this.$confirm(`确定移除 ${ file.name }？`);
  },

  customUpload(file) {
    this.fileUpload(file).then(response => {
      //上传成功提交表单
      if(response.data.success){
        let filePath = response.data.entity;
        this.saveData(filePath);

      }else{
        this.alert(response.data.errorMsg);
      }
    })
  },

  fileUpload(fileobj) {
    let param = new FormData()
    param.append('file',fileobj.file)
    return this.$http.request({
      method: 'post',
      url: 'by/byTurnOutApply/upload.htm',
      headers: {'Content-Type':'multipart/form-data'},
      data: param
    })
  }
}

  
};
</script>

<style lang="scss" scoped>
@import "~@/assets/style/public.scss";
.page {
  .page__btn-group {
    color: $color-text-placehoder;
    font-size: 12px;
    margin-top: -10px;
    margin-bottom: 20px;
    span {
      color: $color-text-sub;
      &:hover {
        color: $color-text-main;
      }
    }
  }
}
</style>
