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

    <div class="list-wrap screenSet" id="screenSet">
      <div class="header-title">申请明细</div>
      <el-form ref="form" :model="searchForm" label-width="100px" class="search-form-wrap">
        <div style="width: 75%; float:left;">
          <el-form-item label="姓名：" class="search-item">
            <el-input v-model="searchForm.name" size="small" class="form-width" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <!-- <el-form-item label="身份证号：" class="search-item">
            <el-input v-model="searchForm.Idcard" size="small" class="form-width" placeholder="请输入项目名称"></el-input>
          </el-form-item>
          <el-form-item label="工作单位：" class="search-item">
            <el-input v-model="searchForm.hospital" size="small" class="form-width" placeholder="请输入项目名称"></el-input>
          </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 statusList" :key="index" :label="item.text" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div style="width: 25%; float: right;">
          <el-form-item class="btn-list">
            <el-button @click="goToSearch" type="primary" size="small">查询</el-button>
            <el-button @click="handleReset" size="small">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
      <div v-if="$store.state.cmeStore.isOutsideUser" class="export-wrap">
        <el-upload
          class="upload-import"
          action="#"
          accept=".xlsx"
          :limit="1"
          :show-file-list="false"
          :on-exceed="handleExceed"
          :before-upload="uploadImport">
          <!-- <el-button size="small" type="primary">点击上传</el-button> -->
          <el-button size="small" class="new-add" id="cmeImportBtn">导入</el-button>
        </el-upload>
        <el-button @click="handleExport('part')" type="primary" size="small" class="new-add">部分导出</el-button>
        <el-button @click="handleExport('all')" type="primary" size="small" class="new-add">全部导出</el-button>
      </div>
      <template v-if="tableData.length > 0">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          class="table-list"
          @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column align="center" prop="cmeIcCardNumber" label="IC卡号" show-overflow-tooltip width="150" ></el-table-column>
          <el-table-column align="center" prop="name" label="姓名" show-overflow-tooltip width="150"></el-table-column>
          <el-table-column align="center" prop="card" label="身份证号" show-overflow-tooltip width="200"></el-table-column>
          <el-table-column align="center" prop="serialNo" label="课题编号" show-overflow-tooltip width="150"></el-table-column>
          <el-table-column align="center" prop="courseName" label="课程名称" show-overflow-tooltip width="150"></el-table-column>
          <el-table-column align="center" prop="studyType" label="学分类别" show-overflow-tooltip width="150"></el-table-column>
          <el-table-column align="center" prop="creditValue" label="学分" show-overflow-tooltip width="100"></el-table-column>
          <el-table-column align="center" prop="creditTime" label="学时" show-overflow-tooltip width="100"></el-table-column>
          <el-table-column align="center" prop="title" label="职称" show-overflow-tooltip width="150"></el-table-column>
          <el-table-column align="center" prop="hospital" label="单位名称" show-overflow-tooltip width="200"></el-table-column>
          <el-table-column align="center" prop="taskType" label="活动形式" show-overflow-tooltip width="150"></el-table-column>
          <el-table-column align="center" prop="department" label="所属学科" show-overflow-tooltip width="150"></el-table-column>
          <el-table-column align="center" prop="authName" label="授分单位" show-overflow-tooltip width="150"></el-table-column>
          <el-table-column align="center" prop="taskTime" label="活动日期" show-overflow-tooltip width="200"></el-table-column>
          <el-table-column align="center" label="学分状态" show-overflow-tooltip width="150">
            <template slot-scope="scope">
              {{ returnStatusText(scope.row.creditStatus) }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="disapprove" label="失败原因" show-overflow-tooltip width="200"></el-table-column>
          <div slot="empty">
            <div class="table-empty">
              <img src="../../assets/image/no-content1.png">
              <p>没有查询到相关结果</p>
            </div>
          </div>
        </el-table>
        <div class="pagination">
          <el-pagination
            class="pagination-style"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :total="totalRows"
            :current-page="searchForm.pageNo"
            :page-sizes="[15, 30, 50, 100]"
            :page-size="searchForm.pageSize"
            layout="total, sizes, prev, pager, next, jumper">
          </el-pagination>
        </div>
      </template>
      <template v-if="tableData.length < 1">
        <div class="table-empty-out" >
          <img src="../../assets/image/no-content1.png">
          <p>没有查询到相关结果</p>
        </div>
      </template>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="importFailVisible"
      width="600px"
      class="import-fail-wrap"
      :close-on-click-modal="false"
      center>
      <p class="top-title">导入失败</p>
      <p class="gray response-text">{{ importFailText }}</p>
      <p class="gray">仅支持xlsx格式的文件</p>
      <p class="gray">每条数据至少包含姓名、手机号、身份证号和IC卡号</p>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleReImport">重新导入</el-button>
        <el-button @click="importFailVisible = false">取 消</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";
  import { 
    getDetailListReq,
    handleExportReq,
    handleImportReq,
    getCreditStatusReq,
  } from '@/utils/cme/cmeApi'


  export default {
    data() {
      return {
        curmbFirst: "CME",
        curmbSecond: "学分发放管理",
        curmbThird: "申请明细",
        jumPathThird: '/credit-send-manage',
        importFailVisible: false,
        importFailText: '',
        totalRows: 0,

        searchForm: {
          cmeProjectId: '',
          name: '',
          // Idcard: '',
          // hospital: '',
          status: '',
          pageNo: 1,
          pageSize: 15,
        },
        statusList: [],

        tableData: [],
        creditStatus: {  //学分状态： 1 审核中； 2 审核通过 3 审核失败
          1: '审核中',
          2: '审核通过',
          3: '审核失败',
        },
        multipleSelection: [],
        
      }
    },

    components: {
      BreadCrumb
    },

    created() {
      this.searchForm.cmeProjectId = this.$route.query.id;
      // console.log(this.searchForm.cmeProjectId);
      this.goToSearch();
      this.getCreditStatusList();
    },
    mounted() {
      commonUtil.resizeHeight();
    },
    methods: {
      goToSearch() {
        this.searchForm.pageNo = 1;
        // this.searchForm.pageSize = 15;
        this.getDetailList();
      },
      getDetailList() {
        let req = this.searchForm;
        // let req = {
        //   cmeProjectId: 3,
        //   pageNo: 1,
        //   pageSize: 15,
        // };
        openLoading(this);
        getDetailListReq(req).then(res => {
          closeLoading(this);
          if (res.code == "000000") {
            // console.log('申请明细 ', res)
            if (res.data && res.data.data) {
              this.tableData = res.data.data;
              this.totalRows = res.data.totalRows;
            } else {
              this.tableData = [];
            }
          } else {
            this.$message(res.message);
          }
        }).catch(err => {
          this.$message.error('请求失败');
        });
      },
      // 获取学分状态列表
      getCreditStatusList() {
        let req = {};
        getCreditStatusReq(req).then(res => {
          if (res.code == "000000") {
            this.statusList = res.data;
          } else {
            this.$message(res.message);
          }
        }).catch(err => {
          this.$message.error('请求失败');
        });
      },
      handleReset() {
        this.searchForm.name = '';
        // this.searchForm.Idcard = '';
        // this.searchForm.hospital = '';
        this.searchForm.status = '';
      },
      returnStatusText(status) {
        let statusVal = this.creditStatus[status];
        return statusVal ? statusVal : '-';
      },

      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      handleExport(type) {
        // debugger;
        let req = {};
        if (type == 'all') {  // all 全选  part 非全选
          if (this.tableData.length < 1) {
            this.$message.error('暂无可导出项');
            return;
          } 
          req = {
            name: this.searchForm.name,
            creditStatus: this.searchForm.status,
            cmeId: this.$route.query.id,
            idList: [],
            selectedStatus: 1,  // 1 全选 2 非全选
          };
        } else {
          let selectList = this.multipleSelection;
          if( selectList.length < 1 ){
            this.$message.error('请勾选导出项后，再执行部分导出');
            return;
          }
          let list = [];
          for(let i=0; i<selectList.length; i++){
            list.push(selectList[i].id)
          }
          req = {
            name: this.searchForm.name,
            creditStatus: this.searchForm.status,
            cmeId: this.$route.query.id,
            idList: list,
            selectedStatus: 2,  // 1 全选 2 非全选
          };
        }
        openLoading(this);
        handleExportReq(req).then(res => {
          closeLoading(this);
          // debugger;
          if (res.code == "000000") {
            // console.log('导出', res)
            if (res.data) {
             this.downloadFile(res.data)
            } else {
              this.$message.error('接口返回数据错误');
            }
          } else {
            this.$message(res.message);
          }
        }).catch(err => {
          this.$message.error('请求失败');
        });
      },
      handleExceed() {

      },
      downloadFile(base64) {
        let a = document.createElement('a');
        let uploadHref = 'data:application/xls;base64,' + base64;
        a.setAttribute('href', uploadHref);
        let exportFileName = '学分明细' + '.xlsx';
        a.setAttribute('download', exportFileName);
        a.click();
      },
      uploadImport(file) {
        // console.log('上传file: ', file)
        let req = {
          file: file,
        };
        let fd = new FormData()
        fd.append('file', file)
        // openLoading(this);
        handleImportReq(fd).then(res => {
          // closeLoading(this);
            // console.log('上传》》》@@@@@@@', res)
          if (res.code == "000000") {
            this.$message({
              message: '上传成功！',
              type: 'success'
            });
            // 重新获取列表
            this.searchForm = {
              cmeProjectId: this.$route.query.id,
              name: '',
              status: '',
              pageNo: 1,
              pageSize: 15,
            },
            this.goToSearch();
          } else {
            // 显示上传错误弹窗
            this.importFailVisible = true;
            this.importFailText = res.message;
          }
        }).catch(err => {
          this.$message.error('请求失败');
        });
      },
      handleReImport() {
        this.importFailVisible = false;
        let btn = document.getElementById('cmeImportBtn');
        btn.click();
      },

      handleSizeChange(val){
        // console.log('handleSizeChange>>>')
        this.searchForm.pageSize = val;
        this.goToSearch();
      },
      
      handleCurrentChange(val){
        // 切换当前页
        this.searchForm.pageNo = val;
        this.getDetailList();
      },

    },

  }
</script>  

<style lang="scss">
  .credit-manage-wrap{
     @mixin scroll-bar{
      /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
      &::-webkit-scrollbar
      {
          width: 20px !important;
          height: 20px !important;
          background-color: #FFF;
      }
      /*定义滚动条轨道 内阴影+圆角*/
      &::-webkit-scrollbar-track
      {
          border-radius: 0px;
          background: #f1f1f1;
      }
      /*定义滑块 内阴影+圆角*/
      &::-webkit-scrollbar-thumb
      {
          border-radius: 0px;
          -webkit-box-shadow: inset 0 0 6px #c1c1c1;
          background-color: #c1c1c1;
      }
    }
    .list-wrap{
      padding: 10px;
      background: #fff;
      .table-empty {
        img {
          width: 100px;
        }
        p {
          margin-top: -50px;
        }
      }
      .table-empty-out{
        img {
          width: 100px; display: block;
          margin: 0 auto;
        }
        p {
          text-align: center; color: #909399; font-size: 14px;
        }
      }
      .el-button--small{
        font-size: 14px;
      }
      .search-item{
        float: left;
      }
      .form-width{
        width: 200px;
      }
      .header-title {
        padding: 10px 12px 20px;
        font-size: 14px;
        color: #606266;
        border-bottom: 1px solid #efefef;
      }
      .btn-list{
        float: right;
        margin-right: 30px;
        .el-form-item__content{
          margin-left: 0 !important;
        }
      }
      .search-form-wrap{
        padding: 25px 0 20px;
        overflow: hidden;
        border-bottom: 1px dashed #efefef;
      }
      .new-add{
        float: right;
        margin: 10px 0 20px 15px;
      }
      .export-wrap{
        overflow: hidden;
      }
      .upload-import{
        float: right;
      }
      .el-table__body-wrapper{
        @include scroll-bar;
      }

    }
    .import-fail-wrap{
      .top-title{
        text-align: center; font-size: 18px; font-weight: 700;
        padding-bottom: 10px;
      }
      .gray{
        padding-left: 100px;
        line-height: 20px;
        font-size: 14px;
        &.response-text{
          color: #6f6f6f; line-height: 30px;
        }
      }
    }
  }
</style>