<template>
  <div class="credit-manage-wrap">
    <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>

    <div class="credit-list screenSet" id="screenSet">
      <el-form ref="form" :model="searchForm" label-width="80px">
        <el-form-item label="学分名称：" class="search-item">
          <el-input v-model="searchForm.name" size="small" class="form-width"></el-input>
        </el-form-item>
        <el-form-item label="学分等级：" class="search-item">
          <el-select v-model="searchForm.grade" placeholder="请选择" size="small" class="form-width">
            <el-option v-for="(item, index) in creditGrade" :key="index" :label="item.text" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态：" class="search-item">
          <el-select v-model="searchForm.status" placeholder="请选择" size="small" class="form-width">
            <el-option v-for="(item, index) in creditStatus" :key="index" :label="item.text" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="btn-list">
          <el-button @click="goToSearch" size="small">搜索</el-button>
          <el-button @click="showNewAddForm" type="primary" size="small">新增学分</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="tableData" border style="width: 100%">
        <el-table-column align="center" type="index" label="编号" width="80"></el-table-column>
        <el-table-column align="center" prop="name" label="学分名称" ></el-table-column>
        <el-table-column align="center" prop="org" label="主管机构" ></el-table-column>
        <el-table-column align="center" prop="studyTypeText" label="学习形式" ></el-table-column>
        <el-table-column align="center" prop="gradeText" label="学分等级"></el-table-column>
        <el-table-column align="center" prop="value" label="项目学分分值" ></el-table-column>
        <el-table-column align="center" prop="name" label="最后修改者" ></el-table-column>
        <el-table-column align="center" prop="modifiedTime" label="最后修改日期" ></el-table-column>
        <el-table-column align="center" prop="statusText" label="状态" ></el-table-column>
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small">{{ returnHandleText(scope.row) }}</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>

    <!-- 新增学分 弹窗 -->
    <el-dialog
      title="学分新增"
      @close="hideNewAddForm"
      :visible.sync="centerDialogVisible"
      :close-on-click-modal="false"
      width="500px"
      center>
      <el-form ref="addForm" :rules="rules" :model="addForm" label-width="120px">
        <el-form-item label="学分名称：" class="search-item" prop="name">
          <el-input v-model="addForm.name" size="small" class="form-width"></el-input>
        </el-form-item>
        <el-form-item label="主管机构：" class="search-item" prop="org">
          <el-input v-model="addForm.org" size="small" class="form-width"></el-input>
        </el-form-item>
        <el-form-item label="学习形式：" class="search-item" prop="studyType">
          <el-radio-group v-model="addForm.studyType">
            <el-radio :label="item.id" v-for="(item, index) in studyType" :key="index">{{ item.text }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="学分等级：" class="search-item" prop="grade">
          <el-select v-model="addForm.grade" placeholder="请选择" size="small" class="form-width">
            <el-option v-for="(item, index) in creditGrade" :key="index" :label="item.text" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目学分分值：" class="search-item" prop="value">
          <el-input v-model="addForm.value" size="small" class="form-width"></el-input>
        </el-form-item>
        <el-form-item label="关联学分证书：" class="search-item" prop="certificateId">
          <el-input v-model="addForm.certificateId" size="small" class="form-width"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="hideNewAddForm">取 消</el-button>
        <el-button type="primary" @click="submitForm('addForm')">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import { openLoading, closeLoading } from "../../utils/utils";
  import BreadCrumb from "../../components/breadcrumb.vue";
  import * as commonUtil from "../../utils/utils";

  export default {
    data() {
      return {
        curmbFirst: "CME",
        curmbSecond: "学分管理列表",
        searchForm: {
          name: '',
          grade: '',
          status: '',
          pageNo: 1,
          pageSize: 15,
        },
        creditGrade: [],    // 学分等级
        creditStatus: [],   // 状态
        studyType: [],      // 学习形式

        centerDialogVisible: false,

        tableData: [],
        handleStatusText: {  // 1 已创建状态>显示上架； 2 上架状态>显示下架; 3 下架状态>显示上架
          1: '上架',
          2: '下架',
          3: '上架', 
        },

        addForm: {
          name: '',
          org: '',
          studyType: '',
          grade: '',
          value: '',
          certificateId: '',
        },
        rules: {
          name: [{ required: true, message: '请输入', trigger: 'blur' }],
          org: [{ required: true, message: '请输入', trigger: 'blur' }],
          studyType: [{ required: true, message: '请选择', trigger: 'blur' }],
          grade: [{ required: true, message: '请选择', trigger: 'blur' }],
          value: [{ required: true, message: '请输入', trigger: 'blur' }],
          certificateId: [{ required: true, message: '请选择', trigger: 'blur' }],
        }
      }
    },

    components: {
      BreadCrumb
    },

    created() {
      this.getSelectList('credit_grade');  // get 学分等级
      this.getSelectList('credit_status'); // get 状态
      this.getSelectList('study_type'); // get 学习形式
      this.goToSearch();
    },
    mounted() {
      commonUtil.resizeHeight();
    },
    methods: {
      // 获取 学分等级/状态/学习形式 常亮接口
      getSelectList(type) {
        let req = {};
        // openLoading(this);
        this.GET(`cme/constants/list?code=${type}`, req).then(res => {
          // closeLoading(this);
          if (res.code == "000000") {
            if (type == 'credit_grade') {
              this.creditGrade = res.data;
            } else if (type == 'credit_status') {
              this.creditStatus = res.data;
            } else if (type == 'study_type') {
              this.studyType = res.data;
              console.log('学习形式： ', this.studyType)
            }
          } else {
            this.$message(res.message);
          }
        }).catch(err => {
          this.$message.error('请求失败');
        });
      },
      goToSearch() {
        this.searchForm.pageNo = 1;
        this.searchForm.pageSize = 15;
        this.getCreditList();
      },
      // 获取 学分table列表
      getCreditList() {
        let req = {};
        req = this.searchForm;
        openLoading(this);
        this.GET(`cme/credit/list`, req).then(res => {
          closeLoading(this);
          if (res.code == "000000") {
            console.log('@@@@@@@', res.data.contentList)
            if (res.data && res.data.contentList) {
              this.tableData = res.data.contentList;
            } else {
              this.tableData = [];
            }
          } else {
            this.$message(res.message);
          }
        }).catch(err => {
          this.$message.error('请求失败');
        });
      },

      // 操作内的文案
      returnHandleText(row) {
        let status = row.status;
        console.log('>>>>**** status ', status)
        return this.handleStatusText[status] || '';
      },
      // 获取 关联学分证书
      getRelatedCredit() {
        let req = {
          token: localStorage.getItem('storageToken') || localStorage.getItem('token'),
        };
        this.cmsPOST("api/PICACertificateModalManageServiceImpl/getCertificateEntryList.validate", req).then(res => {
          if (res.code == "000000") {
            console.log(' 获取 关联学分证书： ', res)
          }
        });
      },
      showNewAddForm() {
        this.centerDialogVisible = true;
        this.getRelatedCredit();
      },
      hideNewAddForm() {
        this.centerDialogVisible = false;
        this.resetForm('addForm');
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      

    },

  }
</script>  

<style lang="scss">
  .credit-manage-wrap{
    .credit-list{
      padding: 10px;
      background: #fff;
      .search-item{
        float: left;
      }
      .form-width{
        width: 200px;
      }
      .btn-list{
        float: right;
        margin-right: 80px;
      }
    }
  }
</style>