<template>
  <div class="home">
    <!--内容页面-->
    <el-card class="base-info">
      <div class="s-title">
        任职资格序列及等级
      </div>
      <!-- 查询条件 -->
      <el-card shadow="never" class="s-query" :class="!isToggle?'s-query--is-close':''"
               style="position: relative;">
        <el-collapse-transition>
          <div v-show="isToggle">
            <el-form :model="searchData" ref="searchData" label-width="140px" label-position="left"
                     size="small">
              <el-row :gutter="35">
                <el-col :span="8">
                  <el-form-item label="任职资格序列" prop="positionName">
                    <el-input v-model="searchData.condition.positionName" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="s-button-group s-button-group--center">
                <el-button size="medium" type="primary" class="button-md" @click="search">查询</el-button>
                <el-button size="medium" type="primary" plain class="button-md" @click="clear">清空</el-button>
              </div>
            </el-form>
          </div>
        </el-collapse-transition>
        <div v-if="!isToggle" class="s-query-toggle" @click="toggle"></div>
        <div v-else class="s-close-toggle" @click="toggle"><i class="el-icon-arrow-up"></i></div>
      </el-card>
      <!-- 查询结果 -->
      <el-card shadow="never" class="s-table">
        <div class="s-table-header">
          <div class="s-table-header__title" style="font-size: 14px;"></div>
          <div class="s-table-header__btn">
            <el-button type="primary" size="small" plain @click="addSetting" :loading="exportLoading" :disabled="showDisabled">新增</el-button>
          </div>
        </div>
        <el-table :data="tableData" ref="doLayout" stripe v-loading="loading" @sort-change="tableSort"  :cell-style="cellStyle" >
          <template slot="empty"><el-empty :image-size="80"></el-empty></template>
          <el-table-column v-if="fixColumns.index" label="序号" :width="fixColumnsWidth.width" prop="index" header-align="center"></el-table-column>
          <el-table-column
              header-align="center"
              v-for="column in dynamicColumns"
              :key="column.prop"
              :prop="column.prop"
              :label="column.label"
              :min-width="column.width">
            <template slot-scope="scope">
              <span v-if="column.prop == 'qualificationCriteria'">
                <el-button v-if="scope.row.qualificationLevel === 'L1'" type="text" size="small" @click="downloadStandardFile(scope.row.qualificationCriteria)">
                  {{filenameFormatter(scope.row.qualificationCriteria)}}
                </el-button>
              </span>
              <span v-else>{{scope.row[column.prop]}}</span>
            </template>
          </el-table-column>
          <el-table-column
              header-align="center"
              align="center"
              fixed="right"
              width="300"
              label="操作">
            <template slot-scope="scope">
              <el-button  type="text"
                          icon="el-icon-edit" size="mini" @click="edit(scope.row)">
                修改
              </el-button>
              <el-button type="text"
                         icon="el-icon-delete" size="mini" @click="deleteAttr(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="s-pagination" v-if="pageInfo.totalCount > 0">
          <div class="s-pagination__total">显示第<span
              class="s-pagination__text">{{(pageInfo.pageNo - 1) * pageInfo.pageSize + 1}}</span>条到第<span
              class="s-pagination__text">{{(pageInfo.pageNo - 1) * pageInfo.pageSize + tableData.length}}</span>条，共<span
              class="s-pagination__text">{{pageInfo.totalCount}}</span>条
          </div>
          <el-pagination class="s-pagination__list" background
                         :page-size="searchData.pageSize"
                         :page-sizes="[10, 20, 50, 100]"
                         :current-page="searchData.pageNo"
                         layout="sizes, prev, pager, next"
                         @size-change="handleSizeChange"
                         @current-change="handleCurrentChange"
                         :total="searchData.totalCount">
          </el-pagination>
        </div>
      </el-card>
    </el-card>
    <el-card class="management_info">
      <div class="s-title">
        任职资格序列管理办法
      </div>
      <el-upload
          class="custom-upload"
          :action="uploadUrl()"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :headers="{authorization:token}"
          :accept="'.pdf'"
          :limit="1"
          :on-exceed="handleExceed"
          :file-list="fileList">
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
    </el-card>

    <!--任职资格序列等级新增弹框-->
    <el-dialog v-if="showAddDialog" visible center title="新增任职资格序列" top="5vh" width="600px" :show-close="true" :before-close="closeAddDialog" :close-on-click-modal="false">
      <el-form label-width="120px" label-position="left" size="small">
        <el-row :gutter="35">
          <el-col :span="20">
            <el-form-item label="任职资格序列" :rules="[{required: true, message: '请填写任职资格序列', trigger: ['blur', 'change']}]">
              <el-input v-model.trim="addData.positionName" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="35">
          <el-col :span="20">
            <el-form-item label="任职资格等级" :rules="[{required: true, message: '请填写任职资格等级', trigger: ['blur', 'change']}]">
              <el-input v-model.trim="addData.qualificationLevel" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="35">
          <el-col :span="20">
            <el-form-item label="任职资格标准" :rules="[{required: true, message: '请填写任职资格标准', trigger: ['blur', 'change']}]">
              <el-upload
                  class="custom-demo"
                  drag
                  :action="uploadUrl2()"
                  :on-success="handleSuccess2"
                  :on-remove="handleRemove2"
                  :before-remove="beforeRemove2"
                  :before-upload="beforeUpload2"
                  :headers="uploadHeaders2()"
                  :limit="1"
                  :accept="'.pdf'"
                  :on-exceed="handleExceed2"
                  :file-list="fileList2">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer">
                <el-button size="small" class="button-md" @click="closeAddDialog" type="primary" plain>取消</el-button>
                <el-button size="small" class="button-md" type="primary" @click="submitAddAttr">确定</el-button>
            </span>
    </el-dialog>
    <!--任职资格序列等级修改弹框-->
    <el-dialog v-if="showEditDialog" visible center title="修改任职资格序列" top="5vh" width="600px" :show-close="true" :before-close="closeAddDialog" :close-on-click-modal="false">
      <el-form label-width="120px" label-position="left" size="small">
        <el-row :gutter="35">
          <el-col :span="20">
            <el-form-item label="任职资格序列" :rules="[{required: true, message: '请填写任职资格序列', trigger: ['blur', 'change']}]">
              <el-input v-model.trim="editData.positionName" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="35">
          <el-col :span="20">
            <el-form-item label="任职资格等级" :rules="[{required: true, message: '请填写任职资格等级', trigger: ['blur', 'change']}]">
              <el-input v-model.trim="editData.qualificationLevel" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="35">
          <el-col :span="20">
            <el-form-item label="任职资格标准" :rules="[{required: true, message: '请填写任职资格标准', trigger: ['blur', 'change']}]">
              <el-upload
                  class="custom-demo"
                  drag
                  :action="uploadUrl3()"
                  :on-success="handleSuccess3"
                  :on-remove="handleRemove3"
                  :before-remove="beforeRemove3"
                  :before-upload="beforeUpload3"
                  :headers="uploadHeaders3()"
                  :limit="1"
                  :accept="'.pdf'"
                  :on-exceed="handleExceed3"
                  :file-list="fileList3">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer">
                <el-button size="small" class="button-md" @click="closeEditDialog" type="primary" plain>取消</el-button>
                <el-button size="small" class="button-md" type="primary" @click="submitEditAttr">确定</el-button>
            </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  addPositionSequenceLevel,
  baseUrl,
  deletePositionSequenceLevel,
  editInternalInformation,
  getInternalInformationList,
  getQualificationManagementMeasures,
  downloadQualificationManagementMeasures,
  downloadQualificationStandard,
} from "@/api/userMG";
export default {
  // 注册组件
  components: {},
  data() {
    return {
      token: localStorage.getItem("logintoken"),
      fileList: [],
      fileList2: [],
      fileList3: [],
      sequence: '',
      qualificationLevel: '',
      isToggle: false,
      importPermission: false,
      exportPermission: false,
      exportLoading: false,
      showDisabled: false,
      showAddDialog: false,
      showEditDialog: false,
      addData: {
      },
      editData: {},
      orderCidList: [],
      orderCidList2: [],
      messageInfo: '',
      fixColumns: {
        index: true,
        pro_code: true,
        company_name: true,
        ticket_no: true,
      },
      fixColumnsWidth: {
        index: 60,
        pro_code: 120,
        company_name: 120,
        ticket_no: 120,
      },
      dynamicColumns: [
        {
          prop: 'positionName',
          label: '任职资格序列',
          width: 120,
        },
        {
          prop: 'qualificationLevel',
          label: '任职资格等级',
          width: 120,
        },
        {
          prop: 'qualificationCriteria',
          label: '任职资格标准（仅L1有效）',
          width: 120,
        },

      ],
      tableData: [
      ],
      pageInfo: {
      },
      searchData: {
        pageNo: 1,
        pageSize: 10,
        totalCount: 0,
        condition: {
          positionName: '',
        },
      },
      loading: false,
      cellStyle: {
        'text-align': 'center',
      },
    };
  },
  methods: {
    downloadStandardFile(filePath) {
      if(filePath === undefined || filePath == null){
        return
      }
      let filename = filePath.split('\\')[filePath.split('\\').length - 1];
      downloadQualificationStandard({qualificationCriteria: filePath}, filename).then(res => {});
    },
    filenameFormatter(filePath) {
      if(filePath === undefined || filePath == null){
        return ""
      }
      let filename = filePath.split('\\')[filePath.split('\\').length - 1];
      let result = ''
      filename.split('_').forEach((item, index) => {
        if(index !== 0) {
          result += item + '_'
        }
      });
      result = result.substring(0, result.length - 1);
      return result;
    },
    handleRemove3(file, fileList) {
      return false;
    },
    uploadUrl3: function() {
      let path = this.editData.positionName + this.editData.qualificationLevel;
      return baseUrl+ "/qualifications-service/internal-informations/uploadQualificationStandard/"+ path;
    },
    beforeUpload3: function(file) {
      if(this.editData.qualificationLevel === undefined || this.editData.qualificationLevel === '' ||
          this.editData.positionName === undefined  || this.editData.positionName === '') {
        this.$message.warning("请先填写任职资格序列和任职资格等级");
        return  false;
      }else {
        return true;
      }
    },
    uploadHeaders3: function() {
      return {Authorization: this.token}
    },
    handleExceed3(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove3(file, fileList) {
      return true;
    },
    handleSuccess3(response, file, fileList) {
      let { code, msg, data } = response;
      this.editData.qualificationCriteria =data;
    },

    handleRemove2(file, fileList) {
      return false;
    },
    uploadUrl2: function() {
      let path = this.addData.positionName + this.addData.qualificationLevel;
      return baseUrl+ "/qualifications-service/internal-informations/uploadQualificationStandard/"+ path;
    },
    beforeUpload2: function(file) {
      if(this.addData.qualificationLevel === undefined || this.addData.qualificationLevel === '' ||
          this.addData.positionName === undefined  || this.addData.positionName === '') {
        this.$message.warning("请先填写任职资格序列和任职资格等级");
        return  false;
      }else {
        return true;
      }
    },
    uploadHeaders2: function() {
      return {Authorization: this.token}
    },
    handleExceed2(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove2(file, fileList) {
      return true;
    },
    handleSuccess2(response, file, fileList) {
      let { code, msg, data } = response;
      this.addData.qualificationCriteria =data;
    },

    //获取任职资格序列等级标准列表
    getData(){
      let param = this.searchData;
      param.orgCode = JSON.parse(localStorage.getItem('userdata')).orgCode
      getInternalInformationList(param).then(res => {
        console.log(res);
          let { code, data } = res
          if (code == '200') {
            this.tableData = data.list;
            this.tableData.forEach((item, index) => {
              item.index = ((data.pageNum-1) * data.pageSize) + index + 1;
            })
            this.pageInfo = {
              pageNo: data.pageNum,
              pageSize: data.pageSize,
              totalCount: data.total
            };
            this.searchData.totalCount = data.total;
          }
      });
      this.loading = false;
    },
    //获取任职资格管理办法
    getQualificationManagementMeasures(){
      getQualificationManagementMeasures({}).then(res => {
        let { code, data } = res

        this.fileList.push({name: "任职资格序列管理办法.pdf", url:data.value});
        console.log(this.fileList);

      });
    },
    handleRemove(file, fileList) {
      return false;
    },
    uploadUrl: function() {
      return (
          baseUrl+ "/qualifications-service/internal-informations/uploadQualificationManagementMeasures"
      );
    },
    handlePreview(file) {
      downloadQualificationManagementMeasures({}, file.name).then(res => {
      });
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      console.log(this.fileList);
    },
    beforeRemove(file, fileList) {
      return true;
    },
    // 任职资格序列等级弹窗
    addSetting() {
      this.showAddDialog = true;
    },
    // 关闭任职资格序列等级弹窗
    closeAddDialog() {
      this.showAddDialog = false;
      this.showEditDialog = false;
    },
    // 关闭任职资格序列等级弹窗
    closeEditDialog() {
      this.showAddDialog = false;
      this.showEditDialog = false;
    },
    // 提交任职资格序列等级
    submitAddAttr() {
      let param = this.addData;
      param.orgCode = JSON.parse(localStorage.getItem('userdata')).orgCode
      addPositionSequenceLevel(param).then(res => {
        let { code, data, msg } = res
        if (code == '200') {
          this.$message.success(msg)
        }else {
          this.$message.error(msg)
        }
      })
      this.closeAddDialog();
      this.getData();
    },
    // 提交任职资格序列等级修改
    submitEditAttr() {
      let param = this.editData;
      editInternalInformation(param).then(res => {
        let { code, data, msg } = res
        if (code == '200') {
          this.$message.success(msg)
          console.log(this.fileList);
        }else {
          this.$message.error(msg)
        }
      })
      this.closeEditDialog();
    },
    // 导入权限弹窗
    importPermissionDialog() {
      this.importPermission = true;
    },
    // 导出权限弹窗
    exportPermissionDialog() {
      this.exportPermission = true;
    },
    // 缩放查询条件
    toggle() {
      this.isToggle = !this.isToggle;
    },
    // 查询
    search() {
      this.loading = true;
      this.searchData.pageNo = 1;
      this.getData()
    },
    // 清空
    clear() {
      this.searchData.condition = {}
      this.searchData.pageNo = 1;
      this.loading = true;
      this.getData()
    },
    // 分页
    handleSizeChange(val) {
      this.searchData.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.searchData.pageNo = val;
      this.getData();
    },
    // 排序
    tableSort(val) {
      console.log(val);
    },
    // 导出
    exportExcel() {
      this.exportLoading = true;
      this.$axios.get(baseUrl + "/qualification/professional/export", {}
      ).then(res => {
        this.exportLoading = false;
        console.log(res);
      }).catch(err => {
        this.exportLoading = false;
        console.log(err);
      });
    },
    // 编辑
    edit(row) {
      this.editData = row;
      this.showEditDialog=true;
    },
    // 删除
    deleteAttr(row) {
      this.$confirm('此操作将删除该任职资格序列等级, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        deletePositionSequenceLevel(row).then(res => {
          let { code, data, msg } = res
          if (code == '200') {
            this.$message.success(msg)
          }else {
            this.$message.error(msg)
          }
        })
        this.search();
      })
    }

  },
  created() {
    this.getData();
    this.getQualificationManagementMeasures();
  }
};
</script>
<style lang="scss" scoped>
.home {
  margin-left: 2%;
  margin-right: 2%;
  width: 96%;
}

.task-process {
  //width: 100%;
  justify-content: space-between;
  margin-top: 20px;
  padding-bottom: 20px;
  padding-left: 15%;
  //height: 65px;
  border-radius: 10px; /* 增加圆角 */
  overflow: hidden; /* 防止圆角处内容溢出 */
  background-color: white;
}

.task-item {
  float: left;
  flex-direction: column;
  align-items: center;
}

.task-icon {
  text-align: center;
  font-size: 30px;
  color: #999;
  margin-bottom: 5px;
}

.task-text {
  font-size: 14px;
  color: #666;
  width: 90px;
  text-align: center;
}

.line-horizontal {
  float: left;
  width: 15%;
  height: 1px;
  background-color: #999;
  margin: 20px 0;
  position: relative;
}

.line-horizontal::after {
  content: "";
  position: absolute;
  top: -4px;
  right: -10px;
  border: 5px solid transparent;
  border-left-color: #999;
  transform: rotate(0deg);
}

.active .task-icon {
  color: orangered;
}

.active .task-text {
  color: orangered;
}

.circle {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #FFFFFF;
  color: #999;
  text-align: center;
  line-height: 24px;
}

.active .circle {
  background-color: orangered;
  color: #fff;
}

.page-title {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}

.base-info {
  justify-content: space-between;
  margin-top: 20px;
  //padding-top: 30px;
  background-color: white;
  border-radius: 10px; /* 增加圆角 */
  overflow: hidden; /* 防止圆角处内容溢出 */
}
.s-title{
  padding-top: 0;
  margin-bottom: 20px;
  font-weight: bold;
  font-size: 16px;
}

.management_info {
  justify-content: space-between;
  margin-top: 20px;
  background-color: white;
  border-radius: 10px; /* 增加圆角 */
  overflow: hidden; /* 防止圆角处内容溢出 */
}

.job-application {
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 30px;
  background-color: white;
  border-radius: 10px; /* 增加圆角 */
  overflow: hidden; /* 防止圆角处内容溢出 */
}

.application-rule {
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 30px;
  background-color: white;
  border-radius: 10px; /* 增加圆角 */
  overflow: hidden; /* 防止圆角处内容溢出 */
}

.application-item {
  padding-bottom: 10px;
}

.el-icon-success {
  color: green;
}

.el-icon-error {
  color: red;
}

.el-table__header .cell {
  color: #324C99;
  font-weight: bold;
}

.submit-btn {
  margin-top: 10px;
  margin-left: 45%;
}
.el-button--primary {
  color: #FFF;
  background-color: orangered;
  border-color: orangered;
}
.el-button--primary.is-plain {
  background: #FFF;
  color: orangered;
  border-color: orangered;
}
//::v-deep .el-upload-list__item:hover .el-icon-close {
//  display: none!important;
//}
::v-deep .el-select-dropdown .el-select-dropdown__item.selected {
  color: orangered !important;
}
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: orangered;
  color: #FFF;
}

::v-deep .el-range-editor.is-active, .el-range-editor.is-active:hover, .el-select .el-input.is-focus .el-input__inner {
  border-color: orangered;
}
</style>
