<template>
  <div class="home">
    <!--内容页面-->
    <el-card class="base-info">
      <!-- 查询条件 -->
      <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="employeeCode">
                    <el-select v-model.trim="searchData.condition.positionName" clearable placeholder="请选择" @change="changeSequence" @clear="clearSequence">
                      <el-option v-for="item in qualificationInfo.sequence" :label="item.name"
                                 :value="item.name" :key="item.code">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="任职资格等级" prop="employeeName">
                    <el-select v-model.trim="searchData.condition.level" clearable placeholder="请选择">
                      <el-option v-for="item in qualificationInfo.level" :label="item.name"
                                 :value="item.code" :key="item.code">
                      </el-option>
                    </el-select>
                  </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">
        <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 == 'status'">
                <i v-if="scope.row.status == 5" class="el-icon-success"></i>
                <i v-else-if="scope.row.status == 6 || scope.row.status == 4" class="el-icon-error"></i>
                <i v-else-if="scope.row.status == 0 ||scope.row.status == 1 ||scope.row.status == 2 ||scope.row.status == 3 "
                   class="el-icon-video-play" ></i>
                {{statusFormatter(scope.row.status)}}
              </span>
              <span v-else-if="column.prop == 'createdAt'">
                {{dateFormatter(scope.row.createdAt)}}
              </span>
              <span v-else-if="column.prop == 'reviewTime'">
                {{dateFormatter(scope.row.reviewTime)}}
              </span>
              <span v-else-if="column.prop == 'professionalScore'">
                {{scope.row.professionalScore}}
                <el-tooltip v-if="scope.row.professionalTip !== null && scope.row.professionalTip !==''" class="item" effect="dark" :content="'存在未完成的必选专业回馈：'+scope.row.professionalTip" placement="top-start">
                  <el-icon class="el-icon-warning" />
                </el-tooltip>
              </span>
              <span v-else>{{scope.row[column.prop]}}</span>
            </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>
  </div>
</template>
<script>
import {
  baseUrl, getDeclaredQualificationList, getInternalInformationList, getQualificationSequenceList,
  getDictionary,
} from "@/api/userMG";
export default {
  // 注册组件
  components: {},
  data() {
    return {
      orgCode: JSON.parse(localStorage.getItem('userdata')).orgCode,
      qualificationInfo:{
        sequenceBase:[],
        sequence:[
        ],
        level:[
        ]
      },
      isToggle: false,
      importPermission: false,
      exportPermission: false,
      exportLoading: false,
      showDisabled: false,
      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: 'status',
          label: '状态',
          width: 120,
        },
        {
          prop: 'reviewTime',
          label: '审核日期',
          width: 120,
        },
        {
          prop: 'compulsoryCourseScore',
          label: '必修课学分',
          width: 120,
        },
        {
          prop: 'electiveCourseScore',
          label: '选修课学分',
          width: 120,
        },
        {
          prop: 'professionalScore',
          label: '专业回馈积分',
          width: 120,
        },
        {
          prop: 'offlineScore',
          label: '线下评审得分',
          width: 120,
        },
        {
          prop: 'createdAt',
          label: '申请日期',
          width: 120,
        },
      ],
      tableData: [
      ],
      pageInfo: {
        pageNo: 1,
        pageSize: 10,
        totalCount: 2,
      },
      searchData: {
        pageNo: 1,
        pageSize: 10,
        totalCount: 0,
        condition:{},
      },
      loading: false,
      cellStyle: {
        'text-align': 'center',
      },
      statusList: [],
    };
  },
  methods: {
    getData(){
      let param = this.searchData;
      param.orgCode = JSON.parse(localStorage.getItem('userdata')).orgCode
      getDeclaredQualificationList(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;
    },
    // 缩放查询条件
    toggle() {
      this.isToggle = !this.isToggle;
    },
    // 查询
    search() {
      this.loading = true;
      this.searchData.pageNo = 1;
      this.getData()
    },
    // 清空
    clear() {
      this.searchData.positionName = '';
      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();
    },
    // 格式化日期
    dateFormatter(time){
      if(!time) return ''
      return  /\d{4}-\d{1,2}-\d{1,2}/g.exec(time)[0]
    },
    // 状态转换
    statusFormatter(code) {
      return this.statusList.find(item => item.value == code).label;
    },
    // 获取状态
    getStatusList() {
      getDictionary({"type":"application_status"}).then(res => {
        let { code, msg, data } = res;
        if (res.code == 200) {
          data.forEach(item => {
            this.statusList.push({value: item.code, label: item.value});
          })
        }
      })
    },
    // 排序
    tableSort(val) {
      console.log(val);
    },
    // 获取任职序列列表
    getQualificationSequenceList(){
      getQualificationSequenceList({orgCode:this.orgCode}).then(res => {
        console.log(res);
        if (res.code == 200) {
          let sequence = [];
          this.qualificationInfo.sequenceBase = res.data;
          res.data.forEach(item => {
            sequence.push(item.positionName);
          })
          //去重
          sequence = Array.from(new Set(sequence));
          sequence.forEach(item => {
            this.qualificationInfo.sequence.push({code:item,name:item})
          })
        }
      });
    },
    changeSequence(val) {
      //清空
      this.qualificationInfo.level = []
      this.level = ''
      let levelList = this.qualificationInfo.sequenceBase.filter(item => item.positionName === val)
      levelList.forEach(item => {
        this.qualificationInfo.level.push({code:item.qualificationLevel,name:item.qualificationLevel})
      })
    },
    clearSequence() {
      this.qualificationInfo.level = []
    },
  },
  created() {
    this.getStatusList();
    this.getQualificationSequenceList()
    this.getData();
  }
};
</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; /* 防止圆角处内容溢出 */
}

.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-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>
